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.
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
pip install potato-annotationNecesitará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:
{
"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:
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:
-
Lee la descripción de la tarea. Comprende lo que se suponía que debía lograr el agente.
-
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.
-
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
-
Califica la traza general. Después de revisar todos los pasos, califica el éxito de la tarea y la eficiencia.
-
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 Error | Descripción | Ejemplo |
|---|---|---|
| Elemento equivocado clicado | El agente hizo clic en un elemento incorrecto | Hizo clic en "Tablets" en lugar de "Laptops" |
| Página equivocada navegada | El agente terminó en una página irrelevante | Navegó a "About Us" en lugar del listado de productos |
| Opción más cercana/mejor omitida | Había una mejor acción disponible | Usó navegación por categoría en lugar de la barra de búsqueda |
| Entrada de formulario incorrecta | El agente ingresó texto incorrecto | Buscó "labtop" en lugar de "laptop" |
| Completación prematura de tarea | El agente declaró éxito demasiado pronto | Añadió el artículo equivocado al carrito y se detuvo |
| Navegación innecesaria | El paso no contribuye a la meta | Visitó la página principal entre páginas de categoría |
| Fallo al desplazar al objetivo | El objetivo estaba debajo del viewport | El elemento no era visible; el agente debería haber desplazado |
| Interacción con sección equivocada | Página correcta pero área equivocada | Hizo 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:
web_agent_display:
show_dom_snapshot: trueEsto 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:
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: 180Paso 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:
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
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
# 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:
annotation_task_config:
total_annotations_per_instance: 3
assignment_strategy: randomCalcula el acuerdo entre anotadores sobre la etiqueta de éxito de la tarea:
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:
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_agentEl 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
- Documentación de Anotación Agéntica -- referencia completa de configuración
- Evaluación de Agentes de IA -- guía general de evaluación de agentes
- Solo Mode -- escalar la evaluación con colaboración humano-LLM
- Exportación Parquet -- exportar resultados para análisis