将生成式 AI 与 MERN 应用程序集成

介绍

生成式人工智能（Gen AI）已成为现代应用程序开发创新的基石。通过利用 GPT（生成式预训练变压器）等模型，开发人员可以构建能够生成类人文本、创建图像、总结内容等的应用程序。将生成式 AI 与 MERN（MongoDB、Express、React、Node.js）堆栈应用程序集成可以通过添加智能自动化、对话界面或创意内容生成功能来增强用户体验。本博客将指导您完成 Gen AI 与 MERN 应用程序集成的过程，重点关注实际实施。

---

MERN 应用中生成式 AI 的用例

1. 聊天机器人和虚拟助理：构建对话界面以提供客户支持或个性化帮助。
2. 内容生成：自动创建文章、产品描述或代码片段。
3. 摘要：总结大段文本，例如研究论文或会议记录。
4. 推荐系统：根据用户输入或历史数据提供个性化建议。
5. 图像生成：为用户即时创建自定义视觉效果或设计。
6. 代码建议：协助开发者生成或优化代码片段。

---

先决条件

在将生成式 AI 集成到您的 MERN 应用程序之前，请确保您拥有：

1. MERN 应用程序：构建的功能性 MERN 堆栈应用程序。
2. 访问生成式 AI API：热门选项包括：
   • OpenAI API：适用于 GPT 模型。
   • Hugging Face API：适用于多种NLP模型。
   • Cohere API：用于文本生成和摘要任务。
   • 稳定性人工智能：用于图像生成。
3. API 密钥：从所选 Gen AI 提供商处获取 API 密钥。
4. REST API 基础知识：了解如何使用 axios 或 fetch 等库发出 HTTP 请求。

---

分步集成指南

1. 设置后端

后端 (Node.js Express) 将充当 MERN 应用程序和生成式 AI API 之间的桥梁。

安装所需的软件包

npm install express dotenv axios cors

创建环境文件

使用 .env 文件安全地存储您的 API 密钥：

npm install express dotenv axios cors

编写后端代码

创建一个名为 server.js 或类似的文件并设置 Express 服务器：

OPENAI_API_KEY=your_openai_api_key_here

2. 连接前端

在 React 中设置 API 调用

使用 axios 或 fetch 从 React 前端调用后端 API。如果尚未安装 axios，请安装：

const express = require('express');
const axios = require('axios');
const cors = require('cors');
require('dotenv').config();

const app = express();
app.use(express.json());
app.use(cors());

const PORT = 5000;

app.post('/api/generate', async (req, res) => {
    const { prompt } = req.body;

    try {
        const response = await axios.post(
            'https://api.openai.com/v1/completions',
            {
                model: 'text-davinci-003', // Adjust model based on your use case
                prompt,
                max_tokens: 100,
            },
            {
                headers: {
                    'Content-Type': 'application/json',
                    Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
                },
            }
        );

        res.status(200).json({ result: response.data.choices[0].text });
    } catch (error) {
        console.error(error);
        res.status(500).json({ error: 'Failed to generate response' });
    }
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

编写前端代码

创建一个React组件与后端交互：

npm install axios

3. 测试集成

1. 启动后端服务器：

import React, { useState } from 'react';
import axios from 'axios';

const AIChat = () => {
    const [prompt, setPrompt] = useState('');
    const [response, setResponse] = useState('');
    const [loading, setLoading] = useState(false);

    const handleSubmit = async (e) => {
        e.preventDefault();
        setLoading(true);

        try {
            const result = await axios.post('http://localhost:5000/api/generate', { prompt });
            setResponse(result.data.result);
        } catch (error) {
            console.error('Error fetching response:', error);
            setResponse('Error generating response.');
        } finally {
            setLoading(false);
        }
    };

    return (
        <div>
            <h1 id="Generative-AI-Chat">Generative AI Chat</h1>
            <form onsubmit="{handleSubmit}">
                <textarea value="{prompt}" onchange="{(e)"> setPrompt(e.target.value)}
                    placeholder="Enter your prompt here"
                    rows="5"
                    cols="50"
                />
                <br>
                <button type="submit" disabled>
                    {loading ? 'Generating...' : 'Generate'}
                </button>
            </textarea>
</form>
            {response && (
                <div>
                    <h3 id="Response">Response:</h3>
                    <p>{response}</p>
                </div>
            )}
        </div>
    );
};

export default AIChat;

1. 运行你的 React 应用程序：

   node server.js

1. 在浏览器中导航到 React 应用程序并测试生成式 AI 功能。

---

最佳实践

1. 速率限制：通过限制每个用户的请求数量来保护您的 API。
2. 错误处理：在后端和前端实现强大的错误处理。
3. 安全 API 密钥：使用环境变量，切勿在前端公开 API 密钥。
4. 模型选择：根据您的用例选择合适的AI模型，以优化性能和成本。
5. 监控使用情况：定期检查 API 使用情况，以确保效率并保持在预算范围内。

---

值得探索的高级功能

1. 流式响应：启用令牌流以实时生成响应。
2. 微调：为特定领域的应用程序训练自定义模型。
3. 多模态人工智能：在您的应用中结合文本和图像生成功能。
4. 缓存：缓存频繁响应以减少延迟和 API 成本。

---

以上是将生成式 AI 与 MERN 应用程序集成的详细内容。更多信息请关注PHP中文网其他相关文章！