tarsier

? ¿Utilidades de visión para agentes de interacción web?

? Sitio principal • ? Twitter • ? Discordia

Tarsero

Si ha intentado usar un LLM para automatizar las interacciones web, probablemente haya encontrado preguntas como:

• ¿Cómo debe alimentar la página web a un LLM? (por ejemplo, html, árbol de accesibilidad, captura de pantalla)
• ¿Cómo se retrocede las respuestas de LLM a los elementos web?
• ¿Cómo puede informar a un LLM de solo texto sobre la estructura visual de la página?

En Reworkd, iteramos sobre todos estos problemas en decenas de miles de tareas web reales para crear un poderoso sistema de percepción para los agentes web ... ¡Tarsier! En el siguiente video, usamos Tarsier para proporcionar percepción de la página web para un agente web minimalista de Langchain GPT-4.

tarsier.mp4

¿Cómo funciona?

Tarsier etiqueta visualmente elementos interactables en una página a través de soportes + una identificación, por ejemplo, [23] . Al hacer esto, proporcionamos un mapeo entre elementos e IDS para que un LLM tome medidas en (por ejemplo, CLICK [23] ). Definimos elementos interactables como botones, enlaces o campos de entrada que son visibles en la página; Tarsier también puede etiquetar todos los elementos textuales si pasa tag_text_elements=True .

Además, hemos desarrollado un algoritmo OCR para convertir una captura de pantalla de página en una cuerda estructurada con espacios en blanco (casi como el arte ASCII) que un LLM incluso sin visión puede entender. Dado que los modelos actuales del idioma de visión aún carecen de representaciones de grano fino necesarios para las tareas de interacción web, esto es crítico. ¡En nuestros puntos de referencia internos, unimodal GPT-4 + Tarsier-Text supera a GPT-4V + Tarsier-Screenshot por 10-20%!

Captura de pantalla etiquetada	Representación de texto etiquetada

Instalación

pip install tarsier

Uso

Visite nuestro libro de cocina para ver ejemplos de agentes usando Tarsier:

• ¿Un agente web autónomo de Langchain? ⛓️
• ¿Un agente web autónomo de Llamaindex?

Actualmente admitimos 2 motores OCR: Google Vision y Microsoft Azure. Para crear credenciales de cuenta de servicio para Google, siga las instrucciones sobre esto, así que responda https://stackoverflow.com/a/46290808/1780891

Las credenciales para Microsoft Azure se almacenan como un JSON simple que consta de una clave API y un punto final

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

Estos valores se pueden encontrar en la sección de claves y punto final del recurso de visión por computadora. Vea las instrucciones en https://learn.microsoft.com/en-us/answers/questions/854952/dont-find-your-key-and-your-endpoint

De lo contrario, el uso básico de Tarsier podría parecerse al siguiente:

 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 ())

Tenga en cuenta que Tarsier etiqueta diferentes tipos de elementos de manera diferente para ayudar a su LLM a identificar qué acciones se pueden realizar en cada elemento. Específicamente:

• [#ID] : campos de insertación de texto (por ejemplo, textarea , input con tipo textual)
• [@ID] : Hyperlinks ( <a> etiquetas)
• [$ID] : otros elementos interactables (por ejemplo, button , select )
• [ID] : texto sin formato (si pasa tag_text_elements=True )

Desarrollo local

Configuración

Hemos proporcionado un práctico script de configuración para ponerlo en funcionamiento con el desarrollo de Tarsier.

./script/setup.sh

Si modifica los archivos de Tarsier utilizados por Tarsier, deberá ejecutar el siguiente comando. Esto compila el mecanografiado en JavaScript, que luego se puede utilizar en el paquete Python.

npm run build

Pruebas

Usamos Pytest para las pruebas. Para ejecutar las pruebas, simplemente ejecute:

poetry run pytest .

Pelusa

Antes de enviar un PR potencial, ejecute lo siguiente para formatear su código:

./script/format.sh

Servicios de OCR compatibles

• Visión en la nube de Google
• Amazon Textract (próximamente)
• Microsoft Azure Computer Vision (próximamente)

Hoja de ruta

• Agregar documentación y ejemplos
• Limpiar interfaces y agregar pruebas unitarias
• Lanzamiento
• Mejorar el rendimiento del texto de OCR
• Agregar opciones para personalizar el estilo de etiquetado
• Agregar soporte para otros controladores de navegadores según sea necesario

Citas

 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}
}