Modelos de visión para comprender la pantalla
Envíe capturas de pantalla a un modelo multimodal para que el agente «vea» lo que vería una persona.
Modelos de visión para comprender la pantalla es una lección gratuita de AI Agents en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de AI Agents, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de AI Agents incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
¿Por qué usar visión?
Algunas acciones web son difíciles de expresar mediante selectores:
- CAPTCHA (bueno, intentos)
- Elementos cuya posición es visual (burbujas de chat, interfaces dinámicas)
- Aplicaciones sin un DOM estable (Canvas / WebGL)
Los LLM multimodales permiten que el agente VEA la pantalla.
Take a Screenshot, Send to LLM
import base64
page.screenshot(path='screen.png')
with open('screen.png', 'rb') as f:
b64 = base64.b64encode(f.read()).decode()
response = client.chat.completions.create(
model='gpt-4o',
messages=[{
'role': 'user',
'content': [
{'type': 'text', 'text': 'What buttons are visible? Return JSON.'},
{'type': 'image_url', 'image_url': {'url': f'data:image/png;base64,{b64}'}}
]
}]
)Anthropic Vision
response = client.messages.create(
model='claude-sonnet-4-5',
max_tokens=1024,
messages=[{
'role': 'user',
'content': [
{'type': 'image', 'source': {'type': 'base64', 'media_type': 'image/png', 'data': b64}},
{'type': 'text', 'text': 'Describe what you see.'}
]
}]
)Calidad de la visión
GPT-4o y Claude Sonnet 4.5 pueden:
- Describir capturas de pantalla con precisión
- Leer texto en imágenes (OCR)
- Identificar elementos de la interfaz por su posición
- Detectar patrones y anomalías
Aun así, tienen dificultades con textos muy pequeños, tablas complejas y coordenadas de píxeles precisas.
Localizar elementos mediante una descripción
Pregunte al modelo «¿dónde está el botón Submit?» y este devolverá coordenadas aproximadas o instrucciones:
prompt = 'Look at the screenshot. Where is the Submit button? Return the approximate (x, y) coordinates of its center.'
# Response: {"x": 420, "y": 530}Advertencia sobre la precisión de las coordenadas
Los modelos no son precisos a nivel de píxel. Considere sus coordenadas como indicaciones. Para hacer clic con precisión, combínelas con selectores del DOM cuando sea posible.
SoM (Set of Marks)
Anote la captura de pantalla con recuadros numerados alrededor de los elementos interactivos. Pregunte al modelo «¿qué número desea pulsar?»:
- Identifique los elementos interactivos mediante el DOM
- Dibuje superposiciones numeradas
- Envíe la captura de pantalla anotada al LLM
- El LLM responde con un número; haga clic en ese elemento
Es mucho más fiable que usar coordenadas libres.
Code for SoM
elements = page.query_selector_all('button, a, input, [role="button"]')
annotated = draw_numbered_overlays(screenshot, elements)
idx = ask_llm_for_choice(annotated, prompt='Click the Submit button')
elements[idx].click()Razonamiento con varios fotogramas
Para páginas dinámicas, tome capturas de pantalla en varios momentos y envíelas todas al modelo. El modelo puede razonar sobre los cambios temporales.
Latencia y coste
Cada captura de pantalla ocupa unos 85 000 tokens a resolución completa. Costes:
- gpt-4o: 0,85 $ / 100 imágenes
- claude-sonnet-4-5: ~1,50 $ / 100 imágenes
Cambie el tamaño antes de enviarla; utilice la visión solo cuando falle la selección basada en el DOM.
Resize for Cheaper Calls
from PIL import Image
img = Image.open('screen.png')
img.thumbnail((1024, 1024))
img.save('screen-small.png')Alternativa mediante OCR
Para extraer únicamente texto, el OCR (Tesseract, PaddleOCR) es mucho más barato y a menudo mejor que los LLM de visión.
Patrón SoM
¿Qué es el patrón de prompting Set-of-Marks (SoM)?
Repaso
Envíe capturas de pantalla a GPT-4o o Claude para comprender la pantalla. Utilice anotaciones SoM para interactuar de forma fiable. Use OCR para texto puro. Cambie el tamaño para ahorrar costes.
Preguntas frecuentes
¿La lección «Modelos de visión para comprender la pantalla» es gratis?
Sí — el texto completo de «Modelos de visión para comprender la pantalla» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de AI Agents, actualiza a CoddyKit PRO. El curso de AI Agents incluye 4 lecciones en total.
¿Qué aprenderé en «Modelos de visión para comprender la pantalla»?
Envíe capturas de pantalla a un modelo multimodal para que el agente «vea» lo que vería una persona. Practicas AI Agents con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar AI Agents?
No se requiere experiencia previa. AI Agents en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Modelos de visión para comprender la pantalla»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de AI Agents?
Sí. Cada lección de AI Agents incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Automatización del navegador con Playwright
- Modelos de visión para comprender la pantalla
- Patrones de uso del ordenador (Anthropic Computer-Use)
- Construcción de un agente fiable para rellenar formularios