[최신] 벨루가 에이전트 빌더 기능 출시

벨루가 블로그

SSE(Server-Sent Events)를 활용한 실시간 스트리밍 도입 고민

박

박진훈

2024년 4월 30일2년 전

카테고리

비어 있음

최근 웹 애플리케이션에서 실시간 기능의 중요성이 점점 더 커지고 있는 것을 체감하고 있는 중에 벨루가도 SSE(Server-Sent Events) 을 적용하여 AI 답변을 제공하면 어떨까를 고민하며 프로젝트를 진행해보고 그 경험을 공유하고자 합니다.

지금도 벨루가는 스트리밍 방식으로 AI답변을 제공하고 있지만 단순 텍스트를 스트리밍하고 있는 구조로 되어 있어 클라이언트 개발자의 부담이 크며 유지보수 또한 쉽지 않은 구조로 이루어져 있습니다. 모든 메타데이터(출처, 답변생성 프로세스등..)를 답변과 함께 텍스트로 전달 되기 때문입니다.

SSE(Server-Sent Events)란 무엇인가?

SSE(Server-Sent Events) 는 서버가 클라이언트(웹 브라우저)에 정보를 푸시하는 방식입니다. 웹에서는 보통 클라이언트가 서버에 요청(request)을 보내고 서버가 응답(response)을 반환하는 구조인데, SSE는 이와 반대로 서버에서 초기 연결 후 계속해서 데이터를 클라이언트에게 보낼 수 있게 해줍니다. 이 기술은 특히 뉴스 피드, 실시간 알림, 또는 챗봇과 같은 애플리케이션에 매우 유용합니다.

이미지 출처: Exploring SSE (Server-Sent Events): Real-Time Updates for Your Applications!

SSE의 선택 이유

WebSocket과 같은 다른 기술들도 고려했지만, SSE를 선택한 이유는 서버 설정이 간단하고, 양방향이 아닌 클라이언트와의 단방향 통신만 하면 되기 때문입니다. SSE는 HTTP를 사용하기 때문에 기존 웹 인프라와의 호환성도 뛰어나다는 장점이 있습니다.

구현 과정

API 서버

Python의 FastAPI 프레임워크를 사용하여 서버를 구축했습니다. 이 서버는 사용자로부터 질문을 받아 OpenAI의 GPT-3.5 모델에 전달하고, 생성된 응답을 실시간으로 사용자에게 스트리밍하는 역할을 합니다.

챗봇 서버 생성: FastAPI를 사용하여 웹 서버를 구축하고, CORS 설정을 통해 모든 출처에서의 접근을 허용했습니다.

import asyncio
import os

from fastapi import FastAPI
from starlette.middleware.cors import CORSMiddleware
from starlette.responses import StreamingResponse
from openai import OpenAI

app = FastAPI()

# cors
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

GPT-3.5 연동: 사용자의 입력을 받아 처리한 후, 생성된 텍스트를 실시간으로 스트리밍하기 위해 SSE를 구현했습니다.

os.environ["OPENAI_API_KEY"] = "<api-key>" # openai api 키를 발급 받아 입력

client = OpenAI(
    api_key=os.environ["OPENAI_API_KEY"],
)

def send_gpt(query: str):
    return client.chat.completions.create(
        model='gpt-3.5-turbo-0125',
        temperature=0.0,
        messages=[{"role": "user", "content": query}],
        max_tokens=1024,
        stream=True
    )

@app.get("/chat")
async def chat(query: str):
    headers = {
        "Cache-Control": "no-cache",
        "Content-Type": "text/event-stream",
        "Transfer-Encoding": "chunked"
    }
    return StreamingResponse(sse_generator(query), headers=headers)

스트리밍 로직: sse_generator 함수는 GPT 모델로부터 받은 데이터를 yield를 통해 클라이언트에 전송하고 await asyncio.sleep(0) 을 사용하여 이벤트 루프의 블로킹을 방지하고 다른 네트워크 태스크에 CPU 자원을 제공해서 클라이언트가 실시간으로 데이터를 받을 수 있도록 구현했습니다.

async def sse_generator(query: str):
    response = send_gpt(query)
    try:
        for chunk in response:
            content = chunk.choices[0].delta.content
            if content is not None:
                yield f"data: {content}\n\n"
                await asyncio.sleep(0)
            else:
                yield "data: Done\n\n"
                break
    except Exception as e:
        yield "data: Error processing your request\n\n"
        print(e)

클라이언트 서버

웹 클라이언트는 React를 사용하여 구현했습니다. React를 선택한 이유는 특별한 이유가 있다기 보다는 벨루가 클라이언트가 React로 개발되어 있기 때문입니다. React는 동적인 UI를 구축하기에 적합하며, 컴포넌트 기반의 구조 덕분에 유지보수와 코드 관리가 용이하다는 장점이 있고 무엇보다 중요한건 Server-Sent Events(SSE) 를 활용하여 서버로부터의 스트리밍 데이터를 효과적으로 처리할 수 있다는 것입니다.

코드

'use client';
import { useState, useRef } from 'react';
import styles from '../styles/Chat.module.css';

