UI定位（MCP&Agent挑战赛）

hahaaa/ui_location_mcp

Hosted

1 Stars 434 次浏览更新于 2026-08-23

开发者工具

MCP 服务配置

复制以下 JSON 到 OPClaw 或其他 MCP 客户端的配置文件中即可使用

{
  "mcpServers": {
    "gradio": {
      "args": [
        "mcp-remote",
        "https://hahaaa-locate-ui.ms.show/gradio_api/mcp/sse",
        "--transport",
        "sse-only"
      ],
      "command": "npx"
    },
    "upload_files_to_gradio": {
      "args": [
        "--from",
        "gradio[mcp]",
        "gradio",
        "upload-mcp",
        "https://hahaaa-locate-ui.ms.show/gradio_api/mcp/",
        "\u003cUPLOAD_DIRECTORY\u003e"
      ],
      "command": "uvx"
    }
  }
}

可用工具（2 个）

该服务在 MCP 协议中暴露的工具，AI 可按需调用

get_ui_coordinate 3 个参数调用Gradio部署的app.py中的get_coordinate_fn函数API 用于在截图中定位指定任务或图标的坐标 If a user passes a file as an input, use the upload_file_to_gradio tool, if present, to upload the file to the gradio app and create a Gradio File Input. Then use the returned path as the input to the tool. Returns: (标记图片, 坐标列表, 结果文本)

调用Gradio部署的app.py中的get_coordinate_fn函数API 用于在截图中定位指定任务或图标的坐标 If a user passes a file as an input, use the upload_file_to_gradio tool, if present, to upload the file to the gradio app and create a Gradio File Input. Then use the returned path as the input to the tool. Returns: (标记图片, 坐标列表, 结果文本)

该工具无需必填参数，直接调用即可

clear_interface 清除界面所有输入和输出

清除界面所有输入和输出

该工具无需必填参数，直接调用即可

服务介绍

🎯 定位UI MCP服务器

智能UI坐标定位 MCP 服务 - 基于Gradio构建的Model Context Protocol (MCP)服务，专门用于在截图中智能定位UI元素坐标。

📋 服务概述

这是一个符合MCP标准的服务器，提供AI驱动的UI元素坐标检测功能。通过深度学习技术，能够在截图中准确识别并定位指定的UI组件、按钮、图标等元素。

🔧 核心功能

🎯 UI坐标定位: 在截图中精确定位指定UI元素的坐标位置
🖼️ 智能标记: 返回标记后的图片，直观显示检测结果
📊 结果分析: 提供详细的定位结果和置信度信息
🧹 界面清理: 快速清除所有输入输出内容

🌐 在线服务地址

https://hahaaa-locate-ui.ms.show/gradio_api/mcp/

⚙️ MCP客户端配置

Claude Desktop配置

在Claude Desktop的配置文件中添加以下内容：

json
{
"mcpServers": {
"locate_ui": {
"command": "npx",
"args": [
"mcp-remote",
"https://hahaaa-locate-ui.ms.show/gradio_api/mcp/"
]
}
}
}

其他MCP客户端

支持任何兼容MCP协议的客户端，如：

Claude Desktop 🖥️
Cursor IDE 💻
Cline 🔧
其他支持MCP的应用 📱

🛠️ 可用工具

1. get_ui_coordinate

功能: 在截图中定位指定UI元素的坐标

输入参数:

image: 截图文件
task: 要查找的UI元素描述（如"登录按钮"、"搜索框"等）

返回结果:

标记图片: 高亮显示检测到的UI元素
坐标列表: 精确的像素坐标位置
结果文本: 详细的检测结果描述

使用示例:

请帮我在这个截图中找到"提交"按钮的位置

2. clear_interface

功能: 清除界面所有输入和输出内容

使用场景:

重置界面状态
清理历史数据
准备新的检测任务

🚀 快速开始

1. 配置MCP客户端

将上述配置添加到你的MCP客户端配置文件中

2. 重启客户端

重启Claude Desktop或其他MCP客户端以加载配置

3. 开始使用

