Web App.

프론트엔드 모르는 비전공자의 웹 애플리케이션 만들기 -1 (Llama 3.2 간단한 챗봇 애플리케이션)

PADO

Oct 29, 2024 • 4 min read

웹 애플리케이션을 만들어 보는 미니 프로젝트를 하기로 생각했다. 계기는 openAI에서 realtime api를 출시했기 때문이다. 한번 만들어 보면 공부가 되겠다는 생각에 프론트엔드는 하나도 모르지만 시도해 보기로 했다. 최종 목표는 openai의 realtime api를 사용해서 실시간 음성 대화 기능을 구현하는 것이다.

오늘은 처음 시도니, 간단한 챗봇 애플리케이션을 llama 3.2를 통해서 만들 예정이다. 사용자가 입력을 넣어주면, 지난 포스팅에서 구축한 llama 3.2를 구동 중인 서버와 API 통신을 하고, 대답을 출력해 준다.

우선 프론트엔드는 java script를 사용하고, 백앤드는 익숙한 python을 사용해서 개발을 할 생각이다.

real_time_web_app/
├── backend/
│   ├── app.py
│   ├── local_llama.py
│   ├── requirements.txt
└── frontend/
    ├── index.html
    ├── script.js
    ├── styles.css
    └── package.json

먼저 프로젝트 폴더를 만들고, 위와 같이 경로를 구성했다.

Backend

requirements.txt
백엔드에서 사용할 패키지를 기술.

fastapi
uvicorn
websockets
requests

app.py
FastAPI, WebSocket을 통신 수단으로 사용해 서버 구성

from fastapi import FastAPI, WebSocket
from fastapi.responses import HTMLResponse
import local_llama
import json
app = FastAPI()
llama = local_llama.Llama()

@app.get("/")
async def get():
    return HTMLResponse("<h1>Real-time web app server is running!</h1>")

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    print("WebSocket connected")
    while True:
        data = await websocket.receive_text()
        messages = [{'role': 'user', 'content': data}]
        response = llama.generate(messages)
        result = ''
        for line in response.iter_lines():
            if line:
                line = line.decode('utf-8')
                line = json.loads(line)
                mes = line['message']['content']
                result += mes
                print(line['message']['content'], end='', flush=True)

        print(f"Message from client: {data}")
        print(f"Response from server: {result}")
        response = f"Llama: {result}"
        await websocket.send_text(response)

위와 같이 단순한 초안 파일을 만들었다.

local_llama.py
이전 포스팅에서 ollama를 통해 구축한 로컬 서버에서 구동되는 Llama와 통신하기 위한 파일.

import requests
import json

class Llama():
    def __init__(self):
        print('Llama created')
        self.url = "{ip주소}:{port 번호}/api/chat"
        self.data = {
            "model": "llama3.2",
        }


    def generate(self, messages, model=None):
        if model:
            self.data["model"] = model
        self.data["messages"] = messages
        return requests.post(self.url, json=self.data)

서버를 실행해 보자.

uvicorn app:app --host 0.0.0.0 --port 8000

인터넷 브라우저에서 0.0.0.0:8000을 주소창에 타이핑하고 들어가면 아래와 같이 서버가 작동하는 모습을 볼 수 있다.

Frontend

index.html
간단히 메시지를 입력으로 타이핑하고, 전송할 수 있는 버튼을 만들었다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <title>WebSocket test</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <h1>WebSocket with Llama</h1>
    <input type="text" id="messageInput" placeholder="Type message here" />
    <button id="sendButton">send</button>
    <div id="response"></div>

    <script src="script.js"></script>
</body>
</html>

script.js
WebSocket을 통해서 백엔드와 통신할 수 있도록 만들었다.

const ws = new WebSocket('ws://localhost:8000/ws');

ws.onopen = function() {
    console.log("Server connected.");
};

ws.onmessage = function(event) {
    const response = document.getElementById('response');
    response.innerHTML += `<p>${event.data}</p>`;
};

const sendButton = document.getElementById('sendButton');
const messageInput = document.getElementById('messageInput');

sendButton.addEventListener('click', function() {
    const message = messageInput.value;
    response.innerHTML += `<p>User:${message}</p>`;
    ws.send(message);
    messageInput.value = '';
});

styles.csc
아주아주 간단한 스타일을 추가했다.

body {
    font-family: Arial, sans-serif;
}

#response p {
    background-color: #f1f1f1;
    padding: 5px;
}

이제 html을 실행해 보자. index.html 파일을 실행하면 웹 브라우저에서 내가 설정한 대로 매우 간단한 챗봇 웹앱이 실행된다.

아직 뼈대만 만들었기 때문에 부족한 기능들이 많다. 특히 api와 통신하는 부분에서 이전 대화를 저장하고 이어서 대화하는 기능이 없다. 따라서, 라마와 대화할 때 이전 대화는 다 무시되고, 매번 새로운 대화를 하게 되는 한계점이 있다.

간단히 뼈대를 구성했으니, 다음번에는 조금 더 기능을 추가해 보도록 할 예정이다.