WebGPU și AI pe dispozitiv: browserul devine un timp de rulare serios

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

1~
2Ani de zile, browserul a fost fața drăguță a aplicației, iar cloud-ul a fost locul unde s-au întâmplat lucrurile grele. Utilizatorul scrie, face clic, încarcă un fișier; frontend-ul trimite totul către server; serverul numește un model; răspunsul revine.
3~
4Această schemă rămâne foarte utilă, dar nu este gratuită. Fiecare apel aduce întrebări legate de latență, cost, dependență de rețea și confidențialitate. Dacă utilizatorul scrie o propoziție și dorește o sugestie, o jumătate de secundă cântărește. Dacă clasificăți mii de intrări mici, bănuții devin bani reali. Dacă textul este sensibil, trimiterea acestuia de pe dispozitiv nu este o alegere neutră.
5~
6De aceea, WebGPU și AI-ul pe dispozitiv sunt în vogă. Nu pentru că vom rula fiecare model în browser mâine. Pentru că unele dintre caracteristicile inteligente se pot apropia mai mult de utilizator.
7~
8## Nu totul trebuie să devină local
9~
10Versiunea copilărească a argumentului este: „cloud versus device”. Versiunea utilă este hibridă.
11~
12Unele sarcini arată grozav pe dispozitiv: rezumate scurte, detectarea limbii, rescrieri ușoare, clasificări simple, filtre de imagine, modele de viziune mică, experiențe creative cu feedback imediat.
13~
14Alte sarcini rămân mai bune în cloud: raționament complex, modele de frontieră, date server-side, audit centralizat, calitate uniformă, flux de lucru în care trebuie să controlați cu atenție fiecare pas.
15~
16Arhitectura sănătoasă decide în timpul execuției:
17~
18```mermaid
19flowchart TD
20    User[Utilizator] --> Browser[Browsere]
21    Browser --> Detect[Detectarea caracteristicilor]
22    Detect -->|Sprijinit| Local[Inferență locală]
23    Detect -->|Nu este acceptat| Cloud[Cloud de rezervă]
24    Local --> UX[Răspuns rapid]
25    Cloud --> UX
26    UX --> Metrics[Metrica și calitate]
27```
28~
29Browserul nu trebuie să câștige împotriva cloud-ului. Trebuie să salveze cloud-ul de la a efectua lucrări care nu trebuie făcute acolo.
30~
31## De ce contează WebGPU
32~
33WebGPU este un API modern pentru utilizarea GPU-ului din browser. Nu este doar pentru o grafică 3D mai frumoasă. De asemenea, este important pentru că expune primitive potrivite pentru calcul: încărcături de lucru paralele, shadere, conducte mai aproape de ceea ce fac bine GPU-urile.
34~
35Pentru AI, vizualizare științifică, editori 3D, filtre video și instrumente creative, această diferență se simte. WebGL a făcut multe pentru web, dar WebGPU s-a născut cu un model mai potrivit prezentului.
36~
37Primul lucru de scris, însă, nu este un shader. Este o detectare sobră a caracteristicilor:
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~
57Această caracteristică spune un lucru important: WebGPU nu este un drept acordat pe fiecare dispozitiv. Este o capacitate de verificat. Unele browsere nu îl acceptă pe deplin, unele GPU-uri au limitări, unele medii de întreprindere dezactivează funcții, unii utilizatori folosesc hardware modest.
58~
59## AI încorporat: când browserul aduce modelul
60~
61Chrome împinge API-uri încorporate pentru sarcini precum solicitări locale, rezumare, scriere, rescriere, traducere, detectarea limbii și corectura. Ideea este foarte interesantă: browserul gestionează modelul, disponibilitatea și actualizările; aplicația folosește un API mai aproape de platformă.
62~
63Dacă funcționează bine, se schimbă foarte mult:
64~
65- mai puține apeluri de server pentru sarcini simple;
66- datele care pot rămâne pe dispozitiv;
67- latență mai mică;
68- experiențe offline sau semi-offline;
69- UX mai natural pentru scriere și traducere.
70~
71Dar ar trebui tratat ca o îmbunătățire progresivă. Unele API-uri sunt stabile, altele în versiunea de încercare sau previzualizare, altele încă depind de versiune, limbă și dispozitiv.
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~
92Codul specific se va schimba, dar modelul rămâne: verificați disponibilitatea, explicați orice descărcare, oferiți alternative și măsurați calitatea.
93~
94## Fallback nu este un plan B trist
95~
96Cloud Fallback nu este o înfrângere. Face parte din produs.
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~
126Această arhitectură vă permite să vă îmbunătățiți progresiv. Cei cu asistență locală obțin o latență și confidențialitate mai bune. Cei care nu o au încă folosesc funcția. Puteți măsura procentajul solicitărilor locale, timpii, erorile, memoria, calitatea percepută și costul.
127~
128Fără valori, AI pe dispozitiv devine o alegere estetică. Cu valori, devine o pârghie de produs.
129~
130## UX-ul modelului contează
131~
132Dacă browserul trebuie să descarce un model, utilizatorul îl percepe. Nu-l ascunde în spatele unui filator vag. Mai bine să fie clar: „Pregătim modelul pentru a utiliza această funcție mai rapid și chiar offline”.
133~
134O experienta buna:
135~
136- arată starea pregătirii;
137- nu blochează întreaga pagină;
138- vă permite să continuați cu cloud fallback;
139- evitați surprizele din baterie și memorie;
140- amintiți-vă modelul ori de câte ori este posibil;
141- explicați beneficiul într-o singură propoziție concretă.
142~
143Cel mai rău lucru este o caracteristică „inteligentă” care pare defectă deoarece descarcă ceva în tăcere.
144~
145## Confidențialitate: mai bine, nu securizată automat
146~
147Procesarea datelor de pe dispozitiv poate fi un mare avantaj. O schiță de e-mail, un document intern sau o notă personală nu trebuie să părăsească browserul pentru a primi o sugestie.
148~
149Cu toate acestea, local nu înseamnă automat sigur. Cu toate acestea, trebuie să vă gândiți la:
150~
151- XSS;
152- bușteni accidentale;
153- datele salvate în stocare;
154- injectare promptă din conținut neîncrezat;
155- permisiunile acordate modelului;
156- ieșiri utilizate în acțiunile automate.
157~
158Dacă un model local poate citi o pagină web și apoi completa un formular, pagina respectivă poate încerca să o manipuleze. Dacă poate apela instrumentul, este necesară confirmarea. Dacă produce rezultate structurate, trebuie validat. Faptul că rulează pe dispozitiv reduce unele riscuri de confidențialitate, dar nu elimină modelul de securitate.
159~
160## Unde devine cu adevărat interesant
161~
162Textul este doar începutul. WebGPU face ca experiențele web să fie credibile, care până de curând păreau a fi o aplicație nativă:
163~
164- editori 3D complexe;
165- stropire gaussiană în browser;
166- filtre video în timp real;
167- CAD ușor;
168- vizualizări științifice;
169- instrumente creative cu previzualizare instantanee;
170- inferență vizuală în apropierea interfeței de utilizare;
171- jocuri browser mai ambițioase.
172~
173Aici interfața, grafica și învățarea automată încep să se amestece. Este o zonă oarecum incomodă, dar și fertilă: browserul revine să fie o platformă serioasă de aplicații, nu doar locul unde punem formulare și tablouri de bord.
174~
175## Lista de verificare înainte de producție
176~
177Înainte de a pune o funcție de pe dispozitiv în fața utilizatorilor, aș verifica:
178~
1791. Vizează browsere și dispozitive.
1802. Numărul de rezervă sau degradare elegantă.
1813. Timpul de descărcare și memoria cache a modelului.
1824. Memorie și baterie în mediu hardware.
1835. Calitate comparativ cu versiunea cloud.
1846. Politica de confidențialitate și mesajele utilizatorilor.
1857. Testarea cu intrări ostile.
1868. Valori separate pentru timpul de execuție local și cloud.
1879. Planificați actualizarea sau dezactivarea șablonului.
188~
189Este o listă concretă pentru că problema este concretă. O caracteristică AI lentă, fragilă sau opacă nu devine mai bună doar pentru că rulează în browser.
190~
191## Compromisul potrivit
192~
193Nu cred că viitorul este „totul pe dispozitiv”. Și nici nu cred că norul va rămâne singurul loc rezonabil pentru inferență. Viitorul cel mai probabil este un mix: local atunci când îmbunătățește latența, confidențialitatea sau costul; cloud atunci când este nevoie de calitate, date actualizate și control centralizat.
194~
195WebGPU, WebNN și API-urile AI încorporate nu fac browserul omnipotent. Îl fac mai adult. Și pentru cei care construiesc produse web, aceasta este o veste uriașă.
196~
197## Surse utile
198~
199- [API WebGPU - MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)
200- [Specificație WebGPU - W3C](https://www.w3.org/TR/webgpu/)
201- [AI încorporat - Chrome pentru dezvoltatori](https://developer.chrome.com/docs/ai/built-in)
202- [API-uri AI încorporate - Chrome pentru dezvoltatori](https://developer.chrome.com/docs/ai/built-in-apis)
203- [API-ul WebNN](https://webnn.io/)
204~

NORMAL · webgpu-on-device-ai-browser.md [readonly]204 lines · :q to close

2Ani de zile, browserul a fost fața drăguță a aplicației, iar cloud-ul a fost locul unde s-au întâmplat lucrurile grele. Utilizatorul scrie, face clic, încarcă un fișier; frontend-ul trimite totul către server; serverul numește un model; răspunsul revine.

4Această schemă rămâne foarte utilă, dar nu este gratuită. Fiecare apel aduce întrebări legate de latență, cost, dependență de rețea și confidențialitate. Dacă utilizatorul scrie o propoziție și dorește o sugestie, o jumătate de secundă cântărește. Dacă clasificăți mii de intrări mici, bănuții devin bani reali. Dacă textul este sensibil, trimiterea acestuia de pe dispozitiv nu este o alegere neutră.

6De aceea, WebGPU și AI-ul pe dispozitiv sunt în vogă. Nu pentru că vom rula fiecare model în browser mâine. Pentru că unele dintre caracteristicile inteligente se pot apropia mai mult de utilizator.

8## Nu totul trebuie să devină local

10Versiunea copilărească a argumentului este: „cloud versus device”. Versiunea utilă este hibridă.

11~

12Unele sarcini arată grozav pe dispozitiv: rezumate scurte, detectarea limbii, rescrieri ușoare, clasificări simple, filtre de imagine, modele de viziune mică, experiențe creative cu feedback imediat.

13~

14Alte sarcini rămân mai bune în cloud: raționament complex, modele de frontieră, date server-side, audit centralizat, calitate uniformă, flux de lucru în care trebuie să controlați cu atenție fiecare pas.

15~

16Arhitectura sănătoasă decide în timpul execuției:

17~

18```mermaid

19flowchart TD

20 User[Utilizator] --> Browser[Browsere]

21 Browser --> Detect[Detectarea caracteristicilor]

22 Detect -->|Sprijinit| Local[Inferență locală]

23 Detect -->|Nu este acceptat| Cloud[Cloud de rezervă]

24 Local --> UX[Răspuns rapid]

25 Cloud --> UX

26 UX --> Metrics[Metrica și calitate]

27```

28~

29Browserul nu trebuie să câștige împotriva cloud-ului. Trebuie să salveze cloud-ul de la a efectua lucrări care nu trebuie făcute acolo.

30~

31## De ce contează WebGPU

32~

33WebGPU este un API modern pentru utilizarea GPU-ului din browser. Nu este doar pentru o grafică 3D mai frumoasă. De asemenea, este important pentru că expune primitive potrivite pentru calcul: încărcături de lucru paralele, shadere, conducte mai aproape de ceea ce fac bine GPU-urile.

34~

35Pentru AI, vizualizare științifică, editori 3D, filtre video și instrumente creative, această diferență se simte. WebGL a făcut multe pentru web, dar WebGPU s-a născut cu un model mai potrivit prezentului.

36~

37Primul lucru de scris, însă, nu este un shader. Este o detectare sobră a caracteristicilor:

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~

57Această caracteristică spune un lucru important: WebGPU nu este un drept acordat pe fiecare dispozitiv. Este o capacitate de verificat. Unele browsere nu îl acceptă pe deplin, unele GPU-uri au limitări, unele medii de întreprindere dezactivează funcții, unii utilizatori folosesc hardware modest.

58~

59## AI încorporat: când browserul aduce modelul

60~

61Chrome împinge API-uri încorporate pentru sarcini precum solicitări locale, rezumare, scriere, rescriere, traducere, detectarea limbii și corectura. Ideea este foarte interesantă: browserul gestionează modelul, disponibilitatea și actualizările; aplicația folosește un API mai aproape de platformă.

62~

63Dacă funcționează bine, se schimbă foarte mult:

64~

65- mai puține apeluri de server pentru sarcini simple;

66- datele care pot rămâne pe dispozitiv;

67- latență mai mică;

68- experiențe offline sau semi-offline;

69- UX mai natural pentru scriere și traducere.

70~

71Dar ar trebui tratat ca o îmbunătățire progresivă. Unele API-uri sunt stabile, altele în versiunea de încercare sau previzualizare, altele încă depind de versiune, limbă și dispozitiv.

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~

92Codul specific se va schimba, dar modelul rămâne: verificați disponibilitatea, explicați orice descărcare, oferiți alternative și măsurați calitatea.

93~

94## Fallback nu este un plan B trist

95~

96Cloud Fallback nu este o înfrângere. Face parte din produs.

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~

126Această arhitectură vă permite să vă îmbunătățiți progresiv. Cei cu asistență locală obțin o latență și confidențialitate mai bune. Cei care nu o au încă folosesc funcția. Puteți măsura procentajul solicitărilor locale, timpii, erorile, memoria, calitatea percepută și costul.

127~

128Fără valori, AI pe dispozitiv devine o alegere estetică. Cu valori, devine o pârghie de produs.

129~

130## UX-ul modelului contează

131~

132Dacă browserul trebuie să descarce un model, utilizatorul îl percepe. Nu-l ascunde în spatele unui filator vag. Mai bine să fie clar: „Pregătim modelul pentru a utiliza această funcție mai rapid și chiar offline”.

133~

134O experienta buna:

135~

136- arată starea pregătirii;

137- nu blochează întreaga pagină;

138- vă permite să continuați cu cloud fallback;

139- evitați surprizele din baterie și memorie;

140- amintiți-vă modelul ori de câte ori este posibil;

141- explicați beneficiul într-o singură propoziție concretă.

142~

143Cel mai rău lucru este o caracteristică „inteligentă” care pare defectă deoarece descarcă ceva în tăcere.

144~

145## Confidențialitate: mai bine, nu securizată automat

146~

147Procesarea datelor de pe dispozitiv poate fi un mare avantaj. O schiță de e-mail, un document intern sau o notă personală nu trebuie să părăsească browserul pentru a primi o sugestie.

148~

149Cu toate acestea, local nu înseamnă automat sigur. Cu toate acestea, trebuie să vă gândiți la:

150~

151- XSS;

152- bușteni accidentale;

153- datele salvate în stocare;

154- injectare promptă din conținut neîncrezat;

155- permisiunile acordate modelului;

156- ieșiri utilizate în acțiunile automate.

157~

158Dacă un model local poate citi o pagină web și apoi completa un formular, pagina respectivă poate încerca să o manipuleze. Dacă poate apela instrumentul, este necesară confirmarea. Dacă produce rezultate structurate, trebuie validat. Faptul că rulează pe dispozitiv reduce unele riscuri de confidențialitate, dar nu elimină modelul de securitate.

159~

160## Unde devine cu adevărat interesant

161~

162Textul este doar începutul. WebGPU face ca experiențele web să fie credibile, care până de curând păreau a fi o aplicație nativă:

163~

164- editori 3D complexe;

165- stropire gaussiană în browser;

166- filtre video în timp real;

167- CAD ușor;

168- vizualizări științifice;

169- instrumente creative cu previzualizare instantanee;

170- inferență vizuală în apropierea interfeței de utilizare;

171- jocuri browser mai ambițioase.

172~

173Aici interfața, grafica și învățarea automată încep să se amestece. Este o zonă oarecum incomodă, dar și fertilă: browserul revine să fie o platformă serioasă de aplicații, nu doar locul unde punem formulare și tablouri de bord.

174~

175## Lista de verificare înainte de producție

176~

177Înainte de a pune o funcție de pe dispozitiv în fața utilizatorilor, aș verifica:

178~

1791. Vizează browsere și dispozitive.

1802. Numărul de rezervă sau degradare elegantă.

1813. Timpul de descărcare și memoria cache a modelului.

1824. Memorie și baterie în mediu hardware.

1835. Calitate comparativ cu versiunea cloud.

1846. Politica de confidențialitate și mesajele utilizatorilor.

1857. Testarea cu intrări ostile.

1868. Valori separate pentru timpul de execuție local și cloud.

1879. Planificați actualizarea sau dezactivarea șablonului.

188~

189Este o listă concretă pentru că problema este concretă. O caracteristică AI lentă, fragilă sau opacă nu devine mai bună doar pentru că rulează în browser.

190~

191## Compromisul potrivit

192~

193Nu cred că viitorul este „totul pe dispozitiv”. Și nici nu cred că norul va rămâne singurul loc rezonabil pentru inferență. Viitorul cel mai probabil este un mix: local atunci când îmbunătățește latența, confidențialitatea sau costul; cloud atunci când este nevoie de calitate, date actualizate și control centralizat.

194~

195WebGPU, WebNN și API-urile AI încorporate nu fac browserul omnipotent. Îl fac mai adult. Și pentru cei care construiesc produse web, aceasta este o veste uriașă.

196~

197## Surse utile

198~

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

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

201- [AI încorporat - Chrome pentru dezvoltatori](https://developer.chrome.com/docs/ai/built-in)

202- [API-uri AI încorporate - Chrome pentru dezvoltatori](https://developer.chrome.com/docs/ai/built-in-apis)

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

204~