Midscene.js 接入 Qwen 2.5 VL - UI 自动化成本下降 80% !

avatar
前端 @字节跳动 Web Infra

🔥 先说结论

从 Midscene v0.12 开始，我们适配了千问 Qwen-2.5-VL 模型。

与 GPT-4o 相比，Qwen-2.5-VL 模型输出的结果正确性不变，并支持与更多类型的元素交互。最重要的是，运行成本可以降低 80% 以上！可谓 UI 自动化的又一个里程碑！

超高关注度背后的真实诉求

在 Midscene.js UI 自动化框架开源后，我们获得了大量关注。同时我们也收到了一些集中反馈（吐槽）：

  1. GPT-4o 效果靠谱，但接口网络延迟、合规性难以保障，且费用偏高

  2. 希望与 canvas 、 iframe 中的元素进行交互，但 GPT 模式无法支持

  3. 担心数据安全，期望有开源 AI 模型

  4. 虽有了 UI-TARS 开源模型，但部署困难，想接入现成的 API 服务 😂

  5. UI-TARS 模型太过“智能”，想要纯粹的步骤驱动能力

现在，随着 Midscene 接入 Qwen-2.5-VL 模型，上述问题都有了新的解法！

先看 Demo - 如何接入，效果比对

这里以阿里云百炼平台最大参数版本模型为例，配合 Midscene 样例项目中“在 ebay 网站搜索耳机”（puppeteer-demo/demo.ts）脚本，查看实战表现。

关键代码：

// 执行搜索操作
await agent.aiAction('type "Headphones" in search box, hit Enter');

npm run test 运行脚本后，查看报告回放，发现对应的操作都已经正确执行了。报告左上角展示了 qwen-vl mode 字样，表示已正确开启 Qwen 2.5 模型模式。

报告中同时展示了 token 消耗数据，我们来和 GPT-4o 模式进行对比：

Token (输入 + 输出)官方价格
gpt-4o5686 + 99$0.015 ~= RMB 0.11
Qwen 2.53710 + 143 (33% ⬇︎)RMB 0.012 (89% ⬇︎)

可见，这个场景下，模型运行效果一致，Qwen 让输入 token 的使用量下降了 35 %，单次花费更是惊人地下降了 89% ！

如何开启使用

  1. 部署 Qwen 2.5 VL 模型或在阿里云平台开通对应服务，创建 API key

  2. 升级 Midscene.js 版本到 v0.12.0 以上：

npm i @midscene/web@latest
  1. 配置环境变量，注意不要忘了 MIDSCENE_USE_QWEN_VL=1 这个开关：
OPENAI_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1"
OPENAI_API_KEY="sk-...."
MIDSCENE_MODEL_NAME="qwen-vl-max-latest"
MIDSCENE_USE_QWEN_VL=1

至此，你就可以开始尝试新模型了！

如果想在命令行实时查看接口消耗情况，增加这项配置即可：

MIDSCENE_DEBUG_AI_PROFILE=1

当然，所有这些配置项也同样可以在 Midscene.js 浏览器插件中进行零代码体验。插件文档见： midscenejs.com/zh/quick-ex…

详解 Midscene.js 适配新模型的特性

Qwen2.5-VL 是阿里通义千问团队在 2025 年 1 月底推出的最新旗舰视觉语言模型。它采用 ViT 加 Qwen2 的串联结构，使用多模态旋转位置编码（M-ROPE）技术，支持图像和视频的统一输入处理。在旗舰模型 Qwen2.5-VL-72B-Instruct 的测试中，它在一系列涵盖多个领域和任务的基准测试中表现出色，包括大学水平的问题、数学、文档理解、视觉问答、视频理解和视觉 Agent。

适配了 Qwen 之后，Midscene 获得了以下特性：

  • 坐标识别，解耦 DOM：Qwen 支持返回元素坐标，Midscene 将用户描述与截图直接送达模型层，不再引入 DOM 层转换。由此，Midscenne 可以与页面结构解耦，支持更多控件类型，如 Canvas 、iframe 等

  • 低成本：由于不需要传输 DOM 信息，和 gpt-4o 相比它可以节省 30% 到 50% 的输入 token，复杂场景下甚至更多。

  • 高分辨率支持：Qwen 2.5 VL 支持更高的分辨率输入，相比于 GPT 图片 2048 *768 的分辨率限制，Qwen 足以满足绝大多数 UI 自动化需求。

