使用 Gradio 和 MCP 构建模块化图像处理服务器

作者：梁文

现代 AI 工作流通常需要一种模块化、可组合的方式来公开工具（例如图像或文本处理），这些工具可以从任何地方调用——无论是 API、用户界面还是另一个 AI 代理。模型上下文协议 (MCP) 提供了一个统一的框架，通过事件驱动协议公开函数（工具）。结合 Gradio，您可以快速搭建用于交互式和程序化使用的 Web UI 或 HTTP 端点。

在这篇文章中，我将逐步介绍如何使用 Gradio 的 MCP 服务器模式和一个以编程方式调用每个函数的 Python 客户端来构建一个简单的图像编辑服务器，展示这种架构如何轻松实现工具集成和远程自动化。

---

架构概览

• 服务器：通过 Gradio Blocks 公开图像处理工具（灰度、旋转、对比度），每个函数都可作为 MCP 工具使用。
• 客户端：连接到服务器的 MCP 端点，上传图像，并远程调用每个工具，保存结果。

图表：端到端 MCP 工作流

---

实现图像编辑服务器

以下部分展示了使用 Gradio Blocks 和 MCP 的最小服务器实现。此服务器将多个图像处理工具公开为可调用 MCP 函数 (server.py)

import gradio as gr
from PIL import Image, ImageEnhance

def to_grayscale(img: Image.Image) -> Image.Image:
    return img.convert("L").convert("RGB")

def rotate_image(img: Image.Image, angle: float) -> Image.Image:
    return img.rotate(angle, expand=True)

def adjust_contrast(img: Image.Image, factor: float) -> Image.Image:
    enhancer = ImageEnhance.Contrast(img)
    return enhancer.enhance(factor)

with gr.Blocks() as demo:
    gr.Markdown("# Image Editing MCP Server")
    with gr.Tab("Grayscale"):
        inp_g = gr.Image(type="pil", label="Input Image")
        out_g = gr.Image(type="pil", label="Grayscale Output")
        gr.Button("Convert").click(to_grayscale, inp_g, out_g)
    with gr.Tab("Rotate"):
        inp_r = gr.Image(type="pil", label="Input Image")
        angle = gr.Slider(0, 360, value=90, label="Angle")
        out_r = gr.Image(type="pil", label="Rotated Output")
        gr.Button("Rotate").click(rotate_image, [inp_r, angle], out_r)
    with gr.Tab("Contrast"):
        inp_c = gr.Image(type="pil", label="Input Image")
        factor = gr.Slider(0.1, 3.0, value=1.5, label="Contrast Factor")
        out_c = gr.Image(type="pil", label="Adjusted Output")
        gr.Button("Adjust").click(adjust_contrast, [inp_c, factor], out_c)

if __name__ == "__main__":
    demo.launch(
        server_name="0.0.0.0",
        server_port=7860,
        mcp_server=True,  # <-- Enables MCP endpoint!
        debug=True
    )

关键点：将 mcp_server=True 设置为 true 会告诉 Gradio 将每个工具公开为 MCP 端点。现在，任何支持 MCP 协议的东西都可以列出、描述和调用这些函数！

---

使用 MCP 客户端进行程序化图像处理

客户端演示了如何连接到服务器，将图像编码为数据 URI，并通过 MCP 调用每个工具 (client.py)

import asyncio, base64
from mcp import ClientSession
from mcp.client.sse import sse_client

async def main():
    server_url = "https://:7860/gradio_api/mcp/sse"
    # Encode image as data URI
    with open("input.png", "rb") as f:
        raw = f.read()
    b64 = base64.b64encode(raw).decode("ascii")
    data_uri = f"data:image/png;base64,{b64}"

    async with sse_client(server_url) as (read_stream, write_stream):
        async with ClientSession(read_stream, write_stream) as session:
            await session.initialize()
            tools = await session.list_tools()
            # ... print available tools ...
            async def call_and_save(tool_name, args, out_path):
                res = await session.call_tool(tool_name, args)
                # ... decode and write result ...
            await call_and_save("to_grayscale", {"img": data_uri}, "output_grayscale.png")
            await call_and_save("rotate_image", {"img": data_uri, "angle": 90}, "output_rotated.png")
            await call_and_save("adjust_contrast", {"img": data_uri, "factor": 1.5}, "output_contrast.png")

if __name__ == "__main__":
    asyncio.run(main())

亮点

• 工具列表：客户端可以在运行时发现可用工具，适应服务器公开的任何工具。
• 流式输出：MCP 支持分块的、基于事件的通信，这对于异步生成数据的 AI 工具来说是理想的选择。

---

为什么将 MCP 与 Gradio 结合使用？

• 可组合性：将任何 Python 函数公开为远程工具，以便它可以从脚本、Web UI 甚至其他 AI 代理使用。这使得在项目之间共享和重用逻辑变得容易。
• 灵活性：只需编辑 Gradio Blocks 定义即可轻松添加或删除工具。您无需处理 REST API 样板或自定义路由，MCP 会为您处理管道。
• 交互式或自动化：同一服务器同时支持实时 Web 演示和批处理自动化，让您可以快速原型化，然后将这些工具用于生产管道或自动化脚本而无需更改。

---

后续步骤

• 添加更多图像工具，或扩展到音频/文本处理！
• 与 LLM 集成，通过自然语言指令组合工具使用。
• 部署服务器以实现协作式 AI 工作流。

MCP + Gradio 是一种轻量级、Pythonic 的方式，可以为人类和机器用户提供模块化 AI 工具。在您的下一个项目中尝试一下吧！

---