spinny:~/writing $ less webgpu-on-device-ai-browser.md
12Évekig a böngésző volt az alkalmazás szép arca, a felhő pedig az a hely, ahol a nehéz dolgok megtörténtek. A felhasználó ír, kattint, feltölt egy fájlt; a frontend mindent elküld a szervernek; a szerver modellt hív; jön vissza a válasz.34Ez a rendszer továbbra is nagyon hasznos, de nem ingyenes. Minden hívás késleltetéssel, költséggel, hálózatfüggőséggel és adatvédelmi kérdésekkel jár. Ha a felhasználó egy mondatot ír, és javaslatot szeretne, fél másodperc a súlya. Ha több ezer apró bemenetet osztályoz, a fillérekből valódi pénz lesz. Ha a szöveg érzékeny, akkor a készülékről való elküldése nem semleges választás.56Ezért van felhajtás a WebGPU és az eszközön lévő mesterséges intelligencia. Nem azért, mert holnap minden modellt futtatunk a böngészőben. Mert az intelligens funkciók egy része közelebb kerülhet a felhasználóhoz.78## Nem kell mindennek helyisé válnia910Az érvelés gyerekes változata: "felhő versus eszköz". A hasznos változat a hibrid.1112Néhány feladat remekül mutat a készüléken: rövid összefoglalók, nyelvészlelés, fényátírások, egyszerű osztályozások, képszűrők, kis látásmodellek, kreatív élmények azonnali visszajelzéssel.1314A többi feladat jobb marad a felhőben: összetett érvelés, határmodellek, szerveroldali adatok, központosított audit, egységes minőség, munkafolyamat, ahol minden lépést gondosan ellenőrizni kell.1516Az egészséges architektúra futás közben dönt:1718```mermaid19flowchart TD20 User[Felhasználó] --> Browser[Böngészők]21 Browser --> Detect[Funkció felismerés]22 Detect -->|Támogatott| Local[Helyi következtetés]23 Detect -->|Nem támogatott| Cloud[Cloud backback]24 Local --> UX[Gyors válasz]25 Cloud --> UX26 UX --> Metrics[Mutatók és minőség]27```2829A böngészőnek nem kell nyernie a felhővel szemben. Meg kell mentenie a felhőt azoktól a munkáktól, amelyeket ott nem kell elvégezni.3031## Miért számít a WebGPU?3233A WebGPU egy modern API a GPU böngészőből történő használatához. Nem csak a szebb 3D-s grafikákra való. Ez azért is fontos, mert a számítástechnikára alkalmas primitíveket: párhuzamos munkaterheléseket, shadereket, pipeline-okat közelebb hoz a GPU-k által jól teljesítettekhez.3435A mesterséges intelligencia, a tudományos vizualizáció, a 3D szerkesztők, a videószűrők és a kreatív eszközök esetében ez a különbség érezhető. A WebGL sokat tett a webért, de a WebGPU a jelennek jobban megfelelő modellel született.3637Az első dolog, amit meg kell írni, azonban nem árnyékoló. Ez egy józan funkciófelismerés:3839```typescript40export async function requestWebGpuDevice() {41 if (!('gpu' in navigator)) {42 return null;43 }4445 const adapter = await navigator.gpu.requestAdapter({46 powerPreference: 'high-performance',47 });4849 if (!adapter) {50 return null;51 }5253 return adapter.requestDevice();54}55```5657Ez a funkció egy fontos dolgot mond: a WebGPU nem minden eszközön biztosított. Ez egy igazolható képesség. Egyes böngészők nem támogatják teljes mértékben, néhány GPU-nak vannak korlátozásai, egyes vállalati környezetek letiltják a funkciókat, néhány felhasználó szerény hardverrel rendelkezik.5859## Beépített mesterséges intelligencia: amikor a böngésző hozza a modellt6061A Chrome beépített API-kat kínál az olyan feladatokhoz, mint a helyi felszólítások, összegzés, írás, átírás, fordítás, nyelvészlelés és lektorálás. Az ötlet nagyon érdekes: a böngésző kezeli a modellt, a rendelkezésre állást és a frissítéseket; az alkalmazás a platformhoz közelebbi API-t használ.6263Ha jól működik, sokat változtat:6465- kevesebb szerverhívás egyszerű feladatokhoz;66- adatok, amelyek az eszközön maradhatnak;67- alacsonyabb késleltetési idő;68- offline vagy félig offline élmények;69- Természetesebb UX íráshoz és fordításhoz.7071De ezt progresszív fejlesztésként kell kezelni. Egyes API-k stabilak, mások eredeti próbaverzióban vagy előnézetben vannak, mások továbbra is a verziótól, a nyelvtől és az eszköztől függenek.7273```typescript74type LocalCapability = 'available' | 'downloadable' | 'unsupported';7576export async function getLocalSummarizerCapability(): Promise<LocalCapability> {77 const SummarizerApi = (globalThis as any).Summarizer;7879 if (!SummarizerApi?.availability) {80 return 'unsupported';81 }8283 const availability = await SummarizerApi.availability();8485 if (availability === 'available') return 'available';86 if (availability === 'downloadable') return 'downloadable';8788 return 'unsupported';89}90```9192A konkrét kód megváltozik, de a minta megmarad: ellenőrizni kell a rendelkezésre állást, elmagyarázza a letöltéseket, tartalékokat kínál, és méri a minőséget.9394## A visszaesés nem szomorú B-terv9596A felhő visszaesése nem vereség. A termék része.9798```typescript99interface AiRequest {100 task: 'summarize' | 'rewrite' | 'classify';101 input: string;102}103104interface AiResult {105 output: string;106 runtime: 'local' | 'cloud';107}108109export async function runAiTask(request: AiRequest): Promise<AiResult> {110 const local = await tryLocalAi(request);111112 if (local) {113 return { output: local, runtime: 'local' };114 }115116 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());121122 return { output: cloud.output, runtime: 'cloud' };123}124```125126Ez az architektúra lehetővé teszi a fokozatos fejlesztést. A helyi támogatással rendelkezők jobb késleltetést és adatvédelmet kapnak. Akinek nincs, az továbbra is használja a funkciót. Mérheti a helyi kérések százalékos arányát, az időket, a hibákat, a memóriát, az észlelt minőséget és a költségeket.127128Mutatók nélkül az eszközön lévő mesterséges intelligencia esztétikai választássá válik. A mérőszámokkal termékkarcává válik.129130## A modell felhasználói élménye számít131132Ha a böngészőnek le kell töltenie egy modellt, a felhasználó észleli azt. Ne rejtsd el egy homályos forgó mögé. Jobb, ha egyértelmű: "Felkészítjük a modellt a funkció gyorsabb és akár offline használatára."133134Egy jó tapasztalat:135136- mutatja az előkészítés állapotát;137- nem blokkolja a teljes oldalt;138- lehetővé teszi a felhőalapú visszaállítás folytatását;139- elkerülje az akkumulátor és a memória meglepetéseit;140- emlékezzen a modellre, amikor csak lehetséges;141- magyarázza el az előnyt egy konkrét mondatban.142143A legrosszabb egy „okos” funkció, amely meghibásodottnak tűnik, mert csendben tölt le valamit.144145## Adatvédelem: jobb, nem automatikusan biztonságos146147Az adatok feldolgozása az eszközön nagy előnyt jelenthet. Az e-mail piszkozatnak, belső dokumentumnak vagy személyes feljegyzésnek nem kell elhagynia a böngészőt ahhoz, hogy javaslatot kapjon.148149A helyi azonban nem jelent automatikusan biztonságosat. Azonban gondolnia kell a következőkre:150151- XSS;152- véletlen naplók;153- tárolóban mentett adatok;154- gyors injektálás nem megbízható tartalomból;155- a modellnek adott engedélyek;156- automatikus műveletekben használt kimenetek.157158Ha egy helyi modell képes elolvasni egy weboldalt, majd kitölteni egy űrlapot, az oldal megpróbálhatja manipulálni. Ha képes hívni az eszközt, megerősítésre van szükség. Ha strukturált kimenetet állít elő, akkor azt érvényesíteni kell. Az a tény, hogy az eszközön fut, csökkenti bizonyos adatvédelmi kockázatokat, de nem szünteti meg a biztonsági modellt.159160## Ahol ez igazán érdekessé válik161162A szöveg csak a kezdet. A WebGPU hitelessé teszi a webes élményeket, amelyek egészen a közelmúltig natív alkalmazásnak tűntek:163164- összetett 3D szerkesztők;165- Gauss fröccs a böngészőben;166- valós idejű videoszűrők;167- Könnyű CAD;168- tudományos vizualizációk;169- kreatív eszközök azonnali előnézettel;170- látási következtetés a felhasználói felület közelében;171- ambiciózusabb böngészős játékok.172173Itt kezd keveredni a frontend, a grafika és a gépi tanulás. Ez egy kissé kínos, de egyben termékeny terület is: a böngésző ismét komoly alkalmazásplatformmá válik, nem csak az űrlapok és az irányítópultok elhelyezésére.174175## Gyártás előtti ellenőrző lista176177Mielőtt egy eszközön lévő funkciót a felhasználók elé helyeznék, ellenőrizném:1781791. Célozzon böngészőket és eszközöket.1802. Felhővisszaesés vagy elegáns leromlás.1813. Letöltési idő és modell gyorsítótár.1824. Memória és akkumulátor átlagos hardver.1835. Minőség a felhő verzióhoz képest.1846. Adatvédelmi szabályzat és felhasználói üzenetek.1857. Tesztelés ellenséges bemenetekkel.1868. Külön mérőszámok a helyi és a felhőalapú futásidőhöz.1879. Tervezze meg a sablon frissítését vagy letiltását.188189Ez egy konkrét lista, mert a probléma konkrét. Egy lassú, törékeny vagy átláthatatlan AI-funkció nem válik jobbá csak azért, mert a böngészőben fut.190191## A helyes kompromisszum192193Nem hiszem, hogy a jövő „minden a készüléken” múlik. És nem hiszem, hogy a felhő marad az egyetlen ésszerű hely a következtetésekhez. A legvalószínűbb jövő egy keverék: helyi, ha javítja a késleltetést, az adatvédelmet vagy a költségeket; felhő, ha minőségre, frissített adatokra és központi vezérlésre van szükség.194195A WebGPU, WebNN és a beépített AI API-k nem teszik a böngészőt mindenhatóvá. Felnőttebbé teszik. És azok számára, akik webes termékeket építenek, ez óriási hír.196197## Hasznos források198199- [WebGPU API – MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)200- [WebGPU specifikáció - W3C](https://www.w3.org/TR/webgpu/)201- [Beépített mesterséges intelligencia – Chrome fejlesztőknek](https://developer.chrome.com/docs/ai/built-in)202- [Beépített AI API-k – Chrome fejlesztőknek](https://developer.chrome.com/docs/ai/built-in-apis)203- [WebNN API](https://webnn.io/)204
:WebGPU és on-device AI: A böngésző komoly futási környezetté váliklines 1-204 (END) — press q to close