前言

今天我們要將 Agent（已經包裝成 API）變成一個簡單的 網頁互動介面！
話不多說，直接進入主題(≧▽≦)/

實踐

這裡沿用 Day 9 和 Day 12的Code，確保都有再往下做喔~

• 安裝Gradio

pip install gradio

• 新增一個 python gradio_app.py
  

• 我們需要一個函式來跟你的 FastAPI Agent API 溝通：

import gradio as gr
import requests

# 向你的 FastAPI 發送對話請求
def multi_tool_chat(message, history):
    try:
        url = "http://localhost:<port>/query"
        payload = {"query": message}
        response = requests.post(url, json=payload)

        if response.status_code == 200:
            data = response.json()
            if "response" in data:
                return data["response"]
            elif "error" in data:
                return f"錯誤：{data['error']}"
            else:
                return "收到未知格式的回應"
        else:
            return f"API 錯誤：HTTP {response.status_code}"

    except requests.exceptions.ConnectionError:
        return "❌ 無法連接到 FastAPI 服務，請確認服務正在運行於 http://localhost:8080"
    except Exception as e:
        return f"❌ 發生錯誤：{str(e)}"

• 我們用 Gradio ChatInterface 快速建立聊天介面：

# 建立最簡單的聊天介面
demo = gr.ChatInterface(
    fn=multi_tool_chat,
    title="🤖 Multi-Tool Agent 聊天機器人",
    description="我可以幫你查詢天氣、時間，或進行簡單對話！試試看：台北天氣、東京時間、你好",
    examples=[
        "你好",
        "台北天氣如何？",
        "東京現在幾點？",
        "台中的溫度",
        "倫敦時間",
        "hello"
    ]
)

if __name__ == "__main__":
    print("🚀 啟動 Multi-Tool Agent 聊天機器人...")
    print("📋 請確認 FastAPI 服務正在運行於 http://localhost:<port>")
    print("🌐 Gradio 介面將在瀏覽器中打開")
    demo.launch()

只要執行這個程式，Gradio 就會自動幫你開啟瀏覽器頁面，直接跟你的 Agent 對話！
如果想要讓朋友也能測試，可以使用 demo.launch(share=True)，生成臨時公開連結～

結果畫面

1.啟動 FastAPI： uvicorn main:app --host 0.0.0.0 --port <port>
2.啟動 Gradio： python gradio_app.py

• 進入網址
  

• 畫面
  

結尾廢話

看吧～只要幾行 Python 代碼，我們就把 Agent API 變成了 可以直接對話的網頁聊天機器人！

甚至可以再加上 圖片、檔案或多功能輸入元件，讓你的 Agent 更智慧、更酷炫

我們下一篇見o(￣︶￣)o