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