Mikä WebGPU on? Tekoäly selaimessa

01Mikä on WebGPU?

Verkkosivut ovat vuosien ajan käyttäneet pääasiassa suoritinta (CPU). Näytönohjaimen käyttöön oli WebGL, mutta se oli suunniteltu lähinnä grafiikan piirtämiseen. Lyhyt vastaus kysymykseen mikä WebGPU on kuuluu: uuden sukupolven verkkostandardi, joka avaa selaimelle näytönohjaimen koko tehon sekä grafiikkaa että laskentaa varten.

WebGPU on standardi, jota selainvalmistajat kehittävät yhdessä W3C:n alaisuudessa. Taustalla se käyttää käyttöjärjestelmän nykyaikaisia grafiikkarajapintoja: Windowsissa Direct3D 12:ta, macOS:ssa ja iOS:ssä Metalia sekä Linuxissa ja Androidissa Vulkania. Kehittäjä kirjoittaa yhden JavaScript-rajapinnan, ja selain kääntää sen laitteen kielelle.

Tärkein uudistus on compute shader -tuki. Se tarkoittaa, että näytönohjainta voi käyttää pikselien värittämisen lisäksi tuhansien pienten laskutoimitusten tekemiseen rinnakkain. Tekoälymallien ajo perustuu juuri tällaisiin rinnakkaisiin matriisilaskelmiin.

Näytönohjaimella ajettavia pieniä ohjelmia kutsutaan shadereiksi. WebGPU käyttää niihin omaa kieltään, WGSL:ää (WebGPU Shading Language). Useimmat web-kehittäjät eivät kirjoita sitä suoraan; grafiikkamoottorit ja tekoälykirjastot tuottavat WGSL-koodin taustalla. Perusajattelun tunteminen auttaa silti ymmärtämään suorituskykyongelmia: suoritin kuvaa tehtävän, näytönohjain soveltaa samaa toimintoa tuhansiin datakohtiin yhtä aikaa.

02WebGPU ja WebGL: ero

WebGL on vanhan työpöytägrafiikkastandardin OpenGL ES:n verkkoversio, ja sitä käytetään yhä laajasti. WebGPU on puolestaan suunniteltu alusta alkaen nykyisten näytönohjainten toimintatavan mukaan. WebGPU:n ja WebGL:n ero on lyhyesti seuraava:

03Miten tekoäly toimii selaimessa?

Tekoälymallin ajamiseksi selaimessa mallitiedosto (painot) ladataan käyttäjän laitteelle ja tallennetaan välimuistiin. Sen jälkeen JavaScript-kirjastot teettävät mallin laskennan näytönohjaimella WebGPU:n kautta. Tulos näytetään suoraan sivulla ilman, että se kulkee palvelimelle.

Kehittäjien ei tarvitse kirjoittaa koodia tyhjästä. ONNX Runtime Web, Transformers.js, TensorFlow.js ja WebLLM kaltaiset avoimen lähdekoodin kirjastot tarjoavat WebGPU-tuen. Nämä kirjastot tiivistävät valmiiden mallien ajon selaimessa muutamaan koodiriviin.

WebGPU:n rinnalla usein mainittu toinen teknologia on WebAssembly. WebAssembly ajaa koodia suoritinpuolella lähes natiivinopeudella; WebGPU puolestaan käyttää näytönohjainta. Monet kirjastot käyttävät molempia ja palaavat WebAssemblyyn laitteilla, joissa WebGPUta ei ole. Lisätietoja löydät artikkelistamme mikä on WebAssembly.

04Laitteella toimivan tekoälyn edut

On-device AI eli laitteella toimiva tekoäly tarkoittaa, että malli toimii käyttäjän omalla laitteella eikä pilvipalvelimella. Lähestymistavalla on merkittäviä etuja sekä yrityksille että käyttäjille.

• Yksityisyys: valokuva, ääni tai teksti ei poistu laitteesta; suuri etu arkaluonteista dataa käsitteleville sovelluksille.
• Pieni viive: koska verkon edestakaista matkaa ei ole, vastaus tulee heti; kriittistä reaaliaikaisille kameratehosteille ja äänenkäsittelylle.
• Palvelinkustannus: koska laskenta tehdään käyttäjän laitteella, jokaisesta pyynnöstä ei tarvitse maksaa palvelimelle.
• Offline-käyttö: kun malli on ladattu kerran, sitä voi käyttää ilman internetyhteyttä.
• Skaalautuvuus: palvelinkuorma ei kasva käyttäjämäärän mukana, koska jokainen käyttäjä käyttää omaa laitettaan.

05Käyttökohteet

Tekoäly selaimessa ei vielä korvaa suuria keskustelumalleja kokonaan, mutta pienillä ja kohdennetuilla malleilla voi jo tehdä paljon.

Kuva ja kamera

