Membina Aplikasi Sembang dengan Ollama's Llama odel Menggunakan JavaScript, HTML dan CSS

pengenalan

Dalam catatan blog ini, kami akan melalui proses mencipta aplikasi sembang mudah yang berinteraksi dengan model Llama 3 Ollama. Kami akan menggunakan JavaScript, HTML dan CSS untuk bahagian hadapan dan Node.js dengan Express untuk bahagian belakang. Pada akhirnya, anda akan mempunyai aplikasi sembang yang berfungsi yang menghantar mesej pengguna kepada model AI dan memaparkan respons dalam masa nyata.

Prasyarat

Sebelum anda bermula, pastikan anda telah memasang yang berikut pada mesin anda:

• Node.js
• npm (Pengurus Pakej Nod)

Langkah 1: Menyediakan Frontend

HTML

Mula-mula, buat fail HTML bernama index.html yang mentakrifkan struktur aplikasi sembang kami.

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
93f0f5c25f18dab9d176bd4f6de5d30e
    1fc2df4564f5324148703df3b6ed50c1
    4f2fb0231f24e8aef524fc9bf9b9874f
    b2386ffb911b14667cb8f0f91ea547a7Chat with Ollama's Llama 36e916e0f7d1e588d4f442bf645aedb2f
    8ff51dbba29311afe190f142221611c2
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    a6d2e8f914bded8324623d78afd134b2
        3f1330c94e068d9fde0b083963ef8cd9
            243810520421e2bfba145762b4cdc5ce16b28748ea4df4d9c2150843fecfba68
        16b28748ea4df4d9c2150843fecfba68
        34efcee4e97a1acabef8bc5b42af045b
        b07b939b2e508b829dd55c356122634aSend65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68
    84cf5d7ad8199c88ca1d921cae010baf2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Fail HTML ini termasuk bekas untuk mesej sembang, medan input untuk mesej pengguna dan butang hantar.

CSS

Seterusnya, buat fail CSS bernama styles.css untuk menggayakan aplikasi sembang.

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;
}

Fail CSS ini memastikan aplikasi sembang kelihatan bersih dan moden.

JavaScript

Buat fail JavaScript bernama script.js untuk mengendalikan fungsi frontend.

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
}

Fail JavaScript ini menambahkan pendengar acara pada butang hantar dan medan input, menghantar mesej pengguna ke hujung belakang dan memaparkan kedua-dua respons pengguna dan AI.

Langkah 2: Menyediakan Bahagian Belakang

Node.js dan Express

Pastikan anda telah memasang Node.js. Kemudian, buat fail server.js untuk bahagian belakang.

1. Pasang Express:
   

   npm install express body-parser
   

2. Buat fail 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. Jalankan pelayan:
   

   node server.js
   

Dalam persediaan ini, pelayan Node.js anda akan mengendalikan permintaan masuk, berinteraksi dengan model Llama 3 Ollama dan mengembalikan respons.

Kesimpulan

Dengan mengikut langkah ini, anda telah mencipta aplikasi sembang yang menghantar mesej pengguna kepada model Llama 3 Ollama dan memaparkan respons. Persediaan ini boleh dilanjutkan dan disesuaikan berdasarkan keperluan khusus anda dan ciri yang ditawarkan oleh model Llama 3.

Jangan ragu untuk meneroka dan meningkatkan kefungsian aplikasi sembang anda. Selamat mengekod!

Atas ialah kandungan terperinci Membina Aplikasi Sembang dengan Ollama's Llama odel Menggunakan JavaScript, HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!