WebGPU a umělá inteligence na zařízení: Z prohlížeče se stává seriózní běhové prostředí

Prohlížeč byl po léta hezkou tváří aplikace a cloud byl místem, kde se děly těžké věci. Uživatel zapíše, klikne, nahraje soubor; frontend posílá vše na server; server volá model; odpověď se vrací.

Toto schéma zůstává velmi užitečné, ale není zdarma. Každý hovor přináší latenci, náklady, závislost na síti a soukromí. Pokud uživatel píše větu a chce návrh, půl sekundy váží. Pokud klasifikujete tisíce malých vstupů, haléře se stanou skutečnými penězi. Pokud je text citlivý, odeslání ze zařízení není neutrální volbou.

To je důvod, proč jsou WebGPU a AI na zařízení v humbuku. Ne proto, že zítra spustíme každý model v prohlížeči. Protože některé z inteligentních funkcí se mohou dostat blíže k uživateli.

Ne všechno se musí stát lokální

Dětinská verze argumentu zní: „cloud versus zařízení“. Užitečná verze je hybridní.

Některé úkoly vypadají na zařízení skvěle: krátká shrnutí, detekce jazyka, lehké přepisy, jednoduchá klasifikace, obrazové filtry, malé modely vidění, kreativní zážitky s okamžitou zpětnou vazbou.

Další úkoly zůstávají lepší v cloudu: komplexní uvažování, hraniční modely, data na straně serveru, centralizovaný audit, jednotná kvalita, pracovní postup, kde musíte pečlivě kontrolovat každý krok.

Zdravá architektura rozhoduje za běhu:

Prohlížeč nemusí vyhrát nad cloudem. Musí cloud zachránit před prováděním práce, která se tam dělat nemusí.

Proč na WebGPU záleží

WebGPU je moderní API pro použití GPU z prohlížeče. Není to jen pro hezčí 3D grafiku. Je také důležité, protože odhaluje primitiva vhodná pro výpočty: paralelní pracovní zátěže, shadery, potrubí blíže tomu, co GPU umí dobře.

U AI, vědecké vizualizace, 3D editorů, video filtrů a kreativních nástrojů je tento rozdíl cítit. WebGL udělal pro web hodně, ale WebGPU se zrodilo s modelem, který lépe vyhovuje současnosti.

První věc, kterou je třeba napsat, však není shader. Je to střízlivá detekce funkcí:

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();
}

Tato funkce říká jednu důležitou věc: WebGPU není právo udělené na každém zařízení. Je to schopnost být ověřena. Některé prohlížeče to plně nepodporují, některé GPU mají omezení, některá podniková prostředí zakazují funkce, někteří uživatelé používají skromný hardware.

Vestavěná AI: když prohlížeč přinese model

Chrome prosazuje vestavěná rozhraní API pro úkoly, jako jsou místní výzvy, sumarizace, psaní, přepisování, překlady, detekce jazyka a korektury. Myšlenka je velmi zajímavá: prohlížeč spravuje model, dostupnost a aktualizace; aplikace používá API blíže k platformě.

Pokud to funguje dobře, hodně se to změní:

• méně volání serveru pro jednoduché úkoly;
• data, která mohou zůstat v zařízení;
• nižší latence;
• offline nebo semi-offline zážitky;
• Přirozenější uživatelské rozhraní pro psaní a překlad.

Ale mělo by to být považováno za progresivní vylepšení. Některá API jsou stabilní, jiná ve zkušební verzi nebo náhledu, jiná stále závisí na verzi, jazyku a zařízení.

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';
}

Konkrétní kód se změní, ale vzorec zůstává: zkontrolujete dostupnost, vysvětlíte všechna stahování, nabídnete záložní řešení a změříte kvalitu.

Záloha není smutný plán B

Cloud backback není prohra. Je součástí produktu.

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' };
}

Tato architektura umožňuje postupné zlepšování. Uživatelé s místní podporou získají lepší latenci a soukromí. Ti, kteří ji nemají, funkci stále používají. Můžete měřit procento místních požadavků, časy, chyby, paměť, vnímanou kvalitu a náklady.

