Hugging Face 的 LOGO

在 Python 中实现 MCP 服务器：一个基于 Gradio 的 AI 购物助手

发布于 2025 年 7 月 31 日
在 GitHub 上更新
赞
35
Freddy Boulton's avatar
Freddy Boulton
freddyaboulton

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 购物助手栩栩如生，我们将结合三个关键组件：

  1. IDM-VTON 扩散模型：这个 AI 模型负责虚拟试穿功能。它可以编辑现有照片，使其看起来像一个人穿着不同的服装。我们将使用 IDM-VTON 的 Hugging Face Space，可在此处访问：此处。

  2. Gradio：Gradio 是一个开源 Python 库，可以轻松构建 AI 驱动的 Web 应用程序，对于我们的项目来说，它还可以创建 MCP 服务器。Gradio 将充当桥梁，允许我们的 LLM 调用 IDM-VTON 模型和其他工具。

  3. Visual Studio Code 的 AI 聊天功能：我们将使用 VS Code 内置的 AI 聊天功能，它支持添加任意 MCP 服务器，与我们的 AI 购物助手进行交互。这将提供一个用户友好的界面，用于发出命令和查看虚拟试穿结果。

构建 Gradio MCP 服务器

我们 AI 购物助手的核心是 Gradio MCP 服务器。该服务器将公开一个主要工具：

  1. 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 助手带来了激动人心的可能性。通过遵循本博客文章中概述的步骤，您可以构建自己的助手来解决您最关心的问题！

更多博客文章

Gradio MCP 服务器的五大改进

作者：  freddyaboulton 2025 年 7 月 17 日 • 20

构建 Hugging Face MCP 服务器

作者：  evalstate 2025 年 7 月 10 日 • 58

社区

注册或登录以发表评论

赞
35