បង្កើត AI Chatbot លឿនជាងដំណើរការកាហ្វេពេលព្រឹករបស់អ្នកជាមួយនឹងការណែនាំនេះ។

Chatbots ដំណើរការដោយ AI អាចបង្កើនបទពិសោធន៍អ្នកប្រើប្រាស់ និងធ្វើឱ្យការឆ្លើយតបដោយស្វ័យប្រវត្តិប្រកបដោយប្រសិទ្ធភាព។ នៅក្នុងមេរៀននេះ អ្នកនឹងរៀនពីរបៀបបង្កើត chatbot យ៉ាងរហ័សដោយប្រើ React , Vite , និង Cohere's API ជាមួយនឹងការរួមបញ្ចូល backend ដោយប្រើ Express ។ ជាមួយនឹងភាពសាមញ្ញ និងល្បឿនរបស់វា Vite ធ្វើឱ្យវាងាយស្រួលក្នុងការរៀបចំកម្មវិធី JavaScript ទំនើប។

ស្ថាបត្យកម្មនេះការពារការលាតត្រដាងសោ API រសើបដោយការបញ្ជូនសំណើតាមរយៈម៉ាស៊ីនមេ។

អ្វីដែលអ្នកនឹងរៀន

• ការបង្កើតគម្រោង React មូលដ្ឋានជាមួយ Vite ។
• ការប្រើប្រាស់វេទិកា AI របស់ Cohere សម្រាប់ការបង្កើតភាសាធម្មជាតិ។
• ការបង្កើតម៉ាស៊ីនមេ Express ដើម្បីធ្វើអន្តរកម្មជាមួយ API របស់ Cohere ។
• ការបង្កើតចំណុចប្រទាក់ chatbot ឆ្លើយតបនៅក្នុង React ។

តម្រូវការជាមុន

• ចំណេះដឹងជាមូលដ្ឋាននៃ React, JavaScript, និង Node.js ។
• Node.js បានដំឡើងនៅលើប្រព័ន្ធរបស់អ្នក។
• គណនី Cohere (ចុះឈ្មោះនៅ ទីនេះ ដើម្បីទទួលបានលេខកូដ API)

ជំហានទី 1: រៀបចំគម្រោងប្រតិកម្មរបស់អ្នក។

1. បង្កើតគម្រោង React ថ្មីដោយប្រើ Vite៖

   
   

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

2. ចាប់ផ្តើមម៉ាស៊ីនមេអភិវឌ្ឍន៍៖

   
   

 npm run dev

3. បើកគម្រោងនៅក្នុងកម្មវិធីនិពន្ធកូដដែលអ្នកចូលចិត្ត។

ជំហានទី 2: បង្កើត Express Server

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 សម្រាប់កំណត់រចនាប័ទ្មចំណុចប្រទាក់ chatbot៖

 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: សាកល្បង Chatbot របស់អ្នក។

1. ដំណើរការកម្មវិធី React និងម៉ាស៊ីនមេក្នុងពេលដំណាលគ្នា។ អ្នកអាចប្រើក្នុងពេលដំណាលគ្នា ឬបើកស្ថានីយពីរ៖

• ស្ថានីយទី 1៖

   npm run dev

• ស្ថានីយទី 2 (ខាងក្នុង server ):

   node server.js

2. បើកកម្មវិធី React នៅក្នុងកម្មវិធីរុករករបស់អ្នក។
3. វាយ​សារ​មួយ​ហើយ​ផ្ញើ​វា។ សំណើនឹងទៅកាន់ម៉ាស៊ីនមេ Express របស់អ្នក ដែលនឹងហៅទៅ API របស់ Cohere ដោយសុវត្ថិភាព ហើយផ្តល់លទ្ធផលមកវិញ។

ឃ្លាំង

អ្នកអាចស្វែងរកកូដប្រភពពេញលេញសម្រាប់គម្រោងនេះនៅលើ GitHub: AI Chatbot ជាមួយ React និង Cohere ។ រីករាយក្នុងការក្លូនវា រុករកកូដ និងប្ដូរវាតាមតម្រូវការរបស់អ្នក!

សេចក្តីសន្និដ្ឋាន

អ្នកបានបង្កើត Chatbot ដែលដំណើរការដោយ AI ដែលមានមុខងារដោយប្រើ React , Vite , Cohere និង Express ។ គម្រោងនេះអាចត្រូវបានពង្រឹងជាមួយនឹងមុខងារដូចជា៖

• ការរួមបញ្ចូលការនិយាយទៅអត្ថបទ និងអត្ថបទទៅការនិយាយ។
• ការសន្ទនាជាប់លាប់ត្រូវបានរក្សាទុកក្នុងមូលដ្ឋានទិន្នន័យ។
• ការរចនាកាន់តែស្អាតដោយប្រើក្របខ័ណ្ឌ CSS ដូចជា Tailwind ។
• ដាក់ពង្រាយម៉ាស៊ីនមេដោយប្រើសេវាកម្មដូចជា Heroku, AWS ឬ Vercel ។

ចាប់ផ្តើមការពិសោធន៍ និងរីករាយក្នុងការសរសេរកូដ!