5분만에 만들어보는 Streamlit 챗봇

Recommanded Free YOUTUBE Lecture: <% selectedImage[1] %>

yundream
2024-10-01
2024-10-01
117

# Streamlit
**Streamlit** 은 데이터 애플리케이션을 빠르고 쉽게 만들 수 있도록 도와주는 오픈소스 프레임워크다. 데이터 사이언티스트, 머신 러닝 엔지니어들이 모델을 시각화 하기 위해서 널리 사용한다. 적은 노력으로 데이터 시각화가 가능해서 데이터 엔지니어링에 집중 할 수 있기 때문이다.

최근에 LLM 산업이 확산되면서, 빠르게 챗 UI를 구성하기 위한 사용도 늘어나는 추세다.

이 문서에서는 **Streamlit** 과 OpenAI Chatgpt 모델을 이용해서 **챗봇(Chat bot)** 을 구축해 볼 것이다.

# 환경
**python**
Streamlit은 Python 기반 프레임워크다. Python 3.8 이상으로 준비하자. 2024년 9월 현재 Python 최신 버전은 3.12로 이 문서는 Python 3.12 기반으로 작성했다.
```shell
$ python --version
Python 3.12.3
```

**OpenAI API Key 생성**
[https://platform.openai.com](https://platform.openai.com) 에서 OpenAI API Key를 만들어야 한다. API key는 ".env" 파일에 저장한다.
```
OPENAI_API_KEY = sk-proj-deniandig01823.......ddnDa1dndqqqn............
```

# 코드 설명
**virtualenv** 를 이용해서 python 가상 환경을 만든다.
```shell
virtualenv .streamlit
source  .streamlit/bin/activate
```
필요한 의존성을 설치한다.
```
pip install openai
pip install streamlit
pip install python-dotenv
```

코드를 뜯어보자. 
```python
from openai import OpenAI 
import streamlit as st
import random
import time
import os
from dotenv import load_dotenv

load_dotenv()

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

st.title("Simple chat")
```

OpenAI 클라이언트를 생성한다. 이때 api_key를 설정해야 하는데, load_dotenv() 함수로 .env의 데이터를 환경변수로 로드하고 os.getenv()로 환경변수 값을 읽었다.

st.title()을 이용 애플리케이션의 타이틀을 설정한다. 나중에 웹 브라우저로 확인 할 수 있다.

```python
def ask_chatgpt_stream(question):
    try:
        # OpenAI ChatCompletion 호출 (stream=True)
        response = client.chat.completions.create(
            model="gpt-3.5-turbo",
            messages=[
                {"role": "system", "content": "You are a helpful assistant."},
                {"role": "user", "content": question}
            ],
            stream=True  # 스트리밍 활성화
        )

# Streamlit 텍스트 출력을 위한 공간
        answer_container = st.empty()

full_response = ""

# 응답을 스트리밍으로 하나씩 출력
        for chunk in response:
            if chunk.choices[0].delta.content != None:
                full_response += chunk.choices[0].delta.content
                answer_container.markdown(full_response)  # 실시간으로 출력
        return full_response

except Exception as e:
        st.error(f"Error: {str(e)}")
    
    return full_response
```
chatgpt와 통신하는 핵심 함수다. chat.completions.create로 completion을 생성한다.
* model: gpt-3.5-turbo 모델을 선택
* message: 모델에 넘길 Input을 생성한다.
	* role.system: 시스템 메시지로 모델의 행동 방식을 정의하거나 대화의 맥락을 설정하는데 사용한다. 즉 모델의 페르소나를 설정한다. 예) 당신은 금융 데이터 분석을 도와주는 어시스턴트입니다.
	* role.user: 실제 사용자의 Input으로 질문이나 요청을 나타낸다. 모델이 응답해야 하는 질문이다.
	* role.assistant: 모델의 응답으로 role.user의 질문을 읽고 이에 대해 응답한다.
