JavaScript, HTML 및 CSS를 사용하여 Ollama&#s Llama odel로 채팅 애플리케이션 구축-JS 튜토리얼-php.cn

JavaScript, HTML 및 CSS를 사용하여 Ollama&#s Llama odel로 채팅 애플리케이션 구축

WBOY

풀어 주다： 2024-07-19 15:03:09

원래의

1215명이 탐색했습니다.

Building a Chat Application with Ollama

소개

이 블로그 게시물에서는 Ollama의 Llama 3 모델과 상호 작용하는 간단한 채팅 애플리케이션을 만드는 과정을 살펴보겠습니다. 프론트엔드에는 JavaScript, HTML, CSS를 사용하고 백엔드에는 Express와 함께 Node.js를 사용합니다. 마지막에는 사용자 메시지를 AI 모델에 보내고 실시간으로 응답을 표시하는 작동하는 채팅 애플리케이션을 갖게 됩니다.

전제 조건

시작하기 전에 컴퓨터에 다음이 설치되어 있는지 확인하세요.

Node.js
npm(노드 패키지 관리자)

1단계: 프런트엔드 설정

HTML

먼저 채팅 애플리케이션의 구조를 정의하는 index.html이라는 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

다음으로 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 파일은 채팅 애플리케이션이 깔끔하고 현대적으로 보이도록 해줍니다.

자바스크립트

프런트엔드 기능을 처리하려면 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와 익스프레스

Node.js가 설치되어 있는지 확인하세요. 그런 다음 백엔드용 server.js 파일을 생성합니다.

Express 설치:
```
npm install express body-parser
```
로그인 후 복사

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

로그인 후 복사