Hva er WebGPU? AI i nettleseren

01Hva er WebGPU?

I mange år brukte nettsider hovedsakelig prosessoren (CPU). For tilgang til skjermkortet fantes WebGL, men den teknologien var i hovedsak laget for å tegne grafikk. Det korte svaret på hva er WebGPU er: en ny generasjon webstandard som åpner hele skjermkortets kraft for nettleseren, både til grafikk og beregninger.

WebGPU er en standard nettleserprodusenter utvikler sammen under W3C. I bakgrunnen bruker den operativsystemets moderne grafikkgrensesnitt: Direct3D 12 på Windows, Metal på macOS og iOS, og Vulkan på Linux og Android. Utvikleren skriver ett JavaScript-grensesnitt, og nettleseren oversetter det til enhetens språk.

Den viktigste nyheten er støtten for compute shaders. Det betyr at skjermkortet kan brukes ikke bare til å fargelegge piksler, men også til å utføre tusenvis av små beregninger parallelt. Kjøring av AI-modeller bygger nettopp på slike parallelle matriseberegninger.

De små programmene som kjører på skjermkortet kalles shaders. WebGPU bruker sitt eget språk for dem, WGSL (WebGPU Shading Language). De fleste webutviklere jobber ikke direkte med dette språket. Grafikkmotorer og AI-biblioteker genererer WGSL-kode i bakgrunnen. Likevel er det nyttig å kjenne grunnlogikken for å forstå ytelsesproblemer: Prosessoren beskriver oppgaven, og skjermkortet utfører den samme operasjonen på tusenvis av data samtidig.

02Forskjellen på WebGPU og WebGL

WebGL er webversjonen av OpenGL ES, en eldre grafikkstandard for skrivebord, og er fortsatt mye brukt. WebGPU er derimot laget fra bunnen av etter hvordan dagens skjermkort fungerer. Forskjellen på WebGPU og WebGL er kort sagt slik:

03Hvordan fungerer AI i nettleseren?

For å kjøre en AI-modell i nettleseren lastes modellfilen (vektene) ned til brukerens enhet og lagres i hurtigbufferen. Deretter lar JavaScript-biblioteker skjermkortet utføre modellens beregninger via WebGPU. Resultatet vises direkte på siden uten å gå via en server.

Utviklere trenger ikke skrive kode fra bunnen for dette. Åpen kildekode-biblioteker som ONNX Runtime Web, Transformers.js, TensorFlow.js og WebLLM tilbyr WebGPU-støtte. Disse bibliotekene reduserer kjøring av ferdige modeller i nettleseren til noen få linjer kode.

En annen teknologi som ofte nevnes ved siden av WebGPU, er WebAssembly. WebAssembly kjører kode med nær naturlig hastighet på prosessorsiden, mens WebGPU bruker skjermkortet. Mange biblioteker bruker begge og faller tilbake til WebAssembly på enheter uten WebGPU. Detaljer finner du i artikkelen hva er WebAssembly.

04Fordeler med AI på enheten

On-device AI, eller AI på enheten, betyr at modellen kjører på brukerens egen enhet og ikke på en server i skyen. Denne tilnærmingen har viktige fordeler for både bedrifter og brukere.

• Personvern: Bilder, lyd og tekst forlater ikke enheten, noe som er en stor fordel for applikasjoner som jobber med sensitive data.
• Lav forsinkelse: Siden det ikke er noen rundtur på nettverket, kommer svaret umiddelbart. Det er avgjørende for levende kameraeffekter og lydbehandling.
• Serverkostnader: Siden beregningene gjøres på brukerens enhet, trenger du ikke betale for serveren ved hver forespørsel.
• Frakoblet bruk: Når modellen er lastet ned én gang, kan den brukes uten internettforbindelse.
• Skalering: Serverbelastningen øker ikke når antall brukere øker, fordi hver bruker bruker sin egen enhet.

05Bruksområder

