با این راهنما یک چت ربات هوش مصنوعی سریعتر از قهوه صبح خود بسازید

چت ربات های مجهز به هوش مصنوعی می توانند تجربه کاربر را بهبود بخشند و پاسخ ها را به طور موثر خودکار کنند. در این آموزش، نحوه ساخت سریع یک ربات چت با استفاده از React ، Vite و Cohere's API را با یک ادغام باطن با استفاده از Express خواهید آموخت. Vite با سادگی و سرعت خود تنظیم برنامه های جاوا اسکریپت مدرن را آسان می کند.

این معماری از افشای کلیدهای حساس API با مسیریابی درخواست ها از طریق سرور جلوگیری می کند.

آنچه شما یاد خواهید گرفت

• راه اندازی یک پروژه اولیه React با Vite.
• استفاده از پلتفرم هوش مصنوعی Cohere برای تولید زبان طبیعی.
• ایجاد یک سرور Express برای تعامل با API Cohere.
• ساخت یک رابط چت بات پاسخگو در React.

پیش نیازها

• دانش اولیه React، JavaScript و Node.js.
• Node.js روی سیستم شما نصب شده است.
• یک حساب Cohere (برای دریافت کلید API اینجا ثبت نام کنید)

مرحله 1: پروژه React خود را راه اندازی کنید

1. یک پروژه React جدید با استفاده از Vite ایجاد کنید:

   
   

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

2. سرور توسعه را راه اندازی کنید:

   
   

 npm run dev

3. پروژه را در ویرایشگر کد مورد علاقه خود باز کنید.

مرحله 2: سرور Express را ایجاد کنید

1. یک پروژه Node.js جدید را در همان فهرست راه اندازی کنید:

    mkdir server && cd server npm init -y

2. بسته های مورد نیاز را نصب کنید:

    npm install express cors dotenv node-fetch

3. فایل package.json را برای استفاده از module نوع برای فعال کردن استفاده از واردات داخلی به روز کنید:

    { "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.js در دایرکتوری server ایجاد کنید و کد زیر را اضافه کنید:

    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. یک فایل .env در دایرکتوری server ایجاد کنید:

    COHERE_API_KEY=your_cohere_api_key_here

6. سرور را راه اندازی کنید:

    node server.js

   
   

   مهم: هرگز فایل .env خود را به اشتراک نگذارید یا آن را به کنترل نسخه متعهد نکنید. .env را به فایل .gitignore خود اضافه کنید.

   
   

مرحله 3: رابط Chatbot را بسازید

فایل 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's API را فراخوانی می کند و نتیجه را برمی گرداند.

مخزن

می توانید کد منبع کامل این پروژه را در GitHub پیدا کنید: ربات چت هوش مصنوعی با React و Cohere . با خیال راحت آن را شبیه سازی کنید، کد را کاوش کنید و آن را مطابق با نیازهای خود سفارشی کنید!

نتیجه گیری

شما با استفاده از React ، Vite ، Cohere و Express یک چت ربات کاربردی با هوش مصنوعی ساخته‌اید. این پروژه را می توان با ویژگی هایی مانند:

• ادغام گفتار به متن و متن به گفتار.
• مکالمات مداوم ذخیره شده در پایگاه داده
• طراحی زیباتر با استفاده از چارچوب CSS مانند Tailwind.
• سرور را با استفاده از خدماتی مانند Heroku، AWS یا Vercel مستقر کنید.

شروع به آزمایش و کدنویسی خوشحال کنید!