第2章：视觉 Grounding 与 VLA 架构

让 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(不用视觉模型)

✅ 自我检验清单

📚 参考资料

论文 ⭐

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:博文

搜索