嗨嚕大家！👋
昨天我們成功讓聊天機器人能結合外部知識來回答問題，基本上整個 RAG 流程我們都已經學完啦～今天這篇主要是想讓這個聊天機器人再升級一下，讓它變成一個有介面的互動式網頁，這樣就不用再透過程式碼測試你的機器人了，只要打開介面、輸入問題，它就能直接回你答案囉～

畫面大概會像這樣 👇

看到這邊是不是有點小害怕？如果要做介面那不是要碰到前端嗎？還有 CSS 那些東西？
別擔心～今天要教大家的技巧完全不用寫前端！幾行程式碼就能設計出自己的互動介面 🤩
其實現在有很多方式都能做到這件事，像是 Streamlit、Gradio 等，而今天要介紹的工具，是我認為相對最簡單、也最容易上手的 Gradio！

事不宜遲我們趕快開始吧！

Gradio 是什麼？

Gradio 是一個 Python 的開源工具，可以讓使用者快速為自己的模型或函式建立互動式網頁介面，它最大的特色是「零前端需求」，只要用幾行 Python 程式，就能生成一個可輸入文字、顯示結果的簡單網頁。不管是想做聊天機器人、文字生成、圖片辨識、或語音轉文字，對主要寫後端的人來說，它真的是一個非常實用的工具，如果只是想快速 demo 你的模型，Gradio 也是個非常好的選擇，而且它甚至能直接部署上網！

有興趣可以到他的官網看看：Gradio

實作

知道gradio 大抵是在幹嘛後，我們直接來看看他是如何做出一個簡單的互動式介面吧！

安裝Gradio

!pip install Gradio

將要運行的程式碼打包成函式

在使用 Gradio 之前，有一個非常重要的觀念要先知道：Gradio 是透過呼叫函式(function) 來取得結果的，也就是說，Gradio 並不是幫你直接執行一整段程式，而是需要你把「要做的事情」先定義成一個函式，它才知道要怎麼把輸入丟進去、再把輸出顯示出來！

如果還不太會寫函示的小夥伴可以去參考我之前的文章👉Day 4 把重複會用到的東西打包成專屬工具吧！Function 基本教學

那我們昨天的實作內容其實已經把如何呼叫模型包成一個函式了，我們今天就直接用這個函式當作範例👇

def rag_answer(question: str, model_name: str = "gpt-5"):
    # 檢索
    top_docs = retriever.get_relevant_documents(question)
    if not top_docs:
        return "目前在知識庫中找不到相關內容，請換個說法或提供更多線索。"
    context_text = "\n---\n".join([d.page_content for d in top_docs]) #將檢索到的內容全部合併
    #告訴模型需要拿檢索到的資訊生成回應
    system_prompt = (
        f"你是一位謹慎的助理。請只用檢索到的{context_text}與你的常識，"
        "回答使用者的問題。若片段沒有提到，請誠實告知。避免捏造。"
        "必要時可用條列給出要點。"
    )
    user_content = (
        f"使用者問題：{question}\n\n"
        "請根據以上資訊與你的常識回答問題"
    )

    resp = client.chat.completions.create(
        model=model_name,
        messages=[
            {"role": "system", "content": system_prompt},
            {"role": "user", "content": user_content},
        ],
    )
    return resp.choices[0].message.content

完整文章可參考：Day 28 我的GPT 怎麼笨笨的？-- 用RAG 幫幫你吧！（中）

把函式包進 Gradio 吧！
有了函式之後，我們就能開始用 Gradio 幫它做出一個網頁介面啦！
這邊我們先用最簡單的做法，使用 gr.Interface()

import gradio as gr

demo = gr.Interface(
    fn=rag_answer,   # 這邊放你要執行的函式名稱
    inputs=gr.Textbox(label="輸入你的問題", placeholder="例如：烏龜頸是什麼？"),
    outputs=gr.Textbox(label="AI 回覆", lines=6),
    title="🧠 我的迷你 RAG 聊天機器人",
    description="一個智能問答系統"
)

demo.launch()

執行後，會跳出一段網址，點進去應該可以看到這樣的畫面

沒錯！這樣就完成我們的介面了！！是不是超級簡單！

我們來快速拆解一下剛剛那幾行做了什麼事 👇

Gradio 的參數真的非～常～多！🤯不管是介面配色、輸入框樣式、按鈕圖示、還是輸出格式，幾乎都能自己調整。例如，我想要把整體介面改成黑色主題、或是讓輸入框更寬、更符合對話感，只要多加幾個參數就能輕鬆做到 👇

demo = gr.Interface(
    fn=rag_answer,
    inputs=gr.Textbox(
        label="輸入你的問題",
        placeholder="例如：烏龜頸是什麼？",
        lines=2,        # 調整輸入框高度
        ),
    outputs=gr.Textbox(
        label="AI 回覆",
        lines=8,
    ),
    title="🧠 我的迷你 RAG 聊天機器人",
    description="輸入問題後，系統會檢索資料並回答你的問題！",
    theme="gradio/monochrome"  # 換成深色主題 🎨
)

demo.launch()

改變後的頁面

這邊我用了 theme="gradio/monochrome" 讓介面變成黑色風格，同時也在 Textbox 裡加了 lines 參數，調整輸入框高度，其他常見主題顏色還有：
theme="gradio/base" → 預設淺色風格
theme="gradio/soft" → 淡色風格
theme="gradio/dracula" → 深色風格

你也可以試著一個一個改看看，會發現 Gradio 的客製化真的超級彈性！

小小總結

Gradio 的介紹我們就大概到這邊！今天的範例只是個小小的基本介紹，主要是讓大家客製化的聊天機器人可以有漂亮的介面，我想大家看到會比較有成就感一點😆
接下來你可以繼續玩玩看不同的主題（theme）、不同的輸入輸出元件（inputs / outputs），
或者試著幫它加上 Logo、聊天紀錄等，都可以去官網看看如何增加或是調整參數！

好啦！明天就是我們的最後一篇啦🥹 我們明天見！