Streamlit으로 멀티턴 GPT 챗봇 만들기

Gradio 기반의 챗봇 인터페이스를 Streamlit으로 유사하게 만들어보고, OpenAI의 GPT 모델을 통해 멀티턴 대화를 지원하는 챗봇을 구현합니다.

---

준비 사항

1. 가상 환경 만들기 (선택 사항이지만 권장)

python3 -m venv .venv
source .venv/bin/activate

2. 필요한 라이브러리 설치

pip install streamlit openai python-dotenv

3. OpenAI API 키 설정

.env 파일을 루트 디렉토리에 만들고 다음을 입력하세요:

OPENAI_API_KEY=sk-xxxxxxx

.gitignore에는 .env를 꼭 추가하세요!

---

챗봇 작동 방식 요약

Streamlit을 사용해 OpenAI GPT API에 요청을 보내고, 대화 내용을 st.session_state에 저장해 멀티턴 대화를 유지합니다.

---

🛠️ 전체 코드 예시

# exercise1.py

import streamlit as st
from openai import OpenAI
import os
from dotenv import load_dotenv

# 1. 환경 변수 로딩 (.env 파일)
load_dotenv()
client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))

# 2. 시스템 메시지 정의 (GPT가 대화에 임하는 기본 태도)
SYSTEM_PROMPT = {"role": "system", "content": "당신은 친절한 AI 비서입니다."}

# 3. 타이틀 렌더링
st.title("🧠 멀티턴 GPT 채팅")

# 4. 메시지 기록 초기화 (처음 한 번만 실행됨)
if "messages" not in st.session_state:
    st.session_state.messages = [SYSTEM_PROMPT]

# 5. 사용자 입력 받기
user_input = st.chat_input("메시지를 입력하세요")

# 6. 입력이 있을 경우 GPT에게 메시지 전달하고 응답 받기
if user_input:
    st.session_state.messages.append({"role": "user", "content": user_input})

    with st.spinner("🤖 GPT 응답 중..."):
        response = client.chat.completions.create(
            model="gpt-4o",  # 또는 gpt-3.5-turbo, gpt-4
            messages=st.session_state.messages,
        )
        reply = response.choices[0].message.content
        st.session_state.messages.append({"role": "assistant", "content": reply})

# 7. 대화 내용 출력
for msg in st.session_state.messages[1:]:  # system 메시지는 제외
    with st.chat_message(msg["role"]):
        st.markdown(msg["content"])

---

실행 방법

streamlit run exercise1.py --server.port 20000

---

주요 포인트 정리

기능 설명

st.chat_input()	사용자로부터 입력 받는 컴포넌트
st.chat_message()	대화 내용을 역할별로 보여줌 (user, assistant)
st.session_state.messages	대화 이력을 저장하여 멀티턴 대화를 가능하게 함
OpenAI(api_key=...)	최신 openai 라이브러리 방식 사용 (1.x 버전 대응)

 

---

 

전체 코드 구조

import streamlit as st
from openai import OpenAI
import os
from dotenv import load_dotenv

1. 라이브러리 불러오기

코드 설명

streamlit as st	Streamlit은 웹 UI 구축용 Python 라이브러리입니다. st는 줄여 쓴 별칭입니다.
OpenAI	OpenAI의 최신 Python SDK (openai>=1.0.0)에서 사용하는 클라이언트 클래스입니다.
os	환경 변수 접근용 표준 Python 모듈입니다.
load_dotenv	.env 파일을 읽어 환경 변수로 등록하는 함수입니다. 보안 정보를 안전하게 관리할 수 있게 도와줍니다.

---

load_dotenv()
client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))

2. OpenAI API 키 설정

코드 설명

load_dotenv()	.env 파일을 로드해 os.environ에 변수 등록
OpenAI(api_key=...)	GPT API를 호출할 수 있는 클라이언트 인스턴스를 생성합니다.

.env 파일에 반드시 OPENAI_API_KEY=sk-xxxxxxx 형식으로 API 키를 넣어야 합니다.

---

SYSTEM_PROMPT = {"role": "system", "content": "당신은 친절한 AI 비서입니다."}

3. GPT의 기본 태도 설정

GPT는 "system" 메시지를 통해 역할을 지정할 수 있습니다.
여기서는 "친절한 AI 비서"로 설정했으며, 이 메시지는 대화의 흐름을 제어하는 데 중요합니다.

---

st.title("🧠 멀티턴 GPT 채팅")

4. 웹 페이지 타이틀 설정

Streamlit 상단에 표시되는 제목입니다. 이모지도 함께 사용할 수 있습니다.

---

if "messages" not in st.session_state:
    st.session_state.messages = [SYSTEM_PROMPT]

5. 세션 상태에 메시지 저장

Streamlit은 기본적으로 Stateless입니다.
st.session_state를 활용하면 페이지가 새로고침되더라도 데이터를 유지할 수 있습니다.

여기서는 messages 리스트를 만들어 대화 이력을 저장하고, 처음에는 SYSTEM_PROMPT만 포함합니다.

---

user_input = st.chat_input("메시지를 입력하세요")

6. 사용자 입력 받기

Streamlit 1.23 이상에서 지원하는 chat_input() 컴포넌트입니다.
사용자가 입력하면 그 문자열이 user_input에 저장됩니다.

---

if user_input:
    st.session_state.messages.append({"role": "user", "content": user_input})

7. 사용자 입력을 대화 히스토리에 추가

messages 리스트에 사용자의 발화를 추가합니다.

---

    with st.spinner("🤖 GPT 응답 중..."):
        response = client.chat.completions.create(
            model="gpt-4o",  # 최신 모델 (또는 gpt-3.5-turbo, gpt-4 가능)
            messages=st.session_state.messages,
        )
        reply = response.choices[0].message.content
        st.session_state.messages.append({"role": "assistant", "content": reply})

8. GPT 호출 및 응답 처리

부분 설명

with st.spinner(...)	GPT 응답이 도착할 때까지 로딩 표시
client.chat.completions.create()	OpenAI GPT API 호출 (multiturn 대화 포함)
messages=...	지금까지의 대화 기록을 넘겨줍니다
reply = ...	GPT가 생성한 메시지를 추출합니다
.append(...)	assistant 응답을 대화 기록에 추가

---

for msg in st.session_state.messages[1:]:
    with st.chat_message(msg["role"]):
        st.markdown(msg["content"])

9. 전체 대화 이력 출력

부분 설명

st.session_state.messages[1:]	첫 번째 system 메시지는 UI에 표시하지 않기 위해 제외
st.chat_message(...)	역할별로 말풍선을 만들어줍니다 (user, assistant)
st.markdown(...)	메시지 본문을 출력 (줄바꿈이나 포맷 지원)

---

전체 흐름 요약

1. 사용자가 입력하면
2. GPT에 지금까지의 대화를 포함한 요청을 보내고
3. 응답을 받고
4. 그 내용을 다시 UI에 보여주는
5. 완전한 멀티턴 챗봇 인터페이스입니다.

---

 

 

마무리

이제 여러분은 Streamlit을 통해 간단하고 직관적인 GPT 챗봇 인터페이스를 직접 만들 수 있습니다!
Gradio의 편리함은 유지하면서도 Streamlit 특유의 유연함과 배포성까지 더해보세요.