将生成式 AI 与 MERN 应用程序集成-js教程-PHP中文网

Integrating Generative AI with MERN Applications

介绍

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

MERN 应用中生成式 AI 的用例

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

先决条件

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

MERN 应用程序：构建的功能性 MERN 堆栈应用程序。
访问生成式 AI API：热门选项包括：
- OpenAI API：适用于 GPT 模型。
- Hugging Face API：适用于多种NLP模型。
- Cohere API：用于文本生成和摘要任务。
- 稳定性人工智能：用于图像生成。
API 密钥：从所选 Gen AI 提供商处获取 API 密钥。
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. 测试集成

启动后端服务器：

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>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}>
                    {loading ? 'Generating...' : 'Generate'}
                </button>
            </form>
            {response && (
                <div>
                    <h3>Response:</h3>
                    <p>{response}</p>
                </div>
            )}
        </div>
    );
};

export default AIChat;

登录后复制