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 mula, 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.

       
  
 
 
 
  Send 
   

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 bahagian hadapan.

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 bahagian 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

   Salin selepas log masuk

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

   Salin selepas log masuk

3. Jalankan pelayan:
   

   node server.js

   Salin selepas log masuk

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

Kesimpulan

Dengan mengikuti 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!