生成 AI と MERN アプリケーションの統合-jsチュートリアル-php.cn

生成 AI と MERN アプリケーションの統合

Barbara Streisand

リリース： 2024-12-25 15:52:15

オリジナル

575 人が閲覧しました

Integrating Generative AI with MERN Applications

導入

生成 AI (Gen AI) は、現代のアプリケーション開発におけるイノベーションの基礎となっています。 GPT (Generative Pre-trained Transformer) などのモデルを活用することで、開発者は人間のようなテキストの生成、画像の作成、コンテンツの要約などを実行できるアプリケーションを構築できます。 Generative AI を MERN (MongoDB、Express、React、Node.js) スタックアプリケーションと統合すると、インテリジェントな自動化、会話型インターフェイス、またはクリエイティブコンテンツ生成機能が追加され、ユーザーエクスペリエンスが向上します。このブログでは、実用的な実装に焦点を当てて、Gen AI を MERN アプリケーションと統合するプロセスについて説明します。

MERN アプリケーションにおける生成 AI の使用例

チャットボットと仮想アシスタント: カスタマーサポートやパーソナライズされた支援のための会話型インターフェイスを構築します。
コンテンツ生成: 記事、製品説明、またはコードスニペットの作成を自動化します。
要約: 研究論文や会議の記録など、大きなテキストのブロックを要約します。
推奨システム: ユーザー入力または履歴データに基づいてパーソナライズされた提案を提供します。
画像生成: ユーザー向けにカスタムビジュアルやデザインをその場で作成します。
コードの提案: 開発者によるコードスニペットの生成または最適化を支援します。

前提条件

Generative AI を MERN アプリケーションに統合する前に、次のことを確認してください。

MERN アプリケーション: 構築する機能的な MERN スタックアプリケーション。
Generative AI API へのアクセス: 一般的なオプションには次のものがあります。
- OpenAI API: GPT モデル用。
- Hugging Face API: さまざまな NLP モデル用。
- Cohere API: テキスト生成および要約タスク用。
- 安定性 AI: 画像生成用。
API キー: 選択した Gen AI プロバイダーから API キーを取得します。
REST API の基本知識: axios や fetch などのライブラリを使用して HTTP リクエストを作成する方法を理解します。

ステップバイステップの統合ガイド

1. バックエンドをセットアップする

バックエンド (Node.js Express) は、MERN アプリと Generative 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;

ログイン後にコピー