此外，Qwen 模型还有一些天生的优势，能准确匹配上 Midscene 的开发者需求：

  • 模型开源 有资源的开发者可以自行部署，以获得更好的安全性和性能表现

  • 提供 API 服务：阿里云百炼平台提供了现成的部署版本，且支持按 token 付费，可以快速接入

FAQ

我应该从哪个模型开始体验？

回答：不必在项目启动时纠结模型，直接选用最容易获得的模型服务即可。建议使用 Midscene.js 的浏览器插件 进行体验。

在完成脚本编写并产生更具体的优化需求后，你可以再尝试比较其他模型。

我先前已经用 Midscene 自定义模型配置接入了 qwen-vl，是否还需要关注这个变化？

在最新版本中，我们针对 Qwen 2.5 模型做了针对性的优化适配，通过 MIDSCENE_USE_QWEN_VL=1 开关启用对应代码。

所以你需要升级版本并打开此配置，以获得更佳体验。

附：Midscene 已支持的多种模型对比

加上此次新支持的 Qwen 2.5 ，Midscene 已支持了三种主流模型，我们已将详细讲解放在了官网文档中：midscenejs.com/zh/choose-a…

这里为大家做部分摘抄：

GPT-4o

特性

  • 易于上手：OpenAI 提供了非常友好的 API 接入，你只需要获取 API 密钥即可。
  • 表现平稳：它在交互（Action）、断言（Assertion）和查询（Query）方面表现均比较良好。

限制

  • 成本较高：Midscene 需要将截图和 DOM 树一起发送给模型，这会导致 token 消耗较高。例如，在 1280x800 分辨率下，eBay 首页需要 6000 个 token 输入，搜索结果页面则需要 9000 个 token 输入。因此，它的成本会显著高于其他模型。

  • 内容限制：它无法处理跨域的 <iframe /> 或 <canvas /> 标签中的内容。

  • 分辨率限制：它无法处理分辨率超过 2048x768 的图像。超尺寸输入会导致输出质量下降。

  • 小图标识别能力较差：它可能无法准确定位小图标。

Qwen 2.5 VL

特性

  • 低成本：Midscene 不需要发送 DOM 树给模型。和 gpt-4o 相比，它可以节省 30% 到 50% 的 token 消耗，复杂场景下甚至更多。
  • 高分辨率支持：Qwen 2.5 VL 支持更高的分辨率输入，足以满足大多数情况。
  • 开源：这是一个开源模型，因此你可以选择使用云提供商已经部署好的版本，或者自己部署到你自己的服务器上。

限制

  • 小图标识别能力较差：和 gpt-4o 一样，它可能无法准确定位小图标。

  • 断言能力一般：在某些情况下，Qwen 2.5 VL 的断言能力可能不如 gpt-4o。

  • 无法使用缓存：目前在 Qwen 2.5 VL 中无法使用 Midscene.js 的缓存功能。

UI-TARS

UI-TARS 是一个专为 UI 自动化设计的开源模型。它仅以截图作为输入，并执行人类常用的交互（如键盘和鼠标操作），在 10 多个 GUI 基准测试中取得了顶尖性能。UI-TARS 是一个开源模型，并提供了不同大小的版本。

特性

  • 速度：一个私有化的 UI-TARS 模型可以比通用 LLM 快 5 倍。当部署在性能良好的 GPU 服务器上时，每次 .ai 中的步骤可以在 1-2 秒内完成。
  • 原生图像识别：UI-TARS 可以识别截图中的图像，和 Qwen 2.5 VL 一样，在使用 UI-TARS 时， Midscene.js 不需要发送 DOM 树。
  • 开源：UI-TARS 是一个开源模型，因此你可以选择部署到你自己的服务器上，你的数据将不再发送到云端。
  • 更稳定的短提示：UI-TARS 针对 UI 自动化进行了优化，并能够处理更复杂的目标驱动的任务。在使用更短的提示词时，UI-TARS 的表现比通用 LLM 更好。

限制

  • 断言能力较差：在某些情况下，UI-TARS 的断言能力可能不如 gpt-4o。

更多关于 Midscene 的信息

公众号介绍文档：

avatar
文章
阅读
粉丝