Anotando Agentes de Navegação Web: De Traços do WebArena à Avaliação Humana
Como usar a exibição de traços de agentes web do Potato para avaliar agentes autônomos de navegação, com capturas de tela passo a passo, sobreposições SVG e esquemas de anotação por etapa.
Agentes de navegação web operam em uma modalidade diferente dos agentes baseados em texto. Eles navegam por páginas reais, clicam em botões, preenchem formulários e rolam a tela. Para avaliar um deles, você precisa ver o que o agente viu (o estado da página) e o que ele fez (a ação), idealmente com uma sobreposição marcando exatamente onde ele clicou.
A exibição de traços de agentes web do Potato foi feita para isso. Ela renderiza capturas de tela de página inteira com sobreposições de ação em SVG, oferece uma tira de filme para navegação rápida e permite que você avalie cada etapa quanto à correção. Para a referência completa de configuração, veja a documentação de origem.
Este guia mostra como avaliar traços do WebArena, mas a mesma abordagem funciona para o VisualWebArena, gravações brutas de navegador e outros formatos de agentes web.
Pré-requisitos
pip install potato-annotationVocê vai precisar de arquivos de traço do WebArena, que normalmente vêm como capturas de tela mais um log de ações em JSON. O VisualWebArena usa um formato semelhante, às vezes com informações extras de ancoragem visual.
Etapa 1: Entendendo o formato de traço do WebArena
Um traço do WebArena é um arquivo JSON por episódio, contendo a descrição da tarefa, a sequência de ações e os caminhos das capturas de tela. Aqui está um exemplo reduzido.
Crie 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 etapa carrega uma captura de tela, a ação realizada, o elemento alvo e as coordenadas do clique. O Potato desenha suas sobreposições visuais a partir disso.
Etapa 2: Configurar o projeto
Crie config.yaml:
annotation_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/"
export_annotation_format: "jsonl"
parquet_export:
enabled: true
output_dir: "output/parquet/"Etapa 3: Entendendo a exibição do agente web
O visualizador de traços de agente web renderiza capturas de tela com sobreposições SVG mostrando alvos de clique e caminhos de navegação:

