Midscene x UI-TARS，UI 自动化的开源模型方案

avatar
前端 @字节跳动 Web Infra

就在昨天，字节跳动开源了 UI-TARS 模型。UI-TARS 是一种原生图像界面代理（Native GUI Agent）模型，能够将屏幕截图和自然语言指令作为输入，准确预测出完成指令的下一步操作，帮助用户操作 UI 界面。UI-TARS 的名字来源于电影星际穿越电影的 TARS 机器人，预示着它具备高度的智能和自主思考能力。

许多开发者可能还记得，Web Infra 团队在 2024 年开源了 Midscene.js 框架，它支持接入 GPT-4o 等大参数模型，提供了网页自动化操作及测试的能力。

现在我们可以高兴地宣布：Midscene.js 与 UI-TARS 强强联合，已经完成了接入工作！随着新模型引入，Midscene 的各方面能力都得到了显著增强：支持目标驱动、兼容画布操作、允许私有化部署、执行效率跃升等等，开发者将能明显感受到其中的变化。

这里展示一些 Midscene.js 接入 UI-TARS 模型后的 Show Case，开发者也可以在自己的本地环境中完整复现。

案例一： 一条指令完成 Twitter 发布

twitter-by-midscene.gif

案例二：用 JS 代码驱动编排任务，搜集周杰伦演唱会的信息，并写入 Google Docs

google-doc-automation.gif

下面我们将为大家展开讲解：

  1. 起源：Midscene.js 使用通用大模型执行 UI 自动化

  2. 使用通用大模型驱动 UI 界面的原理和瓶颈

  3. UI-TARS 是如何进行提升 UI 自动化体验的

  4. Midscene.js 的接入样例与教程

  5. 接入 UI-TARS 后，我们对 UI 自动化的思考

起源：Midscene 使用通用大模型执行 UI 自动化

OpenAI 在 2023 年 9 月份推出了 GPT 4V、2024 年 5 月份推出了 GPT 4o。通用大语言模型的能力不再局限于文本，在图片理解、音频理解等领域表现的越来越出色，用多模态大模型来执行 UI 自动化也变得可行。用自然语言维护自动化脚本的方式将极大提升测试用例的可维护性和编写体验。

由此，我们开始了 Midscene.js 项目的建设和开源 ( github.com/web-infra-d… )。Midscene.js 项目提供了几个核心 API：

  • aiAciton：通过自然语言驱动 AI 大模型，在当前页面状态下进行一系列操作后逼近人类的指令目标
  • aiQuery：通过自然语言提取页面信息并处理成特定结构的信息
  • aiAssert：通过自然语言来判断页面状态是否符合某种状态

同时，Midscene.js 还发布了浏览器插件供开发者进行零代码体验：midscenejs.com/zh/quick-ex…

使用通用大模型驱动 UI 界面的原理和瓶颈

在迭代了几个月之后，我们发现虽然通用大模型可以完成常见任务，但它也存在一些显著的瓶颈。

瓶颈 1：需要工程手段配合提取坐标

为了执行用户指令，我们需要提取特定元素的坐标信息。然而，通用大模型通常缺乏这种精确的数值理解能力。

因此，Midscene 采用了 Javascript 工程技术，将元素的坐标和类型进行提取。此外，我们还对提取出的元素信息进行截图标注。之后，标注后的图像与元素描述一同发送给大模型，由大模型返回期望操作的元素 ID。这种方法有效地规避了数值理解的问题，从而实现了精准的 UI 操作。

但是，这种方法显然并不完美。例如，一些 CSS 属性可能无法准确地描述元素的层级。此外，Canvas 场景也无法进行详细的提取。

image.png

瓶颈 2：token 量消耗偏大，造成费用与性能损耗

如上文所述，我们需要同时发送图片信息与元素描述，造成模型调用的过程需要消耗大量 token，这对接口性能、AI 服务费用都造成了明显的不利影响。

瓶颈 3：数据安全风险

为了确保效果的稳定性，开发者一般需要在 Midscene.js 中连接商业大模型服务。这对于许多业务来说是一个障碍，因为他们常常无法将内部系统和后台数据对外发送，从而无法使用 UI 自动化服务。

瓶颈 4：目标驱动的规划（Target-driven Planning）不稳定

通用大模型在处理目标驱动场景时，其理解力往往不佳。为了解决这一问题，我们通常需要开发者提供详细的自然语言说明操作步骤（即以步骤为驱动），然而，这也相应地增加了开发者的负担。

例如，使用“点一杯无糖奶茶”这样的指令，相比更为详细语言描述：“点开茉莉奶茶，点击无糖，向下滑动，点击加入购物车...” 大模型在后者的稳定性上表现更好。

UI-TARS 模型 - Native GUI Agent Model

在上文中，我们提到了传统大模型直接应用在 GUI agent 上的诸多问题，那么有没有更漂亮的解法呢？有，那就是 UI-TARS!

UI-TARS 基于通用多模态语言模型，面向智能 UI 交互领域做了定向的训练，它在 GUI agent 领域能发挥的表现要远好于其他通用模型或 GUI 模型。

图片来自：UI-TARS: Pioneering Automated GUI Interaction with Native Agents - Figure 2

UI-TARS 模型将人类指令、屏幕截图、之前的 Action 作为自注意力机制的一部分，让模型能够充分的感知到：人类目标指令、为完成人类指令的过程中已经执行了哪些事件、当前的屏幕状态，从而更好的推理出下一步的执行事件。

UI-TARS 核心能力中包括了四个核心部分，用于提升 GUI 任务规划过程中的准确性：

  • Perception：用于感知并理解和描述屏幕截图中的内容

  • Action：统一动作事件，使系统能够执行多种交互操作，并支持复杂任务的自动化

  • System-2 Reasoning：让模型能力能够充分的思考、反思提升 GUI 任务准确性

  • Learning from Prior Experience：UI-TARS 的“从经验中学习”模块解决了 GUI 操作数据稀缺的问题，通过长期记忆和动态学习机制，使系统能够逐步积累知识、优化行为，并扩展到更广泛的任务领域。

图片来自：UI-TARS: Pioneering Automated GUI Interaction with Native Agents - Figure 4

UI-TARS 模型在 UI 自动化场景的优势

UI-TARS 模型帮助 Midscene.js 实现了一些架构级的提升：

  • 从步骤驱动进化为目标驱动，即只需要提出目标，模型可以不断推理和行动从而逼近目标

  • 模型具备反思、纠错能力

  • Token 消耗量减少，只需要传递图片，提升推理速度

  • 无需提取元素信息提取，能够有效应对画布、桌面等多种场景

  • 模型开源，提供了 7B、72B 参数（2B 模型也即将推出并开源）GUI 专有模型，速度和数据隐私都得到了极大的提升

局限性

UI-TARS 模型并不完美，它也存在局限性。当前，UI-TARS 在 GUI 任务中尚无法实现百分之百的执行正确率。如任务步骤超过 12 个时，模型可能产生误判。此外，模型在识别关键性决策和将控制权交还给人类时，能力设计仍显不足。这些问题有待 UI-TARS 在后续新版本发布中逐步解决。

在 Midscene.js 中接入 UI-TARS

完整的配置讲解： midscenejs.com/zh/choose-a…

使用 Midscene + UI-TARS 模型你需要进行以下的准备工作：

  1. 确保已经安装了 Midscene 最新版的 Chrome 插件、或者 v0.10 版本以上的 Midscene.js SDK
  2. 使用 UI-TARS 模型部署一个推理服务，详见： github.com/bytedance/U…
  3. 新增一个环境变量参数
MIDSCENE_USE_VLM_UI_TARS=1

如何在 Midscene.js 浏览器插件体验 UI-TARS

OPENAI_BASE_URL='' #配置为使用你部署或者临时体验的推理服务
OPENAI_API_KEY='' # 配置对应推理服务的密钥
MIDSCENE_USE_VLM_UI_TARS=1 # 使用 UI-TARS 模型

  • 开始体验

如何用代码集成 Midscene.js

如果你希望完成更复杂和自动化的任务，可以使用 Midscene 提供的 YAML 脚本和 JavaScript SDK。这种方式可以很好地解决当 UI-TARS 模型在执行繁琐任务时，因步骤过多而导致的性能和稳定性下降问题。此外，通过 Midscene 提供的独特报告设计，您能轻松完成对 AI 执行过程的调试工作。

  • Yaml 声明式 GUI 控制

  • Playwright、Puppeteer 集成，可用于端到端测试

对 UI 自动化的思考

是否需要超大参数量的多模态大模型？

这个答案在 UI-TARS 的探索上已经得到了回答： 可以不需要。

通过提供更小参数规模、将通用模型转变为专业模型，这种设计不仅提升了任务的准确性，还显著提高了速度。在设备网络通信损耗可忽略，并且算力充足的情况下，UI-TARS 模型在常规的 Web 页面或桌面应用中推理速度可以在 0.5s～2s 内完成。这一速度基本与人类速度相当，更不必说在某些对于延迟要求更低的场景下（如自动化测试），这个速度已经完成可以接受了。

AI 执行关键关键任务时可信度怎么样?

这更类似于一个交互的问题，而不是一个纯粹的技术问题。在某些任务中，我们可能无需让 AI 100% 取代人类的决策和执行过程，而应在关键决策时让人类参与其中。

例如，在商品购物过程中，AI 可以负责商品规格的筛选，但在最终支付确认阶段，需要人类介入。一个专业术语称其为 Human in Loop，即让人类扮演副驾驶员的角色，同时具备随时接管成为主驾驶的权限。

参考

avatar
文章
阅读
粉丝