چت ربات های مجهز به هوش مصنوعی می توانند تجربه کاربر را بهبود بخشند و پاسخ ها را به طور موثر خودکار کنند. در این آموزش، نحوه ساخت سریع یک ربات چت با استفاده از   ،   و   با یک ادغام باطن با استفاده از   خواهید آموخت. Vite با سادگی و سرعت خود تنظیم برنامه های جاوا اسکریپت مدرن را آسان می کند. React Vite Cohere's API را Express  این معماری از افشای کلیدهای حساس API با مسیریابی درخواست ها از طریق سرور جلوگیری می کند.  آنچه شما یاد خواهید گرفت  راه اندازی یک پروژه اولیه React با Vite.  استفاده از پلتفرم هوش مصنوعی Cohere برای تولید زبان طبیعی.  ایجاد یک سرور Express برای تعامل با API Cohere.  ساخت یک رابط چت بات پاسخگو در React.  پیش نیازها  دانش اولیه React، JavaScript و Node.js.  Node.js روی سیستم شما نصب شده است.  یک حساب Cohere (برای دریافت کلید API   ثبت نام کنید) اینجا  مرحله 1: پروژه React خود را راه اندازی کنید  یک پروژه React جدید با استفاده از Vite ایجاد کنید:   npm create vite@latest ai-chatbot -- --template react cd ai-chatbot npm install  سرور توسعه را راه اندازی کنید:   npm run dev  پروژه را در ویرایشگر کد مورد علاقه خود باز کنید.  مرحله 2: سرور Express را ایجاد کنید  یک پروژه Node.js جدید را در همان فهرست راه اندازی کنید:   mkdir server && cd server npm init -y  بسته های مورد نیاز را نصب کنید:   npm install express cors dotenv node-fetch  فایل 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" } }  یک فایل به نام   در دایرکتوری   ایجاد کنید و کد زیر را اضافه کنید: 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}`); });  یک فایل   در دایرکتوری   ایجاد کنید: .env server   COHERE_API_KEY=your_cohere_api_key_here  سرور را راه اندازی کنید:   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: چت بات خود را تست کنید  برنامه React و سرور را به طور همزمان اجرا کنید. می توانید همزمان استفاده کنید یا دو ترمینال را باز کنید:  ترمینال 1:   npm run dev  ترمینال 2 (داخل   ): server   node server.js  برنامه React را در مرورگر خود باز کنید.  پیامی را تایپ کرده و ارسال کنید. درخواست به سرور Express شما می رود، که به طور ایمن Cohere's API را فراخوانی می کند و نتیجه را برمی گرداند.   مخزن  می توانید کد منبع کامل این پروژه را در GitHub پیدا کنید:   . با خیال راحت آن را شبیه سازی کنید، کد را کاوش کنید و آن را مطابق با نیازهای خود سفارشی کنید! ربات چت هوش مصنوعی با React و Cohere  نتیجه گیری  شما با استفاده از   ،   ،   و   یک چت ربات کاربردی با هوش مصنوعی ساخته‌اید. این پروژه را می توان با ویژگی هایی مانند: React Vite Cohere Express  ادغام گفتار به متن و متن به گفتار.  مکالمات مداوم ذخیره شده در پایگاه داده  طراحی زیباتر با استفاده از چارچوب CSS مانند Tailwind.  سرور را با استفاده از خدماتی مانند Heroku، AWS یا Vercel مستقر کنید.  شروع به آزمایش و کدنویسی خوشحال کنید!

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Read My Stories

این صوت به زبان اصلی داستان تولید شده است!

خیلی طولانی؛ خواندن

Get Free Unlimited IP Geo Data With IPinfo Lite

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

About Author

نظرات

برچسب ها را آویزان کنید

این مقاله در ارائه شده است

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps