13.3 Streamlit 기반 데모 서비스
이 절에서는 OpenAI API를 Streamlit 프레임워크로 통합하여, 사용자가 웹 브라우저에서 직접 사용할 수 있는 데모 서비스를 구축하는 과정을 자세히 다룹니다. Streamlit은 파이썬 코드 몇 줄로도 웹 대시보드나 인터랙티브한 애플리케이션을 빠르게 만들 수 있는 도구로, AI 기반 챗봇과 텍스트 생성 앱을 시각적으로 손쉽게 구현할 수 있는 장점이 있습니다.
우리는 이 장에서 Streamlit을 활용하여 다음과 같은 간단한 OpenAI 기반 데모 앱을 구현합니다:
간단한 챗봇 UI
GPT-4를 통한 응답 생성
대화형 채팅 기록 관리 (Session State)
API 키 보안 관리
추가: 사용자 입력을 기반으로 텍스트 요약/번역 등 기능 확장 가능성 소개
13.3.1 Streamlit 소개 및 설치
Streamlit은 파이썬으로 작성한 데이터를 시각적으로 표현하거나, 머신러닝 모델 결과를 시연할 수 있는 웹앱을 만들 수 있는 라이브러리입니다. 주요 특징은 다음과 같습니다:
복잡한 JS/HTML 없이 대화형 웹앱 구축
실시간 반응형 구조
매우 빠른 개발 사이클
설치를 위해 다음 명령어를 실행합니다:
pip install streamlit openai설치가 완료되면 streamlit hello로 데모 앱이 정상 실행되는지 확인할 수 있습니다.
13.3.2 Streamlit 앱의 기본 구조
Streamlit 앱은 .py 확장자를 가진 파이썬 스크립트입니다. 이 파일을 실행하면 Streamlit 서버가 로컬에서 실행되어 브라우저에서 앱이 열립니다.
기본 구조는 다음과 같습니다:
import streamlit as st
def main():
st.title("Streamlit 기반 OpenAI 데모")
user_input = st.text_input("질문을 입력하세요:")
if user_input:
st.write("입력한 질문:", user_input)
if __name__ == "__main__":
main()실행:
streamlit run your_app_name.py13.3.3 GPT와 연동하는 Chat UI 구축
이제 Streamlit에 OpenAI API를 연결하여 간단한 챗봇 인터페이스를 만들어봅니다. 다음은 ChatGPT와 연동하는 주요 코드입니다.
예제 전체 코드
import streamlit as st
import openai
import os
# API 키 입력 또는 환경 변수 사용
openai_api_key = st.secrets["OPENAI_API_KEY"] if "OPENAI_API_KEY" in st.secrets else st.text_input("OpenAI API Key", type="password")
# 기본 설정
st.set_page_config(page_title="GPT 챗봇 데모", page_icon="🤖")
st.title("💬 GPT 기반 챗봇")
st.markdown("OpenAI API를 활용한 Streamlit 기반 대화형 챗봇")
# 세션 상태를 활용하여 대화 기록 유지
if "messages" not in st.session_state:
st.session_state.messages = []
def generate_response(prompt):
"""GPT 모델을 호출하여 응답 생성"""
try:
response = openai.ChatCompletion.create(
model="gpt-4", # 또는 gpt-3.5-turbo
messages=prompt,
temperature=0.7
)
return response.choices[0].message["content"]
except Exception as e:
return f"❗ 오류 발생: {str(e)}"
if openai_api_key:
openai.api_key = openai_api_key
# 이전 메시지를 UI에 표시
for msg in st.session_state.messages:
with st.chat_message(msg["role"]):
st.markdown(msg["content"])
# 사용자 입력 받기
if prompt := st.chat_input("메시지를 입력하세요"):
# 사용자 메시지 표시
st.chat_message("user").markdown(prompt)
st.session_state.messages.append({"role": "user", "content": prompt})
# GPT 응답 생성
with st.spinner("GPT가 응답 중입니다..."):
assistant_reply = generate_response(st.session_state.messages)
# 모델 응답 표시
st.chat_message("assistant").markdown(assistant_reply)
st.session_state.messages.append({"role": "assistant", "content": assistant_reply})
else:
st.warning("먼저 OpenAI API 키를 입력하세요.")주요 구성 요소 설명
st.chat_input(): Streamlit 1.22 이상에서 제공되는 채팅 입력 UI 컴포넌트입니다.st.chat_message(role): 대화 메시지를 역할 기반으로 구분하여 시각화합니다.세션 상태(
st.session_state)를 이용해 사용자의 대화 히스토리를 저장/복원합니다.
13.3.4 Session State로 대화 히스토리 유지
Streamlit은 기본적으로 상태를 유지하지 않기 때문에, 페이지를 리프레시할 경우 이전 입력내용이 사라집니다. 우리는 st.session_state를 이용하여 다음과 같은 데이터를 지속 관리할 수 있습니다:
사용자의 입력 메시지
모델의 응답 메시지
대화 기록 (프롬프트 히스토리)
예:
if "messages" not in st.session_state:
st.session_state.messages = []
st.session_state.messages.append({"role": "user", "content": "Hello"})이 기능 덕분에 사용자는 지속적인 대화를 이어나갈 수 있고, 이전 맥락을 유지한 채 응답을 받을 수 있습니다 (GPT 모델의 대화 기반 아키텍처와 잘 어울림).
13.3.5 API Key 보안 유지 전략
Streamlit 앱에서 API Key를 안전하게 관리하는 방법은 다음과 같습니다:
Streamlit Cloud 배포 시
st.secrets사용secrets.toml파일에 등록또는 Streamlit 배포 콘솔에서 직접 입력
# .streamlit/secrets.toml OPENAI_API_KEY = "your-real-api-key"로컬 테스트 시 환경 변수 사용
export OPENAI_API_KEY=your-api-keyos.getenv("OPENAI_API_KEY")최종적으로는 사용자가 입력하는 방식 제공 (위 예제)
💡 팁: 앱 배포 시에는 반드시 API Key가 클라이언트에게 노출되지 않도록 서버 측에서만 호출하게 해야 합니다. Streamlit 앱은 기본적으로 클라이언트-서버 구조이므로
openai.ChatCompletion.create()는 서버 측이 호출합니다. 다만, 앱 코드 전체가 공개되어 있다면API Key는 코드에 절대 하드코딩해서는 안 됩니다.
13.3.6 기능 확장 아이디어
초기 챗봇 외에도 버튼, 셀렉트박스 등을 이용해 다양한 생성형 AI 데모 서비스로 발전시킬 수 있습니다.
문서 요약기
option = st.selectbox("기능 선택", ["일반 챗봇", "문서 요약"])
if option == "문서 요약":
uploaded_file = st.file_uploader("요약할 문서를 업로드하세요", type=["txt", "md"])
if uploaded_file:
text = uploaded_file.read().decode("utf-8")
result = openai.ChatCompletion.create(
model="gpt-4",
messages=[
{"role": "system", "content": "당신은 전문 요약가입니다."},
{"role": "user", "content": f"다음 문서를 요약해줘:\n\n{text}"}
],
temperature=0.5,
)
st.write(result.choices[0].message["content"])다국어 번역기
이메일 작성 도우미
코드 리뷰 보조 도구
13.3.7 배포 (옵션)
Streamlit 앱은 다음과 같은 방법으로 배포할 수 있습니다:
로컬 실행:
streamlit run app.py클라우드 배포:
Hugging Face Spaces 지원
Docker 이미지로 직접 배포 (FastAPI 등과 연계 추천)
GitHub에 업로드 후 연결하여 배포 자동화
필요한 파일 구조 예시:
my-gpt-app/
├── app.py
├── requirements.txt
└── .streamlit/
└── secrets.toml13.3.8 마무리
Streamlit은 OpenAI API를 시각적이고 사용하기 쉬운 웹 인터페이스로 빠르게 래핑할 수 있게 해 줍니다. 특히 비개발자나 기획자들과 모델을 시연하거나, 프롬프트 전략을 실험해보기에 적합한 도구입니다. 이번 절에서 만들었던 챗봇 앱은 동작 원리가 명확하고, 사용자 경험 측면에서도 훌륭한 데모가 될 수 있습니다.
다음 절에서는 Gradio나 React 기반의 클라이언트를 만들어 보다 다양한 프론트엔드 통합 방법을 탐구해보겠습니다.
Last updated