Model Visi untuk Memahami Layar
Kirim tangkapan layar ke model multimodal agar agen dapat “melihat” apa yang dilihat manusia.
Model Visi untuk Memahami Layar adalah pelajaran AI Agents gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar AI Agents, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus AI Agents mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
Mengapa Visi?
Beberapa tindakan web sulit dinyatakan menggunakan pemilih:
- Captcha (setidaknya upaya untuk menanganinya)
- Elemen yang diposisikan secara visual (gelembung obrolan, UI dinamis)
- Aplikasi tanpa DOM yang stabil (Canvas / WebGL)
LLM multimodal memungkinkan agen MELIHAT layar.
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.'}
]
}]
)Kualitas Visi
GPT-4o dan Claude Sonnet 4.5 dapat:
- Mendeskripsikan tangkapan layar secara akurat
- Membaca teks dalam gambar (OCR)
- Mengidentifikasi elemen UI berdasarkan posisi
- Menemukan pola dan anomali
Keduanya masih kesulitan dengan teks yang sangat kecil, tabel kompleks, dan koordinat piksel yang presisi.
Menemukan Elemen berdasarkan Deskripsi
Tanyakan kepada model "di mana tombol Kirim?", lalu model akan mengembalikan perkiraan koordinat atau instruksi:
prompt = 'Look at the screenshot. Where is the Submit button? Return the approximate (x, y) coordinates of its center.'
# Response: {"x": 420, "y": 530}Catatan tentang Presisi Koordinat
Model tidak memiliki ketepatan hingga tingkat piksel. Perlakukan koordinatnya sebagai petunjuk. Untuk klik yang presisi, gabungkan dengan pemilih DOM jika memungkinkan.
SoM (Kumpulan Penanda)
Beri anotasi pada tangkapan layar dengan kotak bernomor di sekeliling elemen interaktif. Tanyakan kepada model "nomor berapa yang ingin Anda klik?":
- Identifikasi elemen interaktif melalui DOM
- Gambar lapisan penanda bernomor
- Kirim tangkapan layar beranotasi ke LLM
- LLM merespons dengan sebuah nomor; Anda mengeklik elemen tersebut
Jauh lebih andal daripada koordinat bebas.
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()Penalaran Multi-Bingkai
Untuk halaman dinamis, ambil tangkapan layar pada beberapa waktu dan kirim semuanya ke model. Model dapat menalar perubahan dari waktu ke waktu.
Latensi dan Biaya
Setiap tangkapan layar beresolusi penuh berukuran sekitar 85 ribu token. Biayanya:
- gpt-4o: $0.85 / 100 gambar
- claude-sonnet-4-5: sekitar $1.50 / 100 gambar
Ubah ukuran sebelum mengirim; gunakan visi hanya ketika pemilihan berbasis DOM gagal.
Resize for Cheaper Calls
from PIL import Image
img = Image.open('screen.png')
img.thumbnail((1024, 1024))
img.save('screen-small.png')Cadangan OCR
Untuk ekstraksi teks murni, OCR (Tesseract, PaddleOCR) jauh lebih murah dan sering kali lebih baik daripada LLM visi.
Pola SoM
Apa itu pola pemberian perintah Set-of-Marks (SoM)?
Ringkasan
Kirim tangkapan layar ke GPT-4o atau Claude untuk memahami layar. Gunakan anotasi SoM untuk interaksi yang andal. Gunakan OCR untuk teks murni. Ubah ukuran untuk menghemat biaya.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Model Visi untuk Memahami Layar” gratis?
Ya — teks lengkap “Model Visi untuk Memahami Layar” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus AI Agents, upgrade ke CoddyKit PRO. Kursus AI Agents mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Model Visi untuk Memahami Layar”?
Kirim tangkapan layar ke model multimodal agar agen dapat “melihat” apa yang dilihat manusia. Kamu berlatih AI Agents dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai AI Agents?
Tidak diperlukan pengalaman sebelumnya. AI Agents di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Model Visi untuk Memahami Layar” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran AI Agents ini?
Ya. Setiap pelajaran AI Agents menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Otomatisasi Peramban dengan Playwright
- Model Visi untuk Memahami Layar
- Pola Penggunaan Komputer (Anthropic Computer-Use)
- Membangun Agen Pengisian Formulir yang Andal