WebGPU a umělá inteligence na zařízení: Z prohlížeče se stává seriózní běhové prostředí

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

1 
2Prohlížeč byl po léta hezkou tváří aplikace a cloud byl místem, kde se děly těžké věci. Uživatel zapíše, klikne, nahraje soubor; frontend posílá vše na server; server volá model; odpověď se vrací.
3 
4Toto schéma zůstává velmi užitečné, ale není zdarma. Každý hovor přináší latenci, náklady, závislost na síti a soukromí. Pokud uživatel píše větu a chce návrh, půl sekundy váží. Pokud klasifikujete tisíce malých vstupů, haléře se stanou skutečnými penězi. Pokud je text citlivý, odeslání ze zařízení není neutrální volbou.
5 
6To je důvod, proč jsou WebGPU a AI na zařízení v humbuku. Ne proto, že zítra spustíme každý model v prohlížeči. Protože některé z inteligentních funkcí se mohou dostat blíže k uživateli.
7 
8## Ne všechno se musí stát lokální
9 
10Dětinská verze argumentu zní: „cloud versus zařízení“. Užitečná verze je hybridní.
11 
12Některé úkoly vypadají na zařízení skvěle: krátká shrnutí, detekce jazyka, lehké přepisy, jednoduchá klasifikace, obrazové filtry, malé modely vidění, kreativní zážitky s okamžitou zpětnou vazbou.
13 
14Další úkoly zůstávají lepší v cloudu: komplexní uvažování, hraniční modely, data na straně serveru, centralizovaný audit, jednotná kvalita, pracovní postup, kde musíte pečlivě kontrolovat každý krok.
15 
16Zdravá architektura rozhoduje za běhu:
17 
18```mermaid
19flowchart TD
20    User[Uživatel] --> Browser[Prohlížeče]
21    Browser --> Detect[Detekce funkcí]
22    Detect -->|Podporováno| Local[Místní závěr]
23    Detect -->|Není podporováno| Cloud[Záložní cloud]
24    Local --> UX[Rychlá odezva]
25    Cloud --> UX
26    UX --> Metrics[Metriky a kvalita]
27```
28 
29Prohlížeč nemusí vyhrát nad cloudem. Musí cloud zachránit před prováděním práce, která se tam dělat nemusí.
30 
31## Proč na WebGPU záleží
32 
33WebGPU je moderní API pro použití GPU z prohlížeče. Není to jen pro hezčí 3D grafiku. Je také důležité, protože odhaluje primitiva vhodná pro výpočty: paralelní pracovní zátěže, shadery, potrubí blíže tomu, co GPU umí dobře.
34 
35U AI, vědecké vizualizace, 3D editorů, video filtrů a kreativních nástrojů je tento rozdíl cítit. WebGL udělal pro web hodně, ale WebGPU se zrodilo s modelem, který lépe vyhovuje současnosti.
36 
37První věc, kterou je třeba napsat, však není shader. Je to střízlivá detekce funkcí:
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 
57Tato funkce říká jednu důležitou věc: WebGPU není právo udělené na každém zařízení. Je to schopnost být ověřena. Některé prohlížeče to plně nepodporují, některé GPU mají omezení, některá podniková prostředí zakazují funkce, někteří uživatelé používají skromný hardware.
58 
59## Vestavěná AI: když prohlížeč přinese model
60 
61Chrome prosazuje vestavěná rozhraní API pro úkoly, jako jsou místní výzvy, sumarizace, psaní, přepisování, překlady, detekce jazyka a korektury. Myšlenka je velmi zajímavá: prohlížeč spravuje model, dostupnost a aktualizace; aplikace používá API blíže k platformě.
62 
63Pokud to funguje dobře, hodně se to změní:
64 
65- méně volání serveru pro jednoduché úkoly;
66- data, která mohou zůstat v zařízení;
67- nižší latence;
68- offline nebo semi-offline zážitky;
69- Přirozenější uživatelské rozhraní pro psaní a překlad.
70 
71Ale mělo by to být považováno za progresivní vylepšení. Některá API jsou stabilní, jiná ve zkušební verzi nebo náhledu, jiná stále závisí na verzi, jazyku a zařízení.
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 
92Konkrétní kód se změní, ale vzorec zůstává: zkontrolujete dostupnost, vysvětlíte všechna stahování, nabídnete záložní řešení a změříte kvalitu.
93 
94## Záloha není smutný plán B
95 
96Cloud backback není prohra. Je součástí produktu.
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 
126Tato architektura umožňuje postupné zlepšování. Uživatelé s místní podporou získají lepší latenci a soukromí. Ti, kteří ji nemají, funkci stále používají. Můžete měřit procento místních požadavků, časy, chyby, paměť, vnímanou kvalitu a náklady.
127 
128Bez metrik se AI na zařízení stává estetickou volbou. S metrikami se stává pákou produktu.
129 
130## Na UX modelu záleží
131 
132Pokud prohlížeč potřebuje stáhnout model, uživatel to vnímá. Neschovávejte to za nejasnou rotačku. Lepší, aby bylo jasno: "Připravujeme model tak, aby tuto funkci používal rychleji a dokonce i offline."
133 
134Dobrá zkušenost:
135 
136- ukazuje stav přípravy;
137- neblokuje celou stránku;
138- umožňuje pokračovat s cloudovou zálohou;
139- vyhnout se překvapením z baterie a paměti;
140- pamatovat si model, kdykoli je to možné;
141- vysvětlit přínos jednou konkrétní větou.
142 
143Nejhorší je "chytrá" funkce, která se zdá být nefunkční, protože něco stahuje potichu.
144 
145## Soukromí: lepší, ne automaticky zabezpečené
146 
147Velkou výhodou může být zpracování dat na zařízení. Koncept e-mailu, interního dokumentu nebo osobní poznámky nemusí opustit váš prohlížeč, aby obdržel návrh.
148 
149Místní však automaticky neznamená bezpečné. Je však třeba myslet na:
150 
151- XSS;
152- náhodné protokoly;
153- data uložená v úložišti;
154- rychlé vložení z nedůvěryhodného obsahu;
155- povolení udělená modelu;
156- výstupy používané v automatických akcích.
157 
158Pokud místní model dokáže přečíst webovou stránku a poté vyplnit formulář, může se s ní tato stránka pokusit manipulovat. Pokud může nástroj volat, je potřeba potvrzení. Pokud vytváří strukturovaný výstup, musí být ověřen. Skutečnost, že běží na zařízení, snižuje některá rizika ochrany soukromí, ale neeliminuje model zabezpečení.
159 
160## Kde to začíná být opravdu zajímavé
161 
162Text je jen začátek. WebGPU dělá webové zážitky důvěryhodnými, které se donedávna zdály jako nativní aplikace:
163 
164- složité 3D editory;
165- Gaussovské splatting v prohlížeči;
166- video filtry v reálném čase;
167- Lehký CAD;
168- vědecké vizualizace;
169- kreativní nástroje s okamžitým náhledem;
170- inference vidění v blízkosti UI;
171- ambicióznějších prohlížečových her.
172 
173Zde se začíná mísit frontend, grafika a strojové učení. Je to poněkud nepohodlná oblast, ale také úrodná: prohlížeč se vrací jako seriózní aplikační platforma, nejen místo, kam vkládáme formuláře a řídicí panely.
174 
175## Kontrolní seznam před výrobou
176 
177Před uvedením funkce na zařízení před uživatele bych zkontroloval:
178 
1791. Zacilte na prohlížeče a zařízení.
1802. Cloud záložní nebo elegantní degradace.
1813. Čas stahování a mezipaměť modelu.
1824. Paměť a baterie na průměrném hardwaru.
1835. Kvalita ve srovnání s cloudovou verzí.
1846. Zásady ochrany osobních údajů a uživatelské zprávy.
1857. Testování s nepřátelskými vstupy.
1868. Samostatné metriky pro místní a cloudové běhové prostředí.
1879. Plánujte aktualizaci nebo deaktivaci šablony.
188 
189Je to konkrétní seznam, protože problém je konkrétní. Pomalá, křehká nebo neprůhledná funkce umělé inteligence se nezlepší jen proto, že běží v prohlížeči.
190 
191## Správný kompromis
192 
193Nevěřím, že budoucnost je „všechno na zařízení“. A nemyslím si, že cloud zůstane jediným rozumným místem pro vyvozování. Nejpravděpodobnější budoucnost je kombinace: místní, když to zlepší latenci, soukromí nebo náklady; cloud, když je potřeba kvalita, aktualizovaná data a centralizované řízení.
194 
195WebGPU, WebNN a vestavěná rozhraní AI API nedělají prohlížeč všemocným. Dělají ho dospělejším. A pro ty, kteří vytvářejí webové produkty, je to obrovská zpráva.
196 
197## Užitečné zdroje
198 
199- [WebGPU API – MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)
200- [Specifikace WebGPU - W3C](https://www.w3.org/TR/webgpu/)
201- [Vestavěná AI – Chrome pro vývojáře](https://developer.chrome.com/docs/ai/built-in)
202- [Vestavěná rozhraní AI API – Chrome pro vývojáře](https://developer.chrome.com/docs/ai/built-in-apis)
203- [WebNN API](https://webnn.io/)
204

:WebGPU a umělá inteligence na zařízení: Z prohlížeče se stává seriózní běhové prostředílines 1-204 (END) — press q to close

2Prohlížeč byl po léta hezkou tváří aplikace a cloud byl místem, kde se děly těžké věci. Uživatel zapíše, klikne, nahraje soubor; frontend posílá vše na server; server volá model; odpověď se vrací.

4Toto schéma zůstává velmi užitečné, ale není zdarma. Každý hovor přináší latenci, náklady, závislost na síti a soukromí. Pokud uživatel píše větu a chce návrh, půl sekundy váží. Pokud klasifikujete tisíce malých vstupů, haléře se stanou skutečnými penězi. Pokud je text citlivý, odeslání ze zařízení není neutrální volbou.

6To je důvod, proč jsou WebGPU a AI na zařízení v humbuku. Ne proto, že zítra spustíme každý model v prohlížeči. Protože některé z inteligentních funkcí se mohou dostat blíže k uživateli.

8## Ne všechno se musí stát lokální

10Dětinská verze argumentu zní: „cloud versus zařízení“. Užitečná verze je hybridní.

12Některé úkoly vypadají na zařízení skvěle: krátká shrnutí, detekce jazyka, lehké přepisy, jednoduchá klasifikace, obrazové filtry, malé modely vidění, kreativní zážitky s okamžitou zpětnou vazbou.

14Další úkoly zůstávají lepší v cloudu: komplexní uvažování, hraniční modely, data na straně serveru, centralizovaný audit, jednotná kvalita, pracovní postup, kde musíte pečlivě kontrolovat každý krok.

16Zdravá architektura rozhoduje za běhu:

18```mermaid

19flowchart TD

20 User[Uživatel] --> Browser[Prohlížeče]

21 Browser --> Detect[Detekce funkcí]

22 Detect -->|Podporováno| Local[Místní závěr]

23 Detect -->|Není podporováno| Cloud[Záložní cloud]

24 Local --> UX[Rychlá odezva]

25 Cloud --> UX

26 UX --> Metrics[Metriky a kvalita]

27```

29Prohlížeč nemusí vyhrát nad cloudem. Musí cloud zachránit před prováděním práce, která se tam dělat nemusí.

31## Proč na WebGPU záleží

33WebGPU je moderní API pro použití GPU z prohlížeče. Není to jen pro hezčí 3D grafiku. Je také důležité, protože odhaluje primitiva vhodná pro výpočty: paralelní pracovní zátěže, shadery, potrubí blíže tomu, co GPU umí dobře.

35U AI, vědecké vizualizace, 3D editorů, video filtrů a kreativních nástrojů je tento rozdíl cítit. WebGL udělal pro web hodně, ale WebGPU se zrodilo s modelem, který lépe vyhovuje současnosti.

37První věc, kterou je třeba napsat, však není shader. Je to střízlivá detekce funkcí:

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

57Tato funkce říká jednu důležitou věc: WebGPU není právo udělené na každém zařízení. Je to schopnost být ověřena. Některé prohlížeče to plně nepodporují, některé GPU mají omezení, některá podniková prostředí zakazují funkce, někteří uživatelé používají skromný hardware.

59## Vestavěná AI: když prohlížeč přinese model

61Chrome prosazuje vestavěná rozhraní API pro úkoly, jako jsou místní výzvy, sumarizace, psaní, přepisování, překlady, detekce jazyka a korektury. Myšlenka je velmi zajímavá: prohlížeč spravuje model, dostupnost a aktualizace; aplikace používá API blíže k platformě.

63Pokud to funguje dobře, hodně se to změní:

65- méně volání serveru pro jednoduché úkoly;

66- data, která mohou zůstat v zařízení;

67- nižší latence;

68- offline nebo semi-offline zážitky;

69- Přirozenější uživatelské rozhraní pro psaní a překlad.

71Ale mělo by to být považováno za progresivní vylepšení. Některá API jsou stabilní, jiná ve zkušební verzi nebo náhledu, jiná stále závisí na verzi, jazyku a zařízení.

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

92Konkrétní kód se změní, ale vzorec zůstává: zkontrolujete dostupnost, vysvětlíte všechna stahování, nabídnete záložní řešení a změříte kvalitu.

94## Záloha není smutný plán B

96Cloud backback není prohra. Je součástí produktu.

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

126Tato architektura umožňuje postupné zlepšování. Uživatelé s místní podporou získají lepší latenci a soukromí. Ti, kteří ji nemají, funkci stále používají. Můžete měřit procento místních požadavků, časy, chyby, paměť, vnímanou kvalitu a náklady.

127

128Bez metrik se AI na zařízení stává estetickou volbou. S metrikami se stává pákou produktu.

129

130## Na UX modelu záleží

131

132Pokud prohlížeč potřebuje stáhnout model, uživatel to vnímá. Neschovávejte to za nejasnou rotačku. Lepší, aby bylo jasno: "Připravujeme model tak, aby tuto funkci používal rychleji a dokonce i offline."

133

134Dobrá zkušenost:

135

136- ukazuje stav přípravy;

137- neblokuje celou stránku;

138- umožňuje pokračovat s cloudovou zálohou;

139- vyhnout se překvapením z baterie a paměti;

140- pamatovat si model, kdykoli je to možné;

141- vysvětlit přínos jednou konkrétní větou.

142

143Nejhorší je "chytrá" funkce, která se zdá být nefunkční, protože něco stahuje potichu.

144

145## Soukromí: lepší, ne automaticky zabezpečené

146

147Velkou výhodou může být zpracování dat na zařízení. Koncept e-mailu, interního dokumentu nebo osobní poznámky nemusí opustit váš prohlížeč, aby obdržel návrh.

148

149Místní však automaticky neznamená bezpečné. Je však třeba myslet na:

150

151- XSS;

152- náhodné protokoly;

153- data uložená v úložišti;

154- rychlé vložení z nedůvěryhodného obsahu;

155- povolení udělená modelu;

156- výstupy používané v automatických akcích.

157

158Pokud místní model dokáže přečíst webovou stránku a poté vyplnit formulář, může se s ní tato stránka pokusit manipulovat. Pokud může nástroj volat, je potřeba potvrzení. Pokud vytváří strukturovaný výstup, musí být ověřen. Skutečnost, že běží na zařízení, snižuje některá rizika ochrany soukromí, ale neeliminuje model zabezpečení.

159

160## Kde to začíná být opravdu zajímavé

161

162Text je jen začátek. WebGPU dělá webové zážitky důvěryhodnými, které se donedávna zdály jako nativní aplikace:

163

164- složité 3D editory;

165- Gaussovské splatting v prohlížeči;

166- video filtry v reálném čase;

167- Lehký CAD;

168- vědecké vizualizace;

169- kreativní nástroje s okamžitým náhledem;

170- inference vidění v blízkosti UI;

171- ambicióznějších prohlížečových her.

172

173Zde se začíná mísit frontend, grafika a strojové učení. Je to poněkud nepohodlná oblast, ale také úrodná: prohlížeč se vrací jako seriózní aplikační platforma, nejen místo, kam vkládáme formuláře a řídicí panely.

174

175## Kontrolní seznam před výrobou

176

177Před uvedením funkce na zařízení před uživatele bych zkontroloval:

178

1791. Zacilte na prohlížeče a zařízení.

1802. Cloud záložní nebo elegantní degradace.

1813. Čas stahování a mezipaměť modelu.

1824. Paměť a baterie na průměrném hardwaru.

1835. Kvalita ve srovnání s cloudovou verzí.

1846. Zásady ochrany osobních údajů a uživatelské zprávy.

1857. Testování s nepřátelskými vstupy.

1868. Samostatné metriky pro místní a cloudové běhové prostředí.

1879. Plánujte aktualizaci nebo deaktivaci šablony.

188

189Je to konkrétní seznam, protože problém je konkrétní. Pomalá, křehká nebo neprůhledná funkce umělé inteligence se nezlepší jen proto, že běží v prohlížeči.

190

191## Správný kompromis

192

193Nevěřím, že budoucnost je „všechno na zařízení“. A nemyslím si, že cloud zůstane jediným rozumným místem pro vyvozování. Nejpravděpodobnější budoucnost je kombinace: místní, když to zlepší latenci, soukromí nebo náklady; cloud, když je potřeba kvalita, aktualizovaná data a centralizované řízení.

194

195WebGPU, WebNN a vestavěná rozhraní AI API nedělají prohlížeč všemocným. Dělají ho dospělejším. A pro ty, kteří vytvářejí webové produkty, je to obrovská zpráva.

196

197## Užitečné zdroje

198

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

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

201- [Vestavěná AI – Chrome pro vývojáře](https://developer.chrome.com/docs/ai/built-in)

202- [Vestavěná rozhraní AI API – Chrome pro vývojáře](https://developer.chrome.com/docs/ai/built-in-apis)

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

204