使用 JavaScript、HTML 和 CSS 與 Ollama 的 Llama odel 建立聊天應用程式

介紹

在這篇文章中，我們將逐步介紹創建一個與 Ollama 的 Llama 3 模型互動的簡單聊天應用程式的過程。我們將使用 JavaScript、HTML 和 CSS 作為前端，並使用 Node.js 和 Express 作為後端。最後，您將擁有一個可運行的聊天應用程序，它將用戶訊息發送到 AI 模型並即時顯示回應。

先決條件

開始之前，請確保您的電腦上安裝了以下軟體：

• Node.js
• npm（節點套件管理器）

第 1 步：設定前端

超文本標記語言

首先，建立一個名為 index.html 的 HTML 文件，它定義我們的聊天應用程式的結構。

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

此 HTML 檔案包含聊天訊息的容器、使用者訊息的輸入欄位和傳送按鈕。

CSS

接下來，建立一個名為 styles.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;
}

此 CSS 檔案可確保聊天應用程式看起來乾淨且現代。

JavaScript

建立一個名為 script.js 的 JavaScript 檔案來處理前端功能。

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 檔案將事件偵聽器新增至傳送按鈕和輸入字段，將使用者訊息傳送至後端，並顯示使用者和 AI 回應。

第 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 伺服器將處理傳入請求，與 Ollama 的 Llama 3 模型交互，並回傳回應。

結論

透過執行這些步驟，您已經建立了一個聊天應用程序，該應用程式將使用者訊息傳送到 Ollama 的 Llama 3 模型並顯示回應。此設定可以根據您的特定要求和 Llama 3 模型提供的功能進行擴展和自訂。

隨意探索和增強您的聊天應用程式的功能。快樂編碼！

以上是使用 JavaScript、HTML 和 CSS 與 Ollama 的 Llama odel 建立聊天應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！