Annotare gli Agenti di Navigazione Web: Dalle Tracce WebArena alla Valutazione Umana
Come utilizzare il display delle tracce degli agenti web di Potato per valutare agenti di navigazione web autonomi, con screenshot passo per passo, overlay SVG e schemi di annotazione per passo.
Annotare gli Agenti di Navigazione Web: Dalle Tracce WebArena alla Valutazione Umana
Gli agenti di navigazione web operano in una modalità fondamentalmente diversa dagli agenti basati su testo. Navigano pagine web reali, cliccano pulsanti, compilano moduli e scorrono contenuti. Valutarli richiede di vedere cosa ha visto l'agente (lo stato della pagina) e cosa ha fatto l'agente (l'azione intrapresa), idealmente con overlay visivi che mostrino esattamente dove l'agente ha cliccato.
Il display delle tracce degli agenti web di Potato è costruito appositamente per questo scopo. Renderizza screenshot a pagina intera con overlay SVG delle azioni, fornisce una vista filmstrip per una navigazione rapida, e supporta l'annotazione per passo della correttezza delle azioni.
Questa guida illustra la valutazione delle tracce WebArena, ma lo stesso approccio funziona per VisualWebArena, registrazioni grezze del browser e qualsiasi altro formato di agente web.
Prerequisiti
pip install potato-annotationAvrai bisogno di file di tracce WebArena, che di solito includono screenshot e un log delle azioni in JSON. Se stai lavorando con VisualWebArena, il formato è simile ma può includere informazioni visive di grounding aggiuntive.
Passo 1: Comprendere il Formato delle Tracce WebArena
Una traccia WebArena consiste in un file JSON per episodio contenente la descrizione del task, la sequenza di azioni e i percorsi degli screenshot. Ecco un esempio semplificato.
Crea 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"
}Ogni passo ha uno screenshot, l'azione intrapresa, l'elemento target e le coordinate del clic. Potato usa queste informazioni per renderizzare gli overlay visivi.
Passo 2: Configura il Progetto
Crea config.yaml:
task_name: "WebArena Agent Evaluation"
task_dir: "."
data_files:
- "data/web_traces.jsonl"
item_properties:
id_key: trace_id
text_key: task
# --- Annotazione agentica con display web ---
agentic:
enabled: true
trace_converter: webarena
display_type: web_agent
web_agent_display:
# Renderizzazione degli screenshot
screenshot_max_width: 900
screenshot_quality: 85
# Overlay SVG
overlay:
enabled: true
click_marker: "circle"
click_color: "#ef4444"
click_radius: 20
type_highlight: "#3b82f6"
scroll_indicator: true
# Navigazione filmstrip
filmstrip:
enabled: true
thumbnail_width: 150
show_action_labels: true
# Opzioni di display aggiuntive
show_url_bar: true
show_action_description: true
show_dom_snapshot: false
# --- Schemi di Annotazione ---
annotation_schemes:
# Valutazione complessiva del task
- 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
# Valutazione per passo
- 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/"Passo 3: Comprendere il Display dell'Agente Web
Quando apri una traccia, il display dell'agente web mostra:
La Vista Principale dello Screenshot
Lo screenshot del passo corrente viene visualizzato a larghezza intera (fino a 900px). Un overlay SVG viene disegnato sopra:
- Cerchio rosso alle coordinate del clic, che mostra esattamente dove l'agente ha cliccato
- Evidenziazione blu intorno ai campi di input di testo dove l'agente ha digitato
- Indicatore a freccia per le azioni di scorrimento che mostra direzione e ampiezza
Sotto lo screenshot, vedi:
- Barra URL che mostra l'URL della pagina a questo passo
- Descrizione dell'azione (ad es. "Click on 'Electronics category link' at coordinates [245, 82]")
Il Filmstrip
Nella parte inferiore del display, una striscia orizzontale mostra miniature di tutti gli screenshot. Ogni miniatura ha una piccola etichetta che indica il tipo di azione (click, type, scroll). Clicca su qualsiasi miniatura per saltare a quel passo.
Il filmstrip è particolarmente utile per tracce lunghe (10+ passi) dove scorrere attraverso la vista principale sarebbe tedioso.
Annotazione per Passo
Accanto a ciascuno screenshot appaiono i controlli di annotazione per passo. Valuta l'azione e, se è errata, seleziona il tipo di errore.
Passo 4: Il Flusso di Lavoro dell'Annotazione
Un flusso di lavoro tipico per valutare una traccia dell'agente web:
-
Leggi la descrizione del task. Capisci cosa l'agente doveva realizzare.
-
Usa il filmstrip per una panoramica. Scorri rapidamente tutti gli screenshot per avere un'idea della traiettoria dell'agente prima di valutare i singoli passi.
-
Percorri ogni passo:
- Guarda lo screenshot per capire lo stato della pagina
- Controlla l'overlay SVG per vedere dove ha cliccato l'agente
- Leggi la descrizione dell'azione
- Valuta l'azione come Correct, Acceptable, Incorrect o Unnecessary
- Se errata, seleziona il/i tipo/i di errore
-
Valuta la traccia complessiva. Dopo aver esaminato tutti i passi, valuta il successo del task e l'efficienza.
-
Invia e passa alla traccia successiva.
Cosa Cercare
Le azioni corrette avvicinano l'agente all'obiettivo in modo ragionevole. L'agente ha cliccato l'elemento giusto, ha navigato alla pagina giusta o ha inserito le informazioni corrette.
Le azioni accettabili non sono la scelta ottimale ma fanno comunque progressi. Ad esempio, l'agente naviga a una pagina di categoria invece di usare la barra di ricerca -- più lento, ma ancora praticabile.
Le azioni errate sono errori: cliccare l'elemento sbagliato, navigare a una pagina irrilevante o inserire informazioni sbagliate in un modulo.
Le azioni inutili non contribuiscono all'obiettivo: cliccare qualcosa e poi tornare immediatamente indietro, scorrere oltre il target o navigare a pagine non rilevanti.
Passo 5: Tassonomia degli Errori
Potato include una tassonomia degli errori costruita appositamente per le azioni degli agenti web. Ecco come applicare ogni categoria:
| Tipo di Errore | Descrizione | Esempio |
|---|---|---|
| Wrong element clicked | L'agente ha cliccato un elemento UI errato | Ha cliccato "Tablets" invece di "Laptops" |
| Wrong page navigated to | L'agente è finito su una pagina irrilevante | Ha navigato a "About Us" invece che all'elenco prodotti |
| Missed a closer/better option | Era disponibile un'azione migliore | Ha usato la navigazione per categoria invece della barra di ricerca |
| Incorrect form input | L'agente ha inserito testo sbagliato in un modulo | Ha cercato "labtop" invece di "laptop" |
| Premature task completion | L'agente ha dichiarato il successo troppo presto | Ha aggiunto l'articolo sbagliato al carrello e si è fermato |
| Unnecessary navigation | Il passo non contribuisce all'obiettivo | Ha visitato la homepage tra le pagine di categoria |
| Failed to scroll to target | Il target era sotto l'area visibile | L'elemento non era visibile; l'agente avrebbe dovuto scorrere |
| Interaction with wrong page section | Pagina corretta ma area sbagliata | Ha cliccato l'intestazione invece del contenuto principale |
Passo 6: Gestire le Tracce Complesse
Tracce Lunghe (15+ Passi)
Per tracce lunghe, usa il filmstrip per identificare prima i passi sospetti. Cerca:
- Passi in cui l'URL cambia inaspettatamente (navigazione errata)
- Passi in cui l'agente sembra andare indietro
- Screenshot simili ripetuti (agente bloccato in un loop)
Poi concentra l'annotazione dettagliata su quei passi.
Tracce Fallite
Per le tracce in cui l'agente fallisce, identifica il primo passo errato -- questa è l'annotazione più preziosa per migliorare l'agente. Segnalalo chiaramente e descrivi cosa avrebbe dovuto fare l'agente invece.
Azioni Ambigue
Alcune azioni sono difficili da giudicare senza conoscere il contenuto completo della pagina. Se il DOM snapshot è disponibile, abilitalo:
web_agent_display:
show_dom_snapshot: trueQuesto aggiunge un pannello comprimibile che mostra l'HTML grezzo, utile quando lo screenshot da solo è ambiguo (ad es. l'agente ha cliccato in una regione con più elementi sovrapposti).
Passo 7: Configurazione per VisualWebArena
Le tracce VisualWebArena includono informazioni di grounding visivo aggiuntive. La configurazione è simile ma usa l'overlay di grounding visivo:
agentic:
enabled: true
trace_converter: webarena # stesso convertitore gestisce entrambi
display_type: web_agent
web_agent_display:
screenshot_max_width: 1000
overlay:
enabled: true
click_marker: "crosshair" # il mirino è migliore per il grounding preciso
click_color: "#ef4444"
click_radius: 15
bounding_box: true # mostra il bounding box dell'elemento se disponibile
bounding_box_color: "#f59e0b"
filmstrip:
enabled: true
thumbnail_width: 180Passo 8: Analisi dei Risultati
Correttezza delle Azioni per Posizione del Passo
Gli errori degli agenti web spesso si concentrano in punti specifici della traccia. Analizza dove si verificano gli errori:
import pandas as pd
import json
annotations = []
with open("output/annotations.jsonl") as f:
for line in f:
annotations.append(json.loads(line))
# Raccogli la correttezza per passo in base alla posizione
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
# Stampa il tasso di errore per posizione del passo
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)")Distribuzione dei Tipi di Errore
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}")Tasso di Successo per Sito Web
# Se le tracce coprono più siti web
website_success = {}
for ann in annotations:
# Assumendo che le info sul sito siano nei dati originali della traccia
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")Passo 9: Scalare la Valutazione
Più Annotatori con Accordo
Per articoli di ricerca, assegna più annotatori per traccia:
annotation_task_config:
total_annotations_per_instance: 3
assignment_strategy: randomCalcola l'accordo inter-annotatore sull'etichetta di successo del task:
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")
# Kappa a coppie
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}")Combinare con Solo Mode
Per valutazioni su larga scala (500+ tracce), usa Solo Mode per far gestire all'LLM le tracce facili:
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_agentIl valutatore umano esamina le tracce difficili; l'LLM gestisce i successi semplici e i fallimenti ovvi.
Riepilogo
Valutare gli agenti di navigazione web richiede di vedere esattamente cosa ha visto e fatto l'agente. Il display dell'agente web di Potato fornisce:
- Screenshot completi con overlay SVG che segnano i target dei clic, i campi di input e le azioni di scorrimento
- Navigazione filmstrip per una panoramica rapida e accesso casuale ai passi
- Barra URL che traccia il percorso di navigazione dell'agente
- Annotazione per passo con una tassonomia degli errori specifica per il web
- Configurazione flessibile per WebArena, VisualWebArena e registrazioni grezze del browser
La chiave per una valutazione efficace degli agenti web è l'overlay visivo: senza vedere esattamente dove ha cliccato l'agente, i valutatori non possono giudicare in modo affidabile la correttezza delle azioni.
Ulteriori Letture
- Documentazione sull'Annotazione Agentica -- riferimento completo alla configurazione
- Valutare gli Agenti AI -- guida generale alla valutazione degli agenti
- Solo Mode -- scala la valutazione con la collaborazione umano-LLM
- Esportazione Parquet -- esporta i risultati per l'analisi