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

소개

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

전제 조건

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

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

1단계: 프런트엔드 설정

HTML

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

자바스크립트

프런트엔드 기능을 처리하려면 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 파일을 생성합니다.

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&#s Llama odel로 채팅 애플리케이션 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!