Modèles de vision pour comprendre l’écran
Envoyez des captures d’écran à un modèle multimodal afin que l’agent « voie » ce qu’un humain verrait.
Modèles de vision pour comprendre l’écran est une leçon AI Agents gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage AI Agents, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours AI Agents comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Pourquoi la vision ?
Certaines actions Web sont difficiles à exprimer avec des sélecteurs :
- CAPTCHA (enfin, les tentatives)
- Éléments positionnés visuellement (bulles de discussion, interfaces dynamiques)
- Applications sans DOM stable (Canvas / WebGL)
Les LLM multimodaux permettent à l’agent de VOIR l’écran.
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.'}
]
}]
)Qualité de la vision
GPT-4o et Claude Sonnet 4.5 peuvent :
- Décrire précisément les captures d’écran
- Lire le texte dans les images (OCR)
- Identifier les éléments d’interface selon leur position
- Repérer les motifs et les anomalies
Ils ont encore du mal avec les très petits textes, les tableaux complexes et les coordonnées précises en pixels.
Localiser les éléments par description
Demandez au modèle « où se trouve le bouton Envoyer ? » et il renverra des coordonnées approximatives ou des instructions :
prompt = 'Look at the screenshot. Where is the Submit button? Return the approximate (x, y) coordinates of its center.'
# Response: {"x": 420, "y": 530}Réserve sur la précision des coordonnées
Les modèles ne sont pas précis au pixel près. Considérez leurs coordonnées comme des indications. Pour des clics précis, combinez-les si possible avec des sélecteurs du DOM.
SoM (ensemble de repères)
Annotez la capture d’écran avec des cadres numérotés autour des éléments interactifs. Demandez au modèle « sur quel numéro voulez-vous cliquer ? » :
- Identifiez les éléments interactifs via le DOM
- Ajoutez des superpositions numérotées
- Envoyez la capture d’écran annotée au LLM
- Le LLM répond par un numéro ; vous cliquez sur l’élément correspondant
C’est bien plus fiable que des coordonnées 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()Raisonnement sur plusieurs images
Pour les pages dynamiques, prenez des captures d’écran à plusieurs moments et envoyez-les toutes au modèle. Le modèle peut raisonner sur les changements temporels.
Latence et coût
Chaque capture d’écran représente environ 85 000 jetons en pleine résolution. Coûts :
- gpt-4o : 0,85 $ / 100 images
- claude-sonnet-4-5 : environ 1,50 $ / 100 images
Redimensionnez les images avant l’envoi ; n’utilisez la vision que lorsque la sélection fondée sur le DOM échoue.
Resize for Cheaper Calls
from PIL import Image
img = Image.open('screen.png')
img.thumbnail((1024, 1024))
img.save('screen-small.png')Solution de repli OCR
Pour extraire uniquement du texte, l’OCR (Tesseract, PaddleOCR) est bien moins cher et souvent meilleur que les LLM de vision.
Schéma SoM
Qu’est-ce que le schéma de prompting Set-of-Marks (SoM) ?
Récapitulatif
Envoyez des captures d’écran à GPT-4o ou Claude pour comprendre l’écran. Utilisez les annotations SoM pour des interactions fiables. Utilisez l’OCR pour le texte seul. Redimensionnez les images pour réduire les coûts.
Questions Fréquemment Posées
La leçon « Modèles de vision pour comprendre l’écran » est-elle gratuite ?
Oui — le texte complet de « Modèles de vision pour comprendre l’écran » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours AI Agents, passe à CoddyKit PRO. Le cours AI Agents comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Modèles de vision pour comprendre l’écran » ?
Envoyez des captures d’écran à un modèle multimodal afin que l’agent « voie » ce qu’un humain verrait. Tu pratiques AI Agents avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer AI Agents ?
Aucune expérience préalable n'est requise. AI Agents sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Modèles de vision pour comprendre l’écran » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon AI Agents ?
Oui. Chaque leçon AI Agents inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Automatisation du navigateur avec Playwright
- Modèles de vision pour comprendre l’écran
- Modèles d’utilisation de l’ordinateur (Anthropic Computer-Use)
- Construire un agent fiable pour remplir des formulaires