[Part 1] 쏘카 팀이 만든 고객 서비스 챗봇 10분 안에 만들어보기

이번 개발글은 저번 Microsoft's "Generative AI Roadshow" 토크에서 발표한 쏘카팀에게 영감을 받은 프로젝트입니다. 쏘카 팀이 고객 서비스 챗봇을 만들었다고 했는데, 만든 방법은 시나리오 기반 LLM 봇 입니다.

조금 더 자세히 쏘카 팀의 개발 디자인에 대해 살펴봅시다.

1. 먼저 유저의 텍스트 인풋에 따라 상담의 의도를 바로 LLM이 파악하기

1. RAG (Retrieval Augmented Generation), vector search를 같이 사용해서 LLM 에이전트가 상담 매뉴얼 DB에서 더욱 정확한 결과를 검색해서 뱉어내도록 하기

2. 할루시네이션이 나오면 미리 후처리해서 LLM이 답하는 것보다 인간 상담원에게 바로 연결을 할 수 있도록 디자인 하기

이번 개발 프로젝트는 두 파트로 나눴습니다.

Part 1에서는 정말 간단한 ChatGPT와 같은 형식의 캐쥬얼한 대화를 할 수 있는 봇을 만들 것입니다. 아래 사진과 같이 유저 인터페이스도 바로 만들어줄거에요.

Part 2에서는 쏘카 팀이 사용한 RAG (Retrieval Augmented Generation) 기술을 사용해서 특정 다큐멘트 (예를 들어 고객 상담 서비스 매뉴얼)에 대해 대화를 나눌 수 있는 챗봇을 만들겠습니다. 마찬가지로 아래 이미지와 같게 유저 인터페이스를 만들어줄거에요.

백엔드 코드는 Langchain docs를 참고 했고, 프론트엔드 코드는 streamlit docs를 참고했습니다.

만약 전체 코드를 받아보고 싶다면 제 Github에 공개로 올려놨으니 참고해보세요:

VSCode 프로젝트 셋업

가장 먼저 VSCode를 열어서 새로운 폴더를 만들어주고, 안에 가상환경을 만들어주세요. (python3 -m venv venv)

가상 환경을 실행시켰다면 (source venv/bin/activate) 가상 환경 안에서 필요한 패키지들을 다운받아줍니다.

pip3 install langchain openai tiktoken python-dotenv faiss-cpu streamlit

모든 패키지들을 다운받았다면 폴더 내에 .env 파일을 만들고, 그 안에 OPENAI_API_KEY = "sk-...내 openai 비밀번호" 를 저장해주세요.

이 셋업에 대해 더 자세하게 다룬 글은 여기서 확인하거나 영상을 확인해주세요!

백엔드 코드

폴더 내에 chatbot.py라는 파이선 파일을 만들어주고, 다음 코드 블록을 복붙해주세요. 코드에 대한 더 자세한 설명은 인라인에 있습니다. # 주석을 읽어주세요!

# 필요한 모듈들 불러오기 
from langchain.prompts import (
    ChatPromptTemplate,
    MessagesPlaceholder,
    SystemMessagePromptTemplate,
    HumanMessagePromptTemplate,
)
from langchain.chains import LLMChain
from langchain.memory import ConversationBufferMemory
from langchain.chat_models import ChatOpenAI

#.env 파일에 저장돼있는 OPENAI_API_KEY 불러오기
import dotenv
dotenv.load_dotenv()

# LLM 셋업하기 
llm = ChatOpenAI()

# LLM을 위한 커스텀 프롬프트 만들어주기 
prompt = ChatPromptTemplate(
    messages=[
        SystemMessagePromptTemplate.from_template(
            "You are a nice chatbot having a conversation with a human."
        ),
        # `variable_name`에 저장돼있는 건 'memory' 변수 안에 저장된것과 같아야함
        MessagesPlaceholder(variable_name="chat_history"),
        HumanMessagePromptTemplate.from_template("{question}"),
    ]
)

# memory는 대화 기록들을 저장할 수 있게 합니다. 유저가 새로운 질문을 했을때 전에 했던 대화 내용들을 바탕으로
# 대답할 수 있게 하는거에요. 
memory = ConversationBufferMemory(memory_key="chat_history", return_messages=True)
conversation = LLMChain(llm=llm, prompt=prompt, verbose=True, memory=memory)

# LLM을 실행하기 위해 conversation({"question": "hi"})를 돌립니다. 
# 유저의 인풋은 "hi"대신 다른걸로 대체해서 한번 실행해보세요! 
result = conversation({"question": "hi"})
print(result['text'])

