Visiemodellen voor schermbegrip
Stuur screenshots naar een multimodaal model zodat de agent kan ‘zien’ wat een mens zou zien.
Visiemodellen voor schermbegrip is een gratis AI-agenten-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject AI-agenten. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus AI-agenten bevat in totaal 4 lessen.
Delen van deze les zijn nog niet vertaald en worden in het Engels weergegeven.
Waarom visuele analyse?
Sommige webacties zijn moeilijk met keuzepatronen uit te drukken:
- Captcha's (of in elk geval pogingen daartoe)
- Visueel gepositioneerde elementen (chatballonnen, dynamische interfaces)
- Apps zonder stabiele DOM (Canvas / WebGL)
Multimodale LLM's laten de agent het scherm ZIEN.
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.'}
]
}]
)Visuele kwaliteit
GPT-4o en Claude Sonnet 4.5 kunnen:
- Schermafbeeldingen nauwkeurig beschrijven
- Tekst in afbeeldingen lezen (OCR)
- Interface-elementen op basis van hun positie herkennen
- Patronen en afwijkingen signaleren
Ze hebben nog steeds moeite met zeer kleine tekst, complexe tabellen en precieze pixelcoördinaten.
Elementen vinden op basis van een beschrijving
Vraag het model ‘waar is de knop Verzenden?’ en het geeft geschatte coördinaten of instructies terug:
prompt = 'Look at the screenshot. Where is the Submit button? Return the approximate (x, y) coordinates of its center.'
# Response: {"x": 420, "y": 530}Voorbehoud bij coördinaatprecisie
Modellen zijn niet pixelprecies. Beschouw hun coördinaten als aanwijzingen. Combineer ze voor precieze klikken waar mogelijk met DOM-keuzepatronen.
SoM (set met markeringen)
Voorzie de schermafbeelding van genummerde kaders rond interactieve elementen. Vraag het model ‘op welk nummer wil je klikken?’:
- Identificeer interactieve elementen via de DOM
- Teken genummerde overlays
- Stuur de gemarkeerde schermafbeelding naar de LLM
- De LLM antwoordt met een nummer; klik op dat element
Veel betrouwbaarder dan vrije coördinaten.
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()Redeneren met meerdere beelden
Maak voor dynamische pagina's op meerdere momenten schermafbeeldingen en stuur ze allemaal naar het model. Het model kan redeneren over veranderingen in de tijd.
Latentie en kosten
Elke schermafbeelding bevat bij volledige resolutie ongeveer 85.000 tokens. Kosten:
- gpt-4o: $0.85 / 100 afbeeldingen
- claude-sonnet-4-5: ongeveer $1.50 / 100 afbeeldingen
Verklein afbeeldingen voordat je ze verstuurt; gebruik visuele analyse alleen wanneer selectie op basis van de DOM mislukt.
Resize for Cheaper Calls
from PIL import Image
img = Image.open('screen.png')
img.thumbnail((1024, 1024))
img.save('screen-small.png')OCR als terugvaloptie
Voor het uitsluitend extraheren van tekst is OCR (Tesseract, PaddleOCR) veel goedkoper en vaak beter dan visuele LLM's.
SoM-patroon
Wat is het promptpatroon Set of Marks (SoM)?
Samenvatting
Stuur schermafbeeldingen naar GPT-4o of Claude om het scherm te laten begrijpen. Gebruik SoM-markeringen voor betrouwbare interactie. Gebruik OCR voor uitsluitend tekst. Verklein afbeeldingen om kosten te besparen.
Leer AI-agenten met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 60
- Lessen
- 239
Veelgestelde vragen
Is de les “Visiemodellen voor schermbegrip” gratis?
Ja — de volledige tekst van “Visiemodellen voor schermbegrip” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus AI-agenten wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus AI-agenten bevat in totaal 4 lessen.
Wat leer ik in “Visiemodellen voor schermbegrip”?
Stuur screenshots naar een multimodaal model zodat de agent kan ‘zien’ wat een mens zou zien. Je oefent met AI-agenten door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met AI-agenten te beginnen?
Ervaring vooraf is niet nodig. AI-agenten op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Visiemodellen voor schermbegrip”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over AI-agenten?
Ja. Elke les over AI-agenten bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Browserautomatisering met Playwright
- Visiemodellen voor schermbegrip
- Patronen voor computergebruik (Anthropic Computer-Use)
- Een betrouwbare agent voor formulierinvulling bouwen