Taustan poisto, valokuvien parantaminen, esineentunnistus ja reaaliaikaiset kameratehosteet onnistuvat laitteella. Verkkokaupan kokemukset, kuten tuotteen katsominen omassa huoneessa tai silmälasien sovittaminen kasvoille, hyödyntävät tätä teknologiaa.

Teksti ja ääni

Pienet kielimallit voivat toimia selaimessa puheentunnistuksessa, käännöksessä, tiivistämisessä ja luokittelussa. Kirjoitusehdotukset lomaketta täytettäessä tai offline-toimiva muistiinpanosovellus ovat tästä esimerkkejä.

3D ja visualisointi

Tuotekonfiguraattorit, arkkitehtuuri- ja kiinteistöesitykset, suurten datamäärien visualisoinnit ja selainpelit hyödyntävät WebGPU:n grafiikkapuolta. Kun tällaiset kokemukset yhdistetään hyvään UI/UX-suunnitteluun, tulos on vaikuttava.

06Selaintuki ja tarkistus

WebGPU on laajasti käytettävissä työpöydällä Chromium-pohjaisissa selaimissa (Chrome, Edge); Safarissa ja Firefoxissa tuki on tulossa vaiheittain. Mobiililaitteilla ja vanhalla laitteistolla tilanne voi vaihdella. Tarkista ajantasainen tukitaulukko MDN:n WebGPU-dokumentaatiosta.

Siksi jokaisessa WebGPUta käyttävässä projektissa pitää tehdä ominaisuuden tarkistus ja varata varavaihtoehto laitteille, jotka eivät tue sitä. Alla oleva koodi tarkistaa, tukeeko selain WebGPUta.

• Voit testata koodia nopeasti ajamalla sen selaimen kehittäjäkonsolissa.
• WebGPU toimii vain turvallisessa kontekstissa (HTTPS tai localhost).
• Vaihda tukemattomilla laitteilla WebGL- tai WebAssembly-pohjaiseen vaihtoehtoon.

async function webgpuHazirMi() {
  if (!navigator.gpu) {
    console.log('Bu tarayici WebGPU desteklemiyor.');
    return null;
  }
  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    console.log('Uygun GPU bulunamadi.');
    return null;
  }
  const device = await adapter.requestDevice();
  console.log('WebGPU hazir.');
  return device;
}

webgpuHazirMi();

07Rajat ja huomioitavaa

Suurin rajoitus on mallin koko. Suuret kielimallit vievät gigatavuja tilaa; niiden lataaminen jokaiselle kävijälle ei ole realistista sen enempää ajan kuin datakiintiönkään kannalta. Selaimessa ajettavien mallien pitää olla pieniä, pakattuja (kvantisoituja) ja yhteen tehtävään keskittyneitä.

Toinen rajoitus on laitteiden kirjo. Tehokkaalla työpöydän näytönohjaimella sujuvasti toimiva malli voi olla hidas peruspuhelimessa tai lisätä akunkulutusta. Tarkista analytiikkatiedoista, mitä laitteita kohderyhmäsi käyttää.

Kolmas on sivun suorituskyky. Raskaiden mallitiedostojen ja laskentojen ei pidä hidastaa sivun ensimmäistä avautumista. Mallin lataaminen vasta, kun käyttäjä tarvitsee kyseistä ominaisuutta, on tapa suojata Core Web Vitals -arvot (LCP ≤ 2,5 s, INP ≤ 200 ms). Tämän tasapainon rakentaminen kuuluu nopeus- ja suorituskykyoptimointiin.

08Milloin WebGPUta kannattaa käyttää?

WebGPU ei ole tarpeen jokaiselle sivustolle. Yrityksen esittelysivustolla tai tavallisessa verkkokaupassa nopea, selkeä ja saavutettava rakenne on paljon tärkeämpi. WebGPU on järkevä yksityisyyttä vaativissa tekoälytoiminnoissa, reaaliaikaisessa kuvan- ja äänenkäsittelyssä, tiiviissä 3D-kokemuksissa ja laskentatehtävissä, joissa halutaan alentaa palvelinkustannuksia.

Kysy päätöstä tehdessäsi: mitä menetän, jos tämä tehtäisiin palvelimella? Jos vastaus on yksityisyys, viive tai kustannus, WebGPU on vahva ehdokas. Käsittelimme tekoälyn ytimeen asettavaa lähestymistapaa artikkelissamme AI-native-sovellus ja tekoälytyökalujen käyttöä kehitysprosessissa artikkelissamme koodaaminen tekoälyn kanssa.

Aurora Yazılım valitsee teknologian tarpeen mukaan verkkosivuprojekteissa ja toimialakohtaisissa ohjelmistoratkaisuissa; uutta standardia käytetään vain siellä, missä se oikeasti tuo arvoa. Jos haluat keskustella projektistasi, ota meihin yhteyttä yhteystietosivumme kautta.