多模态 Agent 与 Computer-Use(毕业项目)

文档摘要

多模态 Agent 与 Computer-Use(毕业项目) 本节摘要:2026 年的前沿产品是一个能读截图、点按钮、浏览网页 UI、填表单、端到端完成工作流的多模态 agent。SeeClick 与 CogAgent(2024)证明了 GUI 定位原语;Ferret-UI 加了移动端;ChartAgent 引入了图表的视觉工具使用;VisualWebArena 与 AgentVista(2026)是前沿追赶的基准——连 Gemini 3 Pro 与 Claude Opus 4.7 在 AgentVista 的硬任务上也只有约 30%。这个毕业项目把第 12 章的每条线拉到一起:感知(高分辨率 VLM)、推理(带工具使用的 LLM)、定位(坐标输出)、长程记忆与评估。

多模态 Agent 与 Computer-Use(毕业项目)

本节摘要:2026 年的前沿产品是一个能读截图、点按钮、浏览网页 UI、填表单、端到端完成工作流的多模态 agent。SeeClick 与 CogAgent(2024)证明了 GUI 定位原语;Ferret-UI 加了移动端;ChartAgent 引入了图表的视觉工具使用;VisualWebArena 与 AgentVista(2026)是前沿追赶的基准——连 Gemini 3 Pro 与 Claude Opus 4.7 在 AgentVista 的硬任务上也只有约 30%。这个毕业项目把第 12 章的每条线拉到一起:感知(高分辨率 VLM)、推理(带工具使用的 LLM)、定位(坐标输出)、长程记忆与评估。

学习目标

阅读完本节,你应当能够:

设计一个多模态 agent 循环:感知 → 推理 → 行动 → 观察 → 重复。
搭一个 VLM 能以 JSON 发出的 GUI 定位输出 schema(点击坐标、输入文本、滚动、拖拽)。
对比纯截图 agent、无障碍树 agent、混合 agent。
在一个小的 VisualWebArena 切片上搭多模态 agent 基准评估。

一、问题与直觉

一个订票网站工作流:「给我找张 4 月 15 日去东京的机票,过道座,800 美元以下,订下来。」

一个多模态 agent 需要:

给浏览器截图。
把截图 + URL + 目标解析成一个计划。
发出一个结构化动作:点击(在 x,y)、输入「Tokyo」(在元素 E)、向下滚动、选择(单选按钮)。
把动作应用到浏览器。
观察新状态(下一张截图)。
重复直到任务完成。

每步都是一次多模态 VLM 调用,VLM 输出必须是可解析的 JSON。错误跨步累积,所以恢复很重要。

GUI 定位——原语

GUI 定位是:给定一张截图与一条自然语言指令,输出要点击的 (x, y) 坐标(或其他动作)。

SeeClick(arXiv:2401.10935)是首个大规模开源结果:在合成 + 真实 GUI 数据上微调 VLM,把坐标当纯文本 token 输出,能用。
CogAgent(arXiv:2312.08914)加了 1120×1120 高分辨率编码以处理密集 UI,网页导航约 84%。
Ferret-UI(arXiv:2404.05719)聚焦移动 UI,集成 iOS 无障碍数据。

输出格式通常是 JSON:


{"action": "click", "x": 384, "y": 220, "element_desc": "Search button"}

element_desc 帮助恢复:若坐标在截图间漂移,语义提示让系统重新定位。

动作 schema

典型动作 schema 有 6~10 种动作类型:

click:(x, y)
type:(text, x?, y?)
scroll:(direction, amount)
drag:(x0, y0, x1, y1)
select:(option_index)
hover:(x, y)
navigate:(url)
wait:(ms)
done:(success, explanation)

agent 每步发一个动作,浏览器包装器执行并返回新状态。

纯截图 vs 无障碍树

两种输入模式:

纯截图:全图,无结构信息,最通用,任何应用都能用。
无障碍树:结构化 DOM / iOS 无障碍信息,定位可靠得多,在树可用处有效。
混合:两者都用,树当原子动作的可靠定位器,截图当语义上下文。

