මෙම මාර්ගෝපදේශය සමඟින් ඔබේ උදෑසන කෝපි ධාවනයට වඩා වේගයෙන් AI Chatbot එකක් සාදන්න

AI බලයෙන් ක්‍රියාත්මක වන chatbots හට පරිශීලක අත්දැකීම් වැඩිදියුණු කිරීමට සහ ප්‍රතිචාර ඵලදායි ලෙස ස්වයංක්‍රීය කිරීමට හැකිය. මෙම නිබන්ධනයේදී, Express භාවිතයෙන් පසුපෙළ අනුකලනයක් සමඟ, React , Vite , සහ Cohere's API භාවිතයෙන් ඉක්මනින් chatbot එකක් ගොඩනගන්නේ කෙසේදැයි ඔබ ඉගෙන ගනු ඇත. එහි සරල බව සහ වේගය සමඟ, Vite නවීන JavaScript යෙදුම් පිහිටුවීම පහසු කරයි.

මෙම ගෘහ නිර්මාණ ශිල්පය සේවාදායකයක් හරහා ඉල්ලීම් මෙහෙයවීම මගින් සංවේදී API යතුරු හෙළිදරව් කිරීම වළක්වයි.

ඔබ ඉගෙන ගන්නා දේ

• Vite සමඟ මූලික ප්‍රතික්‍රියා ව්‍යාපෘතියක් පිහිටුවීම.
• ස්වභාවික භාෂා උත්පාදනය සඳහා Cohere ගේ AI වේදිකාව භාවිතා කිරීම.
• Cohere's API සමඟ අන්තර් ක්‍රියා කිරීමට Express සේවාදායකයක් නිර්මාණය කිරීම.
• React හි ප්‍රතිචාරාත්මක chatbot අතුරු මුහුණතක් ගොඩනැගීම.

පූර්වාවශ්යතාවයන්

• React, JavaScript සහ Node.js පිළිබඳ මූලික දැනුම.
• Node.js ඔබේ පද්ධතියේ ස්ථාපනය කර ඇත.
• Cohere ගිණුමක් (API යතුරක් ලබා ගැනීමට මෙහි ලියාපදිංචි වන්න)

පියවර 1: ඔබේ ප්‍රතික්‍රියා ව්‍යාපෘතිය සකසන්න

1. 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. දේශීය ආයාත භාවිතය සක්‍රීය කිරීම සඳහා වර්ගයේ module භාවිතා කිරීමට pack.json ගොනුව යාවත්කාලීන කරන්න:

    { "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 නාමාවලියෙහි 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}`); });

5. server නාමාවලියෙහි .env ගොනුවක් සාදන්න:

    COHERE_API_KEY=your_cohere_api_key_here

6. සේවාදායකය ආරම්භ කරන්න:

    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 පරීක්ෂා කරන්න

1. React යෙදුම සහ සේවාදායකය එකවර ධාවනය කරන්න. ඔබට සමගාමීව හෝ පර්යන්ත දෙකක් විවෘත කළ හැකිය:

• පර්යන්තය 1:

   npm run dev

• ටර්මිනල් 2 ( server ඇතුළත):

   node server.js

2. ඔබගේ බ්‍රවුසරයේ ප්‍රතික්‍රියා යෙදුම විවෘත කරන්න.
3. පණිවිඩයක් ටයිප් කර එය යවන්න. ඉල්ලීම ඔබගේ Express සේවාදායකය වෙත යයි, එය ආරක්ෂිතව Cohere's API අමතා ප්‍රතිඵලය ලබා දෙනු ඇත.

ගබඩාව

ඔබට මෙම ව්‍යාපෘතිය සඳහා සම්පූර්ණ මූලාශ්‍ර කේතය GitHub මත සොයා ගත හැක: AI Chatbot with React සහ Cohere . එය ක්ලෝන කිරීමට නිදහස් වන්න, කේතය ගවේෂණය කරන්න, සහ ඔබේ අවශ්‍යතා අනුව එය අභිරුචිකරණය කරන්න!

නිගමනය

ඔබ React , Vite , Cohere සහ Express භාවිතයෙන් ක්‍රියාකාරී AI බලයෙන් ක්‍රියා කරන chatbot එකක් ගොඩනගා ඇත. මෙම ව්‍යාපෘතිය වැනි විශේෂාංග සමඟින් වැඩිදියුණු කළ හැක:

• කථනයෙන් පෙළට සහ පෙළට කථනයට ඒකාබද්ධ කිරීම.
• ස්ථීර සංවාද දත්ත ගබඩාවක ගබඩා කර ඇත.
• Tailwind වැනි CSS රාමුවක් භාවිතයෙන් වඩාත් ඔප දැමූ නිර්මාණයක්.
• Heroku, AWS, හෝ Vercel වැනි සේවාවන් භාවිතයෙන් සේවාදායකය යොදවන්න.

අත්හදා බැලීම සහ සතුටු කේතීකරණය ආරම්භ කරන්න!