Ekranı Anlamak için Görsel Modeller
Aracının bir insanın göreceğini «görebilmesi» için ekran görüntülerini çok kipli bir modele gönderin.
Ekranı Anlamak için Görsel Modeller, CoddyKit'te ücretsiz bir AI Agents dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, AI Agents öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. AI Agents kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
Görüntü İşleme Neden Gerekli?
Bazı web işlemlerini seçicilerle ifade etmek zordur:
- CAPTCHA'lar (daha doğrusu, bunları çözme girişimleri)
- Görsel konumlandırılmış öğeler (sohbet balonları, dinamik kullanıcı arayüzleri)
- Kararlı bir DOM'u olmayan uygulamalar (Canvas / WebGL)
Çok kipli LLM'ler, agent'ın ekranı SEE etmesini sağlar.
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.'}
]
}]
)Görüntü İşleme Kalitesi
GPT-4o ve Claude Sonnet 4.5 şunları yapabilir:
- Ekran görüntülerini doğru biçimde açıklamak
- Görüntülerdeki metinleri okumak (OCR)
- Kullanıcı arayüzü öğelerini konumlarına göre belirlemek
- Kalıpları ve anormallikleri fark etmek
Ancak çok küçük metinlerde, karmaşık tablolarda ve kesin piksel koordinatlarında hâlâ zorlanırlar.
Öğeleri Açıklamayla Bulma
Modele "Submit düğmesi nerede?" diye sorun; model yaklaşık koordinatlar veya talimatlar döndürür:
prompt = 'Look at the screenshot. Where is the Submit button? Return the approximate (x, y) coordinates of its center.'
# Response: {"x": 420, "y": 530}Koordinat Hassasiyeti Uyarısı
Modeller piksel düzeyinde kusursuz değildir. Koordinatlarını ipucu olarak değerlendirin. Kesin tıklamalar için mümkün olduğunda DOM seçicilerini bunlarla birleştirin.
SoM (İşaretler Kümesi)
Etkileşimli öğelerin çevresine numaralı kutular çizerek ekran görüntüsüne açıklamalar ekleyin. Modele "hangi numaraya click yapmak istiyorsunuz?" diye sorun:
- Etkileşimli öğeleri DOM üzerinden belirleyin
- Numaralı katmanlar çizin
- Açıklama eklenmiş ekran görüntüsünü LLM'ye gönderin
- LLM bir numarayla yanıt verir; siz de o öğeye click yaparsınız
Serbest biçimli koordinatlardan çok daha güvenilirdir.
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()Çok Kareli Akıl Yürütme
Dinamik sayfalarda farklı anlarda birden fazla ekran görüntüsü alın ve hepsini modele gönderin. Model, zamansal değişiklikler hakkında akıl yürütebilir.
Gecikme ve Maliyet
Her ekran görüntüsü tam çözünürlükte yaklaşık 85 bin belirteç içerir. Maliyetler:
- gpt-4o: 100 görüntü için 0,85 $
- claude-sonnet-4-5: 100 görüntü için yaklaşık 1,50 $
Göndermeden önce görüntüyü yeniden boyutlandırın; görüntü işlemeyi yalnızca DOM tabanlı seçim başarısız olduğunda kullanın.
Resize for Cheaper Calls
from PIL import Image
img = Image.open('screen.png')
img.thumbnail((1024, 1024))
img.save('screen-small.png')OCR Yedek Mekanizması
Salt metin çıkarma için OCR (Tesseract, PaddleOCR), görüntü işleme LLM'lerinden çok daha ucuzdur ve çoğu zaman daha iyi sonuç verir.
SoM Deseni
İşaretler Kümesi (SoM) istem oluşturma deseni nedir?
Özet
Ekranı anlaması için ekran görüntülerini GPT-4o'ya veya Claude'a gönderin. Güvenilir etkileşim için SoM açıklamalarını kullanın. Salt metin için OCR kullanın. Maliyeti azaltmak için görüntüyü yeniden boyutlandırın.
Sıkça Sorulan Sorular
“Ekranı Anlamak için Görsel Modeller” dersi ücretsiz mi?
Evet — “Ekranı Anlamak için Görsel Modeller” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve AI Agents kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. AI Agents kursu toplamda 4 dersten oluşur.
“Ekranı Anlamak için Görsel Modeller” dersinde ne öğreneceğim?
Aracının bir insanın göreceğini «görebilmesi» için ekran görüntülerini çok kipli bir modele gönderin. AI Agents ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
AI Agents öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te AI Agents, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Ekranı Anlamak için Görsel Modeller” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu AI Agents dersinde kod yazıp çalıştırabilir miyim?
Evet. Her AI Agents dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Playwright ile Tarayıcı Otomasyonu
- Ekranı Anlamak için Görsel Modeller
- Bilgisayar Kullanımı Kalıpları (Anthropic Computer-Use)
- Güvenilir Form Doldurma Aracısı Oluşturma