Day 26：前端互動介面（Gradio 部署實戰）

一、學習目標與前端工具選型

本日目標是為先前完成的 RAG 核心模型建立一個可互動的 Web Chatbot 介面，實現**「使用者入口」**。我們選用 Gradio 進行快速原型部署。

Gradio 與 Streamlit 簡要比較

二、環境設置與 RAG 核心準備

(1) 環境需求

確保已安裝 Gradio 與 RAG 所需的核心套件：

!pip install gradio faiss-cpu sentence-transformers transformers torch

(2) RAG 核心模組載入

本階段需要準備 Day 25 的所有 RAG 核心組件：SentenceTransformer 向量化器、FAISS 索引、檢索函數、以及 LLM 生成器。

• 知識庫準備：使用範例知識庫（實戰中應替換為 Day 23 的 CSV 資料）。
• 模型選型：本次範例選用 ckiplab/gpt2-base-chinese 作為生成模型。

三、Gradio 整合實作：FAQ Chatbot

(1) RAG 邏輯函數定義

將 RAG 核心邏輯封裝進一個 Gradio 可調用的函數 rag_chatbot 中。

# === Step 1. 載入套件 ===
import gradio as gr
from sentence_transformers import SentenceTransformer
from transformers import pipeline
import faiss
import numpy as np

# === Step 2. 準備知識庫 ===
knowledge_base = [
    "Google 是全球最大的搜尋引擎公司之一。",
    "Google 提供 Gmail、雲端硬碟、YouTube 等多種服務。",
    "Google Colab 是一個免費的雲端程式開發環境。",
    "Google Maps 能提供路線導航與交通資訊。",
    "Google Cloud Platform 是 Google 的雲端服務品牌。"
]

# === Step 3. 向量化知識 ===
embedder = SentenceTransformer("sentence-transformers/all-MiniLM-L6-v2")
embeddings = embedder.encode(knowledge_base, convert_to_numpy=True)
dimension = embeddings.shape[1]
index = faiss.IndexFlatL2(dimension)
index.add(embeddings)

# === Step 4. 定義檢索函數 ===
def retrieve(query, top_k=2):
    query_vec = embedder.encode([query], convert_to_numpy=True)
    distances, indices = index.search(query_vec, top_k)
    return [knowledge_base[i] for i in indices[0]]

# === Step 5. 載入文字生成模型 ===
generator = pipeline("text-generation", model="ckiplab/gpt2-base-chinese")

# === Step 6. 定義 RAG 回答邏輯 ===
def rag_chatbot(user_input, history=[]):
    docs = retrieve(user_input)
    context = " ".join(docs)
    prompt = f"根據以下內容回答問題：{context}\n問題：{user_input}\n回答："
    output = generator(prompt, max_new_tokens=80, do_sample=True, temperature=0.7)[0]["generated_text"]
    answer = output.split("回答：")[-1].strip()
    history.append((user_input, answer))
    return history, history

# === Step 7. Gradio UI ===
with gr.Blocks(theme=gr.themes.Soft()) as demo:
    gr.Markdown("## 🤖 Google FAQ Chatbot (RAG Prototype)")
    chatbot = gr.Chatbot(height=400)
    user_input = gr.Textbox(placeholder="請輸入你的問題...", label="輸入問題")
    clear = gr.Button("清除對話")

    user_input.submit(rag_chatbot, [user_input, chatbot], [chatbot, chatbot])
    clear.click(lambda: None, None, chatbot, queue=False)

# === Step 8. 啟動網頁 ===
demo.launch()

四、執行結果與延伸挑戰

執行結果

今天先用內建的資料庫完成實作，明天繼續練習讓他使用先前的資料庫!