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.
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
pip install potato-annotationSie 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:
{
"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:
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:
-
Die Aufgabenbeschreibung lesen. Verstehen Sie, was der Agent erreichen sollte.
-
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.
-
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
-
Den gesamten Trace bewerten. Nach dem Überprüfen aller Schritte Aufgabenerfolg und Effizienz bewerten.
-
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:
| Fehlertyp | Beschreibung | Beispiel |
|---|---|---|
| Falsches Element angeklickt | Agent hat ein falsches UI-Element angeklickt | „Tablets" statt „Laptops" angeklickt |
| Zur falschen Seite navigiert | Agent ist auf einer irrelevanten Seite gelandet | Zu „Über uns" statt zur Produktliste navigiert |
| Bessere Option verpasst | Eine bessere Aktion war verfügbar | Kategorien durchsucht statt die Suchleiste genutzt |
| Falsche Formulareingabe | Agent hat falschen Text in ein Formular eingegeben | Nach „Laptop" statt „Laptop" gesucht (Tippfehler) |
| Vorzeitiger Aufgabenabschluss | Agent hat zu früh Erfolg gemeldet | Falschen Artikel in den Warenkorb gelegt und gestoppt |
| Unnötige Navigation | Schritt trägt nicht zum Ziel bei | Startseite zwischen Kategorieseiten besucht |
| Scrollen zum Ziel fehlgeschlagen | Ziel war unterhalb des sichtbaren Bereichs | Element war nicht sichtbar; Agent hätte scrollen sollen |
| Interaktion mit falschem Seitenbereich | Richtige Seite, aber falscher Bereich | Kopfzeile 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:
web_agent_display:
show_dom_snapshot: trueDies 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:
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: 180Schritt 8: Ergebnisse analysieren
Aktionskorrektheit nach Schrittposition
Web-Agent-Fehler häufen sich oft an bestimmten Punkten im Trace. Analysieren Sie, wo Fehler auftreten:
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
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
# 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:
annotation_task_config:
total_annotations_per_instance: 3
assignment_strategy: randomBerechnen Sie die Übereinstimmung zwischen Annotatoren beim Aufgabenerfolg-Label:
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:
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_agentDer 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
- Agentische Annotation – Dokumentation -- vollständige Konfigurationsreferenz
- KI-Agenten evaluieren -- allgemeiner Leitfaden zur Agentenevaluierung
- Solo Mode -- Evaluierung mit menschlich-LLM-Kollaboration skalieren
- Parquet-Export -- Ergebnisse für Analysen exportieren