परिचय

इस ब्लॉग पोस्ट में, हम एक सरल चैट एप्लिकेशन बनाने की प्रक्रिया के बारे में जानेंगे जो ओलामा के लामा 3 मॉडल के साथ इंटरैक्ट करता है। हम फ्रंटएंड के लिए जावास्क्रिप्ट, HTML और CSS का उपयोग करेंगे, और बैकएंड के लिए एक्सप्रेस के साथ Node.js का उपयोग करेंगे। अंत तक, आपके पास एक कार्यशील चैट एप्लिकेशन होगा जो उपयोगकर्ता को एआई मॉडल पर संदेश भेजता है और वास्तविक समय में प्रतिक्रियाएं प्रदर्शित करता है।

आवश्यक शर्तें

शुरू करने से पहले, सुनिश्चित करें कि आपकी मशीन पर निम्नलिखित इंस्टॉल है:

• Node.js
• npm (नोड पैकेज मैनेजर)

चरण 1: फ्रंटएंड की स्थापना

एचटीएमएल

सबसे पहले, Index.html नामक एक HTML फ़ाइल बनाएं जो हमारे चैट एप्लिकेशन की संरचना को परिभाषित करती है।

    
    
    
    


    

        

            

        
        
        Send
    
    

इस HTML फ़ाइल में चैट संदेशों के लिए एक कंटेनर, उपयोगकर्ता संदेशों के लिए एक इनपुट फ़ील्ड और एक भेजें बटन शामिल है।

सीएसएस

इसके बाद, चैट एप्लिकेशन को स्टाइल करने के लिए style.css नाम से एक CSS फ़ाइल बनाएं।

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
}

#chat-container {
    width: 400px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

#chat-window {
    height: 300px;
    padding: 10px;
    overflow-y: auto;
    border-bottom: 1px solid #ccc;
}

#messages {
    display: flex;
    flex-direction: column;
}

.message {
    padding: 8px;
    margin: 4px 0;
    border-radius: 4px;
}

.user-message {
    align-self: flex-end;
    background-color: #007bff;
    color: #fff;
}

.ai-message {
    align-self: flex-start;
    background-color: #e0e0e0;
    color: #000;
}

#user-input {
    width: calc(100% - 60px);
    padding: 10px;
    border: none;
    border-radius: 0;
    outline: none;
}

#send-button {
    width: 60px;
    padding: 10px;
    border: none;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
}

यह सीएसएस फ़ाइल सुनिश्चित करती है कि चैट एप्लिकेशन साफ़ और आधुनिक दिखे।

जावास्क्रिप्ट

फ्रंटएंड कार्यक्षमता को संभालने के लिए स्क्रिप्ट.जेएस नामक एक जावास्क्रिप्ट फ़ाइल बनाएं।

document.getElementById('send-button').addEventListener('click', sendMessage);
document.getElementById('user-input').addEventListener('keypress', function (e) {
    if (e.key === 'Enter') {
        sendMessage();
    }
});

function sendMessage() {
    const userInput = document.getElementById('user-input');
    const messageText = userInput.value.trim();

    if (messageText === '') return;

    displayMessage(messageText, 'user-message');
    userInput.value = '';

    // Send the message to the local AI and get the response
    getAIResponse(messageText).then(aiResponse => {
        displayMessage(aiResponse, 'ai-message');
    }).catch(error => {
        console.error('Error:', error);
        displayMessage('Sorry, something went wrong.', 'ai-message');
    });
}

function displayMessage(text, className) {
    const messageElement = document.createElement('div');
    messageElement.textContent = text;
    messageElement.className = `message ${className}`;
    document.getElementById('messages').appendChild(messageElement);
    document.getElementById('messages').scrollTop = document.getElementById('messages').scrollHeight;
}

async function getAIResponse(userMessage) {
    // Example AJAX call to a local server interacting with Ollama Llama 3
    const response = await fetch('http://localhost:5000/ollama', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ message: userMessage }),
    });

    if (!response.ok) {
        throw new Error('Network response was not ok');
    }

    const data = await response.json();
    return data.response; // Adjust this based on your server's response structure
}

यह जावास्क्रिप्ट फ़ाइल इवेंट श्रोताओं को सेंड बटन और इनपुट फ़ील्ड में जोड़ती है, उपयोगकर्ता संदेशों को बैकएंड पर भेजती है, और उपयोगकर्ता और एआई दोनों प्रतिक्रियाओं को प्रदर्शित करती है।

चरण 2: बैकएंड की स्थापना

Node.js और एक्सप्रेस

सुनिश्चित करें कि आपके पास Node.js स्थापित है। फिर, बैकएंड के लिए एक सर्वर.जेएस फ़ाइल बनाएं।

1. एक्सप्रेस स्थापित करें:
   

   npm install express body-parser
   

2. server.js फ़ाइल बनाएं:
   

   const express = require('express');
   const bodyParser = require('body-parser');
   const app = express();
   const port = 5000;
   
   app.use(bodyParser.json());
   
   app.post('/ollama', async (req, res) => {
       const userMessage = req.body.message;
   
       // Replace this with actual interaction with Ollama's Llama 3
       // This is a placeholder for demonstration purposes
       const aiResponse = await getLlama3Response(userMessage);
   
       res.json({ response: aiResponse });
   });
   
   // Placeholder function to simulate AI response
   async function getLlama3Response(userMessage) {
       // Replace this with actual API call to Ollama's Llama 3
       return `Llama 3 says: ${userMessage}`;
   }
   
   app.listen(port, () => {
       console.log(`Server running at http://localhost:${port}`);
   });
   

3. सर्वर चलाएँ:
   

   node server.js
   

इस सेटअप में, आपका Node.js सर्वर आने वाले अनुरोधों को संभालेगा, ओलामा के लामा 3 मॉडल के साथ इंटरैक्ट करेगा, और प्रतिक्रियाएं लौटाएगा।

निष्कर्ष

इन चरणों का पालन करके, आपने एक चैट एप्लिकेशन बनाया है जो ओलामा के लामा 3 मॉडल पर उपयोगकर्ता संदेश भेजता है और प्रतिक्रियाएं प्रदर्शित करता है। इस सेटअप को आपकी विशिष्ट आवश्यकताओं और लामा 3 मॉडल द्वारा दी जाने वाली सुविधाओं के आधार पर बढ़ाया और अनुकूलित किया जा सकता है।

अपने चैट एप्लिकेशन की कार्यक्षमता का पता लगाने और उसे बढ़ाने के लिए स्वतंत्र महसूस करें। हैप्पी कोडिंग!