Skip to content
Guides11 min read

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.

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

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

bash
pip install potato-annotation

Avrai 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:

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

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:

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:

  1. Leggi la descrizione del task. Capisci cosa l'agente doveva realizzare.

  2. 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.

  3. 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
  4. Valuta la traccia complessiva. Dopo aver esaminato tutti i passi, valuta il successo del task e l'efficienza.

  5. 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 ErroreDescrizioneEsempio
Wrong element clickedL'agente ha cliccato un elemento UI erratoHa cliccato "Tablets" invece di "Laptops"
Wrong page navigated toL'agente è finito su una pagina irrilevanteHa navigato a "About Us" invece che all'elenco prodotti
Missed a closer/better optionEra disponibile un'azione miglioreHa usato la navigazione per categoria invece della barra di ricerca
Incorrect form inputL'agente ha inserito testo sbagliato in un moduloHa cercato "labtop" invece di "laptop"
Premature task completionL'agente ha dichiarato il successo troppo prestoHa aggiunto l'articolo sbagliato al carrello e si è fermato
Unnecessary navigationIl passo non contribuisce all'obiettivoHa visitato la homepage tra le pagine di categoria
Failed to scroll to targetIl target era sotto l'area visibileL'elemento non era visibile; l'agente avrebbe dovuto scorrere
Interaction with wrong page sectionPagina corretta ma area sbagliataHa 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:

yaml
web_agent_display:
  show_dom_snapshot: true

Questo 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:

yaml
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: 180

Passo 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:

python
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

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

Tasso di Successo per Sito Web

python
# 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:

yaml
annotation_task_config:
  total_annotations_per_instance: 3
  assignment_strategy: random

Calcola l'accordo inter-annotatore sull'etichetta di successo del task:

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")
 
# 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:

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

Il valutatore umano esamina le tracce difficili; l'LLM gestisce i successi semplici e i fallimenti ovvi.


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