5. Streamlit으로 DocumentGPT 앱 만들기

🎯 이 챕터에서 배울 것

• Streamlit의 기본 사용법과 다양한 UI 컴포넌트(위젯) 활용법
• 다중 페이지 Streamlit 애플리케이션을 구성하는 방법
• 파일 업로드, 채팅 인터페이스 등 실제 웹 애플리케이션의 핵심 기능 구현하기
• RAG 파이프라인(Load, Split, Embed, Store, Retrieve)을 Streamlit 앱에 통합하는 방법
• 대화 기록을 st.session_state로 관리하는 방법
• LLM의 답변을 실시간으로 스트리밍하여 사용자 경험을 향상시키는 방법

---

Streamlit 기초

🎯 이번 단계에서 배울 것

• streamlit run 명령어로 앱을 실행하는 방법
• st.title, st.selectbox, st.text_input, st.slider 등 기본 위젯 사용법
• 위젯의 입력값에 따라 앱의 동작을 동적으로 변경하는 방법

📝 1단계: Streamlit 위젯 사용해보기

전체 코드 (Home.py):

import streamlit as st
from datetime import datetime

today = datetime.today().strftime("%H:%M:%S")
st.title(today)

model = st.selectbox(
    "Choose your model",
    ("GPT-3", "GPT-4"),
)

if model == "GPT-3":
    st.write("cheap")
else:
    st.write("not cheap")
    name = st.text_input("What is your name?")
    st.write(name)

    value = st.slider(
        "temperature",
        min_value=0.1,
        max_value=1.0,
    )
    st.write(value)

🔍 코드 상세 설명

1. Streamlit이란?
Streamlit은 데이터 과학자와 머신러닝 엔지니어를 위해 만들어진 Python 웹 프레임워크입니다. 복잡한 HTML/CSS/JavaScript 없이 Python 코드만으로 인터랙티브한 웹 애플리케이션을 매우 빠르고 쉽게 만들 수 있습니다.

• 실행 방법: 터미널에서 streamlit run <파일명>.py을 실행합니다.
• 동작 원리: 스크립트가 위에서 아래로 실행되며, st.으로 시작하는 함수들은 웹 페이지에 해당 UI 요소를 렌더링합니다. 사용자가 위젯과 상호작용(예: 버튼 클릭, 텍스트 입력)하면 스크립트 전체가 다시 실행되어 화면이 업데이트됩니다.

2. 기본 위젯

• st.title(): 큰 제목을 표시합니다.
• st.selectbox(): 드롭다운 메뉴를 만듭니다. 선택된 값은 변수에 저장됩니다.
• st.text_input(): 사용자로부터 텍스트를 입력받는 상자를 만듭니다.
• st.slider(): 슬라이더를 만들어 숫자 범위를 선택하게 합니다.

✅ 체크리스트

• streamlit 라이브러리를 설치했나요?
• streamlit run Home.py로 앱을 실행했나요?
• st.selectbox를 사용하여 모델을 선택하고, 선택에 따라 다른 위젯이 나타나는 것을 확인했나요?

---

다중 페이지 앱 (Multi-Page Apps)

🎯 이번 단계에서 배울 것

• pages 디렉토리를 사용하여 여러 페이지를 가진 Streamlit 앱을 구성하는 방법
• st.set_page_config로 페이지의 제목과 아이콘을 설정하는 방법

📝 1단계: pages 디렉토리 활용하기

전체 코드 (Home.py):

import streamlit as st

st.set_page_config(
    page_title="FullstackGPT Home",
    page_icon="🤖",
)

st.markdown(
    """
# Hello!
Welcome to my FullstackGPT Portfolio!
... (링크들)
"""
)

전체 코드 (pages/01_DocumentGPT.py):

import streamlit as st

st.title("DocumentGPT")

🔍 코드 상세 설명

