צ'אטבוטים המופעלים על ידי בינה מלאכותית יכולים לשפר את חווית המשתמש ולהפוך תגובות לאוטומטיות ביעילות. במדריך זה, תלמד כיצד לבנות במהירות צ'אטבוט באמצעות   ,   ו-   עם אינטגרציה עורפית באמצעות   . עם הפשטות והמהירות שלו, Vite מקל על הגדרת יישומי JavaScript מודרניים. React Vite API של Cohere, Express  ארכיטקטורה זו מונעת חשיפת מפתחות API רגישים על ידי ניתוב בקשות דרך שרת.  מה תלמד  הגדרת פרויקט React בסיסי עם Vite.  שימוש בפלטפורמת AI של Cohere ליצירת שפה טבעית.  יצירת שרת אקספרס לאינטראקציה עם ה-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: צור את שרת האקספרס  אתחול פרויקט 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: בנה את ממשק הצ'אטבוט  עדכן את קובץ   בקוד הבא: 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 בדפדפן שלך.  הקלד הודעה ושלח אותה. הבקשה תעבור לשרת האקספרס שלך, שיתקשר בצורה מאובטחת ל-API של Cohere ויחזיר את התוצאה.   מאגר  אתה יכול למצוא את קוד המקור המלא עבור הפרויקט הזה ב-GitHub:   . אל תהסס לשכפל אותו, לחקור את הקוד ולהתאים אותו לצרכים שלך! AI Chatbot עם 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

האודיו הזה מופק בשפת המקור של הסיפור!

יותר מדי זמן; לקרוא

Make resilience your competitive advantage

בנה צ'טבוט AI מהר יותר מהקפה של הבוקר שלך עם המדריך הזה

About Author

הערות

תלו תגים

מאמר זה הוצג ב

Related Stories

100 Days of AI, Day 13: How Instruction Finetuning Improves a Pre-trained LLM

ברכות עונות מ-HackerNoon: Boost Stories עם תרגומים, דיבור לטקסט ועוד

The TechBeat: To Focus or Not Focus: How to Find the Right Product-Market Fit (3/10/2024)

The TechBeat: Python's Testing Playbook: Building Bulletproof Code (1/18/2024)

100 Days of AI, Day 13: How Instruction Finetuning Improves a Pre-trained LLM

ברכות עונות מ-HackerNoon: Boost Stories עם תרגומים, דיבור לטקסט ועוד

The TechBeat: To Focus or Not Focus: How to Find the Right Product-Market Fit (3/10/2024)

The TechBeat: Python's Testing Playbook: Building Bulletproof Code (1/18/2024)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps