OpenAI API 를 이용한 챗봇 만들기03 - gradio를 이용해 간단한 챗봇 만들기

OpenAI API 를 이용한 챗봇 만들기03 

- gradio를 이용해 간단한 챗봇 만들기 -

 

 

 

 

OpenAI API를 사용하기 위한 api key 발급과 환경설정 그리고 기본적인 코드와 파라미터를 알아봤으니 이제 gridio를 이용해서 gpt에게 질문하고 응답을 받는 챗봇을 만들어보자.

api key 발급과 파라미터는 이전 글을 참고하기 바란다.

 

https://datanavigator.tistory.com/91

OpenAI API 를 이용한 챗봇 만들기01 - OpenAI 계정등록하고 API key 발급 후 테스트 하기

 

 

https://datanavigator.tistory.com/92

OpenAI API 를 이용한 챗봇 만들기02 - OpenAI API 파라미터 정리

 

 

ui를 간단하게 구현할 것이기 때문에 grdio를 사용해서 구현한다.

1. gradio 설치

conda activate openai
pip install gradio

 

2. jupyter notebook을 실행하고 새노트북을 생성한 후 아래의 코드를 작성한다.

import os
from openai import OpenAI
import gradio as gr

# OpenAI 클라이언트 설정
client = OpenAI()
client.api_key = os.environ['OPENAI_API_KEY']

# 대화 기록을 저장할 리스트
chat_history = []

def chatbot(system_prompt, user_input):
    global chat_history
    
    # 사용자의 입력이 비어있지 않은 경우에만 추가
    if user_input.strip():
        chat_history.append({"role": "user", "content": user_input})
    
    # OpenAI API 요청
    response = client.chat.completions.create(
        model="gpt-4o-mini",
        messages=[
            {"role": "system", "content": system_prompt}
        ] + chat_history,
        temperature=1
    )

    # OpenAI의 응답 추가
    assistant_message = response.choices[0].message.content
    chat_history.append({"role": "assistant", "content": assistant_message})
    
    # 대화 기록을 화면에 표시할 문자열 생성 (system 프롬프트는 표시하지 않음)
    history_display = "\n".join([
        f"<div style='text-align: right;'><b>User:</b> {entry['content']}</div>" if entry['role'] == 'user' else 
        f"<div style='text-align: left;'><b>Assistant:</b> {entry['content']}</div>"
        for entry in chat_history if entry['role'] != 'system'
    ])
    
    return history_display

# Gradio 인터페이스 설정
demo = gr.Interface(
    fn=lambda user_input, system_prompt: chatbot(user_input, system_prompt),
    inputs=[gr.Textbox(label="System Prompt"), gr.Textbox(label="입력")],
    outputs=gr.HTML(label="대화 기록"),
    title="GPT-4o 챗봇"
)

# 외부 접속이 가능하도록 서버 설정
demo.launch(inline=False, server_name="0.0.0.0", server_port=7860)

 

모델은 gpt-4o-mini를 사용했고 system role과 질문을 입력하면 답변이 출력되도록 만들었다. 

 

3. 코드 실행 후 웹브라우저에서 localhost:7860 으로 접속한다.

 

1) jupyter notebook에서 코드 실행

코드가 정상적으로 실행되면 결과창에 http://0.0.0.0:7860 이 나온다.

접속 준비가 되었으니 웹브라우저를 실행하고 localhost:7860으로 접속한다.

 

2) 웹브라우저에서 localhost:7860으로 접속

 

3) System Prompt에 역할, 입력 후 submit을 눌러 결과가 잘 나오는지 확인한다.

 

결과가 제대로 나왔다면 성공!!