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

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

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