Tarsier：Web自动化Agent的视觉工具库

网络交互代理的视觉工具库

如果你试过用 LLM 来自动化网络交互，你可能遇到过以下问题：

你应该如何将网页提供给 LLM？（例如 HTML、无障碍树、截图）

你如何将 LLM 的响应映射回网页元素？

你如何让纯文本 LLM 理解页面的视觉结构？

在 Reworkd，我们通过在成千上万个真实网络任务上的不断迭代，解决了这些问题，构建了一个强大的网络代理感知系统......Tarsier！在下面的视频中，我们展示了如何用 Tarsier 为一个极简的 GPT-4 LangChain 网络代理提供网页感知能力。

Tarsier 通过括号和 ID（例如 [23]）在页面上直观地标记可交互的元素。这样做建立了元素和 ID 之间的映射关系，使 LLM 能够对其进行操作（例如 CLICK [23]）。我们将可交互元素定义为页面上可见的按钮、链接或输入字段；如果传递 tag_text_elements=True，Tarsier 也可以标记所有文本元素。

此外，我们开发了一种 OCR 算法，可以将页面截图转换成空格结构化的字符串（几乎像 ASCII 艺术），即使没有视觉能力的 LLM 也能理解。由于当前的视觉语言模型仍然缺乏网络交互任务所需的细粒度表示，这变得尤为重要。在我们的内部基准测试中，单模态 GPT-4 + Tarsier-Text 比 GPT-4V + Tarsier-Screenshot 性能高 10-20%！

pip install tarsier

访问我们的食谱库获取使用 Tarsier 的代理示例：

一个自主的 LangChain 网络代理 🦜⛓️

一个自主的 LlamaIndex 网络代理 🦙

我们目前支持 2 种 OCR 引擎：Google Vision 和 Microsoft Azure。要为 Google 创建服务账户凭证，请按照此 Stack Overflow 答案上的说明进行操作 https://stackoverflow.com/a/46290808/1780891

Microsoft Azure 的凭证存储为一个简单的 JSON，包含 API 密钥和端点：

{
  "key": "<enter_your_api_key>",
  "endpoint": "<enter_your_api_endpoint>"
}

这些值可以在计算机视觉资源的"密钥和端点"部分找到。请参考此链接上的说明 https://learn.microsoft.com/en-us/answers/questions/854952/dont-find-your-key-and-your-endpoint

否则，基本的 Tarsier 用法示例如下：

import asyncio

from playwright.async_api import async_playwright
from tarsier import Tarsier, GoogleVisionOCRService, MicrosoftAzureOCRService
import json

def load_ocr_credentials(json_file_path):
    with open(json_file_path) as f:
        credentials = json.load(f)
    return credentials

async def main():
    # To create the service account key, follow the instructions on this SO answer https://stackoverflow.com/a/46290808/1780891

    google_cloud_credentials = load_ocr_credentials('./google_service_acc_key.json')
    #microsoft_azure_credentials = load_ocr_credentials('./microsoft_azure_credentials.json')

    ocr_service = GoogleVisionOCRService(google_cloud_credentials)
    #ocr_service = MicrosoftAzureOCRService(microsoft_azure_credentials)

    tarsier = Tarsier(ocr_service)

    async with async_playwright() as p:
        browser = await p.chromium.launch(headless=False)
        page = await browser.new_page()
        await page.goto("https://news.ycombinator.com")

        page_text, tag_to_xpath = await tarsier.page_to_text(page)

        print(tag_to_xpath)  # Mapping of tags to x_paths
        print(page_text)  # My Text representation of the page

if __name__ == '__main__':
    asyncio.run(main())

需要注意的是，Tarsier 对不同类型的元素使用不同的标记方式，以帮助你的 LLM 识别可对每个元素执行的操作。具体来说：

[#ID]: 可插入文本的字段（例如 textarea、带文本类型的 input）

[@ID]: 超链接（<a> 标签）

[$ID]: 其他可交互元素（例如 button、select）

[ID]: 纯文本（如果传递了 tag_text_elements=True）

我们提供了一个方便的设置脚本来帮助你快速开始 Tarsier 开发：

./script/setup.sh

如果你修改了 Tarsier 使用的任何 TypeScript 文件，你需要执行以下命令。该命令会将 TypeScript 编译为 JavaScript，随后可以在 Python 包中使用：

npm run build

我们使用 pytest 进行测试。要运行测试，只需运行：

poetry run pytest .

在提交潜在的 PR 之前，请运行以下命令来格式化你的代码：

./script/format.sh

支持的 OCR 服务

Amazon Textract（即将推出）

Microsoft Azure Computer Vision（即将推出）

路线图

• 添加文档和示例
• 清理接口并添加单元测试
• 改进 OCR 文本性能
• 添加选项以自定义标记样式
• 根据需要添加对其他浏览器驱动程序的支持

引用

bibtex
@misc{reworkd2023tarsier,
  title        = {Tarsier},
  author       = {Rohan Pandey and Adam Watkins and Asim Shrestha and Srijan Subedi},
  year         = {2023},
  howpublished = {GitHub},
  url          = {https://github.com/reworkd/tarsier}
}