---
title: locate_ui
canonical_url: "https://www.modelscope.cn/studios/hahaaa/locate_ui"
md_url: "https://www.modelscope.cn/studios/hahaaa/locate_ui.md"
repository: hahaaa/locate_ui
chinese_name: "UI定位（MCP&Agent挑战赛）"
last_updated: 2025-08-27
sdk_type: gradio
sdk_version: 5.42.0
downloads: 0
stars: 1
---

# locate_ui

> locate_ui - hahaaa 在 ModelScope 创建的在线 Demo。🎯 Locate UI - 智能UI坐标定位工具

hahaaa/locate_ui 是 ModelScope 魔搭社区上的在线可交互 Demo（创空间），基于 gradio 5.42.0 构建，中文名为「UI定位（MCP&Agent挑战赛）」。

- **Repository**: hahaaa/locate_ui
- **SDK**: gradio
- **SDK version**: 5.42.0
- **Downloads**: 0
- **Stars**: 1
- **Last updated**: 2025-08-27

Source: https://www.modelscope.cn/studios/hahaaa/locate_ui

---

# 🎯 Locate UI - 智能UI坐标定位工具

## 📖 项目简介

Locate UI 是一个基于 Gradio 的智能 UI 坐标定位工具，能够通过自然语言描述或图标匹配，在屏幕截图中精确定位目标UI元素的坐标位置。该工具特别适用于自动化测试、RPA应用和UI分析场景。

## ✨ 主要功能

- 🔍 **自然语言定位**: 通过文字描述快速定位UI元素（如"点击登录按钮"）
- 🖼️ **图标匹配定位**: 上传目标图标，自动在截图中找到匹配位置
- 📊 **可视化标注**: 自动在截图上标注找到的坐标点，直观显示定位结果
- 💾 **示例管理**: 内置丰富的示例数据，支持历史记录查看
- 🌐 **Web界面**: 基于Gradio的友好用户界面，支持文件上传和结果展示

## 🚀 快速开始

### 克隆项目

```bash
git clone https://www.modelscope.cn/studios/hahaaa/locate_ui.git
cd locate_ui
```

### 环境配置

1. 安装依赖包：
```bash
pip install gradio fastapi uvicorn python-dotenv requests
```

2. 创建 `.env` 文件：
```env
# 在项目根目录创建.env文件，配置相关环境变量
GRADIO_TEMP_DIR=temp
```

### 启动应用

```bash
python app.py
```

访问 `http://localhost:7860` 即可使用界面。

## 🛠️ 使用方法

### 方式一：自然语言描述定位

1. 上传屏幕截图
2. 在"UI元素描述"框中输入要定位的元素描述，如：
   - "点击搜索按钮"
   - "web browser icon"  
   - "登录输入框"
3. 点击"开始定位"获取坐标结果

### 方式二：图标匹配定位

1. 上传屏幕截图
2. 上传目标图标文件
3. 点击"开始定位"进行图标匹配

### 查看示例

- 点击"查看示例"可以浏览历史定位记录
- 支持按时间戳查看不同的定位案例
- 每个示例包含原始截图、标注结果和坐标数据

## 📁 项目结构

```
locate_ui/
├── app.py                 # 主应用文件，Gradio界面实现
├── mcp_utils.py          # 工具函数集合
├── .env                  # 环境变量配置
├── temp/                 # 临时文件存储目录
├── mcp_examples/         # 示例数据目录
│   ├── *.json           # 坐标数据文件
│   ├── *.json.bak       # 备份文件
│   └── */               # 对应的图片文件夹
└── README.md            # 项目说明文档
```

## 🔧 核心组件

### `app.py`
- **get_ui_coordinate()**: 主要的坐标定位函数
- **build_examples()**: 构建示例数据界面
- **Gradio界面**: 提供用户友好的Web交互界面

### `mcp_utils.py`
- **read_json()**: 读取JSON配置文件
- **get_files_with_extension()**: 获取特定扩展名文件
- **gallery_to_files()**: 处理图片画廊数据
- **upload_file()**: 文件上传处理

## 📊 数据格式

坐标定位结果采用JSON格式存储：

```json
{
    "timestamp": "20250619123456",
    "task_description": "点击搜索按钮",
    "coordinates": [[x1, y1], [x2, y2]],
    "image_path": "path/to/screenshot.jpg",
    "result_image": "path/to/annotated_result.jpg"
}
```

## 🎯 应用场景

- **自动化测试**: 快速定位测试页面中的UI元素
- **RPA开发**: 为机器人流程自动化提供精确的坐标定位
- **UI分析**: 分析界面布局和元素分布
- **辅助开发**: 帮助开发者快速获取UI元素坐标

## 🤝 贡献指南

欢迎提交Issue和Pull Request来改进这个项目！

## 📄 许可证

本项目采用 Apache License 2.0 许可证。

## 🔗 相关链接

- [ModelScope创空间文档](https://modelscope.cn/docs/%E5%88%9B%E7%A9%BA%E9%97%B4%E5%8D%A1%E7%89%87)
- [Gradio文档](https://gradio.app/docs/)

---

💡 **提示**: 如遇到问题，请查看示例数据了解正确的使用方式，或在Issues中反馈问题。