Phase 12 - Lesson 25

Agentes Multimodais e Uso de Computador (Projeto Final)

O produto de fronteira de 2026 é um agente multimodal que lê capturas de tela, clica em botões, navega em interfaces web, preenche formulários e conclui fluxos de trabalho de ponta a ponta. SeeClick e CogAgent (2024) comprovaram a primitiva de grounding de GUI. O Ferret-UI adicionou suporte móvel. O ChartAgent introduziu o uso de ferramentas visuais para gráficos. VisualWebArena e AgentVista (2026) são os benchmarks que a fronteira persegue — e até mesmo o Gemini 3 Pro e o Claude Opus 4.7 marcam ~30% nas tarefas difíceis do AgentVista. Este projeto final reúne todos os tópicos da Fase 12: percepção (VLM de alta resolução), raciocínio (LLM com uso de ferramentas), grounding (saída de coordenadas), memória de longo horizonte e avaliação.

Tipo: Capstone Linguagens: Python (stdlib, action schema + agent loop skeleton) Pré-requisitos: Phase 12 · 05 (LLaVA), Phase 12 · 09 (Qwen-VL JSON), Phase 14 (Agent Engineering) Tempo: ~240 minutos

Objetivos de Aprendizado

• Projetar um loop de agente multimodal: perceber → raciocinar → agir → observar → repetir.
• Construir um esquema de saída de grounding de GUI (coordenadas de clique, digitar texto, rolar, arrastar) que o VLM possa emitir como JSON.
• Comparar agentes baseados apenas em capturas de tela vs. agentes baseados em árvores de acessibilidade vs. agentes híbridos.
• Configurar uma avaliação de benchmark de agente multimodal em uma pequena fatia do VisualWebArena.

O Problema

Um fluxo de trabalho de site de reservas: "encontre um voo para Tóquio para 15 de abril, assento no corredor por menos de $800, e reserve."

Um agente multimodal precisa:

1. Tirar uma captura de tela do navegador.
2. Analisar a captura de tela + URL + objetivo em um plano.
3. Emitir uma ação estruturada: clicar (em x,y), digitar "Tóquio" (no elemento E), rolar para baixo, selecionar (botão de rádio).
4. Aplicar a ação ao navegador.
5. Observar o novo estado (próxima captura de tela).
6. Repetir até que a tarefa esteja concluída.

Cada etapa é uma chamada de VLM multimodal. A saída do VLM deve ser um JSON analisável. Os erros se acumulam ao longo das etapas, portanto, a recuperação é importante.

O Conceito

GUI grounding — o primitivo

O grounding de GUI consiste em: dada uma captura de tela e uma instrução em linguagem natural, produzir a coordenada (x, y) para clicar (ou outra ação).

SeeClick (arXiv:2401.10935) foi o primeiro resultado aberto em escala: ajuste fino de um VLM em dados de GUI sintéticos + reais, produzindo coordenadas como tokens de texto simples. Funciona.

CogAgent (arXiv:2312.08914) adicionou codificação de alta resolução de 1120x1120 para interfaces densas. Pontuação: ~84% em navegação web.

Ferret-UI (arXiv:2404.05719) foca em interfaces móveis e integra-se com dados de acessibilidade do iOS.

O formato de saída geralmente é JSON:

{"action": "click", "x": 384, "y": 220, "element_desc": "Search button"}

O element_desc ajuda na recuperação: se as coordenadas derivarem entre as capturas de tela, a dica semântica permite que o sistema restabeleça o grounding.

Action schemas

Um esquema de ação típico possui de 6 a 10 tipos de ação:

• click: (x, y)
• type: (text, x?, y?)
• scroll: (direction, amount)
• drag: (x0, y0, x1, y1)
• select: (option_index)
• hover: (x, y)
• navigate: (url)
• wait: (ms)
• done: (success, explanation)

O agente emite uma ação por etapa. O wrapper do navegador executa e retorna o novo estado.

Apenas capturas de tela vs. árvore de acessibilidade

Dois modos de entrada:

• Apenas capturas de tela: imagem completa, sem informações estruturais. Mais geral; funciona em qualquer aplicativo.
• Árvore de acessibilidade: DOM estruturado / informações de acessibilidade do iOS. Muito mais confiável para grounding; funciona onde a árvore está disponível.
• Híbrido: ambos, com a árvore servindo como um grounder confiável para ações atômicas e a captura de tela para contexto semântico.

Agentes em produção usam o modo híbrido quando possível. A automação de navegadores (Selenium + acessibilidade) sempre possui a árvore; aplicativos de desktop às vezes a possuem.

Memória de longo horizonte

Um fluxo de trabalho de 20 etapas gera 20 capturas de tela. O contexto do VLM enche rapidamente. Três estratégias de compressão:

