[LangChain RAG 구축 시리즈 Ep.24] 🧑‍💻 Streamlit 기반 RAG 웹 UI 만들기

이 글에서는 이전 글에서 만든 FastAPI 기반 RAG 서버를 보다 직관적으로 사용할 수 있는 UI를 만들기 위해,
Python 기반의 프론트엔드 라이브러리인 Streamlit을 활용하여
🧑‍💻 질문을 입력하고 실시간으로 응답을 확인할 수 있는 웹 애플리케이션을 구현합니다.

• 사용자는 웹 브라우저에서 질문을 입력하고
• 서버는 FastAPI에 요청을 보내 RAG 응답을 받아
• Streamlit 화면에 답변과 참조 문서를 함께 출력합니다

이 글은 RAG 시스템을 사용자에게 시각적으로 보여주기 위한 첫 단추입니다.

---

🎯 목표

• Streamlit을 사용하여 질문 입력 UI 구성
• FastAPI 서버와 연동하여 응답 가져오기
• GPT 응답 및 참조 문서를 깔끔하게 시각화

---

⚙️ Step 1. Streamlit 앱 기본 구성

# streamlit_app.py

import streamlit as st                       # Streamlit UI 구성 모듈
import requests                              # FastAPI와 통신하기 위한 HTTP 클라이언트

# ✅ 페이지 기본 설정
st.set_page_config(page_title="RAG QA 시스템", layout="centered")

# ✅ 웹 앱 제목
st.title("🧠 Iceberg 기반 RAG QA 데모")

# ✅ 질문 입력창 구성
question = st.text_input("질문을 입력하세요:", "")

# ✅ 질문이 입력된 경우 실행
if question:
    with st.spinner("🔍 문서를 검색하고 GPT가 답변 중입니다..."):

        # ✅ FastAPI로 POST 요청을 전송
        response = requests.post(
            "http://localhost:8000/rag/query",    # FastAPI 서버 주소
            json={"question": question}           # 요청 본문에 질문 포함
        )

        # ✅ 응답이 성공적으로 왔을 경우
        if response.status_code == 200:
            data = response.json()

            # ✅ GPT가 생성한 답변 출력
            st.subheader("📣 GPT 응답")
            st.success(data["answer"])

            # ✅ 참조 문서 출력 (문서가 있을 경우에만)
            if data["sources"]:
                st.subheader("📎 참조 문서")
                for i, doc in enumerate(data["sources"], 1):
                    st.markdown(f"**[{i}]**\n```\n{doc}\n```")

        else:
            # ❌ 에러 응답 처리
            st.error("⚠️ FastAPI 서버에서 응답을 받지 못했습니다.")

---

▶️ 실행 방법

1️⃣ 먼저 FastAPI 서버가 실행 중인지 확인합니다:

python src/rag_server.py

2️⃣ Streamlit 앱 실행:

streamlit run streamlit_app.py

3️⃣ 브라우저에서 접속:

http://localhost:8501

---

🖥️ 예시 화면 흐름

• 입력: “상품 테이블의 컬럼은 뭐야?”
• 출력:
• 📣 GPT 응답: 상품 테이블에는 product_id, product_name, category 컬럼이 있습니다. 📎 참조 문서: [1] 📂 테이블명: products 🧾 컬럼 목록: - product_id (long) - product_name (string) - category (string)

✅ 이 구조는 향후 다양한 LLM 앱 프론트엔드의 기본 틀로 활용할 수 있습니다.

---

📎 요약 및 핵심 정리

• Streamlit을 사용해 RAG API 서버에 연결된 간단한 웹 UI를 구현했습니다.
• 사용자는 질문만 입력하면 GPT가 생성한 응답과 참조 문서를 실시간으로 확인할 수 있습니다.