Modelos de visão para compreensão de telas
Envie capturas de tela a um modelo multimodal para que o agente “veja” o que uma pessoa veria.
Modelos de visão para compreensão de telas é uma aula grátis de AI Agents no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de AI Agents, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de AI Agents inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
Por Que Usar Visão?
Algumas ações na web são difíceis de expressar com seletores:
- CAPTCHAs (bem, tentativas)
- Elementos posicionados visualmente (balões de chat, interfaces dinâmicas)
- Aplicativos sem um DOM estável (Canvas / WebGL)
Modelos multimodais baseados em LLM permitem que o agente SEE a tela.
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.'}
]
}]
)Qualidade da Visão
GPT-4o e Claude Sonnet 4.5 conseguem:
- Descrever capturas de tela com precisão
- Ler texto em imagens (OCR)
- Identificar elementos da interface pela posição
- Detectar padrões e anomalias
Ainda assim, eles têm dificuldade com textos muito pequenos, tabelas complexas e coordenadas precisas de pixels.
Localização de Elementos por Descrição
Peça ao modelo "onde está o botão Enviar?" e ele retornará coordenadas aproximadas ou instruções:
prompt = 'Look at the screenshot. Where is the Submit button? Return the approximate (x, y) coordinates of its center.'
# Response: {"x": 420, "y": 530}Ressalva sobre a Precisão das Coordenadas
Os modelos não têm precisão de pixel. Trate as coordenadas como sugestões. Para cliques precisos, combine-as com seletores do DOM sempre que possível.
SoM (Conjunto de Marcações)
Anote a captura de tela com caixas numeradas ao redor dos elementos interativos. Pergunte ao modelo "qual número você quer clicar?":
- Identifique os elementos interativos por meio do DOM
- Desenhe sobreposições numeradas
- Envie a captura de tela anotada ao LLM
- O LLM responde com um número; clique nesse elemento
É muito mais confiável do que coordenadas livres.
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()Raciocínio com Múltiplos Quadros
Para páginas dinâmicas, faça capturas de tela em vários momentos e envie todas ao modelo. O modelo pode raciocinar sobre mudanças temporais.
Latência e Custo
Cada captura de tela corresponde a aproximadamente 85 mil tokens em resolução máxima. Custos:
- gpt-4o: US$ 0,85 / 100 imagens
- claude-sonnet-4-5: aproximadamente US$ 1,50 / 100 imagens
Redimensione antes de enviar; use a visão somente quando a seleção baseada no DOM falhar.
Resize for Cheaper Calls
from PIL import Image
img = Image.open('screen.png')
img.thumbnail((1024, 1024))
img.save('screen-small.png')Alternativa com OCR
Para extração apenas de texto, OCR (Tesseract, PaddleOCR) é muito mais barato e frequentemente melhor do que LLMs de visão.
Padrão SoM
O que é o padrão de solicitação Set-of-Marks (SoM)?
Recapitulação
Envie capturas de tela ao GPT-4o ou ao Claude para compreensão da tela. Use anotações SoM para uma interação confiável. Use OCR para texto puro. Redimensione para economizar.
Perguntas Frequentes
A aula “Modelos de visão para compreensão de telas” é grátis?
Sim — o texto completo de “Modelos de visão para compreensão de telas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de AI Agents, atualize para CoddyKit PRO. O curso de AI Agents inclui 4 aulas no total.
O que vou aprender em “Modelos de visão para compreensão de telas”?
Envie capturas de tela a um modelo multimodal para que o agente “veja” o que uma pessoa veria. Você pratica AI Agents com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar AI Agents?
Nenhuma experiência prévia é necessária. AI Agents no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Modelos de visão para compreensão de telas”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de AI Agents?
Sim. Cada aula de AI Agents inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Automação de navegador com Playwright
- Modelos de visão para compreensão de telas
- Padrões de uso do computador (Anthropic Computer-Use)
- Construindo um agente confiável para preencher formulários