生产 agent 在可能时用混合。浏览器自动化(Selenium + 无障碍)总有树;桌面应用有时有。

长程记忆

一个 20 步工作流产 20 张截图,VLM 上下文很快填满。三种压缩策略:

摘要链:每 5 步后总结发生了什么,丢老截图。
跳帧:保留首、尾与每第 3 张截图。
工具记录日志:执行动作,保留做了什么的文本日志;不回看老截图。

Claude 的 computer-use API 用日志模式,更简单更可靠。

视觉工具使用

ChartAgent(arXiv:2510.04514)引入图表理解的视觉工具使用:裁剪、放大、OCR、调外部检测。agent 能输出「裁剪到区域 (100, 200, 300, 400) 然后调 OCR」作为工具调用,工具返回文本,VLM 继续推理。

这个模式可推广:set-of-mark 提示、区域标注、外部检测工具都契合同一个「输出工具调用、收结构化响应」的 schema。

2026 年的基准

ScreenSpot-Pro:约 1000 张网页截图上的 GUI 定位。开源 SOTA Qwen2.5-VL-72B 约 85%,前沿约 90%。
VisualWebArena:端到端网页任务(购物、论坛、分类)。开源 SOTA 约 20%,Gemini 3 Pro 约 27%。
AgentVista(arXiv:2602.23166):2026 最难基准,12 个领域的真实工作流。前沿模型 2740%,开源 1020%。
WebArena / WebShop:旧基准,已被前沿饱和。

为什么仍难

agent 性能瓶颈:

细粒度视觉定位:「点那个小 X」在移动分辨率上常失败。
长程规划:10 个动作后,agent 偏离目标。
错误恢复:点击失败(点错按钮)时,检测 + 恢复几乎没有训练数据。
跨页上下文:在标签页或长表单间跳转会丢状态。

研究方向:记忆架构、显式重规划、多模态验证(截图匹配验证动作成功)。

毕业项目实战

毕业项目任务:搭一个 computer-use agent,它:

读订票网站 mock 页面的 HTML + 截图。
规划多步序列:搜索 → 选择 → 填表 → 提交。
发出匹配动作 schema 的 JSON 动作。
在固定的 10 任务切片上评估。

课程提供易扩展成真实浏览器的脚手架代码。

二、从零实现

code/main.py 是毕业项目脚手架:

动作 schema JSON 定义(10 种动作)。
以 dict 形式表示的 mock 浏览器状态。
agent 循环骨架:接收状态、发动作、应用、循环。
10 任务迷你基准(合成页面)测端到端成功率。
动作失败时的错误恢复钩子。

动作 schema


ACTION_SCHEMA = {
    "click":   {"x": int, "y": int, "element_desc": str},
    "type":    {"text": str, "x": int, "y": int},
    "scroll":  {"direction": "up|down", "amount": int},
    "drag":    {"x0": int, "y0": int, "x1": int, "y1": int},
    "select":  {"option_index": int},
    "hover":   {"x": int, "y": int},
    "navigate":{"url": str},
    "wait":    {"ms": int},
    "screenshot_region": {"box": [int, int, int, int]},   # 裁剪+放大工具
    "done":    {"success": bool, "explanation": str},
}

agent 循环


def agent_loop(goal, browser, vlm, max_steps=30):
    history_log = []                          # 文本日志, 不回看老截图
    for step in range(max_steps):
        screenshot = browser.screenshot()
        action = vlm.plan(goal, screenshot, history_log)   # 发 JSON 动作
        if action["action"] == "done":
            return action["success"]
        result = browser.execute(action)      # 应用动作
        if result.failed:
            action = vlm.recover(goal, screenshot, result.error)  # 错误恢复
            browser.execute(action)
        history_log.append(summarize(action, result))   # 摘要链压缩
    return False

长程记忆:摘要链