* stream: Stream 방식으로 출력 할지 결정한다. LLM은 현재 출력된 단어를 기반으로 다음 단어를 통계적으로 추측한다. 따라서 한 단어씩 stream 방식으로 출력하게 된다. stream이 False이면 모델의 응답이 완료되면 출력한다. stream 방식으로 해야 대화하는 느낌을 살릴 수 있다.   
* response 출력: stream 방식으로 출력 할 경우, 애플리케이션은 chunk 방식으로 메시지를 전달한다. 따라서 청크가 끝날 때까지 루프를 돌면서 메시지를 출력하면 된다.
* answer_container.markdown(full_response): 지금까지 받은 응답을 마크다운 방식으로 출력한다.

```python
# Accept user input
if prompt := st.chat_input("What is up?"):
    # Add user message to chat history
    st.session_state.messages.append({"role": "user", "content": prompt})
    # Display user message in chat message container
    with st.chat_message("user"):
        st.markdown(prompt)

# Display assistant response in chat message container
    with st.chat_message("assistant"):
        response = ask_chatgpt_stream(prompt) 
    # Add assistant response to chat history
    st.session_state.messages.append({"role": "assistant", "content": response})
```
**st.chat_input**: streamlit는 다양한 UI 컴포넌트를 제공한다. chat_input() 함수는 채팅 인터페이스처럼 입력을 받을 수 있는 컴포넌트로 사용자로부터 텍스트 메시지를 입력받는데 사용된다. 이 기능을 이용하면 대화형(채팅)애플리케이션을 쉽게 구축할 수 있다.

**사용자 입력 받기**
```python
if prompt := st.chat_input("What is up?")
```
사용자에게 "What is up?"이라는 메시지와 함께 입력 필드를 제공한다.

**사용자 메시지를 세션 상태에 추가하기**
```
`st.session_state.messages.append({"role": "user", "content": prompt})`
```
사용자가 입력한 메시지를 st.session_state.message에 저장한다. 여기에서는 사용자가(user) 입력한 입력(prompt)을 저장한다.

**사용자가 입력한 메시지를 화면에 출력**
```python
with st.chat_message("user"):
    st.markdown(prompt)
```
사용자가 입력한 메시지를 화면에 마크다운 형식으로 출력한다.

**GPT 모델의 응답 받기**
```python
with st.chat_message("assistant"):
    response = ask_chatgpt_stream(prompt)
```
챗봇 응답을 표시하기 위한 컨텍스트 블록으로 "assistant" 역할로 응답이 출력된다.

# 전체 코드
아래는 실행 가능한 전체코드다. 파일의 이름은 main.py다.
```python
from openai import OpenAI 
import streamlit as st
import random
import time
import os
from dotenv import load_dotenv

load_dotenv()

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

st.title("Simple chat")

# Initialize chat history
if "messages" not in st.session_state:
    st.session_state.messages = []

# Display chat messages from history on app rerun
for message in st.session_state.messages:
    with st.chat_message(message["role"]):
        st.markdown(message["content"])

def ask_chatgpt_stream(question):
    try:
        # OpenAI ChatCompletion 호출 (stream=True)
        response = client.chat.completions.create(
            model="gpt-3.5-turbo",
            messages=[
                {"role": "system", "content": "You are a helpful assistant."},
                {"role": "user", "content": question}
            ],
            stream=True  # 스트리밍 활성화
        )

# Streamlit 텍스트 출력을 위한 공간
        answer_container = st.empty()

full_response = ""

except Exception as e:
        st.error(f"Error: {str(e)}")
    
    return full_response

# Accept user input
if prompt := st.chat_input("What is up?"):
    # Add user message to chat history
    st.session_state.messages.append({"role": "user", "content": prompt})
    # Display user message in chat message container
    with st.chat_message("user"):
        st.markdown(prompt)

```

# 실행
streamlit 명령으로 실행 할 수 있다.
```shell
$ streamlit run main2.py
  You can now view your Streamlit app in your browser.

Local URL: http://localhost:8501
  Network URL: http://192.168.35.240:8501
```

브라우저로 테스트해보자.
![Streamlit chatbot](https://docs.google.com/drawings/d/e/2PACX-1vSi3ZbEuvA8TiasfFEXmNTNCXXidXzNue3qr7guYA9Leh8zCHInO_wItfKO2hyPwgS5pR4cUdfufUB7/pub?w=968&h=836)

Search For:

BY TAGS

Recent Posts

Archive Posts

Tags

About

Get in Touch

Categories