Skip to content
Guides12 min read

Anotación de Agentes de Navegación Web: De Trazas WebArena a Evaluación Humana

Cómo usar la visualización de trazas de agentes web de Potato para evaluar agentes autónomos de navegación web, con capturas de pantalla paso a paso, superposiciones SVG y esquemas de anotación por paso.

Potato Team·

Anotación de Agentes de Navegación Web: De Trazas WebArena a Evaluación Humana

Los agentes de navegación web operan en una modalidad fundamentalmente diferente a los agentes basados en texto. Navegan páginas web reales, hacen clic en botones, completan formularios y se desplazan por el contenido. Evaluarlos requiere ver lo que el agente vio (el estado de la página) y lo que el agente hizo (la acción tomada), idealmente con superposiciones visuales mostrando exactamente dónde hizo clic el agente.

La visualización de trazas de agentes web de Potato está diseñada específicamente para esta tarea. Renderiza capturas de pantalla completas con superposiciones de acción SVG, proporciona una vista de tira de fotogramas para navegación rápida y soporta anotación por paso de la corrección de las acciones.

Esta guía explica la evaluación de trazas WebArena, pero el mismo enfoque funciona para VisualWebArena, grabaciones de navegador sin procesar y cualquier otro formato de agente web.


Requisitos Previos

bash
pip install potato-annotation

Necesitarás archivos de trazas WebArena, que típicamente incluyen capturas de pantalla y un registro de acciones JSON. Si trabajas con VisualWebArena, el formato es similar pero puede incluir información adicional de anclaje visual.


Paso 1: Comprensión del Formato de Trazas WebArena

Una traza WebArena consiste en un archivo JSON por episodio que contiene la descripción de la tarea, la secuencia de acciones y las rutas de capturas de pantalla. Aquí hay un ejemplo simplificado.

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

Cada paso tiene una captura de pantalla, la acción tomada, el elemento objetivo y las coordenadas de clic. Potato usa esta información para renderizar superposiciones visuales.


Paso 2: Configura el Proyecto

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
 
# --- 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/"

Paso 3: Comprensión de la Visualización de Agente Web

Cuando abres una traza, la visualización de agente web muestra:

La Vista Principal de Captura de Pantalla

La captura de pantalla del paso actual se muestra a ancho completo (hasta 900px). Una superposición SVG se dibuja encima:

  • Círculo rojo en las coordenadas de clic, mostrando exactamente dónde hizo clic el agente
  • Resaltado azul alrededor de los campos de entrada de texto donde el agente escribió
  • Indicador de flecha para acciones de desplazamiento mostrando dirección y magnitud

Debajo de la captura de pantalla, ves:

  • Barra de URL mostrando la URL de la página en este paso
  • Descripción de la acción (p.ej., "Click on 'Electronics category link' at coordinates [245, 82]")

La Tira de Fotogramas

En la parte inferior de la visualización, una tira de fotogramas horizontal muestra miniaturas de todas las capturas de pantalla. Cada miniatura tiene una pequeña etiqueta indicando el tipo de acción (click, type, scroll). Haz clic en cualquier miniatura para saltar a ese paso.

La tira de fotogramas es especialmente valiosa para trazas largas (10+ pasos) donde desplazarse por la vista principal sería tedioso.

Anotación por Paso

Junto a cada captura de pantalla aparecen los controles de anotación por paso. Califica la acción y, si es incorrecta, selecciona el tipo de error.


Paso 4: El Flujo de Trabajo de Anotación

Un flujo de trabajo típico para evaluar una traza de agente web:

  1. Lee la descripción de la tarea. Comprende lo que se suponía que debía lograr el agente.

  2. Usa la tira de fotogramas para una visión general. Escanea rápidamente todas las capturas de pantalla para tener una idea de la trayectoria del agente antes de calificar pasos individuales.

  3. Recorre cada paso:

    • Mira la captura de pantalla para entender el estado de la página
    • Revisa la superposición SVG para ver en qué hizo clic el agente
    • Lee la descripción de la acción
    • Califica la acción como Correcta, Aceptable, Incorrecta o Innecesaria
    • Si es incorrecta, selecciona el/los tipo(s) de error
  4. Califica la traza general. Después de revisar todos los pasos, califica el éxito de la tarea y la eficiencia.

  5. Envía y pasa a la siguiente traza.

Qué Buscar

Las acciones correctas acercan al agente a la meta de manera razonable. El agente hizo clic en el elemento correcto, navegó a la página correcta o ingresó la información correcta.

Las acciones aceptables no son la opción óptima pero aún avanzan. Por ejemplo, el agente navega a una página de categoría en lugar de usar la barra de búsqueda -- más lento, pero viable.

