Xây dựng một trợ lý mua sắm AI với máy chủ Gradio MCP

July 31, 2025
6 min read

Triển khai Máy chủ MCP trong Python: Trợ lý Mua sắm AI với Gradio

Python Developers, muốn cung cấp siêu năng lực cho LLM của bạn? Gradio là cách nhanh nhất để làm điều đó! Với tích hợp Giao thức ngữ cảnh mô hình (MCP) của Gradio, LLM của bạn có thể cắm trực tiếp vào hàng ngàn mô hình AI và Spaces được lưu trữ trên Hugging Face Hub. Bằng cách kết hợp khả năng lý luận chung của LLM với khả năng chuyên biệt của các mô hình được tìm thấy trên Hugging Face, LLM của bạn có thể vượt ra ngoài việc chỉ đơn giản trả lời các câu hỏi văn bản để thực sự giải quyết các vấn đề trong cuộc sống hàng ngày của bạn.

Đối với các nhà phát triển Python, Gradio giúp việc triển khai các máy chủ MCP mạnh mẽ trở nên dễ dàng, cung cấp các tính năng như:

Tự động chuyển đổi các hàm python thành các công cụ LLM: Mỗi điểm cuối API trong ứng dụng Gradio của bạn sẽ tự động được chuyển đổi thành một công cụ MCP với tên, mô tả và lược đồ đầu vào tương ứng. Docstring của hàm của bạn được sử dụng để tạo mô tả về công cụ và các tham số của nó.
Thông báo tiến trình theo thời gian thực: Gradio truyền phát thông báo tiến trình đến máy khách MCP của bạn, cho phép bạn theo dõi trạng thái theo thời gian thực mà không cần phải tự triển khai tính năng này.
Tự động tải tệp lên, bao gồm hỗ trợ cho các URL công khai và xử lý các loại tệp khác nhau.

Hãy tưởng tượng điều này: bạn ghét mua sắm vì nó tốn quá nhiều thời gian và bạn sợ phải tự mình thử quần áo. Điều gì sẽ xảy ra nếu một LLM có thể xử lý việc này cho bạn? Trong bài đăng này, chúng ta sẽ tạo một trợ lý AI do LLM cung cấp, có thể duyệt các cửa hàng quần áo trực tuyến, tìm các loại quần áo cụ thể, sau đó sử dụng mô hình mặc thử ảo để cho bạn thấy những bộ quần áo đó sẽ trông như thế nào trên người bạn. Xem bản demo bên dưới:

Mục tiêu: Nhà tạo mẫu AI cá nhân của bạn

Để đưa trợ lý mua sắm AI của chúng ta vào cuộc sống, chúng ta sẽ kết hợp ba thành phần chính:

Mô hình khuếch tán IDM-VTON: Mô hình AI này chịu trách nhiệm cho chức năng mặc thử ảo. Nó có thể chỉnh sửa các ảnh hiện có để làm cho nó xuất hiện như thể một người đang mặc một loại quần áo khác. Chúng ta sẽ sử dụng Hugging Face Space cho IDM-VTON, có thể truy cập tại đây.
Gradio: Gradio là một thư viện Python mã nguồn mở giúp bạn dễ dàng xây dựng các ứng dụng web hỗ trợ AI và, điều quan trọng đối với dự án của chúng ta, để tạo các máy chủ MCP. Gradio sẽ hoạt động như một cầu nối, cho phép LLM của chúng ta gọi mô hình IDM-VTON và các công cụ khác.
Tính năng trò chuyện AI của Visual Studio Code: Chúng ta sẽ sử dụng tính năng trò chuyện AI tích hợp của VS Code, hỗ trợ thêm các máy chủ MCP tùy ý, để tương tác với trợ lý mua sắm AI của chúng ta. Điều này sẽ cung cấp một giao diện thân thiện với người dùng để đưa ra các lệnh và xem kết quả mặc thử ảo.

Xây dựng Máy chủ Gradio MCP

Cốt lõi của trợ lý mua sắm AI của chúng ta là máy chủ Gradio MCP. Máy chủ này sẽ hiển thị một công cụ chính:

vton_generation: Hàm này sẽ lấy hình ảnh người mẫu và hình ảnh quần áo làm đầu vào và sử dụng mô hình IDM-VTON để tạo ra một hình ảnh mới của người đó mặc quần áo.

Đây là mã Python cho máy chủ Gradio MCP của chúng ta:

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)

Bằng cách đặt mcp_server=True trong phương thức launch(), Gradio sẽ tự động chuyển đổi các hàm Python của chúng ta thành các công cụ MCP mà LLM có thể hiểu và sử dụng. Docstring của các hàm của chúng ta được sử dụng để tạo mô tả về các công cụ và các tham số của chúng.

Space IDM-VTON ban đầu được triển khai với Gradio 4.x, phiên bản trước chức năng MCP tự động. Vì vậy, trong bản demo này, chúng ta sẽ xây dựng một giao diện Gradio truy vấn space ban đầu thông qua máy khách Gradio API.

Cuối cùng, chạy tập lệnh này bằng python.

Định cấu hình VS Code

Để kết nối máy chủ Gradio MCP của chúng ta với trò chuyện AI của VS Code, chúng ta cần chỉnh sửa tệp mcp.json. Cấu hình này cho trò chuyện AI biết nơi tìm máy chủ MCP của chúng ta và cách tương tác với nó.

Bạn có thể tìm thấy tệp này bằng cách nhập MCP vào bảng lệnh và chọn MCP: Open User Configuration. Sau khi bạn mở nó, hãy đảm bảo rằng các máy chủ sau có mặt:

{
  "servers": {
  "vton": {
    "url": "http://127.0.0..1:7860/gradio_api/mcp/"
  },
  "playwright": {
    "command": "npx",
    "args": [
      "-y",
      "@playwright/mcp@latest"
    ]
   }
  }
}

Máy chủ playwright MCP sẽ cho phép trợ lý AI của chúng ta duyệt web.

Đảm bảo rằng URL của máy chủ vton khớp với URL được in ra bảng điều khiển trong phần trước. Để chạy máy chủ playwright MCP, bạn cần phải cài đặt node.

Đặt tất cả lại với nhau

Bây giờ chúng ta có thể bắt đầu tương tác với trợ lý mua sắm AI của mình. Mở một cuộc trò chuyện mới trong VS Code và bạn có thể hỏi trợ lý một điều gì đó như “Duyệt trang web Uniqlo để tìm áo phông màu xanh lam và cho tôi xem tôi sẽ trông như thế nào trong ba chiếc áo đó, bằng cách sử dụng ảnh của tôi tại [your-image-url].”

Xem video ở trên để biết ví dụ!

Kết luận

Sự kết hợp giữa Gradio, MCP và các mô hình AI mạnh mẽ như IDM-VTON mở ra những khả năng thú vị để tạo ra các trợ lý AI thông minh và hữu ích. Bằng cách làm theo các bước được nêu trong bài đăng trên blog này, bạn có thể xây dựng trợ lý của riêng mình để giải quyết những vấn đề mà bạn quan tâm nhất!

AI Today - SkyAI