def compress_history(screenshots, actions, keep=4):
    # 保留最近 keep 张截图, 其余压成文本摘要
    live = screenshots[-keep:]
    summary = llm.summarize(actions[:-keep])     # 老步骤变文本
    return {"live_screenshots": live, "summary": summary}

💡 毕业项目的精髓:把第 12 章所有概念缝合成一个循环——高分辨率 VLM(感知)+ LLM 工具使用(推理)+ JSON 坐标输出(定位)+ 摘要链(长程记忆)+ 错误恢复。这正是 Claude computer-use、Manus、OpenAI Operator 等产品的工程骨架。

三、框架对比

SeeClick/CogAgent:GUI 定位原语,坐标当文本 token 输出,1120 高分辨率。
Ferret-UI:移动 UI,集成 iOS 无障碍数据。
ChartAgent:视觉工具使用(裁剪/放大/OCR/检测),mid-plan 工具调用。
Claude computer-use / OpenAI Operator / Manus:生产级 agent,日志模式记忆,混合截图+无障碍树。
Qwen2.5-VL(JSON agent):ScreenSpot 84%,JSON 工具调用开箱即用。

工程取舍:通用计算机使用用 Claude 4.7 computer-use;开源与 GUI 定位用 Qwen2.5-VL/SeeClick;移动用 Ferret-UI;要工具使用集成用 ChartAgent 模式;长程任务用日志记忆 + 摘要链。

四、可复用产物

本节产出 outputs/skill-multimodal-agent-designer.md。给定一个 computer-use 产品(领域、动作集、评估目标),它设计完整 agent 循环、记忆策略、定位模式与预期基准分。

五、练习

扩 schema:给动作 schema 加一个 screenshot_region 工具(裁剪 + 放大),哪些任务受益?
读 AgentVista:读 AgentVista(arXiv:2602.23166),描述最难的任务类别,以及前沿模型为何仍失败。
记忆压缩:设计一个摘要链,实时保留 ≤4 张截图,任意数量记日志。
错误恢复:搭一个错误恢复钩子:动作失败时(按钮找不到),agent 下一步做什么?
对比:在 10 个网页任务上对比纯截图 Claude 4.7 与混合截图 + 无障碍树 Qwen2.5-VL,各自在哪些任务上胜?

本节要点回顾

agent 循环:感知 → 推理 → 行动 → 观察 → 重复,每步一次 VLM 调用,输出 JSON。
GUI 定位原语:SeeClick/CogAgent 把坐标当文本 token 输出,Ferret-UI 加移动端。
动作 schema:6~10 种(click/type/scroll/drag/select/hover/navigate/wait/done),element_desc 助恢复。
三种输入:纯截图(通用)、无障碍树(可靠)、混合(生产默认)。
长程记忆:摘要链、跳帧、工具记录日志,Claude computer-use 用日志模式。
视觉工具使用:ChartAgent 的裁剪/放大/OCR/检测 mid-plan 调用。
2026 基准:ScreenSpot-Pro(定位)、VisualWebArena(端到端约 20%)、AgentVista(最难,前沿 27~40%)。
四大瓶颈:细粒度定位、长程规划、错误恢复、跨页上下文。
毕业项目:读 HTML+截图 → 规划 → JSON 动作 → 10 任务评估,脚手架易扩展成真实浏览器。
缝合全章:高分辨率 VLM + LLM 工具使用 + JSON 坐标 + 摘要链 + 错误恢复,即生产级 computer-use 的工程骨架。

恭喜你完成了第 13 章「多模态 AI」的全部 25 节。从最底层的 patch token 一路走到能操控计算机的多模态 agent,你已经具备了理解 2026 年任何一个多模态模型与产品的全部概念地基。下一章(第 14 章)将把这套多模态能力组装进更宏大的 agent 工程体系——工具使用、规划、记忆、多 agent 协作,让模型不仅能看能说,还能在真实世界里自主完成长程任务。