1. 다중 페이지 앱 구조
Streamlit은 매우 간단한 방식으로 다중 페이지 앱을 지원합니다. 메인 파일(예: Home.py)이 있는 디렉토리 안에 pages라는 이름의 디렉토리를 만들고, 그 안에 다른 Python 파일을 넣기만 하면 됩니다. Streamlit이 자동으로 pages 디렉토리를 감지하여 사이드바에 각 페이지로 이동할 수 있는 네비게이션 메뉴를 만들어줍니다.

• 파일 순서: 파일명 앞의 숫자에 따라 메뉴의 순서가 결정됩니다. (예: 01_..., 02_...)

2. st.set_page_config()

• 각 페이지의 브라우저 탭 제목, 파비콘(아이콘), 레이아웃 등을 설정하는 함수입니다.
• 스크립트에서 가장 먼저 호출되어야 하는 함수 중 하나입니다.

✅ 체크리스트

• pages 디렉토리를 만들고 그 안에 .py 파일을 추가했나요?
• 앱을 실행했을 때 사이드바에 페이지 네비게이션이 자동으로 생성되었나요?
• st.set_page_config를 사용하여 각 페이지의 제목과 아이콘을 설정했나요?

---

채팅 기능과 대화 기록

🎯 이번 단계에서 배울 것

• st.chat_input과 st.chat_message를 사용하여 채팅 UI를 구현하는 방법
• st.session_state를 사용하여 대화 기록을 저장하고 유지하는 방법

📝 1단계: 채팅 UI 및 상태 관리

전체 코드 (pages/01_DocumentGPT.py):

import streamlit as st

st.title("DocumentGPT")

# 1. 세션 상태에 대화 기록 초기화
if "messages" not in st.session_state:
    st.session_state["messages"] = []

# 2. 메시지 전송 및 저장 함수
def send_message(message, role, save=True):
    with st.chat_message(role):
        st.markdown(message)
    if save:
        st.session_state["messages"].append({"message": message, "role": role})

# 3. 이전 대화 기록 표시
def paint_history():
    for message in st.session_state["messages"]:
        send_message(message["message"], message["role"], save=False)

paint_history()

# 4. 사용자 입력 받기
message = st.chat_input("Ask anything about your file...")
if message:
    send_message(message, "human")
    # ... (AI 응답 로직)

🔍 코드 상세 설명

1. st.session_state
Streamlit은 사용자가 상호작용할 때마다 스크립트 전체를 재실행합니다. 이 때 일반 변수에 저장된 값은 사라집니다. st.session_state는 사용자의 세션 동안 데이터를 유지시켜주는 딕셔너리 같은 객체입니다. 챗봇의 대화 기록처럼 여러 재실행 과정에서 유지되어야 하는 값을 저장하는 데 필수적입니다.

2. 채팅 UI

• st.chat_input(): 화면 하단에 고정된 채팅 입력창을 만듭니다. 사용자가 메시지를 입력하고 엔터를 치면 그 메시지 내용을 반환합니다.
• st.chat_message(role): with 구문과 함께 사용하여 특정 역할(human 또는 ai)에 맞는 프로필 아이콘과 배경색으로 채팅 버블을 만듭니다.

동작 흐름:

1. 앱이 처음 실행되면 st.session_state["messages"]가 빈 리스트로 초기화됩니다.
2. paint_history()가 호출되지만, 아직 메시지가 없으므로 아무것도 표시되지 않습니다.
3. 사용자가 st.chat_input에 메시지를 입력합니다.
4. 스크립트가 재실행되고, message 변수에 사용자 입력이 담깁니다.
5. send_message(message, "human")가 호출되어 사용자 메시지를 화면에 표시하고 st.session_state에 저장합니다.
6. (AI 응답 로직 실행 후) send_message(response, "ai")가 호출되어 AI의 답변을 화면에 표시하고 st.session_state에 저장합니다.
7. 다음 재실행 시, paint_history()는 st.session_state에 저장된 모든 메시지를 화면에 그려줍니다.

✅ 체크리스트

• st.session_state를 사용하여 messages 리스트를 초기화했나요?
• st.chat_input으로 사용자 입력을 받고, st.chat_message로 화면에 표시했나요?
• 사용자와 AI의 메시지를 st.session_state에 저장하고, 앱이 재실행될 때마다 paint_history 함수로 복원했나요?