Bez metrik se AI na zařízení stává estetickou volbou. S metrikami se stává pákou produktu.

Na UX modelu záleží

Pokud prohlížeč potřebuje stáhnout model, uživatel to vnímá. Neschovávejte to za nejasnou rotačku. Lepší, aby bylo jasno: "Připravujeme model tak, aby tuto funkci používal rychleji a dokonce i offline."

Dobrá zkušenost:

• ukazuje stav přípravy;
• neblokuje celou stránku;
• umožňuje pokračovat s cloudovou zálohou;
• vyhnout se překvapením z baterie a paměti;
• pamatovat si model, kdykoli je to možné;
• vysvětlit přínos jednou konkrétní větou.

Nejhorší je "chytrá" funkce, která se zdá být nefunkční, protože něco stahuje potichu.

Soukromí: lepší, ne automaticky zabezpečené

Velkou výhodou může být zpracování dat na zařízení. Koncept e-mailu, interního dokumentu nebo osobní poznámky nemusí opustit váš prohlížeč, aby obdržel návrh.

Místní však automaticky neznamená bezpečné. Je však třeba myslet na:

• XSS;
• náhodné protokoly;
• data uložená v úložišti;
• rychlé vložení z nedůvěryhodného obsahu;
• povolení udělená modelu;
• výstupy používané v automatických akcích.

Pokud místní model dokáže přečíst webovou stránku a poté vyplnit formulář, může se s ní tato stránka pokusit manipulovat. Pokud může nástroj volat, je potřeba potvrzení. Pokud vytváří strukturovaný výstup, musí být ověřen. Skutečnost, že běží na zařízení, snižuje některá rizika ochrany soukromí, ale neeliminuje model zabezpečení.

Kde to začíná být opravdu zajímavé

Text je jen začátek. WebGPU dělá webové zážitky důvěryhodnými, které se donedávna zdály jako nativní aplikace:

• složité 3D editory;
• Gaussovské splatting v prohlížeči;
• video filtry v reálném čase;
• Lehký CAD;
• vědecké vizualizace;
• kreativní nástroje s okamžitým náhledem;
• inference vidění v blízkosti UI;
• ambicióznějších prohlížečových her.

Zde se začíná mísit frontend, grafika a strojové učení. Je to poněkud nepohodlná oblast, ale také úrodná: prohlížeč se vrací jako seriózní aplikační platforma, nejen místo, kam vkládáme formuláře a řídicí panely.

Kontrolní seznam před výrobou

Před uvedením funkce na zařízení před uživatele bych zkontroloval:

1. Zacilte na prohlížeče a zařízení.
2. Cloud záložní nebo elegantní degradace.
3. Čas stahování a mezipaměť modelu.
4. Paměť a baterie na průměrném hardwaru.
5. Kvalita ve srovnání s cloudovou verzí.
6. Zásady ochrany osobních údajů a uživatelské zprávy.
7. Testování s nepřátelskými vstupy.
8. Samostatné metriky pro místní a cloudové běhové prostředí.
9. Plánujte aktualizaci nebo deaktivaci šablony.

Je to konkrétní seznam, protože problém je konkrétní. Pomalá, křehká nebo neprůhledná funkce umělé inteligence se nezlepší jen proto, že běží v prohlížeči.

Správný kompromis

Nevěřím, že budoucnost je „všechno na zařízení“. A nemyslím si, že cloud zůstane jediným rozumným místem pro vyvozování. Nejpravděpodobnější budoucnost je kombinace: místní, když to zlepší latenci, soukromí nebo náklady; cloud, když je potřeba kvalita, aktualizovaná data a centralizované řízení.

WebGPU, WebNN a vestavěná rozhraní AI API nedělají prohlížeč všemocným. Dělají ho dospělejším. A pro ty, kteří vytvářejí webové produkty, je to obrovská zpráva.

Užitečné zdroje

• WebGPU API – MDN
• Specifikace WebGPU - W3C
• Vestavěná AI – Chrome pro vývojáře
• Vestavěná rozhraní AI API – Chrome pro vývojáře
• WebNN API