UI-TARS与Midscene.js自动化探索

结合 Midscene.js 和 UI-TARS 大模型 实现 UI 页面自动化的可实施方案，涵盖环境配置、核心流程、代码示例及优化建议：

一、环境配置与工具集成

1. 安装 Midscene.js

   • 方式一：通过 Chrome 插件快速安装（适用于浏览器自动化场景）。
   • 方式二：从 GitHub 下载源码集成到现有项目（支持 Node.js 或 Puppeteer 环境）。

2. 配置 UI-TARS 模型服务

   • 模型部署：在阿里云 PAI、ModelScope 等平台部署 UI-TARS 模型（推荐使用 7B 或 72B 版本）。
   • API 接入：获取模型服务的 endpoint URL 和 API Token，并在 Midscene.js 中配置以下参数：

     const mid = new Midscene({
       OPENAI_API_KEY: "<UI-TARS-API-TOKEN>",
       OPENAI_BASE_URL: "<UI-TARS-ENDPOINT>/v1",
       MIDSCENE_MODEL_NAME: "UI-TARS-7B-SFT" // 根据部署版本调整
     });
     

二、核心功能实现方案

1. 行为操作（AI Action）

通过自然语言指令驱动页面交互，UI-TARS 解析指令并生成精准操作（点击、输入、滚动等）。
示例代码：

// 电商网站自动化下单流程
await mid.aiAction('打开浏览器并访问电商网站首页', { url: 'https://example.com' });
await mid.aiAction('在搜索框中输入“手机”并点击搜索按钮');
await mid.aiAction('选择搜索结果中的第一个商品并进入详情页');
await mid.aiAction('点击“加入购物车”并跳转到结算页面');

优势：

• UI-TARS 的 增强感知能力 能识别复杂 UI 元素（如动态加载的列表）。
• 支持多级推理（如先滚动定位再点击）。

2. 数据提取（AI Query）

从页面中提取结构化数据，结合 UI-TARS 的 GUI 增强感知 能力，支持动态元素识别。
示例代码：

const productInfo = await mid.aiQuery({
  name: '商品名称，string',
  price: '当前价格，number',
  stock: '库存状态，boolean'
});
// 输出示例：{ name: "某品牌手机", price: 2999, stock: true }

应用场景：价格监控、数据爬取等。

3. 断言验证（AI Assert）

通过自然语言描述预期结果，UI-TARS 结合 System 2 推理 验证页面状态。
示例代码：

await mid.aiAssert('购物车中显示的商品总价为 2999 元');
await mid.aiAssert('当前页面包含“订单提交成功”提示');

优化建议：对于关键断言，可结合传统断言库（如 Jest）提升稳定性。

三、调试与优化

1. 调试配置

   • 启用 MIDSCENE_DEBUG_AI_PROFILE=1 查看每次调用的 Token 消耗和执行时间。
   • 使用 可视化报告 回放操作步骤，定位失败环节。

2. 性能优化

   • 短期记忆利用：通过 context 参数传递历史操作，减少重复推理。
   • 混合定位策略：对高稳定性要求的元素，结合 CSS 选择器与 AI 指令（如 mid.click('#search-box', { aiFallback: '在搜索框输入关键词' })）。

四、扩展应用场景

1. 跨平台自动化
   • 结合 UI-TARS-Desktop 客户端实现桌面应用自动化（如调整 PPT 样式、修改系统设置）。
2. 复杂任务处理
   • 利用 UI-TARS 的 多级思维模式 处理多步骤任务（如“从邮箱下载附件并解析内容”）。

五、代码示例（完整流程）

const { Midscene } = require('@midscene/web');
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  const mid = new Midscene(page, {
    OPENAI_API_KEY: "sk-xxx", // 替换为 UI-TARS 的 API Key
    OPENAI_BASE_URL: "https://ui-tars-endpoint/v1"
  });

  try {
    // 步骤 1：登录操作
    await mid.aiAction('打开登录页面并输入用户名和密码', {
      username: 'test@example.com',
      password: 'password123'
    });
    
    // 步骤 2：数据提取
    const userProfile = await mid.aiQuery({
      name: '用户昵称，string',
      role: '用户角色，string'
    });
    console.log('用户信息:', userProfile);

    // 步骤 3：断言验证
    await mid.aiAssert('页面右上角显示“欢迎回来”提示');
  } finally {
    await browser.close();
  }
})();

六、注意事项

• 指令清晰度：避免模糊描述（如“点击那个按钮”），需明确元素特征（如“点击蓝色‘提交’按钮”）。
• 模型适配：UI-TARS 在动态环境（如 Android 应用）中表现更优，静态网页可优先使用 GPT-4o。

通过上述方案，可快速构建基于自然语言的 UI 自动化流程，显著降低脚本维护成本。如需进一步优化，建议参考 UI-TARS 官方文档 和 Midscene.js 示例项目。