WebGPU en AI op het apparaat: de browser wordt een serieuze runtime

spinny:~/writing $ less webgpu-on-device-ai-browser.md

1 
2Jarenlang was de browser het mooie gezicht van de applicatie en de cloud de plek waar de harde dingen gebeurden. De gebruiker schrijft, klikt, uploadt een bestand; de frontend stuurt alles naar de server; de server roept een model aan; het antwoord komt terug.
3 
4Dit schema blijft erg handig, maar het is niet gratis. Elk gesprek brengt latentie, kosten, netwerkafhankelijkheid en privacyvragen met zich mee. Als de gebruiker een zin schrijft en een suggestie wil, weegt een halve seconde. Als je duizenden kleine inputs classificeert, worden centen echt geld. Als de tekst gevoelig is, is het verzenden ervan vanaf het apparaat geen neutrale keuze.
5 
6Dat is de reden waarom WebGPU en AI op het apparaat in een hype zijn. Niet omdat we morgen elk model in de browser zullen draaien. Omdat sommige intelligente functies dichter bij de gebruiker kunnen komen.
7 
8## Niet alles hoeft lokaal te worden
9 
10De kinderachtige versie van het argument is: ‘cloud versus device’. De nuttige versie is hybride.
11 
12Sommige taken zien er geweldig uit op het apparaat: korte samenvattingen, taaldetectie, lichte herschrijvingen, eenvoudige classificaties, beeldfilters, kleine visiemodellen, creatieve ervaringen met onmiddellijke feedback.
13 
14Andere taken blijven beter in de cloud: complex redeneren, grensmodellen, server-side data, gecentraliseerde audit, uniforme kwaliteit, workflow waarbij je elke stap zorgvuldig moet controleren.
15 
16De gezonde architectuur beslist tijdens runtime:
17 
18```mermaid
19flowchart TD
20    User[Gebruiker] --> Browser[Browsers]
21    Browser --> Detect[Functiedetectie]
22    Detect -->|Ondersteund| Local[Lokale gevolgtrekking]
23    Detect -->|Niet ondersteund| Cloud[Terugval in de cloud]
24    Local --> UX[Snelle reactie]
25    Cloud --> UX
26    UX --> Metrics[Statistieken en kwaliteit]
27```
28 
29De browser hoeft niet te winnen van de cloud. Het moet de cloud behoeden voor werk dat daar niet gedaan hoeft te worden.
30 
31## Waarom WebGPU belangrijk is
32 
33WebGPU is een moderne API voor het gebruik van de GPU vanuit de browser. Het is niet alleen voor mooiere 3D-graphics. Het is ook belangrijk omdat het primitieven blootlegt die geschikt zijn voor computergebruik: parallelle werklasten, shaders, pijplijnen die dichter bij datgene liggen waar GPU's goed in zijn.
34 
35Voor AI, wetenschappelijke visualisatie, 3D-editors, videofilters en creatieve tools is dit verschil voelbaar. WebGL heeft veel voor het web gedaan, maar WebGPU werd geboren met een model dat beter geschikt was voor het heden.
36 
37Het eerste dat u moet schrijven, is echter geen shader. Het is een nuchtere functiedetectie:
38 
39```typescript
40export async function requestWebGpuDevice() {
41  if (!('gpu' in navigator)) {
42    return null;
43  }
44 
45  const adapter = await navigator.gpu.requestAdapter({
46    powerPreference: 'high-performance',
47  });
48 
49  if (!adapter) {
50    return null;
51  }
52 
53  return adapter.requestDevice();
54}
55```
56 
57Deze functie zegt één belangrijk ding: WebGPU is niet een recht dat op elk apparaat wordt verleend. Het is een vermogen om te verifiëren. Sommige browsers ondersteunen het niet volledig, sommige GPU's hebben beperkingen, sommige bedrijfsomgevingen schakelen functies uit, sommige gebruikers gebruiken bescheiden hardware.
58 
59## Ingebouwde AI: wanneer de browser het model brengt
60 
61Chrome pusht ingebouwde API's voor taken zoals lokale aanwijzingen, samenvattingen, schrijven, herschrijven, vertalen, taaldetectie en proeflezen. Het idee is erg interessant: de browser beheert het model, de beschikbaarheid en updates; de app gebruikt een API dichter bij het platform.
62 
63Als het goed werkt, verandert er veel:
64 
65- minder serveroproepen voor eenvoudige taken;
66- gegevens die mogelijk op het apparaat achterblijven;
67- lagere latentie;
68- offline of semi-offline ervaringen;
69- Meer natuurlijke UX voor schrijven en vertalen.
70 
71Maar het moet worden beschouwd als een progressieve verbetering. Sommige API's zijn stabiel, andere zijn in de oorspronkelijke proefversie of preview, andere zijn nog steeds afhankelijk van versie, taal en apparaat.
72 
73```typescript
74type LocalCapability = 'available' | 'downloadable' | 'unsupported';
75 
76export async function getLocalSummarizerCapability(): Promise<LocalCapability> {
77  const SummarizerApi = (globalThis as any).Summarizer;
78 
79  if (!SummarizerApi?.availability) {
80    return 'unsupported';
81  }
82 
83  const availability = await SummarizerApi.availability();
84 
85  if (availability === 'available') return 'available';
86  if (availability === 'downloadable') return 'downloadable';
87 
88  return 'unsupported';
89}
90```
91 
92De specifieke code verandert, maar het patroon blijft: je checkt de beschikbaarheid, legt eventuele downloads uit, biedt fallbacks aan en meet de kwaliteit.
93 
94## Terugval is geen triest plan B
95 
96Terugval in de cloud is geen nederlaag. Het maakt deel uit van het product.
97 
98```typescript
99interface AiRequest {
100  task: 'summarize' | 'rewrite' | 'classify';
101  input: string;
102}
103 
104interface AiResult {
105  output: string;
106  runtime: 'local' | 'cloud';
107}
108 
109export async function runAiTask(request: AiRequest): Promise<AiResult> {
110  const local = await tryLocalAi(request);
111 
112  if (local) {
113    return { output: local, runtime: 'local' };
114  }
115 
116  const cloud = await fetch('/api/ai', {
117    method: 'POST',
118    headers: { 'Content-Type': 'application/json' },
119    body: JSON.stringify(request),
120  }).then((res) => res.json());
121 
122  return { output: cloud.output, runtime: 'cloud' };
123}
124```
125 
126Met deze architectuur kunt u geleidelijk verbeteren. Degenen met lokale ondersteuning krijgen betere latentie en privacy. Degenen die het niet hebben, gebruiken de functie nog steeds. U kunt het percentage lokale verzoeken, tijden, fouten, geheugen, waargenomen kwaliteit en kosten meten.
127 
128Zonder statistieken wordt AI op het apparaat een esthetische keuze. Met statistieken wordt het een producthefboom.
129 
130## De UX van het model is belangrijk
131 
132Als de browser een model moet downloaden, neemt de gebruiker dit waar. Verberg het niet achter een vage spinner. Voor alle duidelijkheid: "We bereiden het model voor om deze functie sneller en zelfs offline te gebruiken."
133 
134Een goede ervaring:
135 
136- toont de bereidingsstatus;
137- blokkeert niet de hele pagina;
138- stelt u in staat door te gaan met cloud-fallback;
139- vermijd batterij- en geheugenverrassingen;
140- onthoud het model waar mogelijk;
141- leg het voordeel in één concrete zin uit.
142 
143Het ergste is een "slimme" functie die kapot lijkt te zijn omdat er iets stil wordt gedownload.
144 
145## Privacy: beter, niet automatisch veilig
146 
147Het verwerken van gegevens op het apparaat kan een groot voordeel zijn. Een concept-e-mail, intern document of persoonlijke notitie hoeft uw browser niet te verlaten om een suggestie te ontvangen.
148 
149Lokaal betekent echter niet automatisch veilig. U moet echter nadenken over:
150 
151- XSS;
152- onbedoelde logboeken;
153- gegevens opgeslagen in opslag;
154- snelle injectie van niet-vertrouwde inhoud;
155- machtigingen verleend aan het model;
156- uitgangen die worden gebruikt in automatische acties.
157 
158Als een lokaal model een webpagina kan lezen en vervolgens een formulier kan invullen, kan die pagina proberen deze te manipuleren. Als het gereedschap kan oproepen, is bevestiging nodig. Als het gestructureerde output oplevert, moet het gevalideerd worden. Het feit dat het op het apparaat draait, vermindert enkele privacyrisico's, maar elimineert het beveiligingsmodel niet.
159 
160## Waar het echt interessant wordt
161 
162De tekst is nog maar het begin. WebGPU maakt webervaringen geloofwaardig die tot voor kort een native app leken:
163 
164- complexe 3D-editors;
165- Gaussiaanse splatting in de browser;
166- real-time videofilters;
167- Lichtgewicht CAD;
168- wetenschappelijke visualisaties;
169- creatieve tools met direct voorbeeld;
170- visie-inferentie nabij de gebruikersinterface;
171- ambitieuzere browsergames.
172 
173Hier beginnen frontend, graphics en machine learning zich te vermengen. Het is een wat lastig gebied, maar ook een vruchtbaar gebied: de browser wordt weer een serieus applicatieplatform, niet alleen de plek waar we formulieren en dashboards plaatsen.
174 
175## Controlelijst vóór productie
176 
177Voordat ik een functie op het apparaat aan gebruikers beschikbaar stel, zou ik het volgende controleren:
178 
1791. Doelbrowsers en apparaten.
1802. Terugval in de cloud of elegante degradatie.
1813. Download tijd- en modelcache.
1824. Geheugen en batterij op gemiddelde hardware.
1835. Kwaliteit vergeleken met de cloudversie.
1846. Privacybeleid en gebruikersberichten.
1857. Testen met vijandige input.
1868. Afzonderlijke statistieken voor lokale runtime en cloudruntime.
1879. Plan om de sjabloon bij te werken of uit te schakelen.
188 
189Het is een concrete lijst omdat het probleem concreet is. Een trage, kwetsbare of ondoorzichtige AI-functie wordt niet beter alleen omdat deze in de browser draait.
190 
191## Het juiste compromis
192 
193Ik geloof niet dat de toekomst “alles op het apparaat” is. En ik denk ook niet dat de cloud de enige redelijke plaats voor gevolgtrekkingen zal blijven. De meest waarschijnlijke toekomst is een mix: lokaal als het de latentie, privacy of kosten verbetert; cloud wanneer kwaliteit, bijgewerkte gegevens en gecentraliseerde controle nodig zijn.
194 
195WebGPU, WebNN en ingebouwde AI API’s maken de browser niet almachtig. Ze maken hem volwassener. En voor degenen die webproducten bouwen is dit groot nieuws.
196 
197## Nuttige bronnen
198 
199- [WebGPU-API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)
200- [WebGPU-specificatie - W3C](https://www.w3.org/TR/webgpu/)
201- [Ingebouwde AI - Chrome voor ontwikkelaars](https://developer.chrome.com/docs/ai/built-in)
202- [Ingebouwde AI API's - Chrome voor ontwikkelaars](https://developer.chrome.com/docs/ai/built-in-apis)
203- [WebNN-API](https://webnn.io/)
204

:WebGPU en AI op het apparaat: de browser wordt een serieuze runtimelines 1-204 (END) — press q to close

2Jarenlang was de browser het mooie gezicht van de applicatie en de cloud de plek waar de harde dingen gebeurden. De gebruiker schrijft, klikt, uploadt een bestand; de frontend stuurt alles naar de server; de server roept een model aan; het antwoord komt terug.

4Dit schema blijft erg handig, maar het is niet gratis. Elk gesprek brengt latentie, kosten, netwerkafhankelijkheid en privacyvragen met zich mee. Als de gebruiker een zin schrijft en een suggestie wil, weegt een halve seconde. Als je duizenden kleine inputs classificeert, worden centen echt geld. Als de tekst gevoelig is, is het verzenden ervan vanaf het apparaat geen neutrale keuze.

6Dat is de reden waarom WebGPU en AI op het apparaat in een hype zijn. Niet omdat we morgen elk model in de browser zullen draaien. Omdat sommige intelligente functies dichter bij de gebruiker kunnen komen.

8## Niet alles hoeft lokaal te worden

10De kinderachtige versie van het argument is: ‘cloud versus device’. De nuttige versie is hybride.

12Sommige taken zien er geweldig uit op het apparaat: korte samenvattingen, taaldetectie, lichte herschrijvingen, eenvoudige classificaties, beeldfilters, kleine visiemodellen, creatieve ervaringen met onmiddellijke feedback.

14Andere taken blijven beter in de cloud: complex redeneren, grensmodellen, server-side data, gecentraliseerde audit, uniforme kwaliteit, workflow waarbij je elke stap zorgvuldig moet controleren.

16De gezonde architectuur beslist tijdens runtime:

18```mermaid

19flowchart TD

20 User[Gebruiker] --> Browser[Browsers]

21 Browser --> Detect[Functiedetectie]

22 Detect -->|Ondersteund| Local[Lokale gevolgtrekking]

23 Detect -->|Niet ondersteund| Cloud[Terugval in de cloud]

24 Local --> UX[Snelle reactie]

25 Cloud --> UX

26 UX --> Metrics[Statistieken en kwaliteit]

27```

29De browser hoeft niet te winnen van de cloud. Het moet de cloud behoeden voor werk dat daar niet gedaan hoeft te worden.

31## Waarom WebGPU belangrijk is

33WebGPU is een moderne API voor het gebruik van de GPU vanuit de browser. Het is niet alleen voor mooiere 3D-graphics. Het is ook belangrijk omdat het primitieven blootlegt die geschikt zijn voor computergebruik: parallelle werklasten, shaders, pijplijnen die dichter bij datgene liggen waar GPU's goed in zijn.

35Voor AI, wetenschappelijke visualisatie, 3D-editors, videofilters en creatieve tools is dit verschil voelbaar. WebGL heeft veel voor het web gedaan, maar WebGPU werd geboren met een model dat beter geschikt was voor het heden.

37Het eerste dat u moet schrijven, is echter geen shader. Het is een nuchtere functiedetectie:

39```typescript

40export async function requestWebGpuDevice() {

41 if (!('gpu' in navigator)) {

42 return null;

43 }

45 const adapter = await navigator.gpu.requestAdapter({

46 powerPreference: 'high-performance',

47 });

49 if (!adapter) {

50 return null;

51 }

53 return adapter.requestDevice();

54}

55```

57Deze functie zegt één belangrijk ding: WebGPU is niet een recht dat op elk apparaat wordt verleend. Het is een vermogen om te verifiëren. Sommige browsers ondersteunen het niet volledig, sommige GPU's hebben beperkingen, sommige bedrijfsomgevingen schakelen functies uit, sommige gebruikers gebruiken bescheiden hardware.

59## Ingebouwde AI: wanneer de browser het model brengt

61Chrome pusht ingebouwde API's voor taken zoals lokale aanwijzingen, samenvattingen, schrijven, herschrijven, vertalen, taaldetectie en proeflezen. Het idee is erg interessant: de browser beheert het model, de beschikbaarheid en updates; de app gebruikt een API dichter bij het platform.

63Als het goed werkt, verandert er veel:

65- minder serveroproepen voor eenvoudige taken;

66- gegevens die mogelijk op het apparaat achterblijven;

67- lagere latentie;

68- offline of semi-offline ervaringen;

69- Meer natuurlijke UX voor schrijven en vertalen.

71Maar het moet worden beschouwd als een progressieve verbetering. Sommige API's zijn stabiel, andere zijn in de oorspronkelijke proefversie of preview, andere zijn nog steeds afhankelijk van versie, taal en apparaat.

73```typescript

74type LocalCapability = 'available' | 'downloadable' | 'unsupported';

76export async function getLocalSummarizerCapability(): Promise<LocalCapability> {

77 const SummarizerApi = (globalThis as any).Summarizer;

79 if (!SummarizerApi?.availability) {

80 return 'unsupported';

81 }

83 const availability = await SummarizerApi.availability();

85 if (availability === 'available') return 'available';

86 if (availability === 'downloadable') return 'downloadable';

88 return 'unsupported';

89}

90```

92De specifieke code verandert, maar het patroon blijft: je checkt de beschikbaarheid, legt eventuele downloads uit, biedt fallbacks aan en meet de kwaliteit.

94## Terugval is geen triest plan B

96Terugval in de cloud is geen nederlaag. Het maakt deel uit van het product.

98```typescript

99interface AiRequest {

100 task: 'summarize' | 'rewrite' | 'classify';

101 input: string;

102}

103

104interface AiResult {

105 output: string;

106 runtime: 'local' | 'cloud';

107}

108

109export async function runAiTask(request: AiRequest): Promise<AiResult> {

110 const local = await tryLocalAi(request);

111

112 if (local) {

113 return { output: local, runtime: 'local' };

114 }

115

116 const cloud = await fetch('/api/ai', {

117 method: 'POST',

118 headers: { 'Content-Type': 'application/json' },

119 body: JSON.stringify(request),

120 }).then((res) => res.json());

121

122 return { output: cloud.output, runtime: 'cloud' };

123}

124```

125

126Met deze architectuur kunt u geleidelijk verbeteren. Degenen met lokale ondersteuning krijgen betere latentie en privacy. Degenen die het niet hebben, gebruiken de functie nog steeds. U kunt het percentage lokale verzoeken, tijden, fouten, geheugen, waargenomen kwaliteit en kosten meten.

127

128Zonder statistieken wordt AI op het apparaat een esthetische keuze. Met statistieken wordt het een producthefboom.

129

130## De UX van het model is belangrijk

131

132Als de browser een model moet downloaden, neemt de gebruiker dit waar. Verberg het niet achter een vage spinner. Voor alle duidelijkheid: "We bereiden het model voor om deze functie sneller en zelfs offline te gebruiken."

133

134Een goede ervaring:

135

136- toont de bereidingsstatus;

137- blokkeert niet de hele pagina;

138- stelt u in staat door te gaan met cloud-fallback;

139- vermijd batterij- en geheugenverrassingen;

140- onthoud het model waar mogelijk;

141- leg het voordeel in één concrete zin uit.

142

143Het ergste is een "slimme" functie die kapot lijkt te zijn omdat er iets stil wordt gedownload.

144

145## Privacy: beter, niet automatisch veilig

146

147Het verwerken van gegevens op het apparaat kan een groot voordeel zijn. Een concept-e-mail, intern document of persoonlijke notitie hoeft uw browser niet te verlaten om een suggestie te ontvangen.

148

149Lokaal betekent echter niet automatisch veilig. U moet echter nadenken over:

150

151- XSS;

152- onbedoelde logboeken;

153- gegevens opgeslagen in opslag;

154- snelle injectie van niet-vertrouwde inhoud;

155- machtigingen verleend aan het model;

156- uitgangen die worden gebruikt in automatische acties.

157

158Als een lokaal model een webpagina kan lezen en vervolgens een formulier kan invullen, kan die pagina proberen deze te manipuleren. Als het gereedschap kan oproepen, is bevestiging nodig. Als het gestructureerde output oplevert, moet het gevalideerd worden. Het feit dat het op het apparaat draait, vermindert enkele privacyrisico's, maar elimineert het beveiligingsmodel niet.

159

160## Waar het echt interessant wordt

161

162De tekst is nog maar het begin. WebGPU maakt webervaringen geloofwaardig die tot voor kort een native app leken:

163

164- complexe 3D-editors;

165- Gaussiaanse splatting in de browser;

166- real-time videofilters;

167- Lichtgewicht CAD;

168- wetenschappelijke visualisaties;

169- creatieve tools met direct voorbeeld;

170- visie-inferentie nabij de gebruikersinterface;

171- ambitieuzere browsergames.

172

173Hier beginnen frontend, graphics en machine learning zich te vermengen. Het is een wat lastig gebied, maar ook een vruchtbaar gebied: de browser wordt weer een serieus applicatieplatform, niet alleen de plek waar we formulieren en dashboards plaatsen.

174

175## Controlelijst vóór productie

176

177Voordat ik een functie op het apparaat aan gebruikers beschikbaar stel, zou ik het volgende controleren:

178

1791. Doelbrowsers en apparaten.

1802. Terugval in de cloud of elegante degradatie.

1813. Download tijd- en modelcache.

1824. Geheugen en batterij op gemiddelde hardware.

1835. Kwaliteit vergeleken met de cloudversie.

1846. Privacybeleid en gebruikersberichten.

1857. Testen met vijandige input.

1868. Afzonderlijke statistieken voor lokale runtime en cloudruntime.

1879. Plan om de sjabloon bij te werken of uit te schakelen.

188

189Het is een concrete lijst omdat het probleem concreet is. Een trage, kwetsbare of ondoorzichtige AI-functie wordt niet beter alleen omdat deze in de browser draait.

190

191## Het juiste compromis

192

193Ik geloof niet dat de toekomst “alles op het apparaat” is. En ik denk ook niet dat de cloud de enige redelijke plaats voor gevolgtrekkingen zal blijven. De meest waarschijnlijke toekomst is een mix: lokaal als het de latentie, privacy of kosten verbetert; cloud wanneer kwaliteit, bijgewerkte gegevens en gecentraliseerde controle nodig zijn.

194

195WebGPU, WebNN en ingebouwde AI API’s maken de browser niet almachtig. Ze maken hem volwassener. En voor degenen die webproducten bouwen is dit groot nieuws.

196

197## Nuttige bronnen

198

199- [WebGPU-API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)

200- [WebGPU-specificatie - W3C](https://www.w3.org/TR/webgpu/)

201- [Ingebouwde AI - Chrome voor ontwikkelaars](https://developer.chrome.com/docs/ai/built-in)

202- [Ingebouwde AI API's - Chrome voor ontwikkelaars](https://developer.chrome.com/docs/ai/built-in-apis)

203- [WebNN-API](https://webnn.io/)

204