Skip to content
Guides10 min read

Web-Browsing-Agenten annotieren: Von WebArena-Traces zur menschlichen Evaluierung

Wie man Potatos Web-Agent-Trace-Anzeige nutzt, um autonome Web-Browsing-Agenten mit schrittweisen Screenshots, SVG-Overlays und schrittweisen Annotationsschemata zu evaluieren.

Potato Team·
هذه الصفحة غير متوفرة بلغتك بعد. يتم عرض النسخة الإنجليزية.

Web-Browsing-Agenten annotieren: Von WebArena-Traces zur menschlichen Evaluierung

Web-Browsing-Agenten arbeiten in einer grundlegend anderen Modalität als textbasierte Agenten. Sie navigieren auf echten Webseiten, klicken Schaltflächen, füllen Formulare aus und scrollen durch Inhalte. Ihre Evaluierung erfordert, was der Agent gesehen hat (den Seitenzustand) und was der Agent getan hat (die ausgeführte Aktion) zu sehen -- idealerweise mit visuellen Overlays, die genau zeigen, wo der Agent geklickt hat.

Potatos Web-Agent-Trace-Anzeige wurde speziell für diese Aufgabe entwickelt. Sie rendert vollständige Seiten-Screenshots mit SVG-Aktions-Overlays, bietet eine Filmstreifen-Ansicht für schnelle Navigation und unterstützt die schrittweise Annotation der Aktionskorrektheit.

Dieser Leitfaden beschreibt die Evaluierung von WebArena-Traces, aber der gleiche Ansatz funktioniert für VisualWebArena, rohe Browser-Aufzeichnungen und jedes andere Web-Agent-Format.


Voraussetzungen

bash
pip install potato-annotation

Sie benötigen WebArena-Trace-Dateien, die typischerweise Screenshots und ein JSON-Aktionsprotokoll enthalten. Wenn Sie mit VisualWebArena arbeiten, ist das Format ähnlich, kann aber zusätzliche visuelle Verankerungsinformationen enthalten.


Schritt 1: Das WebArena-Trace-Format verstehen

Ein WebArena-Trace besteht aus einer JSON-Datei pro Episode, die die Aufgabenbeschreibung, die Aktionssequenz und Screenshot-Pfade enthält. Hier ist ein vereinfachtes Beispiel.

Erstellen Sie data/web_traces.jsonl:

json
{
  "trace_id": "wa_001",
  "task": "Find the cheapest laptop on the electronics store and add it to the cart",
  "website": "shopping",
  "steps": [
    {
      "step": 0,
      "url": "http://shop.example.com/",
      "action_type": "click",
      "action_target": "Electronics category link",
      "element_id": "nav-electronics",
      "coordinates": [245, 82],
      "screenshot": "screenshots/wa_001_step_00.png",
      "dom_snapshot": "dom/wa_001_step_00.html"
    },
    {
      "step": 1,
      "url": "http://shop.example.com/electronics",
      "action_type": "click",
      "action_target": "Laptops subcategory",
      "element_id": "cat-laptops",
      "coordinates": [180, 310],
      "screenshot": "screenshots/wa_001_step_01.png"
    },
    {
      "step": 2,
      "url": "http://shop.example.com/electronics/laptops",
      "action_type": "click",
      "action_target": "Sort by: Price Low to High",
      "element_id": "sort-price-asc",
      "coordinates": [720, 155],
      "screenshot": "screenshots/wa_001_step_02.png"
    },
    {
      "step": 3,
      "url": "http://shop.example.com/electronics/laptops?sort=price_asc",
      "action_type": "click",
      "action_target": "First laptop: 'Budget Pro 14' - $349",
      "element_id": "product-101",
      "coordinates": [400, 380],
      "screenshot": "screenshots/wa_001_step_03.png"
    },
    {
      "step": 4,
      "url": "http://shop.example.com/product/101",
      "action_type": "click",
      "action_target": "Add to Cart button",
      "element_id": "add-to-cart-btn",
      "coordinates": [650, 520],
      "screenshot": "screenshots/wa_001_step_04.png"
    }
  ],
  "success": true,
  "final_screenshot": "screenshots/wa_001_final.png"
}

Jeder Schritt hat einen Screenshot, die ausgeführte Aktion, das Zielelement und Klickkoordinaten. Potato verwendet diese Informationen, um visuelle Overlays zu rendern.


Schritt 2: Das Projekt konfigurieren

Erstellen Sie config.yaml:

yaml
task_name: "WebArena Agent Evaluation"
task_dir: "."
 
data_files:
  - "data/web_traces.jsonl"
 
item_properties:
  id_key: trace_id
  text_key: task
 