• Cadeia de resumo (Summary-chain): a cada 5 etapas, resume o que aconteceu e descarta as capturas de tela antigas.
• Pular quadros (Skip-frame): mantém a primeira captura de tela, a última e uma a cada 3 etapas.
• Log registrado por ferramentas (Tool-recorded log): executa as ações e mantém um log de texto do que foi feito; não examina novamente as capturas de tela antigas.

A API de computer-use do Claude usa o padrão de log. Mais simples e confiável.

Uso de ferramentas visuais

O ChartAgent (arXiv:2510.04514) introduz o uso de ferramentas visuais para compreensão de gráficos: recortar, aplicar zoom, OCR, chamar detecção externa. O agente pode emitir "recortar a região (100, 200, 300, 400) e chamar OCR" como uma chamada de ferramenta. A ferramenta retorna texto; o VLM continua o raciocínio.

Este padrão se generaliza: prompts set-of-mark, anotação de região e ferramentas de detecção externa se encaixam no mesmo esquema "emitir uma chamada de ferramenta, receber uma resposta estruturada".

Os benchmarks de 2026

• ScreenSpot-Pro. Grounding de GUI em ~1k capturas de tela da web. SOTA aberta Qwen2.5-VL-72B ~85%. Modelos de fronteira ~90%.
• VisualWebArena. Tarefas web de ponta a ponta (compras, fórum, classificados). SOTA aberta ~20%. Gemini 3 Pro ~27%.
• AgentVista (arXiv:2602.23166). O benchmark de 2026 mais difícil. Fluxos de trabalho realistas em 12 domínios. Modelos de fronteira pontuam de 27% a 40%; modelos abertos de 10% a 20%.
• WebArena / WebShop. Benchmarks mais antigos; saturados pelos modelos de fronteira.

Por que ainda é difícil

Gargalos de desempenho dos agentes:

1. Grounding visual em escala fina. "Clicar no X pequeno" costuma falhar em resoluções móveis.
2. Planejamento de longo horizonte. Após 10 ações, o agente se desvia do objetivo.
3. Recuperação de erros. Quando um clique falha (botão errado), detectar e se recuperar raramente são dados de treinamento comuns.
4. Contexto entre páginas. Alternar entre abas ou formulários longos causa perda de estado.

Direções de pesquisa: arquiteturas de memória, replanejamento explícito, verificação multimodal (correspondência de captura de tela para sucesso da ação).

A construção do projeto final

A tarefa do projeto final: construir um agente de uso de computador que:

1. Leia o HTML + captura de tela de uma página simulada de site de reservas.
2. Planeje uma sequência de várias etapas: buscar → selecionar → preencher formulário → enviar.
3. Emita ações JSON correspondentes ao esquema de ação.
4. Realize a avaliação em uma fatia fixa de 10 tarefas.

A lição fornece um código esqueleto fácil de estender para um navegador real.

Use It

code/main.py é o esqueleto do projeto final:

• Definição JSON do esquema de ação (10 ações).
• Estado simulado do navegador como dicionário.
• Esqueleto do loop do agente: receber estado, emitir ação, aplicar, repetir.
• Mini-benchmark de 10 tarefas (páginas sintéticas) para medir a taxa de sucesso de ponta a ponta.
• Gancho de recuperação de erros para quando uma ação falhar.

Ship It

Esta lição produz outputs/skill-multimodal-agent-designer.md. Dado um produto de uso de computador (domínio, conjunto de ações, meta de avaliação), projeta o loop completo do agente, estratégia de memória, modo de grounding e pontuação esperada no benchmark.

Exercícios

1. Estenda o esquema de ação com uma ferramenta screenshot_region (recortar + zoom). Quais tarefas se beneficiam?

2. Leia o artigo do AgentVista (arXiv:2602.23166). Descreva a categoria de tarefa mais difícil e por que os modelos de fronteira ainda falham.

3. Compressão de memória de longo horizonte: projete uma cadeia de resumo mantendo ≤4 capturas de tela ativas e registrando qualquer quantidade no log.

4. Construa um gancho de recuperação de erros: em caso de falha na ação (botão não encontrado), o que o agente deve fazer a seguir?

5. Compare o Claude 4.7 baseado apenas em capturas de tela com o Qwen2.5-VL baseado em híbrido (captura de tela + árvore de acessibilidade) em 10 tarefas web. Qual deles vence em quais tarefas?

Termos-chave

Leitura Adicional

• Cheng et al. — SeeClick (arXiv:2401.10935)
• Hong et al. — CogAgent (arXiv:2312.08914)
• You et al. — Ferret-UI (arXiv:2404.05719)
• ChartAgent (arXiv:2510.04514)
• Koh et al. — VisualWebArena (arXiv:2401.13649)
• AgentVista (arXiv:2602.23166)