interface Message {
    id: number;
    text: string[];
    sender: 'user' | 'ai';
}

const Chat = () => {
    const [messages, setMessages] = useState<Message[]>([]);
    const [input, setInput] = useState('');
    const nextMsgId = useRef<number>(0);

    const handleSubmit = async (event: React.FormEvent) => {
        event.preventDefault();
        if (!input.trim()) return;

        const userMessage: Message = { id: nextMsgId.current++, text: [input], sender: 'user' };
        setMessages(messages => [...messages, userMessage]);

        const aiMessageId: number = nextMsgId.current++;
        setMessages(messages => [...messages, { id: aiMessageId, text: [], sender: 'ai' }]);

        const eventSource = new EventSource(`http://localhost:8000/chat?query=${encodeURIComponent(input)}`);
        eventSource.onmessage = function(event) {
            if (event.data !== "Done") {
                const newChar = event.data;
                setMessages(currentMessages =>
                    currentMessages.map(msg =>
                        msg.id === aiMessageId ? { ...msg, text: [...msg.text, newChar] } : msg
                    )
                );
            } else {
                eventSource.close();
            }
        };

        setInput(''); // 입력 필드 초기화
    };

    return (
        <div className={styles.chatWindow}>
            <div className={styles.messages}>
                {messages.map((message, index) => (
                    <div key={index} className={message.sender === 'user' ? styles.messageUser : styles.messageAI}>
                        <span>{message.text}</span>
                    </div>
                ))}
            </div>
            <form className={styles.inputArea} onSubmit={handleSubmit}>
                <input
                    type="text"
                    value={input}
                    onChange={(e) => setInput(e.target.value)}
                    placeholder="Type your message here..."
                    className={styles.input}
                />
                <button type="submit" className={styles.submitBtn}>Send</button>
            </form>
        </div>
    );
};

export default Chat;

주요 구성 요소

메시지 상태 관리

•

messages: 이 상태 배열은 채팅방에서 교환되는 모든 메시지를 저장합니다. 각 메시지는 고유 ID, 텍스트 내용, 그리고 메시지를 보낸 발신자(사용자 또는 AI)를 포함합니다.

•

useState 훅을 사용하여 메시지 배열의 상태를 관리하고, 새로운 메시지가 추가될 때마다 상태를 업데이트 합니다.

사용자 입력 처리

•

input: 사용자가 입력창에 입력하는 텍스트를 저장하는 상태입니다.

•

사용자가 텍스트를 입력할 때마다 이 상태가 업데이트되며, 메시지를 전송한 후에는 이 입력 필드를 비웁니다.

메시지 ID 관리

•

nextMsgId: 메시지마다 고유한 ID를 할당하기 위해 사용되는 useRef 훅입니다.

•

이는 컴포넌트가 리렌더링될 때마다 초기화되지 않고, 메시지를 추가할 때마다 증가하여 각 메시지가 고유한 식별자를 가질 수 있도록 구성했습니다.

서버와의 실시간 통신

•

EventSource: 서버로부터 실시간으로 메시지를 받기 위해 사용되는 Web API입니다.

•

이 객체를 통해 위에서 만든 FastAPI 서버로부터 메시지 스트림을 실시간으로 받아, 메시지 상태에 추가할 수 있습니다.

UI 구성 요소

•

채팅창을 표시하는 영역과 입력을 받는 입력박스을 추가했습니다.

•

익숙한 채팅창 스타일을 적용해서 질문과 답변을 구분할 수 있게 디자인 했습니다.

완성된 챗봇의 모습 입니다. 기획했던 대로 사용자의 입력을 API 서버로 전달하고 실시간으로 AI답변을 스트리밍하는 구조로 구현 되었습니다.

결론

AI가 제공하는 답변을 스트리밍 방식으로 받는 것과 모든 답변이 완성된 후 한번에 받는 것 사이에 실제 답변을 받는 총 시간은 차이가 없지만 사용자 경험 측면에서 보면, 스트리밍 방식이 마치 더 빠르게 응답을 받는 것 같은 느낌을 줄 수 있습니다. 따라서 사용자가 기다림을 덜 느끼게 하여 전반적인 만족도를 향상시키는 효과를 볼 수 있습니다.

특히, 사용자의 질문을 해석하고 답변을 생성하는 과정에서 프롬프트 체인 기법과 같은 동적인 처리가 필요한 챗봇을 구현할 때, 이벤트 스트리밍을 활용하면 답변 생성 과정을 사용자에게 실시간으로 보여주어서, 답변 처리 시간이 길어지는 불편함을 줄이는 데 효과적일 것입니다.

벨루가에서 기획중인 템플릿 중에 고급요약이나 모의면접등과 같은 AI 답변을 생성하는 프로세스가 복잡한 템플릿에 적용하게 된다면 사용자의 경험에서 만족도를 크게 높일 수 있을것 같습니다.

'velugadoc' 구독하기

사이트를 구독하면 새 포스트 등 최신 업데이트를 알림과 메일로 가장 먼저 받아보실 수 있습니다.
Slashpage에 가입하고 'velugadoc'을 구독하세요!