WebGPU и искусственный интеллект на устройстве: браузер становится серьезной средой выполнения

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 для использования графического процессора из браузера. Это не только для более красивой 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## Встроенный ИИ: когда браузер выводит модель
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- Легкий САПР;
168- научные визуализации;
169- творческие инструменты с мгновенным предварительным просмотром;
170- вывод изображения рядом с пользовательским интерфейсом;
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 и встроенные AI API не делают браузер всемогущим. Они делают его взрослее. И для тех, кто создает веб-продукты, это огромная новость.
196 
197## Полезные источники
198 
199- [API веб-графического процессора — MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)
200- [Спецификация WebGPU — W3C](https://www.w3.org/TR/webgpu/)
201- [Встроенный искусственный интеллект — Chrome для разработчиков](https://developer.chrome.com/docs/ai/built-in)
202- [Встроенные API-интерфейсы искусственного интеллекта – Chrome для разработчиков](https://developer.chrome.com/docs/ai/built-in-apis)
203- [ВебНН API](https://webnn.io/)
204

:WebGPU и искусственный интеллект на устройстве: браузер становится серьезной средой выполнения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 для использования графического процессора из браузера. Это не только для более красивой 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## Встроенный ИИ: когда браузер выводит модель

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- Легкий САПР;

168- научные визуализации;

169- творческие инструменты с мгновенным предварительным просмотром;

170- вывод изображения рядом с пользовательским интерфейсом;

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 и встроенные AI API не делают браузер всемогущим. Они делают его взрослее. И для тех, кто создает веб-продукты, это огромная новость.

196

197## Полезные источники

198

199- [API веб-графического процессора — MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)

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

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

202- [Встроенные API-интерфейсы искусственного интеллекта – Chrome для разработчиков](https://developer.chrome.com/docs/ai/built-in-apis)

203- [ВебНН API](https://webnn.io/)

204