مقدمة

في منشور المدونة هذا، سنتعرف على عملية إنشاء تطبيق دردشة بسيط يتفاعل مع نموذج Llama 3 الخاص بـ Ollama. سنستخدم JavaScript وHTML وCSS للواجهة الأمامية، وNode.js مع Express للواجهة الخلفية. في النهاية، سيكون لديك تطبيق دردشة فعال يرسل رسائل المستخدم إلى نموذج الذكاء الاصطناعي ويعرض الردود في الوقت الفعلي.

المتطلبات الأساسية

قبل البدء، تأكد من تثبيت ما يلي على جهازك:

• Node.js
• npm (مدير حزمة العقدة)

الخطوة 1: إعداد الواجهة الأمامية

لغة البرمجة

أولاً، قم بإنشاء ملف HTML باسم Index.html الذي يحدد بنية تطبيق الدردشة الخاص بنا.

    
    
    
    


    

        

            

        
        
        Send
    
    

يتضمن ملف HTML هذا حاوية لرسائل الدردشة، وحقل إدخال لرسائل المستخدم، وزر إرسال.

CSS

بعد ذلك، قم بإنشاء ملف CSS باسم style.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;
}

يضمن ملف CSS هذا أن يبدو تطبيق الدردشة نظيفًا وحديثًا.

جافا سكريبت

قم بإنشاء ملف JavaScript باسم script.js للتعامل مع وظائف الواجهة الأمامية.

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
}

يضيف ملف JavaScript هذا مستمعي الأحداث إلى زر الإرسال وحقل الإدخال، ويرسل رسائل المستخدم إلى الواجهة الخلفية، ويعرض استجابات المستخدم والذكاء الاصطناعي.

الخطوة 2: إعداد الواجهة الخلفية

Node.js و Express

تأكد من تثبيت Node.js. ثم قم بإنشاء ملف server.js للواجهة الخلفية.

1. تثبيت Express:
   

   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 مع الطلبات الواردة، ويتفاعل مع نموذج Llama 3 الخاص بـ Ollama، ويعيد الاستجابات.

خاتمة

باتباع هذه الخطوات، قمت بإنشاء تطبيق دردشة يرسل رسائل المستخدم إلى نموذج Llama 3 الخاص بـ Ollama ويعرض الردود. يمكن توسيع هذا الإعداد وتخصيصه بناءً على متطلباتك المحددة والميزات التي يقدمها نموذج Llama 3.

لا تتردد في استكشاف وتحسين وظائف تطبيق الدردشة الخاص بك. برمجة سعيدة!