Modele wizyjne do rozumienia ekranu
Wyślij zrzuty ekranu do modelu multimodalnego, aby agent „widział” to, co widziałby człowiek.
Modele wizyjne do rozumienia ekranu to bezpłatna lekcja AI Agents na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej AI Agents, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs AI Agents zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
Dlaczego używać wizji?
Niektóre działania w sieci trudno wyrazić za pomocą selektorów:
- CAPTCHA (a właściwie próby ich obsługi)
- Elementy rozmieszczone wizualnie (dymki czatu, dynamiczne interfejsy)
- Aplikacje bez stabilnego DOM (Canvas / WebGL)
Multimodalne modele LLM pozwalają agentowi WIDZIEĆ ekran.
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.'}
]
}]
)Jakość rozpoznawania obrazu
GPT-4o i Claude Sonnet 4.5 potrafią:
- Dokładnie opisywać zrzuty ekranu
- Odczytywać tekst z obrazów (OCR)
- Rozpoznawać elementy interfejsu na podstawie ich położenia
- Wykrywać wzorce i anomalie
Nadal mają trudności z bardzo małym tekstem, złożonymi tabelami i precyzyjnymi współrzędnymi pikseli.
Lokalizowanie elementów na podstawie opisu
Należy zapytać model „gdzie znajduje się przycisk Submit?”, a zwróci przybliżone współrzędne lub instrukcje:
prompt = 'Look at the screenshot. Where is the Submit button? Return the approximate (x, y) coordinates of its center.'
# Response: {"x": 420, "y": 530}Zastrzeżenie dotyczące precyzji współrzędnych
Modele nie działają z dokładnością co do piksela. Ich współrzędne należy traktować jako wskazówki. W przypadku precyzyjnych kliknięć, jeśli to możliwe, należy połączyć je z selektorami DOM.
SoM (Set of Marks)
Należy oznaczyć zrzut ekranu ponumerowanymi ramkami wokół elementów interaktywnych. Następnie należy zapytać model „który numer chcesz kliknąć?”:
- Zidentyfikować elementy interaktywne za pomocą DOM
- Narysować ponumerowane nakładki
- Wysłać do LLM oznaczony zrzut ekranu
- LLM zwraca numer, a Państwa kod klika ten element
To znacznie bardziej niezawodne niż dowolne współrzędne.
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()Rozumowanie na podstawie wielu klatek
W przypadku dynamicznych stron należy wykonywać zrzuty ekranu w kilku momentach i wysyłać je wszystkie do modelu. Model może wnioskować na podstawie zmian w czasie.
Opóźnienia i koszty
Każdy zrzut ekranu zajmuje około 85 tys. tokenów w pełnej rozdzielczości. Koszty:
- gpt-4o: 0,85 USD / 100 obrazów
- claude-sonnet-4-5: około 1,50 USD / 100 obrazów
Przed wysłaniem należy zmniejszyć obrazy; z wizji należy korzystać tylko wtedy, gdy wybór elementu na podstawie DOM zawiedzie.
Resize for Cheaper Calls
from PIL import Image
img = Image.open('screen.png')
img.thumbnail((1024, 1024))
img.save('screen-small.png')Awaryjne użycie OCR
W przypadku samego wyodrębniania tekstu OCR (Tesseract, PaddleOCR) jest znacznie tańszy i często skuteczniejszy niż modele LLM rozpoznające obrazy.
Wzorzec SoM
Czym jest wzorzec promptowania Set-of-Marks (SoM)?
Podsumowanie
Należy wysyłać zrzuty ekranu do GPT-4o lub Claude w celu zrozumienia zawartości ekranu. Do niezawodnej interakcji należy używać oznaczeń SoM. OCR służy do odczytywania samego tekstu. Zmniejszanie obrazów pozwala ograniczyć koszty.
Często zadawane pytania
Czy lekcja „Modele wizyjne do rozumienia ekranu” jest bezpłatna?
Tak — pełny tekst „Modele wizyjne do rozumienia ekranu” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu AI Agents, przejdź na CoddyKit PRO. Kurs AI Agents zawiera 4 lekcji w sumie.
Co nauczysz się w „Modele wizyjne do rozumienia ekranu”?
Wyślij zrzuty ekranu do modelu multimodalnego, aby agent „widział” to, co widziałby człowiek. Ćwiczysz AI Agents z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć AI Agents?
Nie wymagamy żadnego doświadczenia. AI Agents w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Modele wizyjne do rozumienia ekranu”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji AI Agents?
Tak. Każda lekcja AI Agents zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Automatyzacja przeglądarki za pomocą Playwright
- Modele wizyjne do rozumienia ekranu
- Wzorce użycia komputera (Anthropic Computer-Use)
- Budowanie niezawodnego agenta do wypełniania formularzy