tarsier

? Vision Utilities für Webinteraktionsmittel?

? Hauptstelle • ? Twitter • ? Zwietracht

Tarsier

Wenn Sie versucht haben, ein LLM zu verwenden, um Web -Interaktionen zu automatisieren, haben Sie wahrscheinlich Fragen wie:

• Wie sollten Sie die Webseite einem LLM füttern? (zB HTML, Accessibility Tree, Screenshot)
• Wie können Sie LLM -Antworten auf Webelemente zurückgeben?
• Wie können Sie eine LLM nur über die visuelle Struktur der Seite informieren?

Bei Reworkd haben wir all diese Probleme in Zehntausenden von echten Webaufgaben iteriert, um ein leistungsstarkes Wahrnehmungssystem für Webagenten zu erstellen ... Tarsier! Im folgenden Video verwenden wir Tarsier, um die Wahrnehmung der Webseite für einen minimalistischen GPT-4 Langchain-Webagenten bereitzustellen.

tarsier.mp4

Wie funktioniert es?

Tarsier markiert visuell interaktivierbare Elemente auf einer Seite über Klammern + und ID z. B. [23] . Dabei bieten wir eine Zuordnung zwischen Elementen und IDs, damit ein LLM Aktionen erledigt (z. B. CLICK [23] ). Wir definieren interaktivierbare Elemente als Schaltflächen, Links oder Eingabefelder, die auf der Seite sichtbar sind. Tarsier kann auch alle Textelemente markieren, wenn Sie tag_text_elements=True übergeben.

Darüber hinaus haben wir einen OCR-Algorithmus entwickelt, um einen Seiten-Screenshot in eine Whitespace-strukturierte Schnur (fast wie ASCII-Kunst) umzuwandeln, die ein LLM auch ohne Vision verstehen kann. Da aktuelle Visionsprachenmodelle noch feinkörnige Darstellungen für Web-Interaktionsaufgaben fehlen, ist dies kritisch. Bei unseren internen Benchmarks schlägt unimodal GPT-4 + Tarsier-Text GPT-4V + Tarsier-Screenshot um 10-20%!

Tagged Screenshot	Tagged Textdarstellung

Installation

pip install tarsier

Verwendung

Besuchen Sie unser Kochbuch für Agentenbeispiele mit Tarsier:

• Ein autonomer Langchain -Webagent? ⛓️
• Ein autonomer Lamaindex -Webagent?

Wir unterstützen derzeit 2 OCR -Motoren: Google Vision und Microsoft Azure. Um Service -Account -Anmeldeinformationen für Google zu erstellen, befolgen Sie die Anweisungen dazu

Die Anmeldeinformationen für Microsoft Azure werden als einfacher JSON gespeichert, der aus einem API -Schlüssel und einem Endpunkt besteht

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

Diese Werte finden Sie im Abschnitt Tasten und Endpunkt der Computer Vision Resource. Siehe die Anweisungen unter https://learn.microsoft.com/en-us/answers/questions/854952/dont-find-your-your-endpoint

Andernfalls könnte die grundlegende Tarsier -Verwendung wie Folgendes aussehen:

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

Denken Sie daran, dass Tarsier verschiedene Arten von Elementen unterschiedlich taggt, um Ihrem LLM zu helfen, zu identifizieren, welche Aktionen für jedes Element ausführbar sind. Speziell:

• [#ID] : Text-nicht-maßbare Felder (z. B. textarea , input mit Texttyp)
• [@ID] : Hyperlinks ( <a> Tags)
• [$ID] : Andere interaktivierbare Elemente (z. B. button , select )
• [ID] : Klartext (wenn Sie tag_text_elements=True übergeben)

Lokale Entwicklung

Aufstellen

Wir haben ein praktisches Setup -Skript bereitgestellt, um Sie mit Tarsier -Entwicklung zum Einrichten zu bringen.

./script/setup.sh

Wenn Sie alle von Tarsier verwendeten TypeScript -Dateien ändern, müssen Sie den folgenden Befehl ausführen. Dadurch wird das Typenkript in JavaScript zusammengefasst, das dann im Python -Paket verwendet werden kann.

npm run build

Testen

Wir verwenden PyTest zum Testen. Um die Tests durchzuführen, rennen Sie einfach:

poetry run pytest .

Linie

Bevor Sie einen potenziellen PR einreichen, führen Sie bitte Folgendes aus, um Ihren Code zu formatieren:

./script/format.sh

Unterstützte OCR -Dienste

• Google Cloud Vision
• Amazon Textract (bald)
• Microsoft Azure Computer Vision (bald kommt)

Roadmap

• Dokumentation und Beispiele hinzufügen
• Reinigen Sie Schnittstellen und fügen Sie Unit -Tests hinzu
• Start
• Verbesserung der OCR -Textleistung
• Fügen Sie Optionen hinzu, um das Tagging -Styling anzupassen
• Fügen Sie bei Bedarf die Unterstützung für andere Browsertreiber hinzu

Zitate

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