A visão principal da captura de tela
A captura de tela da etapa atual aparece em largura total (até 900px), com uma sobreposição SVG por cima:
- Círculo vermelho nas coordenadas do clique, mostrando exatamente onde o agente clicou
- Destaque azul ao redor dos campos de entrada de texto onde o agente digitou
- Indicador de seta para ações de rolagem, mostrando direção e magnitude
Abaixo da captura de tela, você vê:
- Barra de URL mostrando a URL da página nesta etapa
- Descrição da ação (por exemplo, "Click on 'Electronics category link' at coordinates [245, 82]")
A tira de filme
Uma tira de filme horizontal na parte inferior mostra miniaturas de cada captura de tela, cada uma com um pequeno rótulo do tipo de ação (clicar, digitar, rolar). Clique em qualquer miniatura para pular para aquela etapa.
A tira de filme realmente prova seu valor em traços longos (mais de 10 etapas), onde rolar pela visão principal fica cansativo.
Anotação por etapa
Os controles de anotação por etapa ficam ao lado de cada captura de tela. Avalie a ação e, se ela estiver incorreta, escolha o tipo de erro.
Etapa 4: O fluxo de anotação
Uma passagem típica por um traço de agente web:
-
Leia a descrição da tarefa. Entenda o que o agente deveria realizar.
-
Use a tira de filme para uma visão geral. Examine rapidamente todas as capturas de tela para ter uma noção da trajetória do agente antes de avaliar etapas individuais.
-
Percorra cada etapa:
- Olhe a captura de tela para entender o estado da página
- Verifique a sobreposição SVG para ver o que o agente clicou
- Leia a descrição da ação
- Avalie a ação como Correta, Aceitável, Incorreta ou Desnecessária
- Se estiver incorreta, selecione o(s) tipo(s) de erro
-
Avalie o traço como um todo. Após revisar todas as etapas, avalie o sucesso e a eficiência da tarefa.
-
Envie e passe para o próximo traço.
O que procurar
Ações corretas movem o agente em direção ao objetivo de forma sensata: ele clicou no elemento certo, chegou à página certa ou inseriu a informação certa.
Ações aceitáveis não são ideais, mas ainda assim avançam. Digamos que o agente navegue até uma página de categoria em vez de usar a barra de busca. Mais lento, mas funciona.
Ações incorretas são erros: o elemento errado, uma página irrelevante ou texto errado em um formulário.
Ações desnecessárias não levam o objetivo adiante: clicar em algo e voltar imediatamente, rolar passando do alvo ou vagar por páginas que não importam.
Etapa 5: Taxonomia de erros
O Potato vem com uma taxonomia de erros feita para ações de agentes web. Veja como aplicar cada categoria:
| Tipo de erro | Descrição | Exemplo |
|---|---|---|
| Elemento errado clicado | O agente clicou em um elemento de interface incorreto | Clicou em "Tablets" em vez de "Laptops" |
| Página errada acessada | O agente foi parar em uma página irrelevante | Navegou para "About Us" em vez da listagem de produtos |
| Opção mais próxima/melhor ignorada | Havia uma ação melhor disponível | Usou navegação por categoria em vez da barra de busca |
| Entrada de formulário incorreta | O agente inseriu o texto errado em um formulário | Buscou por "labtop" em vez de "laptop" |
| Conclusão prematura da tarefa | O agente declarou sucesso cedo demais | Adicionou o item errado ao carrinho e parou |
| Navegação desnecessária | A etapa não contribui para o objetivo | Visitou a página inicial entre páginas de categoria |
| Falha ao rolar até o alvo | O alvo estava abaixo da área visível | O elemento não estava visível; o agente deveria ter rolado |
| Interação com a seção errada da página | Página correta, mas área errada | Clicou no cabeçalho em vez do conteúdo principal |
Etapa 6: Lidando com traços complexos
Traços longos (mais de 15 etapas)
Em traços longos, use a tira de filme para localizar primeiro as etapas suspeitas. Procure por:
- Etapas em que a URL muda inesperadamente (navegação errada)
- Etapas em que o agente parece ir para trás
- Capturas de tela quase idênticas repetidas (agente preso em um loop)
Depois, concentre seu esforço detalhado de anotação nessas etapas.
Traços com falha
Quando o agente falha, encontre a primeira etapa incorreta. Essa é a anotação mais útil para melhorar o agente. Marque-a com clareza e diga o que o agente deveria ter feito em vez disso.
Ações ambíguas
Algumas ações são difíceis de julgar apenas pela captura de tela. Se o snapshot do DOM estiver disponível, ative-o:
web_agent_display:
show_dom_snapshot: trueIsso adiciona um painel recolhível com o HTML bruto, o que ajuda quando a captura de tela é ambígua, como quando o agente clicou em um ponto com vários elementos sobrepostos.
Etapa 7: Configurando para o VisualWebArena
Os traços do VisualWebArena carregam informações extras de ancoragem visual. A configuração é semelhante, mas usa a sobreposição de ancoragem 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: 180Etapa 8: Analisando os resultados
Correção das ações por posição na etapa
Os erros de agentes web tendem a se agrupar em pontos específicos do traço. Verifique onde eles ocorrem:
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)")Distribuição dos tipos de erro
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}")Taxa de sucesso por site
# 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")Etapa 9: Escalando a avaliação
Vários anotadores com cálculo de concordância
Para artigos de pesquisa, coloque vários anotadores em cada traço:
annotation_task_config:
total_annotations_per_instance: 3
assignment_strategy: randomCalcule a concordância entre anotadores no rótulo de sucesso da tarefa:
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}")Combinando com o Solo Mode
Para grandes avaliações (mais de 500 traços), use o Solo Mode para deixar um LLM cuidar dos traços fáceis:
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_agentO humano avalia os traços difíceis; o LLM cuida dos sucessos diretos e das falhas óbvias.
Resumo
Para avaliar um agente de navegação web, você precisa ver exatamente o que ele viu e fez. A exibição de agente web do Potato dá capturas de tela completas com sobreposições marcando alvos de clique, campos de entrada e ações de rolagem; uma tira de filme para visão geral rápida e para saltar entre etapas; uma barra de URL acompanhando o caminho de navegação; anotação por etapa com uma taxonomia de erros específica para web; e a mesma configuração para WebArena, VisualWebArena e gravações brutas de navegador.
A sobreposição é o que faz tudo funcionar. Sem ver onde o agente realmente clicou, você não consegue julgar com segurança se a ação estava certa.
Leitura adicional
- Documentação de Anotação Agêntica -- referência completa de configuração
- Avaliando Agentes de IA -- guia geral de avaliação de agentes
- Solo Mode -- escale a avaliação com colaboração entre humano e LLM
- Exportação para Parquet -- exporte os resultados para análise