Mengintegrasikan Generatif AI dengan Aplikasi MERN

pengenalan

AI Generatif (Gen AI) telah menjadi asas inovasi dalam pembangunan aplikasi moden. Dengan memanfaatkan model seperti GPT (Generative Pre-trained Transformer), pembangun boleh membina aplikasi yang mampu menjana teks seperti manusia, mencipta imej, meringkaskan kandungan dan banyak lagi. Mengintegrasikan AI Generatif dengan aplikasi tindanan MERN (MongoDB, Express, React, Node.js) boleh meningkatkan pengalaman pengguna dengan menambahkan automasi pintar, antara muka perbualan atau keupayaan penjanaan kandungan kreatif. Blog ini akan membimbing anda melalui proses penyepaduan Gen AI dengan aplikasi MERN, memfokuskan pada pelaksanaan praktikal.

---

Gunakan Kes Generatif AI dalam Aplikasi MERN

1. Chatbots dan Pembantu Maya: Bina antara muka perbualan untuk sokongan pelanggan atau bantuan diperibadikan.
2. Penjanaan Kandungan: Automatikkan penciptaan artikel, penerangan produk atau coretan kod.
3. Ringkasan: Ringkaskan blok besar teks, seperti kertas penyelidikan atau transkrip mesyuarat.
4. Sistem Pengesyoran: Berikan cadangan diperibadikan berdasarkan input pengguna atau data sejarah.
5. Penjanaan Imej: Cipta visual atau reka bentuk tersuai untuk pengguna dengan segera.
6. Cadangan Kod: Bantu pembangun dalam menjana atau mengoptimumkan coretan kod.

---

Prasyarat

Sebelum menyepadukan Generative AI ke dalam aplikasi MERN anda, pastikan anda mempunyai:

1. Aplikasi MERN: Aplikasi tindanan MERN berfungsi untuk dibina.
2. Akses kepada Generative AI API: Pilihan popular termasuk:
   • API OpenAI: Untuk model GPT.
   • API Muka Berpeluk: Untuk pelbagai model NLP.
   • API Cohere: Untuk penjanaan teks dan tugasan ringkasan.
   • AI Kestabilan: Untuk penjanaan imej.
3. Kunci API: Dapatkan kunci API daripada pembekal Gen AI yang dipilih.
4. Pengetahuan Asas API REST: Fahami cara membuat permintaan HTTP menggunakan perpustakaan seperti axios atau fetch.

---

Panduan Integrasi Langkah demi Langkah

1. Sediakan Bahagian Belakang

Halaman belakang (Node.js Express) akan bertindak sebagai jambatan antara apl MERN anda dan Generative AI API.

Pasang Pakej yang Diperlukan

npm install express dotenv axios cors

Cipta Fail Persekitaran

Simpan kunci API anda dengan selamat menggunakan fail .env:

npm install express dotenv axios cors

Tulis Kod Bahagian Belakang

Buat fail bernama server.js atau serupa dan sediakan pelayan Express:

OPENAI_API_KEY=your_openai_api_key_here

2. Sambungkan Bahagian Hadapan

Sediakan Panggilan API dalam React

Gunakan axios atau ambil untuk memanggil API bahagian belakang anda daripada bahagian hadapan React. Pasang axios jika anda belum melakukannya:

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}`);
});

Tulis Kod Frontend

Buat komponen React untuk berinteraksi dengan bahagian belakang:

npm install axios

3. Uji Kesepaduan

1. Mulakan pelayan bahagian belakang:

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. Jalankan apl React anda:

   node server.js

1. Navigasi ke apl React dalam penyemak imbas anda dan uji kefungsian Generative AI.

---

Amalan Terbaik

1. Penghadan Kadar: Lindungi API anda dengan mengehadkan bilangan permintaan bagi setiap pengguna.
2. Pengendalian Ralat: Laksanakan pengendalian ralat yang mantap pada kedua-dua bahagian belakang dan bahagian hadapan.
3. Kunci API Selamat: Gunakan pembolehubah persekitaran dan jangan sekali-kali dedahkan kunci API di bahagian hadapan.
4. Pemilihan Model: Pilih model AI yang sesuai berdasarkan kes penggunaan anda untuk mengoptimumkan prestasi dan kos.
5. Pantau Penggunaan: Semak penggunaan API secara kerap untuk memastikan kecekapan dan kekal dalam lingkungan bajet.

---

Ciri Terperinci untuk Diteroka

1. Strim Balas: Dayakan penstriman token untuk penjanaan respons masa nyata.
2. Penalaan Halus: Latih model tersuai untuk aplikasi khusus domain.
3. AI Berbilang Modal: Gabungkan keupayaan penjanaan teks dan imej dalam apl anda.
4. Caching: Cache jawapan yang kerap untuk mengurangkan kependaman dan kos API.

---

Atas ialah kandungan terperinci Mengintegrasikan Generatif AI dengan Aplikasi MERN. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!