இந்த வழிகாட்டி மூலம் உங்கள் காலை காபியை விட வேகமாக AI சாட்போட்டை உருவாக்குங்கள்

AI-இயங்கும் சாட்போட்கள் பயனர் அனுபவத்தை மேம்படுத்துவதோடு, பதில்களைத் திறம்பட தானியக்கமாக்கும். இந்த டுடோரியலில், Express ஐப் பயன்படுத்தி பின்தள ஒருங்கிணைப்புடன், React , Vite , மற்றும் Cohere's API ஐப் பயன்படுத்தி எப்படி விரைவாக ஒரு சாட்போட்டை உருவாக்குவது என்பதை நீங்கள் கற்றுக் கொள்வீர்கள். அதன் எளிமை மற்றும் வேகத்துடன், நவீன ஜாவாஸ்கிரிப்ட் பயன்பாடுகளை அமைப்பதை Vite எளிதாக்குகிறது.

சேவையகத்தின் மூலம் கோரிக்கைகளை ரூட்டிங் செய்வதன் மூலம் முக்கியமான API விசைகளை வெளிப்படுத்துவதை இந்தக் கட்டமைப்பு தடுக்கிறது.

நீங்கள் என்ன கற்றுக் கொள்வீர்கள்

• Vite உடன் ஒரு அடிப்படை எதிர்வினை திட்டத்தை அமைத்தல்.
• இயற்கை மொழி உருவாக்கத்திற்கு கோஹேரின் AI தளத்தைப் பயன்படுத்துதல்.
• Cohere இன் API உடன் தொடர்பு கொள்ள ஒரு எக்ஸ்பிரஸ் சேவையகத்தை உருவாக்குதல்.
• ரியாக்டில் பதிலளிக்கக்கூடிய சாட்போட் இடைமுகத்தை உருவாக்குதல்.

முன்நிபந்தனைகள்

• React, JavaScript மற்றும் Node.js பற்றிய அடிப்படை அறிவு.
• உங்கள் கணினியில் Node.js நிறுவப்பட்டுள்ளது.
• ஒரு கோஹர் கணக்கு (API விசையைப் பெற இங்கே பதிவு செய்யவும்)

படி 1: உங்கள் எதிர்வினை திட்டத்தை அமைக்கவும்

1. Vite ஐப் பயன்படுத்தி புதிய ரியாக்ட் திட்டத்தை உருவாக்கவும்:

   
   

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

2. மேம்பாட்டு சேவையகத்தைத் தொடங்கவும்:

   
   

 npm run dev

3. உங்களுக்குப் பிடித்த குறியீடு எடிட்டரில் திட்டத்தைத் திறக்கவும்.

படி 2: எக்ஸ்பிரஸ் சர்வரை உருவாக்கவும்

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: சாட்போட் இடைமுகத்தை உருவாக்கவும்

பின்வரும் குறியீட்டைக் கொண்டு 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: உங்கள் சாட்போட்டை சோதிக்கவும்

1. ரியாக்ட் பயன்பாட்டையும் சேவையகத்தையும் ஒரே நேரத்தில் இயக்கவும். நீங்கள் ஒரே நேரத்தில் பயன்படுத்தலாம் அல்லது இரண்டு டெர்மினல்களைத் திறக்கலாம்:

• முனையம் 1:

   npm run dev

• டெர்மினல் 2 ( server உள்ளே):

   node server.js

2. உங்கள் உலாவியில் எதிர்வினை பயன்பாட்டைத் திறக்கவும்.
3. ஒரு செய்தியைத் தட்டச்சு செய்து அனுப்பவும். கோரிக்கை உங்கள் எக்ஸ்பிரஸ் சேவையகத்திற்குச் செல்லும், அது பாதுகாப்பாக Cohere இன் API ஐ அழைத்து முடிவை வழங்கும்.

களஞ்சியம்

இந்த திட்டத்திற்கான முழுமையான மூலக் குறியீட்டை GitHub இல் காணலாம்: AI Chatbot with React and Cohere . அதை குளோன் செய்து, குறியீட்டை ஆராய்ந்து, உங்கள் தேவைக்கேற்ப தனிப்பயனாக்கலாம்!

முடிவுரை

ரியாக்ட் , வைட் , கோஹேர் மற்றும் எக்ஸ்பிரஸ் ஆகியவற்றைப் பயன்படுத்தி AI-இயங்கும் சாட்போட்டை நீங்கள் உருவாக்கியுள்ளீர்கள். இந்தத் திட்டத்தைப் போன்ற அம்சங்களுடன் மேம்படுத்தலாம்:

• பேச்சு-க்கு-உரை மற்றும் உரை-க்கு-பேச்சு ஒருங்கிணைப்பு.
• நிலையான உரையாடல்கள் தரவுத்தளத்தில் சேமிக்கப்படும்.
• டெயில்விண்ட் போன்ற CSS கட்டமைப்பைப் பயன்படுத்தி மிகவும் மெருகூட்டப்பட்ட வடிவமைப்பு.
• Heroku, AWS அல்லது Vercel போன்ற சேவைகளைப் பயன்படுத்தி சேவையகத்தைப் பயன்படுத்தவும்.

பரிசோதனை மற்றும் மகிழ்ச்சியான குறியீட்டைத் தொடங்குங்கள்!