Gradio로 AI채팅창 구현하기 (매우쉬움)

 

📌 Python - Gradio Example Project

이 프로젝트는 Gradio를 사용하여 간단한 웹 애플리케이션을 만드는 예제입니다.

📌 설치 방법

이 프로젝트를 실행하려면 Python과 pip가 필요합니다. 다음 명령어를 사용하여 필요한 패키지를 설치하세요:

pip install gradio

📌 실행 방법

*.py 파일을 실행하여 Gradio 인터페이스를 시작합니다:

python *.py

📌 구동방식

1. Gradio 서버에서 구동 : 쉐어가능옵션션 72시간까지만 유지
2. HuggingFace(HF) spaces에서 구동 (https://huggingface.co/new-space 에서 remote repo 생성)
3. 개인 서버에서 구동 ex) demo.launch( server_name="0.0.0.0", server_port=8020, auth=("noname", "passwd1") )

📌 예제 파일 설명

• basic_interface.py : gr.Interface(), csv 저장 예제
• basic_chatHistory.py : gr.Chatbot(), text형 history 예제
• chatInterface.py : gr.ChatInterface() 사용예제
• component_test.py : 이미지 업로드 및 컴포넌트 사용예제
• tensorflow_test.py

🔍 gr.Chatbot() vs gr.ChatInterface() 차이점 정리

gr.Chatbot() VS gr.ChatInterface()

역할	채팅 UI 컴포넌트	완성형 채팅 인터페이스
기능	메시지 표시 + 사용자 입력 직접 처리 필요	내부적으로 메시지 기록 관리, 입력창 포함
메시지 형식	튜플((user, bot)) 또는 type="messages" 사용 가능	type="messages"(OpenAI 스타일) 기본 지원
사용 방식	gr.Chatbot()을 직접 사용하고 입력/출력을 연결해야 함	ChatInterface(fn)으로 함수만 연결하면 자동 처리
커스터마이징	직접 입력창 + 버튼을 추가해야 함	입력창, 전송 버튼 기본 제공

---

🏆 언제 무엇을 사용해야 할까?

• gr.Chatbot() → 완전한 커스터마이징이 필요할 때 (입력 방식, UI 직접 조작)
• gr.ChatInterface() → 빠르게 채팅 인터페이스를 만들고 싶을 때 (자동화된 기능 사용) 👉 간단한 챗봇을 만들 땐 gr.ChatInterface() 👉 기능을 직접 컨트롤하고 싶다면 gr.Chatbot()

---

🚀 Gradio vs 다른 UI 프레임워크 비교

프레임워크 특징 난이도 머신러닝 친화도

Gradio	Python 코드 몇 줄로 UI 가능, AI 모델 배포 최적화	⭐ (매우 쉬움)	⭐⭐⭐⭐⭐
Streamlit	데이터 시각화 및 대시보드 최적화	⭐⭐ (쉬움)	⭐⭐⭐⭐
Flask/Django	백엔드 중심의 웹 프레임워크	⭐⭐⭐ (중간)	⭐⭐
React/Vue.js	프론트엔드 웹 개발	⭐⭐⭐⭐ (어려움)	⭐

---

🎯 결론: Gradio를 써야 하는 이유

✅ 코드 몇 줄로 웹 UI 가능 ✅ 머신러닝 모델과 쉽게 연동 ✅ 공유 (share=True) 기능으로 배포 편리 ✅ 다양한 데이터 입력/출력 지원 ✅ Hugging Face, OpenAI, TensorFlow, PyTorch 등과 호환

참고자료

https://www.gradio.app/guides/quickstart https://knowgyu.github.io/posts/G

 

 

---

0. 로컬 라마 설치 후 진행 필요 

 

1. gr.Chatbot() 사용 예제 

import gradio as gr
import ollama

# 히스토리 패널 가시성 상태
history_visible = True  

# 채팅 응답 함수
def chat_with_ai(user_input, history):
    if history is None:
        history = []  # 초기화

    # 메시지 형식 변환 (OpenAI 스타일)
    messages = [{"role": "user", "content": msg[0]} for msg in history] + [{"role": "user", "content": user_input}]
    response = ollama.chat(model="llama3.2-vision", messages=messages)
    bot_reply = response["message"]["content"]

    # 1줄 요약 리스트에 추가 (첫 줄만)
    summary = bot_reply.split("\n")[0]  # 첫 줄만 요약
    history.append((user_input, bot_reply))  
    history_list = [f"👤 {msg[0]} | 🤖 {msg[1].split('.')[0]}" for msg in history]  # 요약 리스트

    return history, history_list  # 채팅 UI + 히스토리 리스트 동기화

# 히스토리 패널 토글 함수
def toggle_history():
    global history_visible
    history_visible = not history_visible
    return gr.update(visible=history_visible)

def main():
    with gr.Blocks() as demo:
        history_state = gr.State([])  # 🔹 히스토리 저장용 State

        with gr.Row():
            # 히스토리 패널 (토글 가능)
            with gr.Column(scale=2, visible=history_visible) as history_panel:
                gr.Markdown("### 📝 채팅 히스토리")
                chat_history_list = gr.List(label="히스토리", interactive=False)  # 히스토리 리스트 UI

            # 메인 채팅 인터페이스
            with gr.Column(scale=5):
                chatbot = gr.Chatbot()  
                user_input = gr.Textbox(placeholder="메시지를 입력하세요...")
                send_button = gr.Button("전송")

            # 히스토리 토글 버튼
            toggle_button = gr.Button("📂 히스토리 토글")

        # 전송 버튼 클릭 시 응답 처리
        send_button.click(
            chat_with_ai, 
            inputs=[user_input, history_state], 
            outputs=[chatbot, chat_history_list]  # 🔹 채팅 UI + 히스토리 리스트 동기화
        )

        # 버튼 클릭 시 히스토리 토글
        toggle_button.click(toggle_history, None, history_panel)

    demo.launch(share=True)

if __name__ == "__main__":
    main()

 

2. gr.ChatInterface() 예제 

import gradio as gr
import ollama


def chat_with_ai(user_input, history):
    if history is None:
        history = []

    # OpenAI 스타일 메시지 포맷 적용
    messages = history + [{"role": "user", "content": user_input}]
    
    # 로컬인경우 
    response = ollama.chat(model="llama3.2-vision", messages=messages)

    bot_reply = response["message"]["content"] 

    return f"🤖 : {bot_reply}" 


def main():
    with gr.Blocks() as demo:

        gr.Markdown("### 🤖 라마와 대화하기")

        chatbot = gr.ChatInterface(
            chat_with_ai,               # ① 채팅 응답을 처리하는 함수
            type="messages",            # ② 메시지 데이터 형식 지정
            flagging_mode="manual",     # ③ 수동 플래깅(신고) 기능 활성화
            flagging_options=["Like", "Spam", "Inappropriate", "Other"],   # ④ 신고 옵션 리스트
            save_history=True,             # ⑤ 채팅 기록을 자동 저장
            theme="gradio/monochrome"
        )
            
    # 실행1 -Gradio 서버 
    demo.launch(share=True)


if __name__ == "__main__":
    main()