Phase 12 - Lesson 25

Agentes Multimodales y Uso de Computadora (Proyecto Final)

El producto de frontera de 2026 es un agente multimodal que lee capturas de pantalla, hace clic en botones, navega por interfaces de usuario web, completa formularios y termina flujos de trabajo de extremo a extremo. SeeClick y CogAgent (2024) demostraron la primitiva de guiado de GUI (GUI grounding). Ferret-UI agregó la parte móvil. ChartAgent introdujo el uso de herramientas visuales para gráficos. VisualWebArena y AgentVista (2026) son los benchmarks que persigue la frontera de la IA, e incluso Gemini 3 Pro y Claude Opus 4.7 obtienen un puntaje de ~30% en las tareas difíciles de AgentVista. Este proyecto integrador reúne cada hilo de la Fase 12: percepción (VLM de alta resolución), razonamiento (LLM con uso de herramientas), guiado (salida de coordenadas), memoria de largo horizonte y evaluación.

Tipo: Capstone Lenguajes: Python (stdlib, action schema + agent loop skeleton) Prerrequisitos: Phase 12 · 05 (LLaVA), Phase 12 · 09 (Qwen-VL JSON), Phase 14 (Agent Engineering) Tiempo: ~240 minutos

Objetivos de Aprendizaje

• Diseñar un bucle de agente multimodal: percibir → razonar → actuar → observar → repetir.
• Construir un esquema de salida para guiado de GUI (coordenadas de clic, escribir texto, desplazarse, arrastrar) que el VLM pueda emitir en formato JSON.
• Comparar agentes que solo usan capturas de pantalla frente a agentes basados en árboles de accesibilidad y agentes híbridos.
• Configurar una evaluación de benchmark de agentes multimodales en una pequeña sección de VisualWebArena.

El Problema

Un flujo de trabajo en un sitio de reservas: "búscame un vuelo a Tokio para el 15 de abril, asiento de pasillo por menos de $800 y resérvalo".

Un agente multimodal necesita:

1. Tomar una captura de pantalla del navegador.
2. Analizar la captura de pantalla + URL + objetivo en un plan.
3. Emitir una acción estructurada: clic (en x,y), escribir "Tokio" (en el elemento E), desplazarse hacia abajo, seleccionar (botón de opción).
4. Aplicar la acción al navegador.
5. Observar el nuevo estado (siguiente captura de pantalla).
6. Repetir hasta completar la tarea.

Cada paso es una llamada a un VLM multimodal. La salida del VLM debe ser un JSON analizable. Los errores se acumulan a lo largo de los pasos, por lo que la recuperación es fundamental.

El Concepto

GUI grounding — el primitivo

El guiado de GUI (GUI grounding) consiste en: dada una captura de pantalla y una instrucción en lenguaje natural, emitir la coordenada (x, y) donde se debe hacer clic (u otra acción).

SeeClick (arXiv:2401.10935) fue el primer resultado abierto a escala: ajustar un VLM con datos de GUI tanto sintéticos como reales para emitir coordenadas como tokens de texto plano. Funciona.

CogAgent (arXiv:2312.08914) agregó codificación de alta resolución de 1120x1120 para interfaces de usuario densas. Puntaje: ~84% en navegación web.

Ferret-UI (arXiv:2404.05719) se enfoca en interfaces móviles e integra datos de accesibilidad de iOS.

El formato de salida suele ser JSON:

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

El element_desc ayuda a la recuperación: si las coordenadas se desvían entre capturas de pantalla, la pista semántica le permite al sistema volver a guiarse.

Action schemas

Un esquema de acción típico tiene entre 6 y 10 tipos de acción:

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

El agente emite una acción por paso. El wrapper del navegador la ejecuta y devuelve el nuevo estado.

Screenshot-only vs. accessibility-tree

Dos modos de entrada:

• Solo capturas de pantalla: imagen completa, sin información estructural. Es el más general; funciona en cualquier aplicación.
• Árbol de accesibilidad: DOM estructurado / información de accesibilidad de iOS. Es mucho más confiable para el guiado; funciona donde el árbol está disponible.
• Híbrido: ambos, con el árbol como un guiador confiable para acciones atómicas y la captura de pantalla para el contexto semántico.

Los agentes de producción utilizan el modo híbrido cuando es posible. La automatización del navegador (Selenium + accesibilidad) siempre cuenta con el árbol; las aplicaciones de escritorio a veces lo tienen.

Long-horizon memory

Un flujo de trabajo de 20 pasos genera 20 capturas de pantalla. El contexto del VLM se llena rápidamente. Tres estrategias de compresión:

