AI බලයෙන් ක්‍රියාත්මක වන chatbots හට පරිශීලක අත්දැකීම් වැඩිදියුණු කිරීමට සහ ප්‍රතිචාර ඵලදායි ලෙස ස්වයංක්‍රීය කිරීමට හැකිය. මෙම නිබන්ධනයේදී,   භාවිතයෙන් පසුපෙළ අනුකලනයක් සමඟ,   ,   , සහ   භාවිතයෙන් ඉක්මනින් chatbot එකක් ගොඩනගන්නේ කෙසේදැයි ඔබ ඉගෙන ගනු ඇත. එහි සරල බව සහ වේගය සමඟ, Vite නවීන JavaScript යෙදුම් පිහිටුවීම පහසු කරයි. Express React Vite Cohere's API  මෙම ගෘහ නිර්මාණ ශිල්පය සේවාදායකයක් හරහා ඉල්ලීම් මෙහෙයවීම මගින් සංවේදී API යතුරු හෙළිදරව් කිරීම වළක්වයි.  ඔබ ඉගෙන ගන්නා දේ  Vite සමඟ මූලික ප්‍රතික්‍රියා ව්‍යාපෘතියක් පිහිටුවීම.  ස්වභාවික භාෂා උත්පාදනය සඳහා Cohere ගේ AI වේදිකාව භාවිතා කිරීම.  Cohere's API සමඟ අන්තර් ක්‍රියා කිරීමට Express සේවාදායකයක් නිර්මාණය කිරීම.  React හි ප්‍රතිචාරාත්මක chatbot අතුරු මුහුණතක් ගොඩනැගීම.  පූර්වාවශ්යතාවයන්  React, JavaScript සහ Node.js පිළිබඳ මූලික දැනුම.  Node.js ඔබේ පද්ධතියේ ස්ථාපනය කර ඇත.  Cohere ගිණුමක් (API යතුරක් ලබා ගැනීමට   ලියාපදිංචි වන්න) මෙහි  පියවර 1: ඔබේ ප්‍රතික්‍රියා ව්‍යාපෘතිය සකසන්න  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  දේශීය ආයාත භාවිතය සක්‍රීය කිරීම සඳහා වර්ගයේ   භාවිතා කිරීමට pack.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 server.js   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}`); });    නාමාවලියෙහි   ගොනුවක් සාදන්න: server .env   COHERE_API_KEY=your_cohere_api_key_here  සේවාදායකය ආරම්භ කරන්න:   node server.js    කිසිවිටෙක ඔබේ   ගොනුව බෙදා නොගන්න හෝ අනුවාද පාලනයට එය භාර නොදෙන්න. ඔබගේ   ගොනුවට   එක් කරන්න. වැදගත්: .env .gitignore .env  පියවර 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  ඔබගේ බ්‍රවුසරයේ ප්‍රතික්‍රියා යෙදුම විවෘත කරන්න.  පණිවිඩයක් ටයිප් කර එය යවන්න. ඉල්ලීම ඔබගේ Express සේවාදායකය වෙත යයි, එය ආරක්ෂිතව Cohere's API අමතා ප්‍රතිඵලය ලබා දෙනු ඇත.   ගබඩාව  ඔබට මෙම ව්‍යාපෘතිය සඳහා සම්පූර්ණ මූලාශ්‍ර කේතය GitHub මත සොයා ගත හැක:   . එය ක්ලෝන කිරීමට නිදහස් වන්න, කේතය ගවේෂණය කරන්න, සහ ඔබේ අවශ්‍යතා අනුව එය අභිරුචිකරණය කරන්න! AI Chatbot with React සහ Cohere  නිගමනය  ඔබ   ,   ,   සහ   භාවිතයෙන් ක්‍රියාකාරී AI බලයෙන් ක්‍රියා කරන chatbot එකක් ගොඩනගා ඇත. මෙම ව්‍යාපෘතිය වැනි විශේෂාංග සමඟින් වැඩිදියුණු කළ හැක: React Vite Cohere Express  කථනයෙන් පෙළට සහ පෙළට කථනයට ඒකාබද්ධ කිරීම.  ස්ථීර සංවාද දත්ත ගබඩාවක ගබඩා කර ඇත.  Tailwind වැනි CSS රාමුවක් භාවිතයෙන් වඩාත් ඔප දැමූ නිර්මාණයක්.  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

2025 Could See Tonga Become the Web3 Tech Hub of the Pacific

10 Reasons Why Publishing on HackerNoon Will Skyrocket Your Reach and Impact

AN INDIAN'S TREACHERY

Spring Into New Features: Smarter Notifications, More Writing Stats, Pixel Icon Library & More

2025 Could See Tonga Become the Web3 Tech Hub of the Pacific

10 Reasons Why Publishing on HackerNoon Will Skyrocket Your Reach and Impact

AN INDIAN'S TREACHERY

Spring Into New Features: Smarter Notifications, More Writing Stats, Pixel Icon Library & More

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps