WebGPU és on-device AI: A böngésző komoly futási környezetté válik

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

1 
2Évekig a böngésző volt az alkalmazás szép arca, a felhő pedig az a hely, ahol a nehéz dolgok megtörténtek. A felhasználó ír, kattint, feltölt egy fájlt; a frontend mindent elküld a szervernek; a szerver modellt hív; jön vissza a válasz.
3 
4Ez a rendszer továbbra is nagyon hasznos, de nem ingyenes. Minden hívás késleltetéssel, költséggel, hálózatfüggőséggel és adatvédelmi kérdésekkel jár. Ha a felhasználó egy mondatot ír, és javaslatot szeretne, fél másodperc a súlya. Ha több ezer apró bemenetet osztályoz, a fillérekből valódi pénz lesz. Ha a szöveg érzékeny, akkor a készülékről való elküldése nem semleges választás.
5 
6Ezért van felhajtás a WebGPU és az eszközön lévő mesterséges intelligencia. Nem azért, mert holnap minden modellt futtatunk a böngészőben. Mert az intelligens funkciók egy része közelebb kerülhet a felhasználóhoz.
7 
8## Nem kell mindennek helyisé válnia
9 
10Az érvelés gyerekes változata: "felhő versus eszköz". A hasznos változat a hibrid.
11 
12Néhány feladat remekül mutat a készüléken: rövid összefoglalók, nyelvészlelés, fényátírások, egyszerű osztályozások, képszűrők, kis látásmodellek, kreatív élmények azonnali visszajelzéssel.
13 
14A többi feladat jobb marad a felhőben: összetett érvelés, határmodellek, szerveroldali adatok, központosított audit, egységes minőség, munkafolyamat, ahol minden lépést gondosan ellenőrizni kell.
15 
16Az egészséges architektúra futás közben dönt:
17 
18```mermaid
19flowchart TD
20    User[Felhasználó] --> Browser[Böngészők]
21    Browser --> Detect[Funkció felismerés]
22    Detect -->|Támogatott| Local[Helyi következtetés]
23    Detect -->|Nem támogatott| Cloud[Cloud backback]
24    Local --> UX[Gyors válasz]
25    Cloud --> UX
26    UX --> Metrics[Mutatók és minőség]
27```
28 
29A böngészőnek nem kell nyernie a felhővel szemben. Meg kell mentenie a felhőt azoktól a munkáktól, amelyeket ott nem kell elvégezni.
30 
31## Miért számít a WebGPU?
32 
33A WebGPU egy modern API a GPU böngészőből történő használatához. Nem csak a szebb 3D-s grafikákra való. Ez azért is fontos, mert a számítástechnikára alkalmas primitíveket: párhuzamos munkaterheléseket, shadereket, pipeline-okat közelebb hoz a GPU-k által jól teljesítettekhez.
34 
35A mesterséges intelligencia, a tudományos vizualizáció, a 3D szerkesztők, a videószűrők és a kreatív eszközök esetében ez a különbség érezhető. A WebGL sokat tett a webért, de a WebGPU a jelennek jobban megfelelő modellel született.
36 
37Az első dolog, amit meg kell írni, azonban nem árnyékoló. Ez egy józan funkciófelismerés:
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 
57Ez a funkció egy fontos dolgot mond: a WebGPU nem minden eszközön biztosított. Ez egy igazolható képesség. Egyes böngészők nem támogatják teljes mértékben, néhány GPU-nak vannak korlátozásai, egyes vállalati környezetek letiltják a funkciókat, néhány felhasználó szerény hardverrel rendelkezik.
58 
59## Beépített mesterséges intelligencia: amikor a böngésző hozza a modellt
60 
61A Chrome beépített API-kat kínál az olyan feladatokhoz, mint a helyi felszólítások, összegzés, írás, átírás, fordítás, nyelvészlelés és lektorálás. Az ötlet nagyon érdekes: a böngésző kezeli a modellt, a rendelkezésre állást és a frissítéseket; az alkalmazás a platformhoz közelebbi API-t használ.
62 
63Ha jól működik, sokat változtat:
64 
65- kevesebb szerverhívás egyszerű feladatokhoz;
66- adatok, amelyek az eszközön maradhatnak;
67- alacsonyabb késleltetési idő;
68- offline vagy félig offline élmények;
69- Természetesebb UX íráshoz és fordításhoz.
70 
71De ezt progresszív fejlesztésként kell kezelni. Egyes API-k stabilak, mások eredeti próbaverzióban vagy előnézetben vannak, mások továbbra is a verziótól, a nyelvtől és az eszköztől függenek.
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 
92A konkrét kód megváltozik, de a minta megmarad: ellenőrizni kell a rendelkezésre állást, elmagyarázza a letöltéseket, tartalékokat kínál, és méri a minőséget.
93 
94## A visszaesés nem szomorú B-terv
95 
96A felhő visszaesése nem vereség. A termék része.
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 
126Ez az architektúra lehetővé teszi a fokozatos fejlesztést. A helyi támogatással rendelkezők jobb késleltetést és adatvédelmet kapnak. Akinek nincs, az továbbra is használja a funkciót. Mérheti a helyi kérések százalékos arányát, az időket, a hibákat, a memóriát, az észlelt minőséget és a költségeket.
127 
128Mutatók nélkül az eszközön lévő mesterséges intelligencia esztétikai választássá válik. A mérőszámokkal termékkarcává válik.
129 
130## A modell felhasználói élménye számít
131 
132Ha a böngészőnek le kell töltenie egy modellt, a felhasználó észleli azt. Ne rejtsd el egy homályos forgó mögé. Jobb, ha egyértelmű: "Felkészítjük a modellt a funkció gyorsabb és akár offline használatára."
133 
134Egy jó tapasztalat:
135 
136- mutatja az előkészítés állapotát;
137- nem blokkolja a teljes oldalt;
138- lehetővé teszi a felhőalapú visszaállítás folytatását;
139- elkerülje az akkumulátor és a memória meglepetéseit;
140- emlékezzen a modellre, amikor csak lehetséges;
141- magyarázza el az előnyt egy konkrét mondatban.
142 
143A legrosszabb egy „okos” funkció, amely meghibásodottnak tűnik, mert csendben tölt le valamit.
144 
145## Adatvédelem: jobb, nem automatikusan biztonságos
146 
147Az adatok feldolgozása az eszközön nagy előnyt jelenthet. Az e-mail piszkozatnak, belső dokumentumnak vagy személyes feljegyzésnek nem kell elhagynia a böngészőt ahhoz, hogy javaslatot kapjon.
148 
149A helyi azonban nem jelent automatikusan biztonságosat. Azonban gondolnia kell a következőkre:
150 
151- XSS;
152- véletlen naplók;
153- tárolóban mentett adatok;
154- gyors injektálás nem megbízható tartalomból;
155- a modellnek adott engedélyek;
156- automatikus műveletekben használt kimenetek.
157 
158Ha egy helyi modell képes elolvasni egy weboldalt, majd kitölteni egy űrlapot, az oldal megpróbálhatja manipulálni. Ha képes hívni az eszközt, megerősítésre van szükség. Ha strukturált kimenetet állít elő, akkor azt érvényesíteni kell. Az a tény, hogy az eszközön fut, csökkenti bizonyos adatvédelmi kockázatokat, de nem szünteti meg a biztonsági modellt.
159 
160## Ahol ez igazán érdekessé válik
161 
162A szöveg csak a kezdet. A WebGPU hitelessé teszi a webes élményeket, amelyek egészen a közelmúltig natív alkalmazásnak tűntek:
163 
164- összetett 3D szerkesztők;
165- Gauss fröccs a böngészőben;
166- valós idejű videoszűrők;
167- Könnyű CAD;
168- tudományos vizualizációk;
169- kreatív eszközök azonnali előnézettel;
170- látási következtetés a felhasználói felület közelében;
171- ambiciózusabb böngészős játékok.
172 
173Itt kezd keveredni a frontend, a grafika és a gépi tanulás. Ez egy kissé kínos, de egyben termékeny terület is: a böngésző ismét komoly alkalmazásplatformmá válik, nem csak az űrlapok és az irányítópultok elhelyezésére.
174 
175## Gyártás előtti ellenőrző lista
176 
177Mielőtt egy eszközön lévő funkciót a felhasználók elé helyeznék, ellenőrizném:
178 
1791. Célozzon böngészőket és eszközöket.
1802. Felhővisszaesés vagy elegáns leromlás.
1813. Letöltési idő és modell gyorsítótár.
1824. Memória és akkumulátor átlagos hardver.
1835. Minőség a felhő verzióhoz képest.
1846. Adatvédelmi szabályzat és felhasználói üzenetek.
1857. Tesztelés ellenséges bemenetekkel.
1868. Külön mérőszámok a helyi és a felhőalapú futásidőhöz.
1879. Tervezze meg a sablon frissítését vagy letiltását.
188 
189Ez egy konkrét lista, mert a probléma konkrét. Egy lassú, törékeny vagy átláthatatlan AI-funkció nem válik jobbá csak azért, mert a böngészőben fut.
190 
191## A helyes kompromisszum
192 
193Nem hiszem, hogy a jövő „minden a készüléken” múlik. És nem hiszem, hogy a felhő marad az egyetlen ésszerű hely a következtetésekhez. A legvalószínűbb jövő egy keverék: helyi, ha javítja a késleltetést, az adatvédelmet vagy a költségeket; felhő, ha minőségre, frissített adatokra és központi vezérlésre van szükség.
194 
195A WebGPU, WebNN és a beépített AI API-k nem teszik a böngészőt mindenhatóvá. Felnőttebbé teszik. És azok számára, akik webes termékeket építenek, ez óriási hír.
196 
197## Hasznos források
198 
199- [WebGPU API – MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)
200- [WebGPU specifikáció - W3C](https://www.w3.org/TR/webgpu/)
201- [Beépített mesterséges intelligencia – Chrome fejlesztőknek](https://developer.chrome.com/docs/ai/built-in)
202- [Beépített AI API-k – Chrome fejlesztőknek](https://developer.chrome.com/docs/ai/built-in-apis)
203- [WebNN API](https://webnn.io/)
204

:WebGPU és on-device AI: A böngésző komoly futási környezetté váliklines 1-204 (END) — press q to close

2Évekig a böngésző volt az alkalmazás szép arca, a felhő pedig az a hely, ahol a nehéz dolgok megtörténtek. A felhasználó ír, kattint, feltölt egy fájlt; a frontend mindent elküld a szervernek; a szerver modellt hív; jön vissza a válasz.

4Ez a rendszer továbbra is nagyon hasznos, de nem ingyenes. Minden hívás késleltetéssel, költséggel, hálózatfüggőséggel és adatvédelmi kérdésekkel jár. Ha a felhasználó egy mondatot ír, és javaslatot szeretne, fél másodperc a súlya. Ha több ezer apró bemenetet osztályoz, a fillérekből valódi pénz lesz. Ha a szöveg érzékeny, akkor a készülékről való elküldése nem semleges választás.

6Ezért van felhajtás a WebGPU és az eszközön lévő mesterséges intelligencia. Nem azért, mert holnap minden modellt futtatunk a böngészőben. Mert az intelligens funkciók egy része közelebb kerülhet a felhasználóhoz.

8## Nem kell mindennek helyisé válnia

10Az érvelés gyerekes változata: "felhő versus eszköz". A hasznos változat a hibrid.

12Néhány feladat remekül mutat a készüléken: rövid összefoglalók, nyelvészlelés, fényátírások, egyszerű osztályozások, képszűrők, kis látásmodellek, kreatív élmények azonnali visszajelzéssel.

14A többi feladat jobb marad a felhőben: összetett érvelés, határmodellek, szerveroldali adatok, központosított audit, egységes minőség, munkafolyamat, ahol minden lépést gondosan ellenőrizni kell.

16Az egészséges architektúra futás közben dönt:

18```mermaid

19flowchart TD

20 User[Felhasználó] --> Browser[Böngészők]

21 Browser --> Detect[Funkció felismerés]

22 Detect -->|Támogatott| Local[Helyi következtetés]

23 Detect -->|Nem támogatott| Cloud[Cloud backback]

24 Local --> UX[Gyors válasz]

25 Cloud --> UX

26 UX --> Metrics[Mutatók és minőség]

27```

29A böngészőnek nem kell nyernie a felhővel szemben. Meg kell mentenie a felhőt azoktól a munkáktól, amelyeket ott nem kell elvégezni.

31## Miért számít a WebGPU?

33A WebGPU egy modern API a GPU böngészőből történő használatához. Nem csak a szebb 3D-s grafikákra való. Ez azért is fontos, mert a számítástechnikára alkalmas primitíveket: párhuzamos munkaterheléseket, shadereket, pipeline-okat közelebb hoz a GPU-k által jól teljesítettekhez.

35A mesterséges intelligencia, a tudományos vizualizáció, a 3D szerkesztők, a videószűrők és a kreatív eszközök esetében ez a különbség érezhető. A WebGL sokat tett a webért, de a WebGPU a jelennek jobban megfelelő modellel született.

37Az első dolog, amit meg kell írni, azonban nem árnyékoló. Ez egy józan funkciófelismerés:

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```

57Ez a funkció egy fontos dolgot mond: a WebGPU nem minden eszközön biztosított. Ez egy igazolható képesség. Egyes böngészők nem támogatják teljes mértékben, néhány GPU-nak vannak korlátozásai, egyes vállalati környezetek letiltják a funkciókat, néhány felhasználó szerény hardverrel rendelkezik.

59## Beépített mesterséges intelligencia: amikor a böngésző hozza a modellt

61A Chrome beépített API-kat kínál az olyan feladatokhoz, mint a helyi felszólítások, összegzés, írás, átírás, fordítás, nyelvészlelés és lektorálás. Az ötlet nagyon érdekes: a böngésző kezeli a modellt, a rendelkezésre állást és a frissítéseket; az alkalmazás a platformhoz közelebbi API-t használ.

63Ha jól működik, sokat változtat:

65- kevesebb szerverhívás egyszerű feladatokhoz;

66- adatok, amelyek az eszközön maradhatnak;

67- alacsonyabb késleltetési idő;

68- offline vagy félig offline élmények;

69- Természetesebb UX íráshoz és fordításhoz.

71De ezt progresszív fejlesztésként kell kezelni. Egyes API-k stabilak, mások eredeti próbaverzióban vagy előnézetben vannak, mások továbbra is a verziótól, a nyelvtől és az eszköztől függenek.

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```

92A konkrét kód megváltozik, de a minta megmarad: ellenőrizni kell a rendelkezésre állást, elmagyarázza a letöltéseket, tartalékokat kínál, és méri a minőséget.

94## A visszaesés nem szomorú B-terv

96A felhő visszaesése nem vereség. A termék része.

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

126Ez az architektúra lehetővé teszi a fokozatos fejlesztést. A helyi támogatással rendelkezők jobb késleltetést és adatvédelmet kapnak. Akinek nincs, az továbbra is használja a funkciót. Mérheti a helyi kérések százalékos arányát, az időket, a hibákat, a memóriát, az észlelt minőséget és a költségeket.

127

128Mutatók nélkül az eszközön lévő mesterséges intelligencia esztétikai választássá válik. A mérőszámokkal termékkarcává válik.

129

130## A modell felhasználói élménye számít

131

132Ha a böngészőnek le kell töltenie egy modellt, a felhasználó észleli azt. Ne rejtsd el egy homályos forgó mögé. Jobb, ha egyértelmű: "Felkészítjük a modellt a funkció gyorsabb és akár offline használatára."

133

134Egy jó tapasztalat:

135

136- mutatja az előkészítés állapotát;

137- nem blokkolja a teljes oldalt;

138- lehetővé teszi a felhőalapú visszaállítás folytatását;

139- elkerülje az akkumulátor és a memória meglepetéseit;

140- emlékezzen a modellre, amikor csak lehetséges;

141- magyarázza el az előnyt egy konkrét mondatban.

142

143A legrosszabb egy „okos” funkció, amely meghibásodottnak tűnik, mert csendben tölt le valamit.

144

145## Adatvédelem: jobb, nem automatikusan biztonságos

146

147Az adatok feldolgozása az eszközön nagy előnyt jelenthet. Az e-mail piszkozatnak, belső dokumentumnak vagy személyes feljegyzésnek nem kell elhagynia a böngészőt ahhoz, hogy javaslatot kapjon.

148

149A helyi azonban nem jelent automatikusan biztonságosat. Azonban gondolnia kell a következőkre:

150

151- XSS;

152- véletlen naplók;

153- tárolóban mentett adatok;

154- gyors injektálás nem megbízható tartalomból;

155- a modellnek adott engedélyek;

156- automatikus műveletekben használt kimenetek.

157

158Ha egy helyi modell képes elolvasni egy weboldalt, majd kitölteni egy űrlapot, az oldal megpróbálhatja manipulálni. Ha képes hívni az eszközt, megerősítésre van szükség. Ha strukturált kimenetet állít elő, akkor azt érvényesíteni kell. Az a tény, hogy az eszközön fut, csökkenti bizonyos adatvédelmi kockázatokat, de nem szünteti meg a biztonsági modellt.

159

160## Ahol ez igazán érdekessé válik

161

162A szöveg csak a kezdet. A WebGPU hitelessé teszi a webes élményeket, amelyek egészen a közelmúltig natív alkalmazásnak tűntek:

163

164- összetett 3D szerkesztők;

165- Gauss fröccs a böngészőben;

166- valós idejű videoszűrők;

167- Könnyű CAD;

168- tudományos vizualizációk;

169- kreatív eszközök azonnali előnézettel;

170- látási következtetés a felhasználói felület közelében;

171- ambiciózusabb böngészős játékok.

172

173Itt kezd keveredni a frontend, a grafika és a gépi tanulás. Ez egy kissé kínos, de egyben termékeny terület is: a böngésző ismét komoly alkalmazásplatformmá válik, nem csak az űrlapok és az irányítópultok elhelyezésére.

174

175## Gyártás előtti ellenőrző lista

176

177Mielőtt egy eszközön lévő funkciót a felhasználók elé helyeznék, ellenőrizném:

178

1791. Célozzon böngészőket és eszközöket.

1802. Felhővisszaesés vagy elegáns leromlás.

1813. Letöltési idő és modell gyorsítótár.

1824. Memória és akkumulátor átlagos hardver.

1835. Minőség a felhő verzióhoz képest.

1846. Adatvédelmi szabályzat és felhasználói üzenetek.

1857. Tesztelés ellenséges bemenetekkel.

1868. Külön mérőszámok a helyi és a felhőalapú futásidőhöz.

1879. Tervezze meg a sablon frissítését vagy letiltását.

188

189Ez egy konkrét lista, mert a probléma konkrét. Egy lassú, törékeny vagy átláthatatlan AI-funkció nem válik jobbá csak azért, mert a böngészőben fut.

190

191## A helyes kompromisszum

192

193Nem hiszem, hogy a jövő „minden a készüléken” múlik. És nem hiszem, hogy a felhő marad az egyetlen ésszerű hely a következtetésekhez. A legvalószínűbb jövő egy keverék: helyi, ha javítja a késleltetést, az adatvédelmet vagy a költségeket; felhő, ha minőségre, frissített adatokra és központi vezérlésre van szükség.

194

195A WebGPU, WebNN és a beépített AI API-k nem teszik a böngészőt mindenhatóvá. Felnőttebbé teszik. És azok számára, akik webes termékeket építenek, ez óriási hír.

196

197## Hasznos források

198

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

200- [WebGPU specifikáció - W3C](https://www.w3.org/TR/webgpu/)

201- [Beépített mesterséges intelligencia – Chrome fejlesztőknek](https://developer.chrome.com/docs/ai/built-in)

202- [Beépített AI API-k – Chrome fejlesztőknek](https://developer.chrome.com/docs/ai/built-in-apis)

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

204