介绍

在这篇博文中，我们将介绍如何创建一个与 Ollama 的 Llama 3 模型交互的简单聊天应用程序。我们将使用 JavaScript、HTML 和 CSS 作为前端，并使用 Express Node.js作为后端。最后，您将拥有一个有效的聊天应用程序，该应用程序将用户消息发送到 AI 模型并实时显示响应。

先决条件

在开始之前，请确保您的计算机上安装了以下设备：

  • Node.js
  • npm （节点包管理器）

第 1 步：设置前端

[HTML全

首先，创建一个 HTML 文件，用于定义聊天应用程序的结构。index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat with Ollama's Llama 3</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="chat-container">
        <div id="chat-window">
            <div id="messages"></div>
        </div>
        <input type="text" id="user-input" placeholder="Type your message here...">
        <button id="send-button">Send</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

此 HTML 文件包括聊天消息的容器、用户消息的输入字段和发送按钮。

CSS的

接下来，创建一个名为“聊天应用程序”样式的 CSS 文件。styles.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的

创建一个名为“处理前端功能”的 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 文件将事件侦听器添加到发送按钮和输入字段，向后端发送用户消息，并显示用户和 AI 响应。

第 2 步：设置后端

Node.js和快递

确保您已安装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}`);
});

  1. 运行服务器：

    node server.js

在此设置中，您的Node.js服务器将处理传入的请求，与 Ollama 的 Llama 3 模型交互，并返回响应。

结论

通过执行这些步骤，您已经创建了一个聊天应用程序，该应用程序将用户消息发送到 Ollama 的 Llama 3 模型并显示响应。此设置可以根据您的特定要求和 Llama 3 型号提供的功能进行扩展和定制。

 

# javascript # html # css
Logo
https://edu.csdn.net/learn/39067/627173?utm_source=2019755004

汇聚全球AI编程工具，助力开发者即刻编程。

更多推荐

cover

GSV2231@ACP# 旗舰三屏 AI 多任务显示扩展芯片

avatar AI编程社区

深入理解Transformer：从Self-Attention到ChatGPT

通过多头注意力机制，Transformer进一步扩展了模型的表征能力，使其能够并行处理不同层次的语义信息。Transformer由编码器和解码器堆叠而成，编码器负责将输入序列转化为高维表示，解码器则基于编码器的输出生成目标序列。每一层的残差连接和层归一化技术，确保了深层网络的稳定训练，为后续大模型的发展奠定了基础。近年来，Transformer模型彻底改变了自然语言处理领域，从最初的Self-At

avatar AI编程社区

本地AI代理与离线编码：开发者社区热议Claude Code实践

本地AI代理与离线编码的探索，正为编程范式带来新变革。开发者社区的积极互动，预示着未来AI将更加贴近个人与团队需求。持续关注开源进展与硬件升级，将是把握这一趋势的关键。© 2026Winzheng.com 赢政天下| 转载请注明来源并附原文链接。

avatar AI编程社区