Modelli di visione per comprendere lo schermo
Invii gli screenshot a un modello multimodale, così l’agente può «vedere» ciò che vedrebbe una persona
Modelli di visione per comprendere lo schermo è una lezione AI Agents gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento AI Agents, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso AI Agents include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
Perché usare la visione?
Alcune azioni sul web sono difficili da esprimere con i selettori:
- Captcha (o, meglio, tentativi di risolverli)
- Elementi posizionati visivamente (bolle di chat, interfacce dinamiche)
- App senza un DOM stabile (Canvas / WebGL)
I modelli linguistici multimodali permettono all'agente di VEDERE lo schermo.
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.'}
]
}]
)Qualità della visione
GPT-4o e Claude Sonnet 4.5 possono:
- Descrivere con precisione gli screenshot
- Leggere il testo nelle immagini (OCR)
- Identificare gli elementi dell'interfaccia in base alla posizione
- Rilevare schemi e anomalie
Continuano però ad avere difficoltà con testi molto piccoli, tabelle complesse e coordinate pixel precise.
Individuare gli elementi tramite descrizione
Chiedere al modello "dov'è il pulsante Submit?" e questo restituirà coordinate approssimative o istruzioni:
prompt = 'Look at the screenshot. Where is the Submit button? Return the approximate (x, y) coordinates of its center.'
# Response: {"x": 420, "y": 530}Avvertenza sulla precisione delle coordinate
I modelli non sono precisi al pixel. Considerare le loro coordinate come indicazioni. Per clic precisi, combinarle con i selettori DOM quando possibile.
SoM (Set of Marks)
Annotare lo screenshot con riquadri numerati attorno agli elementi interattivi. Chiedere al modello "quale numero si desidera cliccare?":
- Identificare gli elementi interattivi tramite il DOM
- Disegnare sovrapposizioni numerate
- Inviare lo screenshot annotato al LLM
- Il LLM risponde con un numero; fare clic sull'elemento corrispondente
È molto più affidabile delle coordinate libere.
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()Ragionamento su più fotogrammi
Per le pagine dinamiche, acquisire screenshot in più momenti e inviarli tutti al modello. Il modello può ragionare sui cambiamenti temporali.
Latenza e costi
Ogni screenshot occupa circa 85k token alla risoluzione massima. Costi:
- gpt-4o: $0.85 / 100 immagini
- claude-sonnet-4-5: circa $1.50 / 100 immagini
Ridimensionare le immagini prima di inviarle; usare la visione solo quando la selezione basata sul DOM non funziona.
Resize for Cheaper Calls
from PIL import Image
img = Image.open('screen.png')
img.thumbnail((1024, 1024))
img.save('screen-small.png')Fallback OCR
Per la pura estrazione di testo, l'OCR (Tesseract, PaddleOCR) è molto più economico e spesso migliore dei LLM con visione.
Pattern SoM
Cos'è il pattern di prompting Set-of-Marks (SoM)?
Riepilogo
Inviare screenshot a GPT-4o o Claude per comprendere lo schermo. Usare le annotazioni SoM per un'interazione affidabile. Usare l'OCR per il testo puro. Ridimensionare le immagini per contenere i costi.
Impara AI Agents con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 60
- Lezioni
- 239
Domande Frequenti
La lezione «Modelli di visione per comprendere lo schermo» è gratuita?
Sì — il testo completo di «Modelli di visione per comprendere lo schermo» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso AI Agents, passa a CoddyKit PRO. Il corso AI Agents include 4 lezioni in totale.
Cosa imparerò in «Modelli di visione per comprendere lo schermo»?
Invii gli screenshot a un modello multimodale, così l’agente può «vedere» ciò che vedrebbe una persona Eserciti AI Agents con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare AI Agents?
Non è richiesta alcuna esperienza precedente. AI Agents su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Modelli di visione per comprendere lo schermo»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione AI Agents?
Sì. Ogni lezione AI Agents include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Automazione del browser con Playwright
- Modelli di visione per comprendere lo schermo
- Pattern per l’uso del computer (Anthropic Computer-Use)
- Creare un agente affidabile per la compilazione dei moduli