Vad är WebGPU? AI i webbläsaren

01Vad är WebGPU?

I många år använde webbsidor främst processorn (CPU). För åtkomst till grafikkortet fanns WebGL, men den tekniken var i huvudsak utformad för att rita grafik. Det korta svaret på frågan vad är WebGPU är: en ny generations webbstandard som öppnar webbläsaren för grafikkortets hela kraft, både för grafik och för beräkningar.

WebGPU är en standard som webbläsartillverkarna utvecklar tillsammans inom W3C. I bakgrunden använder den operativsystemets moderna grafikgränssnitt: Direct3D 12 i Windows, Metal i macOS och iOS samt Vulkan i Linux och Android. Utvecklaren skriver ett enda JavaScript-gränssnitt, och webbläsaren översätter det till enhetens språk.

Den viktigaste nyheten är stödet för compute shaders. Det betyder att grafikkortet inte bara kan användas för att måla pixlar utan också för att utföra tusentals små beräkningar parallellt. AI-modellers arbete bygger just på sådana parallella matrisberäkningar.

De små program som körs på grafikkortet kallas shaders. För dem använder WebGPU sitt eget språk, WGSL (WebGPU Shading Language). De flesta webbutvecklare arbetar inte direkt med det språket, eftersom grafikmotorer och AI-bibliotek genererar WGSL-koden i bakgrunden. Ändå är det bra att känna till grundtanken för att förstå prestandaproblem: processorn beskriver uppgiften, och grafikkortet tillämpar samma operation på tusentals data samtidigt.

02Skillnaden mellan WebGPU och WebGL

WebGL är webbversionen av OpenGL ES, en äldre grafikstandard för skrivbordet, och används fortfarande flitigt. WebGPU är i stället designat från grunden efter hur dagens grafikkort fungerar. Skillnaden mellan WebGPU och WebGL är i korthet följande:

03Hur fungerar AI i webbläsaren?

För att köra en AI-modell i webbläsaren laddas modellfilen (vikterna) ned till användarens enhet och cachas. Därefter låter JavaScript-bibliotek grafikkortet göra modellens beräkningar via WebGPU. Resultatet visas direkt på sidan utan att gå via en server.

Utvecklare behöver inte skriva kod från grunden för det här. Öppna källkodsbibliotek som ONNX Runtime Web, Transformers.js, TensorFlow.js och WebLLM erbjuder stöd för WebGPU. De här biblioteken gör det till några få rader kod att köra färdiga modeller i webbläsaren.

En annan teknik som ofta nämns tillsammans med WebGPU är WebAssembly. WebAssembly kör kod nästan med inbyggd hastighet på processorsidan, medan WebGPU använder grafikkortet. Många bibliotek använder båda och faller tillbaka på WebAssembly på enheter utan WebGPU. Mer information finns i artikeln Vad är WebAssembly.

04Fördelar med AI på enheten

On-device AI, eller AI på enheten, innebär att modellen körs på användarens egen enhet i stället för på en server i molnet. Det här tillvägagångssättet har viktiga fördelar för både företag och användare.

• Integritet: foton, ljud eller text lämnar inte enheten, vilket är en stor fördel för applikationer som hanterar känsliga data.
• Låg latens: eftersom ingen tur och retur över nätverket behövs kommer svaret omedelbart, vilket är avgörande för livekamera-effekter och ljudbehandling.
• Serverkostnad: eftersom beräkningen sker på användarens enhet behöver man inte betala för serverkapacitet för varje förfrågan.
• Offlinearbete: när modellen väl har laddats ned går den att använda även utan internetanslutning.
• Skalbarhet: serverbelastningen ökar inte när antalet användare växer, eftersom varje användare använder sin egen enhet.

05Användningsområden

AI i webbläsaren kan ännu inte ersätta alla stora chattmodeller, men med små och fokuserade modeller går redan mycket att göra.

Bild och kamera

Borttagning av bakgrund, fotoförbättring, objektigenkänning och livekamera-effekter kan göras på enheten. Upplevelser som att se en produkt i ditt eget rum eller prova glasögon i ansiktet på en webbutik använder den här tekniken.

Text och ljud

Små språkmodeller kan köras i webbläsaren för tal-till-text, översättning, sammanfattning och klassificering. Stavningsförslag när du fyller i ett formulär eller en anteckningsapp som fungerar offline är exempel på det.

3D och visualisering

Produktkonfiguratorer, arkitektur- och fastighetspresentationer, visualiseringar av stora datamängder och webbläsarspel drar nytta av WebGPUs grafikdel. När sådana upplevelser kombineras med en bra UI/UX-design blir resultatet imponerande.

06Webbläsarstöd och kontroll

WebGPU är i stor utsträckning användbart på skrivbordet i Chromium-baserade webbläsare (Chrome, Edge), och stöd är på väg gradvis även i Safari och Firefox. Situationen kan skilja sig på mobila enheter och äldre hårdvara. Kontrollera den aktuella stödtabellen i MDN:s dokumentation om WebGPU.

Därför bör varje projekt som använder WebGPU göra en funktionskontroll och ha en reservväg för enheter som inte stöds. Koden nedan kontrollerar om webbläsaren stöder WebGPU.

• Du kan snabbt testa koden genom att köra den i webbläsarens utvecklarkonsol.
• WebGPU kan bara användas i en säker kontext (HTTPS eller localhost).
• På enheter som inte stöds, byt till ett alternativ baserat på WebGL eller WebAssembly.

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

07Begränsningar och saker att tänka på

Den största begränsningen är modellstorleken. Stora språkmodeller tar flera gigabyte, och att låta varje besökare ladda ned dem är inte realistiskt vare sig i tid eller datakvot. Modeller som ska köras i webbläsaren måste vara små, komprimerade (kvantiserade) och inriktade på en specifik uppgift.

Den andra begränsningen är enhetsvariationen. En modell som går smidigt på ett kraftfullt grafikkort i en stationär dator kan gå långsamt på en enkel telefon eller öka batteriförbrukningen. Kontrollera i analysdata vilka enheter din målgrupp använder.

Den tredje är sidprestandan. Tunga modellfiler och beräkningar får inte göra sidans första öppning långsammare. Att ladda modellen när användaren behöver funktionen är sättet att skydda värdena i Core Web Vitals (LCP ≤ 2,5 s, INP ≤ 200 ms). Att hitta den balansen är en del av arbetet med hastighet och prestanda.

08När bör det användas i webbprojekt?

WebGPU behövs inte på alla webbplatser. För en presentationswebbplats för ett företag eller en vanlig webbutik är en snabb, enkel och tillgänglig struktur mycket viktigare. WebGPU är meningsfullt för AI-bearbetning som kräver integritet, bild- och ljudbehandling i realtid, intensiva 3D-upplevelser och beräkningsuppgifter där man vill sänka serverkostnaden.

Ställ den här frågan när du bestämmer dig: vad förlorar jag om den här funktionen görs på servern? Om svaret är integritet, latens eller kostnad är WebGPU en stark kandidat. Synsättet där AI är produktens kärna har vi tagit upp i artikeln AI-native applikation, och AI-verktyg i utvecklingsprocessen i artikeln skriva kod med AI.

Aurora Yazılım väljer teknik efter behov i sina webbdesign-projekt och i branschanpassade mjukvarulösningar, och använder en ny standard bara där den verkligen tillför värde. Vill du prata om ditt projekt kan du kontakta oss.