GPT-4V-Act：Chromium 智能助手

🔥 更新（2024年9月14日）：请查看 Windows Agent Arena (WAA)! 该项目整合了此前为 GPT-4V-Act 计划的所有功能，包括用于在桌面 UI 环境中实现“标记集合提示”的 AI 标注功能。

GPT-4V-Act 是一款出色的多模态 AI 助手，它将 GPT-4V（视觉模型）与网页浏览器无缝结合。其设计旨在模拟人类操作者的输入和输出——主要是屏幕反馈以及低级别的鼠标和键盘交互。目标是促进人机操作之间的平滑过渡，从而帮助构建能够显著提升任何用户界面（UI）可访问性、辅助工作流自动化，并实现自动化 UI 测试的工具。

工作原理

GPT-4V-Act 同时利用了 GPT-4V（视觉模型） 和 标记集合提示，并配备了一个定制的自动标注器。该自动标注器会为每个可交互的 UI 元素分配一个唯一的数字 ID。

通过将任务和截图作为输入，GPT-4V-Act 能够推断出完成该任务所需的下一步操作。对于鼠标和键盘的输出，它可以参考这些数字标签来获取精确的像素坐标。

快速上手！

# 克隆仓库
git clone https://github.com/ddupont808/GPT-4V-Act ai-browser
# 进入仓库目录
cd ai-browser
# 安装所需依赖
npm install
# 启动演示
npm start

功能特性

• 🔄 视觉能力（部分）
  • ✅ JS DOM 自动标注器（支持 COCO 格式导出）
  • ❌ AI 自动标注器
• ✅ 点击操作
• 🔄 键盘输入（部分）
  • ✅ 输入字母、数字和字符串
  • ❌ 输入特殊键码（如回车、翻页键等）
• ❌ 滚动操作
• ❌ 向用户请求更多信息
• ❌ 记住与任务相关的信息

如果您有任何想法、反馈或希望参与贡献，请随时创建 Issue 或联系 ddupont@mit.edu。

演示提示

以下是一个使用用户界面指示智能体“帮我播放一首随机歌曲”的示例：

这是 GPT-4V 所看到的提示及对应的输出：

用户

任务：帮我播放一首随机歌曲

类型 ClickAction = { action: "click", element: 数字 }
类型 TypeAction = { action: "type", element: 数字，text: 字符串 }
类型 ScrollAction = { action: "scroll", direction: "up" | "down" }
类型 RequestInfoFromUser = { action: "request-info", prompt: 字符串 }
类型 RememberInfoFromSite = { action: "remember-info", info: 字符串 }
类型 Done = { action: "done" }

## 回答格式
{
  briefExplanation: 字符串,
  nextAction: ClickAction | TypeAction | ScrollAction | RequestInfoFromUser | RememberInfoFromSite | Done
}

## 指令
# 观察截图，思考下一步操作
# 以 JSON 格式的 Markdown 代码块输出你的回答

助理

{
  "briefExplanation": "我会在搜索栏中输入‘random song’来为你找到一首歌。",
  "nextAction": { "action": "type", "element": 7, "text": "random song" }
}

GPT-4V-Act 快速上手指南

GPT-4V-Act 是一个结合 GPT-4V(ision) 与 Chromium 浏览器的多模态 AI 助手。它通过屏幕反馈和底层鼠标/键盘交互，模拟人类操作，旨在提升 UI 可访问性、工作流自动化及自动化测试效率。

注意：本项目部分功能已整合至 Windows Agent Arena (WAA)，如需更完整的桌面端 AI 标记功能，建议关注该新项目。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• 操作系统：支持 Windows, macOS 或 Linux。
• Node.js：需安装 Node.js (推荐 LTS 版本)，用于运行 npm 包管理工具。
• API Key：需要拥有 OpenAI API 密钥，并确保账户有权访问 GPT-4V (GPT-4 Turbo with Vision) 模型。
• 网络环境：由于依赖 OpenAI 服务，请确保网络能够稳定访问相关 API（国内用户需自行配置代理）。

安装步骤

打开终端（Terminal 或 CMD），依次执行以下命令克隆仓库并安装依赖：

# 克隆仓库到本地
git clone https://github.com/ddupont808/GPT-4V-Act ai-browser

# 进入项目目录
cd ai-browser

# 安装所需依赖包
npm install

提示：如果 npm install 速度较慢，可尝试使用淘宝镜像源加速：

npm install --registry=https://registry.npmmirror.com

基本使用

安装完成后，您可以直接启动演示程序来体验核心功能。

1. 启动服务 在项目根目录下运行：

   npm start
   

2. 配置与运行

   • 程序启动后，通常会打开一个 Chromium 浏览器窗口。
   • 按照界面提示输入您的 OpenAI API Key。
   • 在任务输入框中下达指令（例如："play a random song for me"）。

3. 工作原理示例 系统会自动截取当前屏幕，利用内置的自动标记器（Auto-labeler）为可交互元素分配数字 ID，并将截图与任务描述发送给 GPT-4V。模型会返回 JSON 格式的操作指令（如点击某个 ID 的元素或输入文本），由程序自动执行。

   预期输出示例（后台日志）：

   {
     "briefExplanation": "I'll type 'random song' into the search bar to find a song for you.",
     "nextAction": { "action": "type", "element": 7, "text": "random song" }
   }
   

目前版本支持基础的点击和字符输入功能。滚动、特殊按键输入及上下文记忆功能尚在开发或部分支持中，具体特性请参考项目 Features 列表。