WebGPU i sztuczna inteligencja na urządzeniu: przeglądarka staje się poważnym środowiskiem wykonawczym

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

1 
2Przez lata przeglądarka była ładną twarzą aplikacji, a chmura była miejscem, w którym działy się trudne rzeczy. Użytkownik pisze, klika, przesyła plik; frontend wysyła wszystko na serwer; serwer wywołuje model; odpowiedź wraca.
3 
4Ten schemat pozostaje bardzo przydatny, ale nie jest darmowy. Każde połączenie wiąże się z opóźnieniami, kosztami, zależnością od sieci i pytaniami dotyczącymi prywatności. Jeśli użytkownik pisze zdanie i chce sugestii, liczy się pół sekundy. Jeśli klasyfikujesz tysiące drobnych wkładów, grosze stają się prawdziwymi pieniędzmi. Jeśli tekst jest poufny, wysłanie go z urządzenia nie jest neutralnym wyborem.
5 
6Dlatego właśnie panuje moda na WebGPU i sztuczną inteligencję na urządzeniach. Nie dlatego, że jutro uruchomimy każdy model w przeglądarce. Ponieważ niektóre inteligentne funkcje mogą zbliżyć się do użytkownika.
7 
8## Nie wszystko musi stać się lokalne
9 
10Dziecinna wersja argumentu brzmi: „chmura kontra urządzenie”. Użyteczna wersja jest hybrydowa.
11 
12Niektóre zadania wyglądają świetnie na urządzeniu: krótkie podsumowania, wykrywanie języka, lekkie przepisywanie, proste klasyfikacje, filtry obrazu, małe modele wizyjne, kreatywne doświadczenia z natychmiastową informacją zwrotną.
13 
14Inne zadania pozostają lepsze w chmurze: złożone rozumowanie, modele graniczne, dane po stronie serwera, scentralizowany audyt, jednolita jakość, przepływ pracy, w którym trzeba dokładnie kontrolować każdy krok.
15 
16Zdrowa architektura decyduje w czasie wykonywania:
17 
18```mermaid
19flowchart TD
20    User[Użytkownik] --> Browser[Przeglądarki]
21    Browser --> Detect[Wykrywanie cech]
22    Detect -->|Obsługiwane| Local[Wnioskowanie lokalne]
23    Detect -->|Nieobsługiwane| Cloud[Powrót do chmury]
24    Local --> UX[Szybka reakcja]
25    Cloud --> UX
26    UX --> Metrics[Metryki i jakość]
27```
28 
29Przeglądarka nie musi wygrywać z chmurą. Musi chronić chmurę przed wykonywaniem pracy, która nie musi być w niej wykonywana.
30 
31## Dlaczego WebGPU ma znaczenie
32 
33WebGPU to nowoczesny interfejs API umożliwiający korzystanie z procesora graficznego z poziomu przeglądarki. Nie chodzi tylko o ładniejszą grafikę 3D. Jest to również ważne, ponieważ ujawnia prymitywy odpowiednie do obliczeń: równoległe obciążenia, shadery, potoki bliższe temu, co dobrze radzą sobie procesory graficzne.
34 
35W przypadku sztucznej inteligencji, wizualizacji naukowych, edytorów 3D, filtrów wideo i narzędzi kreatywnych ta różnica jest odczuwalna. WebGL zrobił wiele dla sieci, ale WebGPU narodziło się z modelem lepiej dostosowanym do współczesności.
36 
37Pierwszą rzeczą do napisania nie jest jednak shader. To trzeźwe wykrywanie funkcji:
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 
57Ta funkcja mówi jedną ważną rzecz: WebGPU nie jest prawem przyznawanym na każdym urządzeniu. To umiejętność, którą można zweryfikować. Niektóre przeglądarki nie obsługują tej funkcji w pełni, niektóre procesory graficzne mają ograniczenia, niektóre środowiska korporacyjne wyłączają funkcje, niektórzy użytkownicy korzystają ze skromnego sprzętu.
58 
59## Wbudowana sztuczna inteligencja: gdy przeglądarka wyświetla model
60 
61Chrome udostępnia wbudowane interfejsy API do zadań takich jak lokalne podpowiedzi, podsumowywanie, pisanie, przepisywanie, tłumaczenie, wykrywanie języka i korekta. Pomysł jest bardzo ciekawy: przeglądarka zarządza modelem, dostępnością i aktualizacjami; aplikacja korzysta z interfejsu API bliżej platformy.
62 
63Jeśli to działa dobrze, wiele się zmienia:
64 
65- mniej wywołań serwera dla prostych zadań;
66- dane, które mogą pozostać na urządzeniu;
67- mniejsze opóźnienie;
68- doświadczenia offline lub częściowo offline;
69- Bardziej naturalny UX do pisania i tłumaczenia.
70 
71Należy to jednak traktować jako postępujące doskonalenie. Niektóre interfejsy API są stabilne, inne są w wersji próbnej lub podglądowej, inne nadal zależą od wersji, języka i urządzenia.
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 
92Konkretny kod ulegnie zmianie, ale schemat pozostanie: sprawdzasz dostępność, wyjaśniasz wszelkie pobrania, oferujesz rozwiązania awaryjne i mierzysz jakość.
93 
94## Awaryjny powrót nie jest smutnym planem B
95 
96Powrót do chmury nie jest porażką. Jest częścią 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 
126Taka architektura pozwala na stopniowe doskonalenie. Osoby z lokalnym wsparciem uzyskują lepsze opóźnienia i prywatność. Ci, którzy jej nie mają, nadal korzystają z tej funkcji. Możesz zmierzyć procent lokalnych żądań, czasy, błędy, pamięć, postrzeganą jakość i koszt.
127 
128Bez wskaźników sztuczna inteligencja na urządzeniu staje się wyborem estetycznym. Dzięki metrykom staje się dźwignią produktu.
129 
130## UX modelu ma znaczenie
131 
132Jeśli przeglądarka musi pobrać model, użytkownik to widzi. Nie ukrywaj tego za niewyraźną przędzarką. Lepiej żeby było jasne: „Przygotowujemy model do szybszego korzystania z tej funkcji, nawet offline”.
133 
134Dobre doświadczenie:
135 
136- pokazuje stan przygotowania;
137- nie blokuje całej strony;
138- umożliwia kontynuację przywracania chmury;
139- unikaj niespodzianek związanych z baterią i pamięcią;
140- pamiętaj o modelu, jeśli to możliwe;
141- wyjaśnij korzyści w jednym konkretnym zdaniu.
142 
143Najgorszą rzeczą jest „inteligentna” funkcja, która wygląda na uszkodzoną, ponieważ pobiera coś po cichu.
144 
145## Prywatność: lepsza, nie bezpieczna automatycznie
146 
147Przetwarzanie danych na urządzeniu może być ogromną zaletą. Wersja robocza wiadomości e-mail, dokumentu wewnętrznego lub notatki osobistej nie musi opuszczać przeglądarki, aby otrzymać sugestię.
148 
149Jednak lokalnie nie oznacza automatycznie bezpiecznie. Musisz jednak pomyśleć o:
150 
151- XSS;
152- przypadkowe dzienniki;
153- dane zapisane w pamięci;
154- natychmiastowe wstrzyknięcie niezaufanej zawartości;
155- uprawnienia nadane modelowi;
156- wyjścia używane w akcjach automatycznych.
157 
158Jeśli lokalny model może przeczytać stronę internetową, a następnie wypełnić formularz, strona ta może próbować nią manipulować. Jeśli może wywołać narzędzie, potrzebne jest potwierdzenie. Jeśli generuje ustrukturyzowany wynik, należy go zweryfikować. Fakt, że działa na urządzeniu, zmniejsza pewne ryzyko prywatności, ale nie eliminuje modelu bezpieczeństwa.
159 
160## Gdzie robi się naprawdę ciekawie
161 
162Tekst to dopiero początek. WebGPU sprawia, że korzystanie z Internetu staje się wiarygodne, co do niedawna wydawało się aplikacją natywną:
163 
164- złożone edytory 3D;
165- rozpryski gaussowskie w przeglądarce;
166- filtry wideo w czasie rzeczywistym;
167- Lekki CAD;
168- wizualizacje naukowe;
169- narzędzia kreatywne z natychmiastowym podglądem;
170- wnioskowanie o wizji w pobliżu interfejsu użytkownika;
171- bardziej ambitne gry przeglądarkowe.
172 
173Tutaj frontend, grafika i uczenie maszynowe zaczynają się mieszać. To dość niezręczny obszar, ale i podatny na zmiany: przeglądarka wraca do roli poważnej platformy aplikacji, a nie tylko miejsca, w którym umieszczamy formularze i dashboardy.
174 
175## Lista kontrolna przed produkcją
176 
177Przed udostępnieniem użytkownikom funkcji na urządzeniu sprawdziłbym:
178 
1791. Kieruj na przeglądarki i urządzenia.
1802. Powrót do chmury lub elegancka degradacja.
1813. Pobierz pamięć podręczną czasu i modelu.
1824. Pamięć i bateria na przeciętnym sprzęcie.
1835. Jakość w porównaniu do wersji w chmurze.
1846. Polityka prywatności i komunikaty użytkowników.
1857. Testowanie z wrogimi danymi wejściowymi.
1868. Oddzielne metryki dla środowiska wykonawczego lokalnego i w chmurze.
1879. Zaplanuj aktualizację lub wyłączenie szablonu.
188 
189Jest to konkretna lista, ponieważ problem jest konkretny. Powolna, delikatna lub nieprzejrzysta funkcja AI nie staje się lepsza tylko dlatego, że działa w przeglądarce.
190 
191## Właściwy kompromis
192 
193Nie wierzę, że przyszłość to „wszystko w urządzeniu”. Nie sądzę też, że chmura pozostanie jedynym rozsądnym miejscem do wnioskowania. Najbardziej prawdopodobna przyszłość to mieszanka: lokalna, gdy poprawia opóźnienia, prywatność lub koszty; chmura, gdy potrzebna jest jakość, aktualne dane i scentralizowana kontrola.
194 
195WebGPU, WebNN i wbudowane API AI nie czynią przeglądarki wszechmocną. Czynią go bardziej dorosłym. Dla osób tworzących produkty internetowe jest to ogromna wiadomość.
196 
197## Przydatne źródła
198 
199- [API WebGPU - MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)
200- [Specyfikacja WebGPU - W3C](https://www.w3.org/TR/webgpu/)
201- [Wbudowana sztuczna inteligencja – Chrome dla programistów](https://developer.chrome.com/docs/ai/built-in)
202- [Wbudowane interfejsy API AI – Chrome dla programistów](https://developer.chrome.com/docs/ai/built-in-apis)
203- [API WebNN](https://webnn.io/)
204

:WebGPU i sztuczna inteligencja na urządzeniu: przeglądarka staje się poważnym środowiskiem wykonawczymlines 1-204 (END) — press q to close

2Przez lata przeglądarka była ładną twarzą aplikacji, a chmura była miejscem, w którym działy się trudne rzeczy. Użytkownik pisze, klika, przesyła plik; frontend wysyła wszystko na serwer; serwer wywołuje model; odpowiedź wraca.

4Ten schemat pozostaje bardzo przydatny, ale nie jest darmowy. Każde połączenie wiąże się z opóźnieniami, kosztami, zależnością od sieci i pytaniami dotyczącymi prywatności. Jeśli użytkownik pisze zdanie i chce sugestii, liczy się pół sekundy. Jeśli klasyfikujesz tysiące drobnych wkładów, grosze stają się prawdziwymi pieniędzmi. Jeśli tekst jest poufny, wysłanie go z urządzenia nie jest neutralnym wyborem.

6Dlatego właśnie panuje moda na WebGPU i sztuczną inteligencję na urządzeniach. Nie dlatego, że jutro uruchomimy każdy model w przeglądarce. Ponieważ niektóre inteligentne funkcje mogą zbliżyć się do użytkownika.

8## Nie wszystko musi stać się lokalne

10Dziecinna wersja argumentu brzmi: „chmura kontra urządzenie”. Użyteczna wersja jest hybrydowa.

12Niektóre zadania wyglądają świetnie na urządzeniu: krótkie podsumowania, wykrywanie języka, lekkie przepisywanie, proste klasyfikacje, filtry obrazu, małe modele wizyjne, kreatywne doświadczenia z natychmiastową informacją zwrotną.

14Inne zadania pozostają lepsze w chmurze: złożone rozumowanie, modele graniczne, dane po stronie serwera, scentralizowany audyt, jednolita jakość, przepływ pracy, w którym trzeba dokładnie kontrolować każdy krok.

16Zdrowa architektura decyduje w czasie wykonywania:

18```mermaid

19flowchart TD

20 User[Użytkownik] --> Browser[Przeglądarki]

21 Browser --> Detect[Wykrywanie cech]

22 Detect -->|Obsługiwane| Local[Wnioskowanie lokalne]

23 Detect -->|Nieobsługiwane| Cloud[Powrót do chmury]

24 Local --> UX[Szybka reakcja]

25 Cloud --> UX

26 UX --> Metrics[Metryki i jakość]

27```

29Przeglądarka nie musi wygrywać z chmurą. Musi chronić chmurę przed wykonywaniem pracy, która nie musi być w niej wykonywana.

31## Dlaczego WebGPU ma znaczenie

33WebGPU to nowoczesny interfejs API umożliwiający korzystanie z procesora graficznego z poziomu przeglądarki. Nie chodzi tylko o ładniejszą grafikę 3D. Jest to również ważne, ponieważ ujawnia prymitywy odpowiednie do obliczeń: równoległe obciążenia, shadery, potoki bliższe temu, co dobrze radzą sobie procesory graficzne.

35W przypadku sztucznej inteligencji, wizualizacji naukowych, edytorów 3D, filtrów wideo i narzędzi kreatywnych ta różnica jest odczuwalna. WebGL zrobił wiele dla sieci, ale WebGPU narodziło się z modelem lepiej dostosowanym do współczesności.

37Pierwszą rzeczą do napisania nie jest jednak shader. To trzeźwe wykrywanie funkcji:

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

57Ta funkcja mówi jedną ważną rzecz: WebGPU nie jest prawem przyznawanym na każdym urządzeniu. To umiejętność, którą można zweryfikować. Niektóre przeglądarki nie obsługują tej funkcji w pełni, niektóre procesory graficzne mają ograniczenia, niektóre środowiska korporacyjne wyłączają funkcje, niektórzy użytkownicy korzystają ze skromnego sprzętu.

59## Wbudowana sztuczna inteligencja: gdy przeglądarka wyświetla model

61Chrome udostępnia wbudowane interfejsy API do zadań takich jak lokalne podpowiedzi, podsumowywanie, pisanie, przepisywanie, tłumaczenie, wykrywanie języka i korekta. Pomysł jest bardzo ciekawy: przeglądarka zarządza modelem, dostępnością i aktualizacjami; aplikacja korzysta z interfejsu API bliżej platformy.

63Jeśli to działa dobrze, wiele się zmienia:

65- mniej wywołań serwera dla prostych zadań;

66- dane, które mogą pozostać na urządzeniu;

67- mniejsze opóźnienie;

68- doświadczenia offline lub częściowo offline;

69- Bardziej naturalny UX do pisania i tłumaczenia.

71Należy to jednak traktować jako postępujące doskonalenie. Niektóre interfejsy API są stabilne, inne są w wersji próbnej lub podglądowej, inne nadal zależą od wersji, języka i urządzenia.

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

92Konkretny kod ulegnie zmianie, ale schemat pozostanie: sprawdzasz dostępność, wyjaśniasz wszelkie pobrania, oferujesz rozwiązania awaryjne i mierzysz jakość.

94## Awaryjny powrót nie jest smutnym planem B

96Powrót do chmury nie jest porażką. Jest częścią 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

126Taka architektura pozwala na stopniowe doskonalenie. Osoby z lokalnym wsparciem uzyskują lepsze opóźnienia i prywatność. Ci, którzy jej nie mają, nadal korzystają z tej funkcji. Możesz zmierzyć procent lokalnych żądań, czasy, błędy, pamięć, postrzeganą jakość i koszt.

127

128Bez wskaźników sztuczna inteligencja na urządzeniu staje się wyborem estetycznym. Dzięki metrykom staje się dźwignią produktu.

129

130## UX modelu ma znaczenie

131

132Jeśli przeglądarka musi pobrać model, użytkownik to widzi. Nie ukrywaj tego za niewyraźną przędzarką. Lepiej żeby było jasne: „Przygotowujemy model do szybszego korzystania z tej funkcji, nawet offline”.

133

134Dobre doświadczenie:

135

136- pokazuje stan przygotowania;

137- nie blokuje całej strony;

138- umożliwia kontynuację przywracania chmury;

139- unikaj niespodzianek związanych z baterią i pamięcią;

140- pamiętaj o modelu, jeśli to możliwe;

141- wyjaśnij korzyści w jednym konkretnym zdaniu.

142

143Najgorszą rzeczą jest „inteligentna” funkcja, która wygląda na uszkodzoną, ponieważ pobiera coś po cichu.

144

145## Prywatność: lepsza, nie bezpieczna automatycznie

146

147Przetwarzanie danych na urządzeniu może być ogromną zaletą. Wersja robocza wiadomości e-mail, dokumentu wewnętrznego lub notatki osobistej nie musi opuszczać przeglądarki, aby otrzymać sugestię.

148

149Jednak lokalnie nie oznacza automatycznie bezpiecznie. Musisz jednak pomyśleć o:

150

151- XSS;

152- przypadkowe dzienniki;

153- dane zapisane w pamięci;

154- natychmiastowe wstrzyknięcie niezaufanej zawartości;

155- uprawnienia nadane modelowi;

156- wyjścia używane w akcjach automatycznych.

157

158Jeśli lokalny model może przeczytać stronę internetową, a następnie wypełnić formularz, strona ta może próbować nią manipulować. Jeśli może wywołać narzędzie, potrzebne jest potwierdzenie. Jeśli generuje ustrukturyzowany wynik, należy go zweryfikować. Fakt, że działa na urządzeniu, zmniejsza pewne ryzyko prywatności, ale nie eliminuje modelu bezpieczeństwa.

159

160## Gdzie robi się naprawdę ciekawie

161

162Tekst to dopiero początek. WebGPU sprawia, że korzystanie z Internetu staje się wiarygodne, co do niedawna wydawało się aplikacją natywną:

163

164- złożone edytory 3D;

165- rozpryski gaussowskie w przeglądarce;

166- filtry wideo w czasie rzeczywistym;

167- Lekki CAD;

168- wizualizacje naukowe;

169- narzędzia kreatywne z natychmiastowym podglądem;

170- wnioskowanie o wizji w pobliżu interfejsu użytkownika;

171- bardziej ambitne gry przeglądarkowe.

172

173Tutaj frontend, grafika i uczenie maszynowe zaczynają się mieszać. To dość niezręczny obszar, ale i podatny na zmiany: przeglądarka wraca do roli poważnej platformy aplikacji, a nie tylko miejsca, w którym umieszczamy formularze i dashboardy.

174

175## Lista kontrolna przed produkcją

176

177Przed udostępnieniem użytkownikom funkcji na urządzeniu sprawdziłbym:

178

1791. Kieruj na przeglądarki i urządzenia.

1802. Powrót do chmury lub elegancka degradacja.

1813. Pobierz pamięć podręczną czasu i modelu.

1824. Pamięć i bateria na przeciętnym sprzęcie.

1835. Jakość w porównaniu do wersji w chmurze.

1846. Polityka prywatności i komunikaty użytkowników.

1857. Testowanie z wrogimi danymi wejściowymi.

1868. Oddzielne metryki dla środowiska wykonawczego lokalnego i w chmurze.

1879. Zaplanuj aktualizację lub wyłączenie szablonu.

188

189Jest to konkretna lista, ponieważ problem jest konkretny. Powolna, delikatna lub nieprzejrzysta funkcja AI nie staje się lepsza tylko dlatego, że działa w przeglądarce.

190

191## Właściwy kompromis

192

193Nie wierzę, że przyszłość to „wszystko w urządzeniu”. Nie sądzę też, że chmura pozostanie jedynym rozsądnym miejscem do wnioskowania. Najbardziej prawdopodobna przyszłość to mieszanka: lokalna, gdy poprawia opóźnienia, prywatność lub koszty; chmura, gdy potrzebna jest jakość, aktualne dane i scentralizowana kontrola.

194

195WebGPU, WebNN i wbudowane API AI nie czynią przeglądarki wszechmocną. Czynią go bardziej dorosłym. Dla osób tworzących produkty internetowe jest to ogromna wiadomość.

196

197## Przydatne źródła

198

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

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

201- [Wbudowana sztuczna inteligencja – Chrome dla programistów](https://developer.chrome.com/docs/ai/built-in)

202- [Wbudowane interfejsy API AI – Chrome dla programistów](https://developer.chrome.com/docs/ai/built-in-apis)

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

204