第2章：视觉 Grounding 与 VLA 架构
Set-of-Marks、Coordinate vs Action grounding、DOM-aware vs Vision-only、UI-TARS 统一 VLM 架构、训练数据 4 类任务
让 LLM”看屏幕点鼠标”听起来简单——但 LLM 看完一张 1920×1080 的截图,怎么准确说出”那个登录按钮在 (1234, 567) 坐标”?这就是视觉 Grounding(grounding 即”将语言锚定到视觉位置”)。本章把 Computer Use 的”基础设施”讲清:Set-of-Marks 思想、Coordinate vs Action grounding 两种范式、DOM-aware 与 Vision-only 路线、Vision-Language-Action(VLA)统一架构,以及 UI-TARS 这套”native VLM agent”的设计精髓。
📑 目录
- 1. 视觉 Grounding 的核心问题
- 2. Set-of-Marks(SoM)思想
- 3. Coordinate Prediction vs Action Grounding
- 4. DOM-aware vs Vision-only
- 5. Vision-Language-Action(VLA)架构
- 6. UI-TARS:native VLM agent 范式
- 7. 工业辅助工具:OmniParser、SeeClick
- 自我检验清单
- 参考资料
1. 视觉 Grounding 的核心问题
1.1 痛点
LLM 看到一张截图,理解内容比较容易(GPT-4V 早就能做),但说出元素的精确坐标长期是难题:
用户问:"点登录按钮"
GPT-4o 看截图:"我看到右上角有'登录'按钮"
→ 但不知道精确 (x, y) 坐标
→ 没法发 click 事件
1.2 三种解法
| 方法 | 思路 | 工程难度 |
|---|---|---|
| 直接预测坐标 | LLM 输出 “click(120, 340)“ | 高(精度难) |
| Set-of-Marks | 截图先标号,LLM 选号 | 中 |
| DOM-aware | 给 LLM 带 selector 的元素列表 | 低(只在 web) |
主流是 SoM + DOM-aware 混合——下面分别讲。
2. Set-of-Marks(SoM)思想
2.1 核心做法
Yang et al. 2023 提出:在截图上给每个 UI 元素打一个标号(数字 / 字母),LLM 只需说”我点 7 号”即可。
原图:
[Login] [Sign Up] [Cart 🛒]
加 SoM 标记:
[1: Login] [2: Sign Up] [3: Cart 🛒]
LLM 看到打标后的图:
"我要登录,点 1 号"
后台:1 号对应坐标 (50, 30) → 发 click(50, 30)
2.2 优势
- 绕开坐标精度问题:LLM 不需要精确数字,只需选择
- 任意 VLM 都能用:不需要专门 fine-tune
- 天然 attention map:LLM 输出的”标号”自然对齐元素
2.3 流程
Screenshot
↓
UI Element Detection(用 ML / DOM / accessibility tree)
↓
为每个元素生成 bbox + 标号
↓
将标号绘制到截图上
↓
VLM 看带标号的截图,做决策
↓
"点 7 号" → 后台查表 → click 对应坐标
2.4 SoM 的局限
- 小元素拥挤:界面元素太多时,标号挤在一起
- 依赖 detection 准确性:漏检元素 → LLM 选不到
- 标号方案:数字 vs 字母 vs 符号,各有优劣
3. Coordinate Prediction vs Action Grounding
3.1 两种范式
Coordinate Prediction:让 VLM 直接输出像素坐标:
output: <click>120, 340</click>
适合端到端训练的专用 VLM(UI-TARS、SeeClick、CogAgent 等)。
Action Grounding(配合 SoM):VLM 选择 mark 编号,后台映射:
output: <click>mark_7</click>
后台:mark_7 → coordinate (120, 340)
适合通用 VLM(GPT-4o、Claude)无需 fine-tune。
3.2 优劣对比
| 维度 | Coordinate Prediction | Action Grounding(SoM) |
|---|---|---|
| 模型要求 | 必须 fine-tune | 任意 VLM |
| 精度 | 训练好可达 5-10px | 100%(标号映射准) |
| Latency | 1 次 VLM 调用 | 多 1 次 detection |
| Generalize | 训练域内强 | 跨场景稳定 |
| 工业落地 | UI-TARS、CogAgent | OmniParser + GPT-4o |
🍎 2026 趋势:两条路线都跑得通——大公司选 native(自训 VLM),小团队用 SoM(节省模型成本)。
4. DOM-aware vs Vision-only
4.1 三种”感知”形态
Browser 场景的 3 种 input:
① 纯 screenshot(vision-only)
② 纯 DOM tree(text-only)
③ Screenshot + DOM(hybrid)
4.2 对比
| 维度 | Vision-only | DOM-only | Hybrid |
|---|---|---|---|
| 适用范围 | 任何 GUI(包括 desktop) | 只 web | 只 web |
| 元素精确度 | 低(像素噪声) | 高(selector 直接) | 高 |
| 文本可读性 | 中(OCR 错误) | 高(原文) | 高 |
| Token 消耗 | 高(图大) | 中 | 极高(图+DOM) |
| 失败场景 | iframe、canvas | iframe 内、shadow DOM | iframe |
4.3 实战选择
| 场景 | 推荐 |
|---|---|
| Browser 主流任务 | Hybrid(browser-use 默认) |
| Desktop / Mobile | Vision-only(没 DOM) |
| 特殊 web (canvas-heavy) | Vision-only |
| 简单 web 表单 | DOM-only(成本低) |
4.4 browser-use 的 Hybrid 实现
# browser-use 的 input 给 LLM:
{
"screenshot": <base64 image>,
"interactive_elements": [
{"index": 1, "tag": "button", "text": "Login", "bbox": [50, 30, 120, 60]},
{"index": 2, "tag": "input", "placeholder": "Email", "bbox": [...]},
...
],
"url": "https://...",
}
# LLM 输出:
{"action": "click", "index": 1}
# 后台:
page.click(elements[1].selector)
LLM 看图理解 + 用 index 引用 DOM 元素 = 两全其美。
5. Vision-Language-Action(VLA)架构
5.1 概念起源
VLA(Vision-Language-Action)源于机器人——视觉感知 + 语言推理 + 物理动作。Computer Use 把它搬到 GUI:
Vision: screenshot
Language: reasoning + planning
Action: click / type / scroll
5.2 三种 VLA 架构
架构 1:Cascade(级联)
Vision Model(BLIP / OmniParser)
↓ 输出元素列表 + 文本
Language Model(GPT-4o)
↓ 推理
Action Generator(规则)
简单,但信息丢失多(VLM 描述 → text → LLM 只看 text)。
架构 2:Multimodal LLM
GPT-4o / Claude(同时看图 + 文)
↓ 直接输出 action
主流方案。但通用 VLM 在 GUI 任务上精度不够——这是为什么有专用 VLA。
架构 3:Native VLM Agent(UI-TARS 范式) ⭐
专门为 GUI 训练的 VLM
├── perception(看屏)
├── reasoning(决策)
├── grounding(精确坐标)
└── memory(历史 trajectory)
全部统一在一个模型里
UI-TARS 是 Native VLA 的代表——下面详讲。
6. UI-TARS:native VLM agent 范式
arXiv 2501.12326,ByteDance Seed,2025-01
6.1 核心思想
不要用通用 VLM 加 prompt 工程——为 GUI 训练专用 VLM,统一 perception / reasoning / grounding / memory。
6.2 4 大设计
① 端到端 GUI 训练数据
UI-TARS 用 数百万真实 GUI 截图 + action 标注 训练:
- 网页(Common Crawl 大量截图 + DOM)
- 桌面(VMware、Docker 镜像中的应用)
- 移动 app(Android 模拟器)
② Set-of-Marks 训练任务
UI-TARS 把 SoM 作为训练阶段的核心任务之一:
训练任务集:
- Element description("描述这个元素")
- Dense captioning("描述图中所有元素")
- State transition("点击后会发生什么")
- QA("这个表单有几个必填项")
- Set-of-Marks("第 5 号是什么")
模型在训练里反复见到 SoM 标记,推理时无需后处理就能理解 mark。
③ Native Coordinate Prediction
UI-TARS 直接输出像素坐标(无需 SoM):
Input: screenshot + "点登录按钮"
Output: action("click", x=120, y=340)
精度:在 OSWorld 上比 GPT-4o + SoM 强 5-10%。
④ Memory 嵌入 trajectory
trajectory 中的历史 screenshot 和 action 直接作为 model input,让模型有长期记忆(不需要外接 memory store)。
6.3 性能数据
UI-TARS-1.5(7B 参数,2025-04 开源):
| Benchmark | UI-TARS-1.5(7B) | GPT-4o + 工程 |
|---|---|---|
| OSWorld | 42% | 38% |
| WebVoyager | 80% | 75% |
| AndroidWorld | 50% | 45% |
🌟 关键:7B 开源模型超过 GPT-4o(估 200B+) 在 GUI 任务——专用模型 + 训练数据 = 效率碾压。
6.4 工业意义
UI-TARS 引爆了”native GUI VLM”潮:
- ByteDance UI-TARS-2(2025-Q4)
- Anthropic 内部估计也用类似训练
- OpenAI Operator / Computer Use 模型背后大概率是 GPT-4o 的 GUI fine-tune
- 中国系:CogAgent(智谱)、Aria-UI、ShowUI 等
7. 工业辅助工具:OmniParser、SeeClick
7.1 OmniParser(微软)
screen → SoM 自动标注,2024-12 v2 发布
输入 screenshot,输出:
- 每个 UI 元素的 bbox
- 类型(button / input / link / text / icon)
- 文本(如有)
- semantic description
from omniparser import OmniParser
parser = OmniParser()
result = parser.parse("screenshot.png")
# result.elements:
# [{"id": 1, "bbox": [50, 30, 120, 60], "type": "button", "text": "Login", ...}, ...]
配合 GPT-4o + SoM 可以达到 native VLM 80% 的性能,且无需 fine-tune。
7.2 SeeClick
专门为”看图点击”训练的小模型
10B 参数,只做一件事:给 image + 文字描述,预测 click 坐标。
Input: screenshot + "点登录按钮"
Output: <click>120, 340</click>
可以作为通用 VLM 的”补丁”——通用 VLM 决定语义,SeeClick 提供精确坐标。
7.3 选型决策
你的场景?
│
├─ 想自跑模型,要 SOTA → UI-TARS-1.5/2(开源 7B)
│
├─ 用 GPT-4o / Claude API,要好坐标 → OmniParser + SoM
│
├─ 复杂语义 + 精确坐标 → 通用 VLM + SeeClick 补丁
│
└─ 简单 web 任务 → DOM selector(不用视觉模型)
✅ 自我检验清单
- 核心痛点:能解释为什么”LLM 看截图但说不出精确坐标”是难题
- 三种 grounding 方法:能列出 Coordinate / SoM / DOM-aware
- SoM 流程:能默写”detect → 标号 → VLM 选 → 后台映射”
- Coordinate vs Action:能对比两者的优劣和适用场景
- DOM-aware vs Vision-only vs Hybrid:能用 5 个维度对比
- browser-use Hybrid 输入:能写 LLM input 的 JSON 结构
- VLA 三种架构:能区分 cascade / multimodal / native
- UI-TARS 4 大设计:能默写训练数据 / SoM / native coordinate / memory
- UI-TARS 性能反超:能解释为什么 7B 开源能赢 200B+ 的 GPT-4o
- OmniParser / SeeClick 用途:能解释两者各补什么
- 选型决策:面对 4 个场景,能给出推荐
📚 参考资料
论文 ⭐
- Set-of-Marks (Yang et al., 2023):arXiv 2310.11441
- UI-TARS (ByteDance, 2025):arXiv 2501.12326
- OmniParser (Microsoft, 2024):arXiv 2408.00203
- SeeClick:arXiv 2401.10935
- CogAgent (Zhipu, 2023):arXiv 2312.08914
- ShowUI:arXiv 2411.17465
代码
- UI-TARS GitHub:github.com/bytedance/UI-TARS
- UI-TARS-desktop:github.com/bytedance/UI-TARS-desktop
- OmniParser:github.com/microsoft/OmniParser
- SeeClick:github.com/njucckevin/SeeClick
综合解读
- UI-TARS open-source release:ByteDance Seed Blog
- UI-TARS overview:VentureBeat
- MarkTechPost: Computer-Use Agents Explainer:博文