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

spinny:~/writing $ vim 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~

NORMAL · webgpu-on-device-ai-browser.md [readonly]204 lines · :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.

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~