Streamlit을 이용한 Chatbot 만들기

Streamlit을 이용한 Chatbot 만들기

Streamlit을 이용해서 Chatbot을 만들기 전에 Streamlit이 무엇인지 간단히 알아보고, streamlit-chat 패키지를 이용하여 간단한 Chatbot을 만들어보자.

 

streamlit 이란?

 

Streamlit은 Python으로 작성된 오픈 소스 라이브러리로, Streamlit을 이용하면 데이터 과학자와 엔지니어가 빠르고 쉽게 대화형 웹 애플리케이션을 만들 수 있습니다. 

Streamlit에서 제공하는 기능은 아래와 같습니다..

• 데이터 시각화: 다양한 데이터 시각화 도구를 제공하여 데이터를 시각적으로 표현할 수 있습니다.
• 데이터 입력: 사용자로부터 데이터를 입력받을 수 있는 양식을 제공합니다.
• 데이터 분석: 데이터를 분석하고 결과를 시각화할 수 있는 기능을 제공합니
• 모델 배포: 모델을 웹 애플리케이션으로 배포할 수 있는 기능을 제공합니다.

Streamlit에서 현재 지원하는 Python은 Python 3.8 이상입니다.
(https://docs.streamlit.io/knowledge-base/using-streamlit/sanity-checks)  

Streamlit을 사용하려면 다음 명령을 실행합니다.

$ pip install streamlit
$ streamlit run your_app.py

여기서 your_app.py는 Streamlit 애플리케이션의 Python 코드가 포함된 파일입니다.

 

Streamlit Sharing

Streamlit 프레임워크를 사용하여 만든 웹 애플리케이션을 웹에 게시하고 누구나 액세스할 수 있도록 만드는 기능으로 Github과 연동(public 레포지토리만 가능)하여 배포할 수 있습니다.

 

Streamlit 설치 (Installation)

$ pip install streamlit
$ pip install streamlit-chat

streamlit-chat 패키지는 Chatbot UI를 위한 Streamlit component로 streamlit-chat 패키지를 이용하면 실시간 대화형 web 어플리케이션을 쉽게 구현할 수 있다.

 

Streamlit-chat을 이용한 Chatbot UI 구성

streamlit-chat 패키지를 이용해서 간단하게 Chatbot 화면(my_app.py)을 작성하고, 실행해보자.

import streamlit as st
from streamlit_chat import message

message("My message")
message("Hello bot!", is_user=True)  # align's the message to the right

$ streamlit run my_app.py

 

Python 코드를 제대로 작성하고 streamlit 명령어가 정상적으로 수행되었다면 아래와 같은 실행화면을 웹 브라우저(http://localhost:8501)를 통해 확인할 수 있습니다.

streamlit-chat을 이용해 구현한 Chatbot UI

 

위와 같이 구성된 Chatbot UI를 통해 대규모 언어 모델(LLM)로 사용자의 메시지를 보내고, LLM으로부터 받은 응답을 UI에 보여주면 간단한 Chatbot을 만들 수 있습니다.

 

그럼 Chatbot을 만들기 위해 LLM으로 메시지를 전달 및 LLM으로부터 받은 응답을 UI에 보여줄 수 있는 간단한 데모를 만들어보겠습니다.

 

Chatbot (blenderbot-400M-distill)

페이스북에서 개발한 blenderbot-400M-distill 모델을 이용해서 Chatbot을 만들어보겠습니다. 여기에서 blender-400M-distill 모델을 선택한 이유는 Hugging Face를 통해 무료로 테스트해볼 수 있고, Hugging Face에서 호스팅되는 여러 모델 중 빠르게 동작 확인을 할 수 있기 때문입니다. 더 좋은 성능을 위해 LLM을 다른 모델로 변경할 수 있습니다.

 

 blenderbot-400M-distill 모델은 blenderbot-400M 모델을 기반으로 개발되었습니다. blenderbot-400M 모델은 텍스트와 코드의 400억 파라미터로 구성된 대규모 언어 모델(LLM)입니다. blenderbot-400M-distill 모델은 blenderbot-400M 모델을 작은 모델로 변환하는 압축 과정을 통해 개발되었습니다.

 

예제 코드

import streamlit as st
from streamlit_chat import message
import requests

st.header('Chatbot')

if 'generated_responses' not in st.session_state:
    st.session_state['generated_responses'] = []

if 'user_inputs' not in st.session_state:
    st.session_state['user_inputs'] = []

if 'api_url' not in st.session_state:
    st.session_state['api_url'] = ''

if 'api_token' not in st.session_state:
    st.session_state['api_token'] = ''

st.session_state['api_url'] = st.text_input('API_URL: ', st.session_state['api_url'])
st.session_state['api_token'] = st.text_input('API_TOKEN: ', st.session_state['api_token'], type='password')

def query(payload):
    data = json.dumps(payload)
    response = requests.request('POST',
            st.session_state.api_url,
            headers = {'Authorization': f'Bearer {st.session_state.api_token}'},
            data = data)
    return json.loads(response.content.decode('utf-8'))

with st.form('form', clear_on_submit = True):
    user_input = st.text_input('Message: ', '')
    submitted = st.form_submit_button('Send')

if submitted and user_input:
    output = query({
        'inputs': {
            'past_user_inputs': st.session_state.user_inputs,
            'generated_responses': st.session_state.generated_responses,
            'text': user_input,
        },
    })

    st.session_state.user_inputs.append(user_input)
    st.session_state.generated_responses.append(output['generated_text'])

if st.session_state['generated_responses']:
    for i in range(0, len(st.session_state['generated_responses']), 1):
        message(st.session_state['user_inputs'][i], is_user = True)
        message(st.session_state['generated_responses'][i])

 

위 예제는 Hugging Face에서 제공하는 예제를 참고하여 만들었고, parameter에 대한 상세 설명은 아래 페이지에 들어가시면 확인할 수 있습니다.

https://huggingface.co/docs/api-inference/detailed_parameters

Detailed parameters

 

또한 위 예제코드에서 5줄에 설정해야 하는 API_TOKEN 값은 Hugging Face Profile (웹 페이지 오른쪽 상단) >> Settings >> Access Tokens 를 통해 생성할 수 있습니다.

https://huggingface.co/

Hugging Face – The AI community building the future.

 

API_TOKEN 값을 설정하고 아래 커맨드를 통해 my_app을 실행할 수 있습니다.

$ streamlit run my_app.py

 

실행된 my_app 화면은 아래와 같습니다.

• https://api-inference.huggingface.co/models/facebook/blenderbot-400M-distill

blenderbot-400M-distill 모델을 사용한 Chatbot 화면

 

예제 코드를 Streamlit Sharing을 통해 확인해볼 수 있습니다.

https://chatbot-example.streamlit.app/

app

 

앞서 말씀드린 것처럼 LLM을 다른 모델로 변경할 수 있으니, 다른 모델들로 변경해서 모델별 응답값이 다르게 오는 것을 확인해보는 것도 좋을 것 같습니다.