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

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

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

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

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

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

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

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

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

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

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

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

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

export async function requestWebGpuDevice() {
  if (!('gpu' in navigator)) {
    return null;
  }

  const adapter = await navigator.gpu.requestAdapter({
    powerPreference: 'high-performance',
  });

  if (!adapter) {
    return null;
  }

  return adapter.requestDevice();
}

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

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

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

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

• менше викликів сервера для простих завдань;
• дані, які можуть залишитися на пристрої;
• менша затримка;
• офлайн або напівофлайн;
• Більш природний UX для написання та перекладу.

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

type LocalCapability = 'available' | 'downloadable' | 'unsupported';

export async function getLocalSummarizerCapability(): Promise<LocalCapability> {
  const SummarizerApi = (globalThis as any).Summarizer;

  if (!SummarizerApi?.availability) {
    return 'unsupported';
  }

  const availability = await SummarizerApi.availability();

  if (availability === 'available') return 'available';
  if (availability === 'downloadable') return 'downloadable';

  return 'unsupported';
}

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

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

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

interface AiRequest {
  task: 'summarize' | 'rewrite' | 'classify';
  input: string;
}

interface AiResult {
  output: string;
  runtime: 'local' | 'cloud';
}

export async function runAiTask(request: AiRequest): Promise<AiResult> {
  const local = await tryLocalAi(request);

  if (local) {
    return { output: local, runtime: 'local' };
  }

  const cloud = await fetch('/api/ai', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(request),
  }).then((res) => res.json());

  return { output: cloud.output, runtime: 'cloud' };
}

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

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

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

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

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

• показує стан підготовки;
• не блокує всю сторінку;
• дозволяє продовжити роботу з резервною хмарою;
• уникайте сюрпризів акумулятора та пам'яті;
• по можливості запам'ятати модель;
• поясніть користь одним конкретним реченням.

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

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

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

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

• XSS;
• випадкові журнали;
• дані, збережені в сховищі;
• оперативне введення з ненадійного вмісту;
• дозволи, надані моделі;
• виходи, що використовуються в автоматичних діях.

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

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

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

• складні 3D редактори;
• Гауссовий сплетінг у браузері;
• відеофільтри в реальному часі;
• Легка CAD;
• наукові візуалізації;
• творчі інструменти з миттєвим попереднім переглядом;
• візуальний висновок поблизу UI;
• більш амбітні браузерні ігри.

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

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

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

1. Цільові браузери та пристрої.
2. Резервна хмара або елегантна деградація.
3. Час завантаження та кеш моделі.
4. Пам'ять і батарея на середньому апаратному рівні.
5. Якість порівняно з хмарною версією.
6. Політика конфіденційності та повідомлення користувачів.
7. Тестування з ворожими введеннями.
8. Окремі показники для локального та хмарного середовища виконання.
9. Плануйте оновити або вимкнути шаблон.

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

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

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

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

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

• WebGPU API - MDN
• Специфікація WebGPU - W3C
• Вбудований AI - Chrome для розробників
• Вбудовані API AI - Chrome для розробників
• API WebNN