# --- Agentic annotation with web display ---
agentic:
  enabled: true
  trace_converter: webarena
  display_type: web_agent
 
  web_agent_display:
    # Screenshot rendering
    screenshot_max_width: 900
    screenshot_quality: 85
 
    # SVG overlays
    overlay:
      enabled: true
      click_marker: "circle"
      click_color: "#ef4444"
      click_radius: 20
      type_highlight: "#3b82f6"
      scroll_indicator: true
 
    # Filmstrip navigation
    filmstrip:
      enabled: true
      thumbnail_width: 150
      show_action_labels: true
 
    # Additional display options
    show_url_bar: true
    show_action_description: true
    show_dom_snapshot: false
 
# --- Annotation Schemas ---
annotation_schemes:
  # Overall task evaluation
  - annotation_type: radio
    name: task_success
    description: "Did the agent complete the task successfully?"
    labels:
      - "Success"
      - "Partial Success"
      - "Failure"
    label_requirement:
      required: true
 
  - annotation_type: radio
    name: task_efficiency
    description: "Was the agent's navigation path efficient?"
    labels:
      - "Optimal path"
      - "Reasonable but not optimal"
      - "Inefficient (unnecessary steps)"
      - "Completely wrong direction"
    label_requirement:
      required: true
 
  # Per-step evaluation
  - annotation_type: per_turn_rating
    name: action_correctness
    target: agentic_steps
    description: "Was this action correct?"
    rating_type: radio
    labels:
      - "Correct"
      - "Acceptable (not optimal but progresses toward goal)"
      - "Incorrect"
      - "Unnecessary"
 
  - annotation_type: per_turn_rating
    name: action_error_type
    target: agentic_steps
    description: "What went wrong?"
    rating_type: multiselect
    labels:
      - "Wrong element clicked"
      - "Wrong page navigated to"
      - "Missed a closer/better option"
      - "Incorrect form input"
      - "Premature task completion"
      - "Unnecessary navigation"
      - "Failed to scroll to target"
      - "Interaction with wrong page section"
      - "Other"
    conditional:
      show_when:
        action_correctness: ["Incorrect", "Unnecessary"]
 
  - annotation_type: per_turn_rating
    name: action_notes
    target: agentic_steps
    description: "Notes on this step"
    rating_type: text
    label_requirement:
      required: false
 
output_annotation_dir: "output/"
output_annotation_format: "jsonl"
 
parquet_export:
  enabled: true
  output_dir: "output/parquet/"

Schritt 3: Die Web-Agent-Anzeige verstehen

Wenn Sie einen Trace öffnen, zeigt die Web-Agent-Anzeige:

Die Haupt-Screenshot-Ansicht

Der Screenshot des aktuellen Schritts wird in voller Breite (bis zu 900 px) angezeigt. Ein SVG-Overlay wird darüber gezeichnet:

  • Roter Kreis an den Klickkoordinaten, der genau zeigt, wo der Agent geklickt hat
  • Blaue Hervorhebung um Texteingabefelder, in die der Agent getippt hat
  • Pfeilindikator für Scroll-Aktionen, der Richtung und Ausmaß anzeigt

