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

spinny:~/writing $ vim 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~

NORMAL · webgpu-on-device-ai-browser.md [readonly]204 lines · :q to close

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

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

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

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

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~