Chatbots ដំណើរការដោយ AI អាចបង្កើនបទពិសោធន៍អ្នកប្រើប្រាស់ និងធ្វើឱ្យការឆ្លើយតបដោយស្វ័យប្រវត្តិប្រកបដោយប្រសិទ្ធភាព។ នៅក្នុងមេរៀននេះ អ្នកនឹងរៀនពីរបៀបបង្កើត chatbot យ៉ាងរហ័សដោយប្រើ   ,   , និង   ជាមួយនឹងការរួមបញ្ចូល backend ដោយប្រើ   ។ ជាមួយនឹងភាពសាមញ្ញ និងល្បឿនរបស់វា Vite ធ្វើឱ្យវាងាយស្រួលក្នុងការរៀបចំកម្មវិធី JavaScript ទំនើប។ React Vite Cohere's API Express  ស្ថាបត្យកម្មនេះការពារការលាតត្រដាងសោ API រសើបដោយការបញ្ជូនសំណើតាមរយៈម៉ាស៊ីនមេ។  អ្វីដែលអ្នកនឹងរៀន  ការបង្កើតគម្រោង React មូលដ្ឋានជាមួយ Vite ។  ការប្រើប្រាស់វេទិកា AI របស់ Cohere សម្រាប់ការបង្កើតភាសាធម្មជាតិ។  ការបង្កើតម៉ាស៊ីនមេ Express ដើម្បីធ្វើអន្តរកម្មជាមួយ API របស់ Cohere ។  ការបង្កើតចំណុចប្រទាក់ chatbot ឆ្លើយតបនៅក្នុង React ។  តម្រូវការជាមុន  ចំណេះដឹងជាមូលដ្ឋាននៃ React, JavaScript, និង Node.js ។  Node.js បានដំឡើងនៅលើប្រព័ន្ធរបស់អ្នក។  គណនី Cohere (ចុះឈ្មោះនៅ   ដើម្បីទទួលបានលេខកូដ API) ទីនេះ  ជំហានទី 1: រៀបចំគម្រោងប្រតិកម្មរបស់អ្នក។  បង្កើតគម្រោង React ថ្មីដោយប្រើ Vite៖   npm create vite@latest ai-chatbot -- --template react cd ai-chatbot npm install  ចាប់ផ្តើមម៉ាស៊ីនមេអភិវឌ្ឍន៍៖   npm run dev  បើកគម្រោងនៅក្នុងកម្មវិធីនិពន្ធកូដដែលអ្នកចូលចិត្ត។  ជំហានទី 2: បង្កើត Express Server  ចាប់ផ្តើមគម្រោង 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: បន្ថែមរចនាប័ទ្ម  បង្កើតឯកសារដែលមានឈ្មោះថា   សម្រាប់កំណត់រចនាប័ទ្មចំណុចប្រទាក់ chatbot៖ 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: សាកល្បង Chatbot របស់អ្នក។  ដំណើរការកម្មវិធី React និងម៉ាស៊ីនមេក្នុងពេលដំណាលគ្នា។ អ្នកអាចប្រើក្នុងពេលដំណាលគ្នា ឬបើកស្ថានីយពីរ៖  ស្ថានីយទី 1៖   npm run dev  ស្ថានីយទី 2 (ខាងក្នុង   ): server   node server.js  បើកកម្មវិធី React នៅក្នុងកម្មវិធីរុករករបស់អ្នក។  វាយ​សារ​មួយ​ហើយ​ផ្ញើ​វា។ សំណើនឹងទៅកាន់ម៉ាស៊ីនមេ Express របស់អ្នក ដែលនឹងហៅទៅ API របស់ Cohere ដោយសុវត្ថិភាព ហើយផ្តល់លទ្ធផលមកវិញ។   ឃ្លាំង  អ្នកអាចស្វែងរកកូដប្រភពពេញលេញសម្រាប់គម្រោងនេះនៅលើ GitHub:   ។ រីករាយក្នុងការក្លូនវា រុករកកូដ និងប្ដូរវាតាមតម្រូវការរបស់អ្នក! AI Chatbot ជាមួយ React និង Cohere  សេចក្តីសន្និដ្ឋាន  អ្នកបានបង្កើត Chatbot ដែលដំណើរការដោយ AI ដែលមានមុខងារដោយប្រើ   ,   ,   និង   ។ គម្រោងនេះអាចត្រូវបានពង្រឹងជាមួយនឹងមុខងារដូចជា៖ 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 Chatbot លឿនជាងដំណើរការកាហ្វេពេលព្រឹករបស់អ្នកជាមួយនឹងការណែនាំនេះ។

About Author

មតិយោបល់

ព្យួរស្លាក

អត្ថបទនេះត្រូវបានបង្ហាញនៅក្នុង

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps