WebGPU i sztuczna inteligencja na urządzeniu: przeglądarka staje się poważnym środowiskiem wykonawczym
· 6 min read · Filippo Spinella · WebGPU, AI, Frontend, Web Performance
Przez lata przeglądarka była ładną twarzą aplikacji, a chmura była miejscem, w którym działy się trudne rzeczy. Użytkownik pisze, klika, przesyła plik; frontend wysyła wszystko na serwer; serwer wywołuje model; odpowiedź wraca.
Ten schemat pozostaje bardzo przydatny, ale nie jest darmowy. Każde połączenie wiąże się z opóźnieniami, kosztami, zależnością od sieci i pytaniami dotyczącymi prywatności. Jeśli użytkownik pisze zdanie i chce sugestii, liczy się pół sekundy. Jeśli klasyfikujesz tysiące drobnych wkładów, grosze stają się prawdziwymi pieniędzmi. Jeśli tekst jest poufny, wysłanie go z urządzenia nie jest neutralnym wyborem.
Dlatego właśnie panuje moda na WebGPU i sztuczną inteligencję na urządzeniach. Nie dlatego, że jutro uruchomimy każdy model w przeglądarce. Ponieważ niektóre inteligentne funkcje mogą zbliżyć się do użytkownika.
Nie wszystko musi stać się lokalne
Dziecinna wersja argumentu brzmi: „chmura kontra urządzenie”. Użyteczna wersja jest hybrydowa.
Niektóre zadania wyglądają świetnie na urządzeniu: krótkie podsumowania, wykrywanie języka, lekkie przepisywanie, proste klasyfikacje, filtry obrazu, małe modele wizyjne, kreatywne doświadczenia z natychmiastową informacją zwrotną.
Inne zadania pozostają lepsze w chmurze: złożone rozumowanie, modele graniczne, dane po stronie serwera, scentralizowany audyt, jednolita jakość, przepływ pracy, w którym trzeba dokładnie kontrolować każdy krok.
Zdrowa architektura decyduje w czasie wykonywania:
Przeglądarka nie musi wygrywać z chmurą. Musi chronić chmurę przed wykonywaniem pracy, która nie musi być w niej wykonywana.
Dlaczego WebGPU ma znaczenie
WebGPU to nowoczesny interfejs API umożliwiający korzystanie z procesora graficznego z poziomu przeglądarki. Nie chodzi tylko o ładniejszą grafikę 3D. Jest to również ważne, ponieważ ujawnia prymitywy odpowiednie do obliczeń: równoległe obciążenia, shadery, potoki bliższe temu, co dobrze radzą sobie procesory graficzne.
W przypadku sztucznej inteligencji, wizualizacji naukowych, edytorów 3D, filtrów wideo i narzędzi kreatywnych ta różnica jest odczuwalna. WebGL zrobił wiele dla sieci, ale WebGPU narodziło się z modelem lepiej dostosowanym do współczesności.
Pierwszą rzeczą do napisania nie jest jednak shader. To trzeźwe wykrywanie funkcji:
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(); }
Ta funkcja mówi jedną ważną rzecz: WebGPU nie jest prawem przyznawanym na każdym urządzeniu. To umiejętność, którą można zweryfikować. Niektóre przeglądarki nie obsługują tej funkcji w pełni, niektóre procesory graficzne mają ograniczenia, niektóre środowiska korporacyjne wyłączają funkcje, niektórzy użytkownicy korzystają ze skromnego sprzętu.
Wbudowana sztuczna inteligencja: gdy przeglądarka wyświetla model
Chrome udostępnia wbudowane interfejsy API do zadań takich jak lokalne podpowiedzi, podsumowywanie, pisanie, przepisywanie, tłumaczenie, wykrywanie języka i korekta. Pomysł jest bardzo ciekawy: przeglądarka zarządza modelem, dostępnością i aktualizacjami; aplikacja korzysta z interfejsu API bliżej platformy.
Jeśli to działa dobrze, wiele się zmienia:
- mniej wywołań serwera dla prostych zadań;
- dane, które mogą pozostać na urządzeniu;
- mniejsze opóźnienie;
- doświadczenia offline lub częściowo offline;
- Bardziej naturalny UX do pisania i tłumaczenia.
Należy to jednak traktować jako postępujące doskonalenie. Niektóre interfejsy API są stabilne, inne są w wersji próbnej lub podglądowej, inne nadal zależą od wersji, języka i urządzenia.
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'; }
Konkretny kod ulegnie zmianie, ale schemat pozostanie: sprawdzasz dostępność, wyjaśniasz wszelkie pobrania, oferujesz rozwiązania awaryjne i mierzysz jakość.
Awaryjny powrót nie jest smutnym planem B
Powrót do chmury nie jest porażką. Jest częścią 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' }; }
Taka architektura pozwala na stopniowe doskonalenie. Osoby z lokalnym wsparciem uzyskują lepsze opóźnienia i prywatność. Ci, którzy jej nie mają, nadal korzystają z tej funkcji. Możesz zmierzyć procent lokalnych żądań, czasy, błędy, pamięć, postrzeganą jakość i koszt.
Bez wskaźników sztuczna inteligencja na urządzeniu staje się wyborem estetycznym. Dzięki metrykom staje się dźwignią produktu.
UX modelu ma znaczenie
Jeśli przeglądarka musi pobrać model, użytkownik to widzi. Nie ukrywaj tego za niewyraźną przędzarką. Lepiej żeby było jasne: „Przygotowujemy model do szybszego korzystania z tej funkcji, nawet offline”.
Dobre doświadczenie:
- pokazuje stan przygotowania;
- nie blokuje całej strony;
- umożliwia kontynuację przywracania chmury;
- unikaj niespodzianek związanych z baterią i pamięcią;
- pamiętaj o modelu, jeśli to możliwe;
- wyjaśnij korzyści w jednym konkretnym zdaniu.
Najgorszą rzeczą jest „inteligentna” funkcja, która wygląda na uszkodzoną, ponieważ pobiera coś po cichu.
Prywatność: lepsza, nie bezpieczna automatycznie
Przetwarzanie danych na urządzeniu może być ogromną zaletą. Wersja robocza wiadomości e-mail, dokumentu wewnętrznego lub notatki osobistej nie musi opuszczać przeglądarki, aby otrzymać sugestię.
Jednak lokalnie nie oznacza automatycznie bezpiecznie. Musisz jednak pomyśleć o:
- XSS;
- przypadkowe dzienniki;
- dane zapisane w pamięci;
- natychmiastowe wstrzyknięcie niezaufanej zawartości;
- uprawnienia nadane modelowi;
- wyjścia używane w akcjach automatycznych.
Jeśli lokalny model może przeczytać stronę internetową, a następnie wypełnić formularz, strona ta może próbować nią manipulować. Jeśli może wywołać narzędzie, potrzebne jest potwierdzenie. Jeśli generuje ustrukturyzowany wynik, należy go zweryfikować. Fakt, że działa na urządzeniu, zmniejsza pewne ryzyko prywatności, ale nie eliminuje modelu bezpieczeństwa.
Gdzie robi się naprawdę ciekawie
Tekst to dopiero początek. WebGPU sprawia, że korzystanie z Internetu staje się wiarygodne, co do niedawna wydawało się aplikacją natywną:
- złożone edytory 3D;
- rozpryski gaussowskie w przeglądarce;
- filtry wideo w czasie rzeczywistym;
- Lekki CAD;
- wizualizacje naukowe;
- narzędzia kreatywne z natychmiastowym podglądem;
- wnioskowanie o wizji w pobliżu interfejsu użytkownika;
- bardziej ambitne gry przeglądarkowe.
Tutaj frontend, grafika i uczenie maszynowe zaczynają się mieszać. To dość niezręczny obszar, ale i podatny na zmiany: przeglądarka wraca do roli poważnej platformy aplikacji, a nie tylko miejsca, w którym umieszczamy formularze i dashboardy.
Lista kontrolna przed produkcją
Przed udostępnieniem użytkownikom funkcji na urządzeniu sprawdziłbym:
- Kieruj na przeglądarki i urządzenia.
- Powrót do chmury lub elegancka degradacja.
- Pobierz pamięć podręczną czasu i modelu.
- Pamięć i bateria na przeciętnym sprzęcie.
- Jakość w porównaniu do wersji w chmurze.
- Polityka prywatności i komunikaty użytkowników.
- Testowanie z wrogimi danymi wejściowymi.
- Oddzielne metryki dla środowiska wykonawczego lokalnego i w chmurze.
- Zaplanuj aktualizację lub wyłączenie szablonu.
Jest to konkretna lista, ponieważ problem jest konkretny. Powolna, delikatna lub nieprzejrzysta funkcja AI nie staje się lepsza tylko dlatego, że działa w przeglądarce.
Właściwy kompromis
Nie wierzę, że przyszłość to „wszystko w urządzeniu”. Nie sądzę też, że chmura pozostanie jedynym rozsądnym miejscem do wnioskowania. Najbardziej prawdopodobna przyszłość to mieszanka: lokalna, gdy poprawia opóźnienia, prywatność lub koszty; chmura, gdy potrzebna jest jakość, aktualne dane i scentralizowana kontrola.
WebGPU, WebNN i wbudowane API AI nie czynią przeglądarki wszechmocną. Czynią go bardziej dorosłym. Dla osób tworzących produkty internetowe jest to ogromna wiadomość.