Unterhalb des Screenshots sehen Sie:

  • URL-Leiste mit der Seiten-URL dieses Schritts
  • Aktionsbeschreibung (z.B. „Klick auf ‚Electronics category link' bei Koordinaten [245, 82]")

Der Filmstreifen

Am unteren Rand der Anzeige zeigt ein horizontaler Filmstreifen Miniaturansichten aller Screenshots. Jede Miniaturansicht hat ein kleines Label, das den Aktionstyp angibt (Klick, Tippen, Scrollen). Klicken Sie auf eine Miniaturansicht, um zu diesem Schritt zu springen.

Der Filmstreifen ist besonders wertvoll bei langen Traces (10+ Schritte), wo das Scrollen durch die Hauptansicht mühsam wäre.

Schrittweise Annotation

Neben jedem Screenshot erscheinen die schrittweisen Annotationssteuerungen. Bewerten Sie die Aktion, und wenn sie inkorrekt ist, wählen Sie den Fehlertyp aus.


Schritt 4: Der Annotations-Workflow

Ein typischer Workflow zur Evaluierung eines Web-Agent-Traces:

  1. Die Aufgabenbeschreibung lesen. Verstehen Sie, was der Agent erreichen sollte.

  2. Den Filmstreifen für einen Überblick nutzen. Scannen Sie alle Screenshots schnell, um ein Gefühl für die Trajektorie des Agenten zu bekommen, bevor Sie einzelne Schritte bewerten.

  3. Jeden Schritt durchgehen:

    • Den Screenshot ansehen, um den Seitenzustand zu verstehen
    • Das SVG-Overlay prüfen, um zu sehen, was der Agent angeklickt hat
    • Die Aktionsbeschreibung lesen
    • Die Aktion als Korrekt, Akzeptabel, Inkorrekt oder Unnötig bewerten
    • Falls inkorrekt, den/die Fehlertyp(en) auswählen
  4. Den gesamten Trace bewerten. Nach dem Überprüfen aller Schritte Aufgabenerfolg und Effizienz bewerten.

  5. Absenden und zum nächsten Trace übergehen.

Worauf man achten sollte

Korrekte Aktionen bringen den Agenten auf vernünftige Weise näher ans Ziel. Der Agent hat das richtige Element angeklickt, ist zur richtigen Seite navigiert oder hat die richtigen Informationen eingegeben.

Akzeptable Aktionen sind nicht die optimale Wahl, machen aber dennoch Fortschritte. Zum Beispiel navigiert der Agent zu einer Kategorieseite, anstatt die Suchleiste zu nutzen -- langsamer, aber noch praktikabel.

Inkorrekte Aktionen sind Fehler: ein falsches Element anklicken, zu einer irrelevanten Seite navigieren oder falsche Informationen in ein Formular eingeben.

Unnötige Aktionen tragen nicht zum Ziel bei: etwas anklicken und sofort zurückgehen, am Ziel vorbeiscrollen oder zu nicht relevanten Seiten navigieren.


Schritt 5: Fehlertaxonomie

Potato enthält eine eigens entwickelte Fehlertaxonomie für Web-Agent-Aktionen. So wenden Sie jede Kategorie an:

FehlertypBeschreibungBeispiel
Falsches Element angeklicktAgent hat ein falsches UI-Element angeklickt„Tablets" statt „Laptops" angeklickt
Zur falschen Seite navigiertAgent ist auf einer irrelevanten Seite gelandetZu „Über uns" statt zur Produktliste navigiert
Bessere Option verpasstEine bessere Aktion war verfügbarKategorien durchsucht statt die Suchleiste genutzt
Falsche FormulareingabeAgent hat falschen Text in ein Formular eingegebenNach „Laptop" statt „Laptop" gesucht (Tippfehler)
Vorzeitiger AufgabenabschlussAgent hat zu früh Erfolg gemeldetFalschen Artikel in den Warenkorb gelegt und gestoppt
Unnötige NavigationSchritt trägt nicht zum Ziel beiStartseite zwischen Kategorieseiten besucht
Scrollen zum Ziel fehlgeschlagenZiel war unterhalb des sichtbaren BereichsElement war nicht sichtbar; Agent hätte scrollen sollen
Interaktion mit falschem SeitenbereichRichtige Seite, aber falscher BereichKopfzeile statt Hauptinhalt angeklickt

Schritt 6: Umgang mit komplexen Traces

Lange Traces (15+ Schritte)

Bei langen Traces nutzen Sie den Filmstreifen, um zunächst verdächtige Schritte zu identifizieren. Achten Sie auf:

  • Schritte, bei denen sich die URL unerwartet ändert (falsche Navigation)
  • Schritte, bei denen der Agent scheinbar rückwärts geht
  • Wiederholte ähnliche Screenshots (Agent steckt in einer Schleife)

Konzentrieren Sie dann Ihre detaillierte Annotation auf diese Schritte.

Fehlgeschlagene Traces

Identifizieren Sie bei Traces, bei denen der Agent scheitert, den ersten inkorrekten Schritt -- das ist die wertvollste Annotation für die Verbesserung des Agenten. Markieren Sie ihn klar und beschreiben Sie, was der Agent stattdessen hätte tun sollen.

Mehrdeutige Aktionen

Manche Aktionen sind schwer zu beurteilen, ohne den vollständigen Seiteninhalt zu kennen. Wenn der DOM-Snapshot verfügbar ist, aktivieren Sie ihn:

yaml
web_agent_display:
  show_dom_snapshot: true

Dies fügt ein aufklappbares Panel mit dem rohen HTML hinzu, das hilfreich ist, wenn der Screenshot allein mehrdeutig ist (z.B. der Agent in einem Bereich mit mehreren überlagernden Elementen geklickt hat).


Schritt 7: Konfiguration für VisualWebArena

VisualWebArena-Traces enthalten zusätzliche visuelle Verankerungsinformationen. Die Konfiguration ist ähnlich, verwendet aber das visuelle Verankerungs-Overlay:

yaml
agentic:
  enabled: true
  trace_converter: webarena         # same converter handles both
  display_type: web_agent
 
  web_agent_display:
    screenshot_max_width: 1000
    overlay:
      enabled: true
      click_marker: "crosshair"     # crosshair is better for precise grounding
      click_color: "#ef4444"
      click_radius: 15
      bounding_box: true            # show element bounding box if available
      bounding_box_color: "#f59e0b"
    filmstrip:
      enabled: true
      thumbnail_width: 180

Schritt 8: Ergebnisse analysieren

Aktionskorrektheit nach Schrittposition

Web-Agent-Fehler häufen sich oft an bestimmten Punkten im Trace. Analysieren Sie, wo Fehler auftreten:

python
import pandas as pd
import json
 
annotations = []
with open("output/annotations.jsonl") as f:
    for line in f:
        annotations.append(json.loads(line))
 
# Collect per-step correctness by position
step_errors = {}
for ann in annotations:
    correctness = ann["annotations"].get("action_correctness", {})
    for step_idx, label in correctness.items():
        pos = int(step_idx)
        if pos not in step_errors:
            step_errors[pos] = {"Correct": 0, "Acceptable": 0, "Incorrect": 0, "Unnecessary": 0}
        step_errors[pos][label] += 1
 
# Print error rate by step position
print("Error rate by step position:")
for pos in sorted(step_errors.keys()):
    counts = step_errors[pos]
    total = sum(counts.values())
    error_rate = (counts["Incorrect"] + counts["Unnecessary"]) / total
    print(f"  Step {pos}: {error_rate:.1%} error rate ({total} observations)")

Fehlertyp-Verteilung

python
error_counts = {}
for ann in annotations:
    errors = ann["annotations"].get("action_error_type", {})
    for step_idx, error_list in errors.items():
        for error in error_list:
            error_counts[error] = error_counts.get(error, 0) + 1
 
print("\nError Type Distribution:")
for error, count in sorted(error_counts.items(), key=lambda x: -x[1]):
    print(f"  {error}: {count}")

Erfolgsrate nach Website

python
# If traces span multiple websites
website_success = {}
for ann in annotations:
    # Assuming website info is in the original trace data
    success = ann["annotations"]["task_success"]
    website = ann.get("metadata", {}).get("website", "unknown")
    if website not in website_success:
        website_success[website] = {"Success": 0, "Partial Success": 0, "Failure": 0}
    website_success[website][success] += 1
 
for website, counts in website_success.items():
    total = sum(counts.values())
    rate = counts["Success"] / total
    print(f"{website}: {rate:.1%} success rate")

Schritt 9: Die Evaluierung skalieren

Mehrere Annotatoren mit Übereinstimmungsmessung

Für Forschungsarbeiten weisen Sie mehreren Annotatoren pro Trace zu:

yaml
annotation_task_config:
  total_annotations_per_instance: 3
  assignment_strategy: random

Berechnen Sie die Übereinstimmung zwischen Annotatoren beim Aufgabenerfolg-Label:

python
from sklearn.metrics import cohen_kappa_score
import pandas as pd
 
df = pd.read_parquet("output/parquet/annotations.parquet")
success = df[df["schema_name"] == "task_success"]
pivot = success.pivot(index="instance_id", columns="annotator", values="value")
 
# Pairwise kappa
annotators = pivot.columns.tolist()
for i in range(len(annotators)):
    for j in range(i + 1, len(annotators)):
        mask = pivot[[annotators[i], annotators[j]]].dropna()
        kappa = cohen_kappa_score(mask[annotators[i]], mask[annotators[j]])
        print(f"Kappa ({annotators[i]} vs {annotators[j]}): {kappa:.3f}")

Kombination mit Solo Mode

Für groß angelegte Evaluierungen (500+ Traces) können Sie Solo Mode nutzen, um einem LLM die einfachen Traces zu überlassen:

yaml
solo_mode:
  enabled: true
  llm:
    endpoint_type: openai
    model: "gpt-4o"
    api_key: ${OPENAI_API_KEY}
  accuracy_threshold: 0.90
 
agentic:
  enabled: true
  trace_converter: webarena
  display_type: web_agent

Der Mensch evaluiert die schwierigen Traces; das LLM übernimmt unkomplizierte Erfolge und offensichtliche Misserfolge.


Zusammenfassung

Die Evaluierung von Web-Browsing-Agenten erfordert, genau zu sehen, was der Agent gesehen und getan hat. Potatos Web-Agent-Anzeige bietet:

  • Vollständige Screenshots mit SVG-Overlays, die Klickziele, Eingabefelder und Scroll-Aktionen markieren
  • Filmstreifen-Navigation für schnellen Überblick und zufälligen Zugriff auf Schritte
  • URL-Leiste zur Verfolgung des Navigationspfads des Agenten
  • Schrittweise Annotation mit einer web-spezifischen Fehlertaxonomie
  • Flexible Konfiguration für WebArena, VisualWebArena und rohe Browser-Aufzeichnungen

Der Schlüssel zu einer effektiven Web-Agent-Evaluierung ist das visuelle Overlay: Ohne zu sehen, wo genau der Agent geklickt hat, können Evaluatoren die Aktionskorrektheit nicht zuverlässig beurteilen.


Weiterführende Lektüre