이 블록을 복붙했다면 파일 저장을 하고 터미널에 python3 chatbot.py를 실행하면 다음과 같은 결과값이 나옵니다. 그러고 LLM의 답변도 함께 프린트가 됩니다.

이로써 백엔드 코드가 완성이 됐어요! 바로 이제 다음 단계인 프론트엔드 인터페이스를 만들어줄게요.

프론트엔드 코드

Streamlit docs를 보면 아래 이미지처럼 구현할 수 있는 코드가 마련돼있어요. 저희는 이 코드를 그대로 사용할 예정입니다.

위에서 만든 백엔드 코드를 프론트엔드 코드와 합쳐줄거에요. 방금 만들었던 코드를 삭제하고 대신 아래 코드 블록을 복붙해주세요.

from langchain.prompts import (
    ChatPromptTemplate,
    MessagesPlaceholder,
    SystemMessagePromptTemplate,
    HumanMessagePromptTemplate,
)
from langchain.chains import LLMChain
from langchain.memory import ConversationBufferMemory
from langchain.chat_models import ChatOpenAI
import streamlit as st
import time

import dotenv
dotenv.load_dotenv()

#웹사이트 메인 헤더
st.title("ChatGPT")

# Set a default model
if "openai_model" not in st.session_state:
    st.session_state["openai_model"] = "gpt-3.5-turbo"

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

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

# 유저의 인풋이 있으면
if prompt := st.chat_input("What is up?"):
    # 유저가 보낸 내용은 내용 그대로 사람 아이콘과 함께 화면에 출력하기 
    st.session_state.messages.append({"role": "user", "content": prompt})
    with st.chat_message("user"):
        st.markdown(prompt)
    
    # AI가 답변할 내용: 유저 인풋을 LLM에게 보내서 실행시키고, 받은 답변 실시간으로 출력하기 
    with st.chat_message("assistant"):
        message_placeholder = st.empty()
        full_response = ""
        # 여기서부턴 위에서 만든 백엔드 코드가 들어갑니다! 
        # LLM
        llm = ChatOpenAI()

        # Prompt
        custom_prompt = ChatPromptTemplate(
            messages=[
                SystemMessagePromptTemplate.from_template(
                    "You are a nice chatbot having a conversation with a human."
                ),
                MessagesPlaceholder(variable_name="chat_history"),
                HumanMessagePromptTemplate.from_template("{question}"),
            ]
        )

        memory = ConversationBufferMemory(memory_key="chat_history", return_messages=True)
        conversation = LLMChain(llm=llm, prompt=custom_prompt, verbose=True, memory=memory)
        
        # 여기서 {"question": prompt}는 유저의 인풋 프롬프트를 LLM에게 보낸다는 뜻
        result = conversation({"question": prompt})
        # 실시간으로 텍스트가 로딩되는 효과를 보여주기 위해 결과값을 단어 단위로 쪼개주기
        for chunk in result['text'].split():
            full_response += chunk + " "
            time.sleep(0.05)
            message_placeholder.markdown(full_response + "▌")
        message_placeholder.markdown(full_response)
    st.session_state.messages.append({"role": "assistant", "content": full_response})

코드를 자세히 보면 message["role"]에 따라 웹사이트에 보여지는 결과가 달라집니다. 예를 들어 "role": "user"라면 인풋 박스에 저장된 유저의 인풋이 그대로 사람 아이콘과 함께 내용물이 출력됩니다. 반면 "assistant", 즉 AI라면 로봇 아이콘과 함께 유저 인풋을 LLM에게 보내고 나서 받은 결과물을 실시간으로 출력합니다.

코드에 대한 더 자세한 설명은 # 주석을 확인해주세요!

실행하기

이제 코드가 완료됐어요. 터미널에서 가상환경을 실행시켜줬다면 streamlit run chatbot.py를 돌려주세요.

그럼 새로운 윈도우가 팝업이 되고 내가 만든 LLM으로 대화할 수 있는 챗봇이 만들어집니다.

마무리

이로써 Part 1이 마무리 됐습니다! 진짜 쉬웠죠? 이제 다음 파트에서는 비슷한 구조의 코드로 RAG를 사용하여 특정 문서에 대해 대화할 수 있는 챗봇을 만들어볼게요.

하면서 어렵거나 잘 안되는 부분이 있으면 댓글 달아주세요! 감사합니다. :)

더 많은 개발 프로젝트들을 해보고 싶으시다면 10X AI University에서 현재 업무 자동화, 캐릭터 AI, 이미지 생성AI 등을 주제로 비슷한 컨텐츠들을 확인하실 수 있습니다!