在对话中直接描述需要定位的UI元素：

"请帮我在这个网页截图中找到登录按钮的坐标"

🔧 技术规格

运行环境

框架: Gradio + FastAPI
协议: Model Context Protocol (MCP) 2025-06-18
Python版本: 3.11+ (线上环境: Python 3.11)
传输模式: HTTP-first (自动回退)

依赖版本

mcp==1.10.1
gradio[mcp]==5.43.1
fastapi==0.115.14
uvicorn[standard]==0.35.0
python-dotenv==1.1.1
requests==2.32.4
Pillow==10.4.0

API端点

MCP服务: /gradio_api/mcp/
Web界面: / (可选，用于直接访问)

📊 性能特点

✅ 高精度: 基于先进的计算机视觉算法
⚡ 快速响应: 优化的模型推理速度
🔄 稳定可靠: 24/7在线服务保障
🌍 全球可访问: 支持HTTPS安全连接

🐛 故障排除

常见问题

Q: 连接失败怎么办？
A: 检查网络连接，确保可以访问 https://hahaaa-locate-ui.ms.show

Q: 找不到工具？
A: 确认MCP客户端配置正确，并重启客户端

Q: 检测精度不理想？
A: 尝试提供更清晰的截图和更具体的元素描述

错误代码

RequestContext error: 服务正在更新，请稍后重试
TaskGroup error: 网络连接问题，检查网络状态
Tool not found: 配置问题，检查MCP配置是否正确

📚 更多资源

MCP官方文档: https://modelcontextprotocol.io/
Gradio官方文档: https://gradio.app/
项目源码: 基于开源技术构建

📝 版本信息

当前版本: 1.0.0
MCP协议版本: 2025-06-18
最后更新: 2025年8月

---🎯 让AI更智能地理解和操作用户界面！

原文中的技术文档内容未提供，因此我将基于您给出的标题创建一个示例性的翻译框架。如果您能提供具体的英文技术文档内容，我可以帮助您进行准确翻译。

假设的技术文档内容如下：

Introduction

Welcome to the guide on making AI smarter at understanding and interacting with user interfaces. This document will cover the basics of how we can train models to recognize UI elements, understand their context, and perform actions as a human would.

Getting Started

To begin, ensure you have the following installed:

Python 3.8 or higher
Pillow for image processing
OpenCV for advanced image operations

bash
pip install pillow opencv-python

Understanding UI Elements

The first step in our journey is to teach the AI to identify different UI components. We use a combination of computer vision techniques and machine learning algorithms to achieve this. For example, using OpenCV, we can detect buttons, text fields, and other interactive elements on a screen.

Example Code

Here's a simple script that uses OpenCV to find and highlight buttons in an image:

python
import cv2
import numpy as np

def find_buttons(image_path):
img = cv2.imread(image_path)
gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)

# Use a simple threshold to find button-like areas
_, thresh = cv2.threshold(gray, 150, 255, cv2.THRESH_BINARY_INV)
contours, _ = cv2.findContours(thresh, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)

for contour in contours:
    x, y, w, h = cv2.boundingRect(contour)
    if w > 50 and h > 50:  # Filter out small objects
        cv2.rectangle(img, (x, y), (x+w, y+h), (0, 255, 0), 2)

cv2.imshow('Detected Buttons', img)
cv2.waitKey(0)
cv2.destroyAllWindows()

find_buttons('path_to_image.jpg')

Training Your Model

Once your AI can reliably detect UI elements, the next step is to train it to understand what these elements mean and how they should be interacted with. This involves collecting a dataset of UI interactions and training a model using deep learning frameworks like TensorFlow or PyTorch.

For more information on building datasets and training models, refer to the official TensorFlow documentation.

Conclusion

By combining traditional computer vision methods with modern machine learning, we can create AIs capable of navigating and interacting with complex user interfaces just like humans do. As technology advances, so too will the capabilities of these systems, opening up new possibilities in automation and accessibility.

请提供具体需要翻译的内容，以便我能为您提供更准确的帮助。

查看源码项目主页