1 
2Sa loob ng maraming taon ang browser ay ang magandang mukha ng application at ang ulap ay ang lugar kung saan nangyari ang mahirap na bagay. Nagsusulat, nag-click, nag-upload ng file ang user; ang frontend ay nagpapadala ng lahat sa server; ang server ay tumatawag ng isang modelo; babalik ang sagot.
3 
4Ang scheme na ito ay nananatiling lubhang kapaki-pakinabang, ngunit hindi ito libre. Ang bawat tawag ay nagdadala ng latency, gastos, dependency sa network, at mga tanong sa privacy. Kung ang gumagamit ay nagsusulat ng isang pangungusap at nais ng isang mungkahi, kalahating segundo ay tumitimbang. Kung nag-uuri ka ng libu-libong maliliit na input, ang mga pennies ay magiging totoong pera. Kung sensitibo ang text, hindi neutral na pagpipilian ang pagpapadala nito sa device.
5 
6Kaya naman ang WebGPU at on-device AI ay nasa hype. Hindi dahil papatakbuhin namin ang bawat modelo sa browser bukas. Dahil ang ilan sa mga matalinong tampok ay maaaring maging mas malapit sa gumagamit.
7 
8## Hindi lahat ay kailangang maging lokal
9 
10Ang pambatang bersyon ng argumento ay: "cloud versus device". Ang kapaki-pakinabang na bersyon ay hybrid.
11 
12Ang ilang mga gawain ay mukhang mahusay sa device: maiikling buod, pagtuklas ng wika, magaan na pagsusulat, simpleng pag-uuri, mga filter ng larawan, mga modelo ng maliit na pananaw, mga malikhaing karanasan na may agarang feedback.
13 
14Ang iba pang mga gawain ay nananatiling mas mahusay sa cloud: kumplikadong pangangatwiran, mga modelo ng hangganan, data sa panig ng server, sentralisadong pag-audit, pare-parehong kalidad, daloy ng trabaho kung saan kailangan mong maingat na kontrolin ang bawat hakbang.
15 
16Ang malusog na arkitektura ay nagpapasya sa runtime:
17 
18```mermaid
19flowchart TD
20    User[Gumagamit] --> Browser[Mga browser]
21    Browser --> Detect[Pag-detect ng feature]
22    Detect -->|Sinusuportahan| Local[Lokal na hinuha]
23    Detect -->|Hindi suportado| Cloud[Ulap fallback]
24    Local --> UX[Mabilis na tugon]
25    Cloud --> UX
26    UX --> Metrics[Mga sukatan at kalidad]
27```
28 
29Ang browser ay hindi kailangang manalo laban sa cloud. Dapat nitong i-save ang cloud mula sa paggawa ng trabaho na hindi kailangang gawin doon.
30 
31## Bakit mahalaga ang WebGPU
32 
33Ang WebGPU ay isang modernong API para sa paggamit ng GPU mula sa browser. Ito ay hindi lamang para sa mas magandang 3D graphics. Mahalaga rin ito dahil inilalantad nito ang mga primitive na angkop para sa pag-compute: parallel workloads, shaders, pipelines na mas malapit sa kung ano ang mahusay na ginagawa ng mga GPU.
34 
35Para sa AI, scientific visualization, 3D editor, video filter at creative tool, nararamdaman ang pagkakaibang ito. Maraming nagawa ang WebGL para sa web, ngunit ipinanganak ang WebGPU na may modelong mas angkop sa kasalukuyan.
36 
37Ang unang bagay na isusulat, gayunpaman, ay hindi isang shader. Isa itong matino na pagtuklas ng tampok:
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 
57Ang feature na ito ay nagsasabi ng isang mahalagang bagay: Ang WebGPU ay hindi isang karapatang ibinibigay sa bawat device. Ito ay isang kakayahang ma-verify. Ang ilang mga browser ay hindi ganap na sumusuporta dito, ang ilang mga GPU ay may mga limitasyon, ang ilang mga enterprise environment ay hindi pinagana ang mga tampok, ang ilang mga gumagamit ay nasa katamtamang hardware.
58 
59## Built-in na AI: kapag dinala ng browser ang modelo
60 
61Itinutulak ng Chrome ang mga built-in na API para sa mga gawain tulad ng mga lokal na prompt, pagbubuod, pagsusulat, muling pagsusulat, pagsasalin, pagtukoy ng wika, at pag-proofread. Ang ideya ay lubhang kawili-wili: pinamamahalaan ng browser ang modelo, kakayahang magamit at mga update; gumagamit ang app ng API na mas malapit sa platform.
62 
63Kung gumagana ito nang maayos, malaki ang pagbabago nito:
64 
65- mas kaunting mga tawag sa server para sa mga simpleng gawain;
66- data na maaaring manatili sa device;
67- mas mababang latency;
68- offline o semi-offline na mga karanasan;
69- Mas natural na UX para sa pagsulat at pagsasalin.
70 
71Ngunit dapat itong ituring bilang progresibong pagpapahusay. Ang ilang mga API ay matatag, ang iba ay nasa pinagmulang pagsubok o preview, ang iba ay nakadepende pa rin sa bersyon, wika at device.
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 
92Magbabago ang partikular na code, ngunit nananatili ang pattern: titingnan mo ang availability, ipaliwanag ang anumang mga pag-download, nag-aalok ng mga fallback, at sinusukat ang kalidad.
93 
94## Ang Fallback ay hindi isang malungkot na plano B
95 
96Hindi pagkatalo ang Cloud fallback. Ito ay bahagi ng produkto.
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 
126Ang arkitektura na ito ay nagpapahintulot sa iyo na unti-unting pagbutihin. Ang mga may lokal na suporta ay nakakakuha ng mas mahusay na latency at privacy. Ginagamit pa rin ng mga wala nito ang feature. Maaari mong sukatin ang porsyento ng mga lokal na kahilingan, oras, error, memorya, pinaghihinalaang kalidad at gastos.
127 
128Kung walang sukatan, ang on-device na AI ay nagiging isang aesthetic na pagpipilian. Sa mga sukatan, ito ay nagiging isang product lever.
129 
130## Mahalaga ang UX ng modelo
131 
132Kung kailangan ng browser na mag-download ng modelo, nakikita ito ng user. Huwag itago ito sa likod ng hindi malinaw na spinner. Mas mahusay na maging malinaw: "Inihahanda namin ang modelo upang gamitin ang function na ito nang mas mabilis at kahit offline."
133 
134Isang magandang karanasan:
135 
136- nagpapakita ng katayuan ng paghahanda;
137- hindi hinaharangan ang buong pahina;
138- nagbibigay-daan sa iyo na magpatuloy sa cloud fallback;
139- maiwasan ang mga sorpresa sa baterya at memorya;
140- tandaan ang modelo hangga't maaari;
141- ipaliwanag ang benepisyo sa isang kongkretong pangungusap.
142 
143Ang pinakamasama ay isang "matalinong" na feature na mukhang sira dahil tahimik itong nagda-download ng isang bagay.
144 
145## Privacy: mas mabuti, hindi awtomatikong secure
146 
147Ang pagpoproseso ng data sa device ay maaaring maging isang malaking kalamangan. Ang isang draft na email, panloob na dokumento, o personal na tala ay hindi kailangang umalis sa iyong browser upang makatanggap ng mungkahi.
148 
149Gayunpaman, ang lokal ay hindi awtomatikong nangangahulugang ligtas. Gayunpaman, kailangan mong mag-isip tungkol sa:
150 
151- XSS;
152- hindi sinasadyang mga tala;
153- data na naka-save sa imbakan;
154- agarang iniksyon mula sa hindi pinagkakatiwalaang nilalaman;
155- mga pahintulot na ibinigay sa modelo;
156- mga output na ginagamit sa mga awtomatikong pagkilos.
157 
158Kung mababasa ng isang lokal na modelo ang isang web page at pagkatapos ay punan ang isang form, maaaring subukan ng page na iyon na manipulahin ito. Kung maaari itong tumawag sa tool, kailangan ang kumpirmasyon. Kung ito ay gumagawa ng nakabalangkas na output, dapat itong mapatunayan. Ang katotohanang tumatakbo ito sa device ay nagpapababa ng ilang panganib sa privacy, ngunit hindi inaalis ang modelo ng seguridad.
159 
160## Kung saan ito ay talagang kawili-wili
161 
162Ang teksto ay simula pa lamang. Ginagawa ng WebGPU na kapani-paniwala ang mga karanasan sa web na hanggang kamakailan ay tila isang katutubong app:
163 
164- kumplikadong 3D editor;
165- Gaussian splatting sa browser;
166- real-time na mga filter ng video;
167- Magaang CAD;
168- pang-agham na visualization;
169- malikhaing tool na may instant preview;
170- vision inference malapit sa UI;
171- mas ambisyosong mga laro sa browser.
172 
173Dito nagsisimulang maghalo ang frontend, graphics at machine learning. Ito ay isang medyo awkward na lugar, ngunit isa ring mataba: ang browser ay bumalik sa pagiging isang seryosong platform ng aplikasyon, hindi lamang ang lugar kung saan kami naglalagay ng mga form at dashboard.
174 
175## Checklist bago ang produksyon
176 
177Bago maglagay ng feature sa device sa harap ng mga user, susuriin ko:
178 
1791. I-target ang mga browser at device.
1802. Cloud fallback o eleganteng pagkasira.
1813. Oras ng pag-download at cache ng modelo.
1824. Memorya at baterya sa karaniwang hardware.
1835. Kalidad kumpara sa bersyon ng cloud.
1846. Patakaran sa privacy at mga mensahe ng user.
1857. Pagsubok gamit ang mga pagalit na input.
1868. Paghiwalayin ang mga sukatan para sa lokal at cloud runtime.
1879. Plano na i-update o i-disable ang template.
188 
189Ito ay isang kongkretong listahan dahil ang problema ay konkreto. Ang isang mabagal, marupok, o opaque na feature ng AI ay hindi nagiging mas mahusay dahil lang sa tumatakbo ito sa browser.
190 
191## Ang tamang kompromiso
192 
193Hindi ako naniniwala na ang hinaharap ay "lahat ng bagay sa device". At sa palagay ko ay hindi rin mananatiling ang ulap ang tanging makatwirang lugar para sa hinuha. Ang pinaka-malamang na hinaharap ay isang halo: lokal kapag pinahusay nito ang latency, privacy, o gastos; cloud kapag kailangan ang kalidad, na-update na data at sentralisadong kontrol.
194 
195Hindi ginagawa ng WebGPU, WebNN at mga built-in na AI API ang browser na makapangyarihan sa lahat. Ginagawa nila siyang mas matanda. At para sa mga gumagawa ng mga produkto sa web, ito ay malaking balita.
196 
197## Mga kapaki-pakinabang na mapagkukunan
198 
199- [WebGPU API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)
200- [Detalye ng WebGPU - W3C](https://www.w3.org/TR/webgpu/)
201- [Built-in na AI - Chrome para sa Mga Developer](https://developer.chrome.com/docs/ai/built-in)
202- [Mga Built-in na AI API - Chrome para sa Mga Developer](https://developer.chrome.com/docs/ai/built-in-apis)
203- [WebNN API](https://webnn.io/)
204