---

RAG 파이프라인과 스트리밍

🎯 이번 단계에서 배울 것

• st.file_uploader로 파일을 업로드하고, @st.cache_data로 RAG 파이프라인의 비싼 연산(임베딩)을 캐싱하는 방법
• LCEL로 RAG 체인을 구성하고 Streamlit 앱과 연동하는 방법
• BaseCallbackHandler를 사용하여 LLM의 답변을 실시간으로 스트리밍하는 방법

📝 1단계: 파일 업로드 및 RAG 체인 연동

전체 코드 (pages/01_DocumentGPT.py):

# ... (imports)

# 1. 스트리밍을 위한 콜백 핸들러
class ChatCallbackHandler(BaseCallbackHandler):
    message = ""
    def on_llm_start(self, *args, **kwargs):
        self.message_box = st.empty() # 답변이 표시될 빈 공간 생성
    def on_llm_end(self, *args, **kwargs):
        save_message(self.message, "ai") # 스트리밍 끝나면 전체 메시지 저장
    def on_llm_new_token(self, token, *args, **kwargs):
        self.message += token
        self.message_box.markdown(self.message) # 새 토큰이 올 때마다 화면 업데이트

llm = ChatOpenAI(temperature=0.1, streaming=True, callbacks=[ChatCallbackHandler()])

# 2. 파일 임베딩 함수 (캐싱 적용)
@st.cache_data(show_spinner="Embedding file...")
def embed_file(file):
    # ... (파일 저장, 분할, 임베딩, 벡터스토어 생성 로직)
    return retriever

# ... (UI 및 체인 구성)
with st.sidebar:
    file = st.file_uploader("Upload a file", type=["pdf", "txt", "docx"])

if file:
    retriever = embed_file(file)
    # ... (채팅 로직)
    if message:
        chain = ({ "context": retriever | RunnableLambda(format_docs), "question": RunnablePassthrough() } | prompt | llm)
        with st.chat_message("ai"):
            chain.invoke(message) # 스트리밍 시작

🔍 코드 상세 설명

1. @st.cache_data
이 데코레이터는 함수의 실행 결과를 캐싱합니다. 동일한 입력으로 함수가 다시 호출되면, 함수를 재실행하는 대신 캐시된 결과를 즉시 반환합니다. 파일 임베딩처럼 비용과 시간이 많이 드는 계산에 사용하여 앱 성능을 크게 향상시킬 수 있습니다.

2. st.file_uploader
사용자가 파일을 업로드할 수 있는 위젯을 생성합니다. 업로드된 파일은 메모리 상에서 파일 객체로 처리됩니다.

3. 스트리밍 구현

• ChatCallbackHandler: LangChain의 콜백 시스템을 활용하여 LLM의 응답 생성 과정에 개입합니다. on_llm_new_token 이벤트는 모델이 새 토큰(단어)을 생성할 때마다 트리거됩니다.
• st.empty(): 나중에 콘텐츠를 채울 수 있는 빈 컨테이너를 만듭니다. 콜백 핸들러는 이 message_box에 계속해서 새로운 토큰을 추가하여 스트리밍 효과를 구현합니다.
• chain.invoke(message): llm을 streaming=True로 설정했기 때문에, invoke를 호출하면 응답이 완료될 때까지 기다리는 대신 스트리밍이 시작됩니다. 콜백 핸들러가 나머지 작업을 처리합니다.

✅ 체크리스트

• st.file_uploader를 사이드바에 추가하여 파일 업로드 기능을 구현했나요?
• @st.cache_data를 embed_file 함수에 적용하여 임베딩 과정을 캐싱했나요?
• BaseCallbackHandler를 상속받아 스트리밍 콜백을 만들고, on_llm_new_token에서 st.empty() 위젯을 업데이트했나요?
• ChatOpenAI 모델을 streaming=True와 callbacks와 함께 초기화했나요?

---

출처 : https://nomadcoders.co/fullstack-gpt