<img src="https://yellow-cdn.veclightyear.com/835a84d5/263d8aa3-ff6d-44fc-9baa-c7853ecb7275.png" height="300" alt="眼镜猴" /> 🙈 网页交互代理的视觉工具 🙈 <a href="https://pypi.org/project/tarsier/" target="_blank"> <img alt="Python" src="https://img.shields.io/badge/python-3670A0?style=for-the-badge&logo=python&logoColor=ffdd54" /> <img alt="版本" src="https://img.shields.io/pypi/v/tarsier?style=for-the-badge&color=3670A0"> </a> <a href="https://reworkd.ai/">🔗 主站</a>   •   <a href="https://twitter.com/khoomeik/status/1723432848739483976">🐦 Twitter</a>   •   <a href="https://discord.gg/gcmNyAAFfV">📢 Discord</a>

Tarsier

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

如何将网页输入到LLM中？（例如HTML、可访问性树、截图）
如何将LLM的响应映射回网页元素？
如何向仅支持文本的LLM传达页面的视觉结构？

在Reworkd，我们通过数万个真实的网页任务迭代解决了所有这些问题，为网页代理构建了一个强大的感知系统...Tarsier！在下面的视频中，我们使用Tarsier为一个简约的GPT-4 LangChain网页代理提供网页感知能力。

https://github.com/reworkd/tarsier/assets/50181239/af12beda-89b5-4add-b888-d780b353304b

它是如何工作的？

Tarsier通过方括号和ID（例如[23]）在页面上为可交互元素添加视觉标签。通过这种方式，我们为LLM提供了元素和ID之间的映射，以便执行操作（例如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网页代理 🦙

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

Microsoft Azure的凭证以简单的JSON格式存储，包含API密钥和端点

{
  "key": "<输入你的API密钥>",
  "endpoint": "<输入你的API端点>"
}

这些值可以在计算机视觉资源的密钥和端点部分找到。请参阅以下说明 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():
    # 要创建服务账户密钥，请按照这个Stack Overflow回答中的说明操作 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)  # 标签到x_paths的映射
        print(page_text)  # 页面的文本表示

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服务

路线图

添加文档和示例
清理接口并添加单元测试
发布
改进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}
}