在 Python 中實現 MCP 伺服器：一個基於 Gradio 的 AI 購物助手
Python 開發者們，想讓你們的 LLM 擁有超能力嗎？Gradio 是最快的方法！藉助 Gradio 的模型上下文協議 (MCP) 整合，您的 LLM 可以直接連線到 Hugging Face Hub 上託管的數千個 AI 模型和 Spaces。透過將 LLM 的通用推理能力與 Hugging Face 上模型的專業能力相結合，您的 LLM 可以超越簡單的文字問答，真正解決您日常生活中的問題。
對於 Python 開發者來說，Gradio 讓實現強大的 MCP 伺服器變得輕而易舉，它提供了以下功能：
- 自動將 Python 函式轉換為 LLM 工具：您的 Gradio 應用程式中的每個 API 端點都會自動轉換為一個 MCP 工具，並帶有相應的名稱、描述和輸入模式。您函式的文件字串用於生成工具及其引數的描述。
- 即時進度通知：Gradio 將進度通知流式傳輸到您的 MCP 客戶端，讓您無需自己實現此功能即可即時監控狀態。
- 自動檔案上傳，包括支援公共 URL 和處理各種檔案型別。
想象一下：您討厭購物，因為它太耗時，而且您害怕自己試穿衣服。如果 LLM 能為您處理這一切呢？在這篇文章中，我們將建立一個由 LLM 驅動的 AI 助手，它可以瀏覽線上服裝店，找到特定服裝，然後使用虛擬試穿模型向您展示這些衣服穿在您身上會是什麼樣子。請看下面的演示：
目標：您的個人 AI 服裝設計師
為了讓我們的 AI 購物助手栩栩如生，我們將結合三個關鍵元件：
IDM-VTON 擴散模型：這個 AI 模型負責虛擬試穿功能。它可以編輯現有照片，使其看起來像一個人穿著不同的服裝。我們將使用 IDM-VTON 的 Hugging Face Space，可在此處訪問：此處。
Gradio：Gradio 是一個開源 Python 庫，可以輕鬆構建 AI 驅動的 Web 應用程式，對於我們的專案來說，它還可以建立 MCP 伺服器。Gradio 將充當橋樑，允許我們的 LLM 呼叫 IDM-VTON 模型和其他工具。
Visual Studio Code 的 AI 聊天功能：我們將使用 VS Code 內建的 AI 聊天功能，它支援新增任意 MCP 伺服器，與我們的 AI 購物助手進行互動。這將提供一個使用者友好的介面，用於發出命令和檢視虛擬試穿結果。
構建 Gradio MCP 伺服器
我們 AI 購物助手的核心是 Gradio MCP 伺服器。該伺服器將公開一個主要工具：
vton_generation：此函式將接受一張真人模特圖片和一張服裝圖片作為輸入，並使用 IDM-VTON 模型生成一張人穿著該服裝的新圖片。
以下是我們 Gradio MCP 伺服器的 Python 程式碼：
from gradio_client import Client, handle_file
import gradio as gr
import re
client = Client("freddyaboulton/IDM-VTON",
hf_token="<Your-token>")
def vton_generation(human_model_img: str, garment: str):
"""Use the IDM-VTON model to generate a new image of a person wearing a garment."""
"""
Args:
human_model_img: The human model that is modelling the garment.
garment: The garment to wear.
"""
output = client.predict(
dict={"background": handle_file(human_model_img), "layers":[], "composite":None},
garm_img=handle_file(garment),
garment_des="",
is_checked=True,
is_checked_crop=False,
denoise_steps=30,
seed=42,
api_name="/tryon"
)
return output[0]
vton_mcp = gr.Interface(
vton_generation,
inputs=[
gr.Image(type="filepath", label="Human Model Image URL"),
gr.Image(type="filepath", label="Garment Image URL or File")
],
outputs=gr.Image(type="filepath", label="Generated Image")
)
if __name__ == "__main__":
vton_mcp.launch(mcp_server=True)
透過在 launch() 方法中設定 mcp_server=True，Gradio 會自動將我們的 Python 函式轉換為 LLM 可以理解和使用的 MCP 工具。我們函式的文件字串用於生成工具及其引數的描述。
原始的 IDM-VTON 空間是用 Gradio 4.x 實現的，早於自動 MCP 功能。因此，在此演示中，我們將構建一個透過 Gradio API 客戶端查詢原始空間的 Gradio 介面。
最後，使用 python 執行此指令碼。
配置 VS Code
要將我們的 Gradio MCP 伺服器連線到 VS Code 的 AI 聊天，我們需要編輯 mcp.json 檔案。此配置會告訴 AI 聊天在哪裡找到我們的 MCP 伺服器以及如何與其互動。
您可以透過在命令面板中鍵入 MCP 並選擇 MCP: 開啟使用者配置 來找到此檔案。開啟後，請確保存在以下伺服器：
{
"servers": {
"vton": {
"url": "http://127.0.0.1:7860/gradio_api/mcp/"
},
"playwright": {
"command": "npx",
"args": [
"-y",
"@playwright/mcp@latest"
]
}
}
}
Playwright MCP 伺服器將允許我們的 AI 助手瀏覽網頁。
請確保
vton伺服器的 URL 與上一節中控制檯列印的 URL 匹配。要執行 Playwright MCP 伺服器，您需要安裝 Node.js。此處。
整合所有部分
現在我們可以開始與我們的 AI 購物助手互動了。在 VS Code 中開啟一個新的聊天，您可以向助手提問，例如“瀏覽優衣庫網站上的藍色 T 恤，並使用我的照片 [您的圖片 URL] 向我展示我穿其中三件會是什麼樣子。”
請參閱上面的影片示例！
結論
Gradio、MCP 和像 IDM-VTON 這樣強大的 AI 模型相結合，為建立智慧實用的 AI 助手帶來了激動人心的可能性。透過遵循本部落格文章中概述的步驟，您可以構建自己的助手來解決您最關心的問題！
