Vision-Modelle zum Verstehen von Bildschirminhalten
Senden Sie Screenshots an ein multimodales Modell, damit der Agent „sieht“, was ein Mensch sehen würde.
Vision-Modelle zum Verstehen von Bildschirminhalten ist eine kostenlose AI Agents-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des AI Agents-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der AI Agents-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Warum Vision?
Manche Webaktionen lassen sich nur schwer mit Selektoren ausdrücken:
- Captchas (nun ja, zumindest Versuche)
- Visuell positionierte Elemente (Chatblasen, dynamische UIs)
- Anwendungen ohne stabiles DOM (Canvas / WebGL)
Multimodale LLMs ermöglichen es dem Agenten, den Bildschirm zu SEHEN.
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.'}
]
}]
)Vision-Qualität
GPT-4o und Claude Sonnet 4.5 können:
- Screenshots präzise beschreiben
- Text in Bildern lesen (OCR)
- UI-Elemente anhand ihrer Position identifizieren
- Muster und Anomalien erkennen
Bei sehr kleinem Text, komplexen Tabellen und präzisen Pixelkoordinaten haben sie weiterhin Schwierigkeiten.
Elemente anhand einer Beschreibung finden
Fragen Sie das Modell „Wo befindet sich die Submit-Schaltfläche?“, und es liefert ungefähre Koordinaten oder Anweisungen:
prompt = 'Look at the screenshot. Where is the Submit button? Return the approximate (x, y) coordinates of its center.'
# Response: {"x": 420, "y": 530}Hinweis zur Koordinatengenauigkeit
Modelle arbeiten nicht pixelgenau. Betrachten Sie ihre Koordinaten als Hinweise. Für präzise Klicks sollten Sie diese, wenn möglich, mit DOM-Selektoren kombinieren.
SoM (Set of Marks)
Versehen Sie den Screenshot mit nummerierten Kästchen um interaktive Elemente. Fragen Sie das Modell „Auf welche Nummer möchten Sie klicken?“:
- Interaktive Elemente über das DOM identifizieren
- Nummerierte Overlays zeichnen
- Den annotierten Screenshot an das LLM senden
- Das LLM antwortet mit einer Nummer; Sie klicken auf dieses Element
Deutlich zuverlässiger als frei wählbare Koordinaten.
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()Reasoning über mehrere Frames
Nehmen Sie bei dynamischen Seiten zu mehreren Zeitpunkten Screenshots auf und senden Sie sie alle an das Modell. Das Modell kann zeitliche Veränderungen nachvollziehen.
Latenz und Kosten
Jeder Screenshot umfasst bei voller Auflösung etwa 85.000 Tokens. Kosten:
- gpt-4o: 0,85 $ / 100 Bilder
- claude-sonnet-4-5: etwa 1,50 $ / 100 Bilder
Skalieren Sie Bilder vor dem Senden und verwenden Sie Vision nur, wenn die DOM-basierte Auswahl fehlschlägt.
Resize for Cheaper Calls
from PIL import Image
img = Image.open('screen.png')
img.thumbnail((1024, 1024))
img.save('screen-small.png')OCR-Fallback
Für die reine Texterkennung ist OCR (Tesseract, PaddleOCR) wesentlich günstiger und oft besser als Vision-LLMs.
SoM-Muster
Was ist das Prompting-Muster Set of Marks (SoM)?
Zusammenfassung
Senden Sie Screenshots zur Bildschirmanalyse an GPT-4o oder Claude. Verwenden Sie SoM-Annotationen für zuverlässige Interaktionen. OCR eignet sich für reinen Text. Skalieren Sie Bilder, um Kosten zu sparen.
Häufig gestellte Fragen
Ist die Lektion „Vision-Modelle zum Verstehen von Bildschirminhalten“ kostenlos?
Ja — der vollständige Text von „Vision-Modelle zum Verstehen von Bildschirminhalten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des AI Agents-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der AI Agents-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Vision-Modelle zum Verstehen von Bildschirminhalten“?
Senden Sie Screenshots an ein multimodales Modell, damit der Agent „sieht“, was ein Mensch sehen würde. Du übst AI Agents mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um AI Agents zu starten?
Keine Vorkenntnisse erforderlich. AI Agents auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Vision-Modelle zum Verstehen von Bildschirminhalten“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser AI Agents-Lektion Code schreiben und ausführen?
Ja. Jede AI Agents-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Browser-Automatisierung mit Playwright
- Vision-Modelle zum Verstehen von Bildschirminhalten
- Muster zur Computernutzung (Anthropic Computer-Use)
- Einen zuverlässigen Agent zum Ausfüllen von Formularen entwickeln