WebGPU та AI на пристрої: браузер стає серйозним середовищем виконання

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

1 
2Протягом багатьох років веб-переглядач був гарним обличчям програми, а хмара була місцем, де відбувалися важкі речі. Користувач пише, клацає, завантажує файл; інтерфейс надсилає все на сервер; сервер викликає модель; відповідь повертається.
3 
4Ця схема залишається дуже корисною, але не безкоштовною. Кожен дзвінок викликає запитання щодо затримки, вартості, залежності від мережі та конфіденційності. Якщо користувач пише речення і хоче отримати пропозицію, важить півсекунди. Якщо ви класифікуєте тисячі дрібних вкладень, пенні стають справжніми грошима. Якщо текст конфіденційний, надсилання його з пристрою не є нейтральним вибором.
5 
6Ось чому WebGPU та штучний інтелект на пристрої в ажіотажі. Не тому, що завтра ми запускатимемо кожну модель у браузері. Оскільки деякі інтелектуальні функції можуть стати ближчими до користувача.
7 
8## Не все має стати локальним
9 
10Дитяча версія аргументу: «хмара проти пристрою». Корисна версія – гібридна.
11 
12Деякі завдання чудово виглядають на пристрої: короткі підсумки, визначення мови, легкі переписування, прості класифікації, фільтри зображень, невеликі моделі зору, творчий досвід із миттєвим відгуком.
13 
14Інші завдання залишаються кращими в хмарі: складні міркування, граничні моделі, дані на сервері, централізований аудит, однакова якість, робочий процес, де потрібно ретельно контролювати кожен крок.
15 
16Здорова архітектура вирішує під час виконання:
17 
18```mermaid
19flowchart TD
20    User[Користувач] --> Browser[Браузери]
21    Browser --> Detect[Виявлення ознак]
22    Detect -->|Підтримується| Local[Локальний висновок]
23    Detect -->|Не підтримується| Cloud[Резервна хмара]
24    Local --> UX[Швидка відповідь]
25    Cloud --> UX
26    UX --> Metrics[Показники та якість]
27```
28 
29Браузер не повинен перемагати хмару. Він повинен позбавити хмару виконання роботи, яку там не потрібно виконувати.
30 
31## Чому WebGPU важливий
32 
33WebGPU — це сучасний API для використання GPU з браузера. Це не лише для кращої 3D-графіки. Це також важливо, тому що воно розкриває примітиви, придатні для обчислень: паралельні робочі навантаження, шейдери, конвеєри, ближчі до того, що добре роблять графічні процесори.
34 
35Для ШІ, наукової візуалізації, 3D-редакторів, відеофільтрів і творчих інструментів ця різниця відчувається. WebGL зробив багато для Інтернету, але WebGPU народилася з моделлю, яка краще підходить до сучасності.
36 
37Однак перше, що потрібно написати, це не шейдер. Це тверезе виявлення функції:
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 
57Ця функція говорить про одну важливу річ: WebGPU не надається на кожному пристрої. Це здатність бути перевіреною. Деякі браузери не підтримують його повністю, деякі графічні процесори мають обмеження, деякі корпоративні середовища відключають функції, деякі користувачі використовують скромне обладнання.
58 
59## Вбудований AI: коли браузер виводить модель
60 
61Chrome пропонує вбудовані API для таких завдань, як локальні підказки, узагальнення, написання, переписування, переклад, визначення мови та вичитка. Ідея дуже цікава: браузер керує моделлю, доступністю та оновленнями; додаток використовує API, ближчий до платформи.
62 
63Якщо він працює добре, це багато чого змінює:
64 
65- менше викликів сервера для простих завдань;
66- дані, які можуть залишитися на пристрої;
67- менша затримка;
68- офлайн або напівофлайн;
69- Більш природний UX для написання та перекладу.
70 
71Але це слід розглядати як прогресивне вдосконалення. Деякі API стабільні, інші знаходяться в початковій пробній версії або попередньому перегляді, інші все ще залежать від версії, мови та пристрою.
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 
92Конкретний код зміниться, але шаблон залишиться: ви перевіряєте доступність, пояснюєте будь-які завантаження, пропонуєте запасні варіанти та вимірюваєте якість.
93 
94## Запасний варіант – це не сумний план Б
95 
96Хмарне повернення – це не поразка. Це частина продукту.
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 
126Ця архітектура дозволяє вам поступово вдосконалюватися. Ті, хто має локальну підтримку, отримують кращу затримку та конфіденційність. Ті, у кого її немає, все одно користуються цією функцією. Ви можете виміряти відсоток локальних запитів, час, помилки, пам’ять, передбачувану якість і вартість.
127 
128Без метрик штучний інтелект на пристрої стає естетичним вибором. З показниками це стає важелем продукту.
129 
130## UX моделі має значення
131 
132Якщо браузеру потрібно завантажити модель, користувач це сприймає. Не ховайте це за розпливчастою прядкою. Краще бути чітким: «Ми готуємо модель для використання цієї функції швидше та навіть у режимі офлайн».
133 
134Хороший досвід:
135 
136- показує стан підготовки;
137- не блокує всю сторінку;
138- дозволяє продовжити роботу з резервною хмарою;
139- уникайте сюрпризів акумулятора та пам'яті;
140- по можливості запам'ятати модель;
141- поясніть користь одним конкретним реченням.
142 
143Найгірше — це «розумна» функція, яка виглядає несправною, оскільки завантажує щось безшумно.
144 
145## Конфіденційність: краще, не захищено автоматично
146 
147Обробка даних на пристрої може бути великою перевагою. Чернетка електронної пошти, внутрішній документ або особиста нотатка не повинні залишати ваш браузер, щоб отримати пропозицію.
148 
149Однак локальне не означає автоматично безпечне. Однак потрібно подумати про:
150 
151- XSS;
152- випадкові журнали;
153- дані, збережені в сховищі;
154- оперативне введення з ненадійного вмісту;
155- дозволи, надані моделі;
156- виходи, що використовуються в автоматичних діях.
157 
158Якщо локальна модель може прочитати веб-сторінку, а потім заповнити форму, ця сторінка може спробувати маніпулювати нею. Якщо він може викликати інструмент, потрібне підтвердження. Якщо він дає структурований вихід, його потрібно перевірити. Той факт, що він працює на пристрої, зменшує деякі ризики конфіденційності, але не скасовує модель безпеки.
159 
160## Де стає справді цікаво
161 
162Текст це лише початок. WebGPU робить веб-досвід достовірним, що донедавна здавалося рідною програмою:
163 
164- складні 3D редактори;
165- Гауссовий сплетінг у браузері;
166- відеофільтри в реальному часі;
167- Легка CAD;
168- наукові візуалізації;
169- творчі інструменти з миттєвим попереднім переглядом;
170- візуальний висновок поблизу UI;
171- більш амбітні браузерні ігри.
172 
173Тут інтерфейс, графіка та машинне навчання починають змішуватися. Це дещо незручна область, але водночас і плідна: браузер повертається до ролі серйозної платформи додатків, а не просто місця, де ми розміщуємо форми та інформаційні панелі.
174 
175## Контрольний список перед виробництвом
176 
177Перш ніж розмістити функцію на пристрої перед користувачами, я б перевірив:
178 
1791. Цільові браузери та пристрої.
1802. Резервна хмара або елегантна деградація.
1813. Час завантаження та кеш моделі.
1824. Пам'ять і батарея на середньому апаратному рівні.
1835. Якість порівняно з хмарною версією.
1846. Політика конфіденційності та повідомлення користувачів.
1857. Тестування з ворожими введеннями.
1868. Окремі показники для локального та хмарного середовища виконання.
1879. Плануйте оновити або вимкнути шаблон.
188 
189Це конкретний список, тому що проблема конкретна. Повільна, крихка або непрозора функція ШІ не стає кращою лише тому, що вона працює у браузері.
190 
191## Правильний компроміс
192 
193Я не вірю, що майбутнє – це «все на пристрої». І я також не думаю, що хмара залишиться єдиним розумним місцем для висновків. Найвірогідніше майбутнє – це суміш: локальна, коли це покращує затримку, конфіденційність або вартість; хмара, коли потрібна якість, оновлені дані та централізований контроль.
194 
195WebGPU, WebNN і вбудовані API AI не роблять браузер всемогутнім. Вони роблять його більш дорослим. А для тих, хто створює веб-продукти, це чудова новина.
196 
197## Корисні джерела
198 
199- [WebGPU API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)
200- [Специфікація WebGPU - W3C](https://www.w3.org/TR/webgpu/)
201- [Вбудований AI - Chrome для розробників](https://developer.chrome.com/docs/ai/built-in)
202- [Вбудовані API AI - Chrome для розробників](https://developer.chrome.com/docs/ai/built-in-apis)
203- [API WebNN](https://webnn.io/)
204

:WebGPU та AI на пристрої: браузер стає серйозним середовищем виконанняlines 1-204 (END) — press q to close

2Протягом багатьох років веб-переглядач був гарним обличчям програми, а хмара була місцем, де відбувалися важкі речі. Користувач пише, клацає, завантажує файл; інтерфейс надсилає все на сервер; сервер викликає модель; відповідь повертається.

4Ця схема залишається дуже корисною, але не безкоштовною. Кожен дзвінок викликає запитання щодо затримки, вартості, залежності від мережі та конфіденційності. Якщо користувач пише речення і хоче отримати пропозицію, важить півсекунди. Якщо ви класифікуєте тисячі дрібних вкладень, пенні стають справжніми грошима. Якщо текст конфіденційний, надсилання його з пристрою не є нейтральним вибором.

6Ось чому WebGPU та штучний інтелект на пристрої в ажіотажі. Не тому, що завтра ми запускатимемо кожну модель у браузері. Оскільки деякі інтелектуальні функції можуть стати ближчими до користувача.

8## Не все має стати локальним

10Дитяча версія аргументу: «хмара проти пристрою». Корисна версія – гібридна.

12Деякі завдання чудово виглядають на пристрої: короткі підсумки, визначення мови, легкі переписування, прості класифікації, фільтри зображень, невеликі моделі зору, творчий досвід із миттєвим відгуком.

14Інші завдання залишаються кращими в хмарі: складні міркування, граничні моделі, дані на сервері, централізований аудит, однакова якість, робочий процес, де потрібно ретельно контролювати кожен крок.

16Здорова архітектура вирішує під час виконання:

18```mermaid

19flowchart TD

20 User[Користувач] --> Browser[Браузери]

21 Browser --> Detect[Виявлення ознак]

22 Detect -->|Підтримується| Local[Локальний висновок]

23 Detect -->|Не підтримується| Cloud[Резервна хмара]

24 Local --> UX[Швидка відповідь]

25 Cloud --> UX

26 UX --> Metrics[Показники та якість]

27```

29Браузер не повинен перемагати хмару. Він повинен позбавити хмару виконання роботи, яку там не потрібно виконувати.

31## Чому WebGPU важливий

33WebGPU — це сучасний API для використання GPU з браузера. Це не лише для кращої 3D-графіки. Це також важливо, тому що воно розкриває примітиви, придатні для обчислень: паралельні робочі навантаження, шейдери, конвеєри, ближчі до того, що добре роблять графічні процесори.

35Для ШІ, наукової візуалізації, 3D-редакторів, відеофільтрів і творчих інструментів ця різниця відчувається. WebGL зробив багато для Інтернету, але WebGPU народилася з моделлю, яка краще підходить до сучасності.

37Однак перше, що потрібно написати, це не шейдер. Це тверезе виявлення функції:

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

57Ця функція говорить про одну важливу річ: WebGPU не надається на кожному пристрої. Це здатність бути перевіреною. Деякі браузери не підтримують його повністю, деякі графічні процесори мають обмеження, деякі корпоративні середовища відключають функції, деякі користувачі використовують скромне обладнання.

59## Вбудований AI: коли браузер виводить модель

61Chrome пропонує вбудовані API для таких завдань, як локальні підказки, узагальнення, написання, переписування, переклад, визначення мови та вичитка. Ідея дуже цікава: браузер керує моделлю, доступністю та оновленнями; додаток використовує API, ближчий до платформи.

63Якщо він працює добре, це багато чого змінює:

65- менше викликів сервера для простих завдань;

66- дані, які можуть залишитися на пристрої;

67- менша затримка;

68- офлайн або напівофлайн;

69- Більш природний UX для написання та перекладу.

71Але це слід розглядати як прогресивне вдосконалення. Деякі API стабільні, інші знаходяться в початковій пробній версії або попередньому перегляді, інші все ще залежать від версії, мови та пристрою.

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

92Конкретний код зміниться, але шаблон залишиться: ви перевіряєте доступність, пояснюєте будь-які завантаження, пропонуєте запасні варіанти та вимірюваєте якість.

94## Запасний варіант – це не сумний план Б

96Хмарне повернення – це не поразка. Це частина продукту.

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

126Ця архітектура дозволяє вам поступово вдосконалюватися. Ті, хто має локальну підтримку, отримують кращу затримку та конфіденційність. Ті, у кого її немає, все одно користуються цією функцією. Ви можете виміряти відсоток локальних запитів, час, помилки, пам’ять, передбачувану якість і вартість.

127

128Без метрик штучний інтелект на пристрої стає естетичним вибором. З показниками це стає важелем продукту.

129

130## UX моделі має значення

131

132Якщо браузеру потрібно завантажити модель, користувач це сприймає. Не ховайте це за розпливчастою прядкою. Краще бути чітким: «Ми готуємо модель для використання цієї функції швидше та навіть у режимі офлайн».

133

134Хороший досвід:

135

136- показує стан підготовки;

137- не блокує всю сторінку;

138- дозволяє продовжити роботу з резервною хмарою;

139- уникайте сюрпризів акумулятора та пам'яті;

140- по можливості запам'ятати модель;

141- поясніть користь одним конкретним реченням.

142

143Найгірше — це «розумна» функція, яка виглядає несправною, оскільки завантажує щось безшумно.

144

145## Конфіденційність: краще, не захищено автоматично

146

147Обробка даних на пристрої може бути великою перевагою. Чернетка електронної пошти, внутрішній документ або особиста нотатка не повинні залишати ваш браузер, щоб отримати пропозицію.

148

149Однак локальне не означає автоматично безпечне. Однак потрібно подумати про:

150

151- XSS;

152- випадкові журнали;

153- дані, збережені в сховищі;

154- оперативне введення з ненадійного вмісту;

155- дозволи, надані моделі;

156- виходи, що використовуються в автоматичних діях.

157

158Якщо локальна модель може прочитати веб-сторінку, а потім заповнити форму, ця сторінка може спробувати маніпулювати нею. Якщо він може викликати інструмент, потрібне підтвердження. Якщо він дає структурований вихід, його потрібно перевірити. Той факт, що він працює на пристрої, зменшує деякі ризики конфіденційності, але не скасовує модель безпеки.

159

160## Де стає справді цікаво

161

162Текст це лише початок. WebGPU робить веб-досвід достовірним, що донедавна здавалося рідною програмою:

163

164- складні 3D редактори;

165- Гауссовий сплетінг у браузері;

166- відеофільтри в реальному часі;

167- Легка CAD;

168- наукові візуалізації;

169- творчі інструменти з миттєвим попереднім переглядом;

170- візуальний висновок поблизу UI;

171- більш амбітні браузерні ігри.

172

173Тут інтерфейс, графіка та машинне навчання починають змішуватися. Це дещо незручна область, але водночас і плідна: браузер повертається до ролі серйозної платформи додатків, а не просто місця, де ми розміщуємо форми та інформаційні панелі.

174

175## Контрольний список перед виробництвом

176

177Перш ніж розмістити функцію на пристрої перед користувачами, я б перевірив:

178

1791. Цільові браузери та пристрої.

1802. Резервна хмара або елегантна деградація.

1813. Час завантаження та кеш моделі.

1824. Пам'ять і батарея на середньому апаратному рівні.

1835. Якість порівняно з хмарною версією.

1846. Політика конфіденційності та повідомлення користувачів.

1857. Тестування з ворожими введеннями.

1868. Окремі показники для локального та хмарного середовища виконання.

1879. Плануйте оновити або вимкнути шаблон.

188

189Це конкретний список, тому що проблема конкретна. Повільна, крихка або непрозора функція ШІ не стає кращою лише тому, що вона працює у браузері.

190

191## Правильний компроміс

192

193Я не вірю, що майбутнє – це «все на пристрої». І я також не думаю, що хмара залишиться єдиним розумним місцем для висновків. Найвірогідніше майбутнє – це суміш: локальна, коли це покращує затримку, конфіденційність або вартість; хмара, коли потрібна якість, оновлені дані та централізований контроль.

194

195WebGPU, WebNN і вбудовані API AI не роблять браузер всемогутнім. Вони роблять його більш дорослим. А для тих, хто створює веб-продукти, це чудова новина.

196

197## Корисні джерела

198

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

200- [Специфікація WebGPU - W3C](https://www.w3.org/TR/webgpu/)

201- [Вбудований AI - Chrome для розробників](https://developer.chrome.com/docs/ai/built-in)

202- [Вбудовані API AI - Chrome для розробників](https://developer.chrome.com/docs/ai/built-in-apis)

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

204