Энэхүү гарын авлагыг ашиглан өглөөний кофе уухаас илүү хурдан хиймэл оюун ухаантай чатбот бүтээгээрэй

AI-ээр ажилладаг чатботууд нь хэрэглэгчийн туршлагыг сайжруулж, хариултыг үр дүнтэй автоматжуулах боломжтой. Энэ зааварт та React , Vite болон Cohere-ийн API ашиглан чатботыг хэрхэн хурдан бүтээх талаар сурах болно, мөн Express ашиглан backend нэгтгэх боломжтой. Vite нь энгийн бөгөөд хурдны ачаар орчин үеийн JavaScript програмуудыг тохируулахад хялбар болгодог.

Энэхүү архитектур нь серверээр дамжуулан хүсэлтийг чиглүүлэх замаар эмзэг API түлхүүрүүдийг ил гаргахаас сэргийлдэг.

Та юу сурах вэ

• Vite-тэй үндсэн React төслийг бий болгож байна.
• Байгалийн хэл үүсгэхийн тулд Cohere-ийн AI платформыг ашиглах.
• Cohere-ийн API-тай харилцахын тулд Экспресс сервер үүсгэх.
• React-д хариу үйлдэл үзүүлэх чатбот интерфейсийг бий болгох.

Урьдчилсан нөхцөл

• React, JavaScript, Node.js-ийн үндсэн мэдлэг.
• Node.js таны системд суулгасан.
• Cohere бүртгэл (API түлхүүр авахын тулд энд бүртгүүлнэ үү)

Алхам 1: React төслөө тохируулна уу

1. Vite ашиглан шинэ React төсөл үүсгэх:

   
   

 npm create vite@latest ai-chatbot -- --template react cd ai-chatbot npm install

2. Хөгжлийн серверийг эхлүүлэх:

   
   

 npm run dev

3. Төслийг дуртай код засварлагч дээрээ нээнэ үү.

Алхам 2: Экспресс сервер үүсгэнэ үү

1. Нэг директорт шинэ Node.js төслийг эхлүүлэх:

    mkdir server && cd server npm init -y

2. Шаардлагатай багцуудыг суулгана уу:

    npm install express cors dotenv node-fetch

3. Төрөл module ашиглахын тулд package.json файлыг шинэчилнэ үү.

    { "name": "server", "version": "1.0.0", "description": "", "main": "index.js", "type": "module", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "cors": "^2.8.5", "dotenv": "^16.4.7", "express": "^4.21.2", "node-fetch": "^3.3.2" } }

4. server директор дотор server.js нэртэй файл үүсгээд дараах кодыг нэмнэ үү.

    import 'dotenv/config' import express from 'express'; import cors from 'cors'; import fetch from 'node-fetch'; const app = express(); const PORT = 5000; app.use(cors()); app.use(express.json()); app.post('/generate', async (req, res) => { const { prompt } = req.body; if (!prompt) { return res.status(400).json({ error: 'Prompt is required' }); } try { const response = await fetch('https://api.cohere.ai/v1/generate', { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${process.env.COHERE_API_KEY}`, }, body: JSON.stringify({ model: 'command-xlarge-nightly', prompt: `User: ${prompt}\nBot:`, max_tokens: 100, }), }); const data = await response.json(); res.json(data.generations[0].text.trim()); } catch (error) { console.error('Error calling Cohere API:', error); res.status(500).json({ error: 'Failed to generate response' }); } }); app.listen(PORT, () => { console.log(`Server running on http://localhost:${PORT}`); });

5. server директор дотор .env файл үүсгэнэ үү:

    COHERE_API_KEY=your_cohere_api_key_here

6. Серверийг эхлүүлэх:

    node server.js

   
   

   Анхаарах зүйл: .env файлаа хэзээ ч бүү хуваалц эсвэл хувилбарын удирдлагад бүү оруул. .gitignore файлдаа .env нэмнэ үү.

   
   

Алхам 3: Чатбот интерфэйсийг бүтээх

App.jsx файлыг дараах кодоор шинэчилнэ үү:

 import React, { useState } from 'react'; import './App.css'; const App = () => { const [messages, setMessages] = useState([]); const [userInput, setUserInput] = useState(''); const [loading, setLoading] = useState(false); const sendMessage = async () => { if (!userInput.trim()) return; const newMessages = [...messages, { sender: 'user', text: userInput }]; setMessages(newMessages); setUserInput(''); setLoading(true); try { const response = await fetch('http://localhost:5000/generate', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ prompt: userInput }), }); const botReply = await response.text(); setMessages([...newMessages, { sender: 'bot', text: botReply }]); } catch (error) { console.error('Error fetching bot reply:', error); setMessages([ ...newMessages, { sender: 'bot', text: 'Sorry, something went wrong.' }, ]); } finally { setLoading(false); } }; return ( <div className="chat-container"> <div className="chatbox"> {messages.map((msg, index) => ( <div key={index} className={`message ${msg.sender}`}> {msg.text} </div> ))} {loading && <div className="message bot">Typing...</div>} </div> <div className="input-container"> <input type="text" value={userInput} onChange={(e) => setUserInput(e.target.value)} placeholder="Type your message..." /> <button onClick={sendMessage}>Send</button> </div> </div> ); }; export default App;

Алхам 4: Загвар нэмэх

Чатбот интерфейсийг загварчлахын тулд App.css нэртэй файл үүсгэнэ үү:

 code.chat-container { font-family: Arial, sans-serif; max-width: 500px; margin: 20px auto; } .chatbox { border: 1px solid #ccc; padding: 10px; height: 400px; overflow-y: auto; border-radius: 5px; margin-bottom: 10px; } .message { margin: 5px 0; padding: 10px; border-radius: 5px; } .message.user { background-color: #d1e7dd; text-align: right; } .message.bot { background-color: #f8d7da; text-align: left; } .input-container { display: flex; } input { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 5px 0 0 5px; } button { padding: 10px; border: 1px solid #ccc; border-radius: 0 5px 5px 0; background-color: #007bff; color: white; cursor: pointer; }

Алхам 5: Чатботоо туршиж үзээрэй

1. React програм болон серверийг нэгэн зэрэг ажиллуул. Та хоёр терминалыг зэрэг ашиглаж эсвэл нээж болно:

• Терминал 1:

   npm run dev

• Терминал 2 ( server дотор):

   node server.js

2. React програмыг хөтөч дээрээ нээнэ үү.
3. Зурвас бичээд илгээнэ үү. Хүсэлт нь таны Express сервер рүү очих бөгөөд энэ нь Cohere-ийн API-г найдвартай дуудаж үр дүнг нь буцаана.

Хадгалах газар

Та энэ төслийн бүрэн эх кодыг GitHub дээрээс олж болно: React and Cohere бүхий AI Chatbot . Үүнийг хуулбарлаж, кодыг судалж, өөрийн хэрэгцээнд тохируулаарай!

Дүгнэлт

Та React , Vite , Cohere , Express ашиглан хиймэл оюун ухаанаар ажилладаг чатбот бүтээв. Энэ төслийг дараах шинж чанаруудаар сайжруулж болно:

• Яриа-текст болон текст-ярианы нэгдэл.
• Өгөгдлийн санд хадгалагдсан байнгын харилцан яриа.
• Tailwind гэх мэт CSS хүрээг ашиглан илүү өнгөлөг дизайн.
• Heroku, AWS, эсвэл Vercel зэрэг үйлчилгээг ашиглан серверээ байрлуул.

Туршилт хийж, аз жаргалтай кодчилол хийж эхлээрэй!