• Cadena de resumen (Summary-chain): después de cada 5 pasos, resumir lo que ha sucedido y descartar las capturas de pantalla antiguas.
• Salto de cuadros (Skip-frame): conservar la primera, la última y una de cada tres capturas de pantalla.
• Registro de herramientas (Tool-recorded log): ejecutar acciones y mantener un registro de texto de lo que se hizo; evitar volver a examinar las capturas de pantalla antiguas.

La API de computer-use de Claude utiliza el patrón de registro. Es más simple y confiable.

Visual tool use

ChartAgent (arXiv:2510.04514) introduce el uso de herramientas visuales para la comprensión de gráficos: recortar, hacer zoom, OCR, llamar a detección externa. El agente puede emitir "recortar la región (100, 200, 300, 400) y luego llamar a OCR" como una llamada a herramienta. La herramienta devuelve texto y el VLM continúa el razonamiento.

Este patrón se generaliza: el prompting set-of-mark, la anotación de regiones y las herramientas de detección externa encajan en el mismo esquema de "emitir una llamada a herramienta, recibir una respuesta estructurada".

Los benchmarks de 2026

• ScreenSpot-Pro. Guiado de GUI en ~1k capturas de pantalla web. SOTA abierta Qwen2.5-VL-72B ~85%. Modelos de frontera ~90%.
• VisualWebArena. Tareas web de extremo a extremo (compras, foros, clasificados). SOTA abierta ~20%. Gemini 3 Pro ~27%.
• AgentVista (arXiv:2602.23166). El benchmark más difícil de 2026. Flujos de trabajo realistas en 12 dominios. Los modelos de frontera obtienen entre 27-40%; los modelos abiertos entre 10-20%.
• WebArena / WebShop. Benchmarks más antiguos; saturados por los modelos de frontera.

Por qué todavía es difícil

Cuellos de botella en el rendimiento del agente:

1. Guiado visual a escala fina. "Hacer clic en la X pequeña" falla a menudo en resolución móvil.
2. Planificación a largo plazo. Después de 10 acciones, el agente se desvía del objetivo.
3. Recuperación de errores. Cuando falla un clic (botón incorrecto), la detección y recuperación rara vez forman parte de los datos de entrenamiento.
4. Contexto entre páginas. Saltar entre pestañas o formularios largos hace que se pierda el estado.

Direcciones de investigación: arquitecturas de memoria, replanificación explícita, verificación multimodal (coincidencia de capturas de pantalla para verificar el éxito de la acción).

La construcción del proyecto final

La tarea del proyecto integrador consiste en: construir un agente de computer-use que:

1. Lea el HTML + captura de pantalla de una página simulada de un sitio de reservas.
2. Planifique una secuencia de varios pasos: buscar → seleccionar → completar formulario → enviar.
3. Emita acciones JSON que coincidan con el esquema de acción.
4. Evalúe en una sección fija de 10 tareas.

La lección proporciona un código esqueleto que es fácil de extender a un navegador real.

Use It

code/main.py es el esqueleto del proyecto:

• Definición JSON del esquema de acción (10 acciones).
• Estado simulado del navegador como un diccionario.
• Esqueleto del bucle del agente: recibir estado, emitir acción, aplicar, bucle.
• Mini-benchmark de 10 tareas (páginas sintéticas) para medir la tasa de éxito de extremo a extremo.
• Gancho de recuperación de errores para cuando falla una acción.

Ship It

Esta lección produce outputs/skill-multimodal-agent-designer.md. Dado un producto de computer-use (dominio, conjunto de acciones, objetivo de evaluación), diseña el bucle completo del agente, la estrategia de memoria, el modo de guiado y el puntaje esperado en el benchmark.

Ejercicios

1. Extiende el esquema de acción con una herramienta screenshot_region (recortar + zoom). ¿Qué tareas se benefician?

2. Lee AgentVista (arXiv:2602.23166). Describe la categoría de tarea más difícil y por qué los modelos de frontera aún fallan.

3. Compresión de memoria de largo plazo: diseña una cadena de resumen que conserve ≤4 capturas de pantalla activas y registre cualquier cantidad en el historial.

4. Construye un gancho de recuperación de errores: ante la falla de una acción (botón no encontrado), ¿qué hace el agente a continuación?

5. Compara Claude 4.7 (solo captura de pantalla) con Qwen2.5-VL híbrido (captura de pantalla + árbol de accesibilidad) en 10 tareas web. ¿Cuál gana en qué tareas?

Términos Clave

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