Las acciones incorrectas son errores: hacer clic en el elemento equivocado, navegar a una página irrelevante o ingresar información incorrecta en un formulario.

Las acciones innecesarias no contribuyen a la meta: hacer clic en algo y luego ir inmediatamente hacia atrás, desplazarse más allá del objetivo o navegar a páginas que no son relevantes.


Paso 5: Taxonomía de Errores

Potato incluye una taxonomía de errores construida específicamente para acciones de agentes web. Aquí se explica cómo aplicar cada categoría:

Tipo de ErrorDescripciónEjemplo
Elemento equivocado clicadoEl agente hizo clic en un elemento incorrectoHizo clic en "Tablets" en lugar de "Laptops"
Página equivocada navegadaEl agente terminó en una página irrelevanteNavegó a "About Us" en lugar del listado de productos
Opción más cercana/mejor omitidaHabía una mejor acción disponibleUsó navegación por categoría en lugar de la barra de búsqueda
Entrada de formulario incorrectaEl agente ingresó texto incorrectoBuscó "labtop" en lugar de "laptop"
Completación prematura de tareaEl agente declaró éxito demasiado prontoAñadió el artículo equivocado al carrito y se detuvo
Navegación innecesariaEl paso no contribuye a la metaVisitó la página principal entre páginas de categoría
Fallo al desplazar al objetivoEl objetivo estaba debajo del viewportEl elemento no era visible; el agente debería haber desplazado
Interacción con sección equivocadaPágina correcta pero área equivocadaHizo clic en el encabezado en lugar del contenido principal

Paso 6: Manejo de Trazas Complejas

Trazas Largas (15+ Pasos)

Para trazas largas, usa la tira de fotogramas para identificar pasos sospechosos primero. Busca:

  • Pasos donde la URL cambia inesperadamente (navegación incorrecta)
  • Pasos donde el agente parece retroceder
  • Capturas de pantalla similares repetidas (agente atrapado en un bucle)

Luego enfoca tu anotación detallada en esos pasos.

Trazas Fallidas

Para trazas donde el agente falla, identifica el primer paso incorrecto -- esta es la anotación más valiosa para mejorar el agente. Márcalo claramente y describe lo que el agente debería haber hecho en su lugar.

Acciones Ambiguas

Algunas acciones son difíciles de juzgar sin conocer el contenido completo de la página. Si la instantánea DOM está disponible, habilítala:

yaml
web_agent_display:
  show_dom_snapshot: true

Esto añade un panel colapsable mostrando el HTML sin procesar, lo que ayuda cuando la captura de pantalla sola es ambigua (p.ej., el agente hizo clic en una región con múltiples elementos superpuestos).


Paso 7: Configuración para VisualWebArena

Las trazas de VisualWebArena incluyen información adicional de anclaje visual. La configuración es similar pero usa la superposición de anclaje visual:

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

Paso 8: Análisis de Resultados

Corrección de Acciones por Posición del Paso

Los errores de agentes web a menudo se agrupan en puntos específicos de la traza. Analiza dónde ocurren los errores:

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

Distribución de Tipos de Error

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

Tasa de Éxito por Sitio Web

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

Paso 9: Escalamiento de la Evaluación

Múltiples Anotadores con Acuerdo

Para artículos de investigación, asigna múltiples anotadores por traza:

yaml
annotation_task_config:
  total_annotations_per_instance: 3
  assignment_strategy: random

Calcula el acuerdo entre anotadores sobre la etiqueta de éxito de la tarea:

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

Combinación con Solo Mode

Para evaluaciones a gran escala (500+ trazas), usa Solo Mode para que un LLM maneje las trazas fáciles:

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

El humano evalúa las trazas difíciles; el LLM maneja los éxitos claros y los fracasos obvios.


Resumen

Evaluar agentes de navegación web requiere ver exactamente lo que el agente vio e hizo. La visualización de agente web de Potato proporciona:

  • Capturas de pantalla completas con superposiciones SVG marcando objetivos de clic, campos de entrada y acciones de desplazamiento
  • Navegación por tira de fotogramas para visión general rápida y acceso aleatorio a pasos
  • Barra de URL rastreando la ruta de navegación del agente
  • Anotación por paso con una taxonomía de errores específica para web
  • Configuración flexible para WebArena, VisualWebArena y grabaciones de navegador sin procesar

La clave para la evaluación efectiva de agentes web es la superposición visual: sin ver exactamente dónde hizo clic el agente, los evaluadores no pueden juzgar confiablemente la corrección de las acciones.


Lectura Adicional