AI i nettleseren erstatter ennå ikke alle store chatmodeller, men mange oppgaver kan allerede gjøres med små og målrettede modeller.

Bilde og kamera

Fjerning av bakgrunn, bildeforbedring, objektgjenkjenning og levende kameraeffekter kan gjøres på enheten. Opplevelser som å se et produkt i ditt eget rom eller prøve briller på ansiktet i en nettbutikk bruker denne teknologien.

Tekst og lyd

Små språkmodeller kan kjøre i nettleseren for talegjenkjenning, oversettelse, oppsummering og klassifisering. Skriveforslag når du fyller ut et skjema, eller en notatapp som fungerer frakoblet, er eksempler på dette.

3D og visualisering

Produktkonfiguratorer, arkitektur- og eiendomspresentasjoner, visualisering av store datamengder og nettleserspill drar nytte av grafikksiden til WebGPU. Slike opplevelser gir imponerende resultater når de kombineres med god UI/UX-design.

06Nettleserstøtte og kontroll

WebGPU er allment tilgjengelig på skrivebord i Chromium-baserte nettlesere (Chrome, Edge), og støtte kommer gradvis også i Safari og Firefox. På mobile enheter og eldre maskinvare kan situasjonen variere. Sjekk den oppdaterte støttetabellen i MDN-dokumentasjonen for WebGPU.

Derfor bør alle prosjekter som bruker WebGPU gjøre en funksjonskontroll og ha en reserveløsning for enheter som ikke støttes. Koden nedenfor sjekker om nettleseren støtter WebGPU.

• Du kan teste koden raskt ved å kjøre den i nettleserens utviklerkonsoll.
• WebGPU kan bare brukes i en sikker kontekst (HTTPS eller localhost).
• Bytt til et alternativ basert på WebGL eller WebAssembly på enheter som ikke støttes.

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

07Grenser og ting å passe på

Den største grensen er modellstørrelsen. Store språkmodeller tar gigabyte med plass. Å la hver besøkende laste dem ned er urealistisk både med tanke på tid og datakvote. Modeller som skal kjøre i nettleseren, må være små, komprimerte (kvantiserte) og rettet mot en bestemt oppgave.

Den andre grensen er variasjonen i enheter. En modell som går jevnt på et kraftig skjermkort på en stasjonær maskin, kan bli treg på en enkel telefon eller øke batteriforbruket. Sjekk i analysedataene hvilke enheter målgruppen din bruker.

Den tredje er sideytelsen. Tunge modellfiler og beregninger må ikke gjøre den første åpningen av siden treg. Å laste modellen først når brukeren trenger funksjonen, er måten å beholde Core Web Vitals-verdiene (LCP ≤ 2,5 sek, INP ≤ 200 ms). Å finne denne balansen er en del av arbeidet med hastighet og ytelse.

08Når bør det brukes i webprosjekter?

WebGPU er ikke nødvendig for alle nettsider. For en bedriftsnettside eller en vanlig nettbutikk er en rask, enkel og tilgjengelig struktur langt viktigere. WebGPU gir mening for AI-oppgaver som krever personvern, sanntidsbehandling av bilde og lyd, krevende 3D-opplevelser og beregninger der du vil redusere serverkostnadene.

Still deg dette spørsmålet når du bestemmer deg: Hva taper jeg om denne funksjonen kjøres på serveren? Hvis svaret er personvern, forsinkelse eller kostnad, er WebGPU en sterk kandidat. Tilnærmingen der AI står i sentrum av produktet har vi tatt for oss i artikkelen om AI-native applikasjoner, og AI-verktøy i utviklingsprosessen i artikkelen om koding med AI.

I webdesign-prosjekter og bransjespesifikke programvareløsninger velger Aurora Yazılım teknologi etter behov og bruker en ny standard bare der den virkelig tilfører verdi. Vil du snakke om prosjektet ditt, kan du ta kontakt via kontaktsiden.