소개

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

전제 조건

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

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

1단계: 프런트엔드 설정

HTML

먼저 채팅 애플리케이션의 구조를 정의하는 index.html이라는 HTML 파일을 만듭니다.

    
    
    
    


    

        

            

        
        
        Send
    
    

이 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 모델이 제공하는 기능에 따라 확장 및 사용자 정의할 수 있습니다.

채팅 애플리케이션의 기능을 자유롭게 탐색하고 향상해 보세요. 즐거운 코딩하세요!