Tekoälyagentit · Oppitunti

Näkömallit näytön ymmärtämiseen

Lähettäkää kuvakaappauksia multimodaaliselle mallille, jotta agentti ”näkee” sen, minkä ihminenkin näkisi.

Oppitunti 2/414 vaihetta

Näkömallit näytön ymmärtämiseen on ilmainen Tekoälyagentit-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Tekoälyagentit-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Tekoälyagentit-kurssilla on yhteensä 4 oppituntia.

Osaa tämän oppitunnin sisällöstä ei ole vielä käännetty, joten se näytetään englanniksi.

Miksi näkömallit?

Joitakin verkkotoimintoja on vaikea ilmaista selektoreilla:

CAPTCHA:t (tai ainakin niiden yritykset)
Visuaalisesti sijoitetut elementit (chat-kuplat, dynaamiset käyttöliittymät)
Sovellukset, joissa ei ole vakaata DOM-rakennetta (Canvas / WebGL)

Multimodaaliset LLM:t antavat agentille mahdollisuuden NÄHDÄ näytön.

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.'}
        ]
    }]
)

Näkömallien laatu

GPT-4o ja Claude Sonnet 4.5 pystyvät:

Kuvaamaan kuvakaappauksia tarkasti
Lukemaan kuvissa olevaa tekstiä (OCR)
Tunnistamaan käyttöliittymäelementtejä sijainnin perusteella
Havaitsemaan kuvioita ja poikkeamia

Niillä on edelleen vaikeuksia hyvin pienen tekstin, monimutkaisten taulukoiden ja tarkkojen pikselikoordinaattien kanssa.

Elementtien paikantaminen kuvauksen perusteella

Kysykää mallilta "missä Submit-painike on?", niin se palauttaa likimääräiset koordinaatit tai toimintaohjeet:

prompt = 'Look at the screenshot. Where is the Submit button? Return the approximate (x, y) coordinates of its center.'
# Response: {"x": 420, "y": 530}

Koordinaattien tarkkuutta koskeva varoitus

Mallit eivät ole pikselintarkkoja. Käsitelkää niiden antamia koordinaatteja suuntaa-antavina. Tarkkoja napsautuksia varten yhdistäkää ne DOM-selektoreihin aina kun mahdollista.

SoM (Set of Marks)

Merkitkää kuvakaappaukseen vuorovaikutteisten elementtien ympärille numeroidut laatikot. Kysykää mallilta "mitä numeroa haluatte napsauttaa?":

Tunnistakaa vuorovaikutteiset elementit DOM:n avulla
Piirtäkää numeroidut peittokuvat
Lähettäkää merkitty kuvakaappaus LLM:lle
LLM vastaa numerolla; napsauttakaa kyseistä elementtiä

Paljon luotettavampi kuin vapaamuotoiset koordinaatit.

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()

Monikehyksinen päättely

Ottakaa dynaamisilla sivuilla kuvakaappauksia useina ajankohtina ja lähettäkää ne kaikki mallille. Malli voi päätellä ajallisia muutoksia.

Viive ja kustannukset

Yksi kuvakaappaus sisältää täydellä tarkkuudella noin 85 000 tokenia. Kustannukset:

gpt-4o: 0,85 $ / 100 kuvaa
claude-sonnet-4-5: noin 1,50 $ / 100 kuvaa

Muutakaa kokoa ennen lähettämistä ja käyttäkää näkömallia vain, kun DOM-pohjainen valinta epäonnistuu.

Resize for Cheaper Calls

from PIL import Image
img = Image.open('screen.png')
img.thumbnail((1024, 1024))
img.save('screen-small.png')

OCR-varamenetelmä

Pelkkään tekstin poimintaan OCR (Tesseract, PaddleOCR) on paljon edullisempi ja usein parempi kuin näköön perustuvat LLM:t.

SoM-malli

Mikä on Set-of-Marks- (SoM-)kehotusmalli?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Lähettäkää kuvakaappauksia GPT-4o:lle tai Claudelle näytön tulkintaa varten. Käyttäkää SoM-merkintöjä luotettavaan vuorovaikutukseen. Käyttäkää OCR:ää pelkkään tekstiin. Muuttakaa kokoa kustannusten säästämiseksi.

Aloita maksutta

Opi Tekoälyagentit tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 60
Oppitunnit: 239

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Näkömallit näytön ymmärtämiseen” ilmainen?

Kyllä – oppitunnin ”Näkömallit näytön ymmärtämiseen” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Tekoälyagentit-kurssin, päivitä CoddyKit PROhon. Tekoälyagentit-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Näkömallit näytön ymmärtämiseen”?

Lähettäkää kuvakaappauksia multimodaaliselle mallille, jotta agentti ”näkee” sen, minkä ihminenkin näkisi. Harjoittelet Tekoälyagentit-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Tekoälyagentit-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Tekoälyagentit-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Näkömallit näytön ymmärtämiseen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Tekoälyagentit-oppitunnilla?

Kyllä. Jokainen Tekoälyagentit-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Selainautomaatio Playwrightilla
Näkömallit näytön ymmärtämiseen
Tietokoneen käytön mallit (Anthropic Computer-Use)
Luotettavan lomakkeentäyttöagentin rakentaminen

← Takaisin: Tekoälyagentit