Chociaż większość funkcji AI w internecie działa na serwerach, AI po stronie klienta działa bezpośrednio w przeglądarce użytkownika. Daje to korzyści takie jak niskie opóźnienia, zmniejszone koszty po stronie serwera, brak wymagań dotyczących klucza API, większa prywatność użytkowników i możliwość korzystania z aplikacji offline. Możesz wdrażać AI po stronie klienta, które działa w różnych przeglądarkach z bibliotekami JavaScript, takimi jak TensorFlow.js, Transformers.js i MediaPipe GenAI.
AI po stronie klienta powoduje też problemy ze skutecznością: użytkownicy muszą pobierać więcej plików, a ich przeglądarka musi pracować intensywniej. Aby dobrze działać, rozważ te kwestie:
- Przypadek użycia Czy sztuczna inteligencja po stronie klienta jest odpowiednim rozwiązaniem dla Twojej funkcji? Czy Twoja funkcja znajduje się na kluczowej ścieżce użytkownika? Jeśli tak, czy masz alternatywne rozwiązanie?
- Sprawdzone metody pobierania i używania modeli. Więcej informacji na ten temat znajduje się poniżej.
Przed pobraniem modelu
Biblioteka Mind i rozmiar modelu
Aby wdrożyć AI po stronie klienta, potrzebujesz modelu i zwykle biblioteki. Wybierając bibliotekę, oszacuj jej rozmiar tak samo jak w przypadku każdego innego narzędzia.
Liczy się też rozmiar modelu. To, co jest uważane za duże w przypadku modelu AI, zależy od wielu czynników. 5 MB może być przydatną regułą: jest to też 75. percentyl średniego rozmiaru strony internetowej. Mniej restrykcyjny limit to 10 MB.
Oto kilka ważnych kwestii związanych z rozmiarem modelu:
- Wiele modeli AI do określonych zadań może być naprawdę niewielkich. Model BudouX, który służy do dokładnego dzielenia znaków w językach azjatyckich, zajmuje tylko 9,4 KB w formacie GZ. Model wykrywania języka MediaPipe ma rozmiar 315 KB.
- Nawet modele widzenia mogą mieć rozsądny rozmiar. Model Handpose i wszystkie powiązane z nim zasoby zajmują łącznie 13,4 MB. Chociaż jest to znacznie więcej niż większość zminimalizowanych pakietów interfejsu, rozmiar ten jest porównywalny ze średnią stroną internetową, która ma 2,2 MB (2,6 MB na komputerze).
- Modele generatywnej AI mogą przekraczać zalecany rozmiar zasobów internetowych. DistilBERT, który jest uważany za bardzo małą LLM lub prosty model NLP (opinie są różne), ma rozmiar 67 MB. Nawet małe LLM, takie jak Gemma 2B, mogą zajmować 1,3 GB. Jest to ponad 100 razy więcej niż średni rozmiar strony internetowej.
Dokładny rozmiar pobierania modeli, których zamierzasz używać, możesz sprawdzić za pomocą narzędzi dla programistów w przeglądarce.
Optymalizacja rozmiaru modelu
- Porównaj jakość modelu i rozmiary plików do pobrania. Mniejszy model może mieć wystarczającą dokładność do Twojego przypadku użycia, a przy tym być znacznie mniejszy. Istnieją metody dokładnego dostosowania i techniki zmniejszania rozmiaru modelu, które pozwalają znacznie zmniejszyć rozmiar modelu przy zachowaniu wystarczającej dokładności.
- W miarę możliwości wybieraj modele wyspecjalizowane. Modele dostosowane do określonego zadania są zwykle mniejsze. Jeśli na przykład chcesz wykonywać określone zadania, takie jak analiza nastawienia lub toksyczności, użyj modeli wyspecjalizowanych do tych zadań, a nie ogólnego modelu LLM.
Wszystkie te modele wykonują to samo zadanie z różną dokładnością, ale ich rozmiary różnią się znacznie: od 3 MB do 1, 5 GB.
Sprawdź, czy model może działać
Nie wszystkie urządzenia mogą uruchamiać modele AI. Nawet urządzenia o wystarczających parametrach sprzętowych mogą mieć problemy, jeśli w trakcie korzystania z modelu są uruchomione lub uruchamiane inne wymagające procesy.
Do czasu udostępnienia rozwiązania możesz wykonać te czynności:
- Sprawdź, czy masz włączoną obsługę WebGPU. Wiele bibliotek AI po stronie klienta, w tym Transformers.js w wersji 3 i MediaPipe, korzysta z WebGPU. Obecnie niektóre z tych bibliotek nie przechodzą automatycznie na Wasm, jeśli WebGPU nie jest obsługiwane. Możesz to ograniczyć, umieszczając kod AI w sprawdzaniu wykrywania funkcji WebGPU, jeśli wiesz, że Twoja biblioteka AI po stronie klienta potrzebuje WebGPU.
- Wyklucz urządzenia o niewystarczającej mocy. Aby oszacować możliwości i obciążenie urządzenia, użyj funkcji Navigator.hardwareConcurrency, Navigator.deviceMemory i Compute Pressure API. Te interfejsy API nie są obsługiwane we wszystkich przeglądarkach i są celowo nieprecyzyjne, aby zapobiegać identyfikacji odcisków palców. Mimo to mogą pomóc w wykluczeniu urządzeń, które wydają się bardzo słabe.
Sygnalizacja pobierania dużych plików
W przypadku dużych modeli ostrzegaj użytkowników przed pobraniem. Użytkownicy komputerów chętniej pobierają duże pliki niż użytkownicy urządzeń mobilnych. Aby wykryć urządzenia mobilne, użyj parametru mobile
z interfejsu API User-Agent Client Hints (lub ciągu znaków User-Agent, jeśli UA-CH nie jest obsługiwany).
Ograniczanie pobierania dużych plików
- Pobieraj tylko to, co jest niezbędne. Zwłaszcza w przypadku dużych modeli pobieraj je tylko wtedy, gdy masz pewność, że funkcje AI będą używane. Jeśli na przykład masz funkcję sugestii AI, pobieraj dane tylko wtedy, gdy użytkownik zacznie korzystać z funkcji pisania.
- Wyraźnie zapisz model w pamięci podręcznej na urządzeniu za pomocą interfejsu Cache API, aby uniknąć jego pobierania przy każdej wizycie. Nie polegaj tylko na domyślnej pamięci podręcznej przeglądarki HTTP.
- Pobierz model w kawałkach. Opcja fetch-in-chunks dzieli duże pliki na mniejsze części.
Pobieranie i przygotowywanie modelu
Nie blokuj użytkownika
Priorytetowo traktować płynne działanie aplikacji: zezwolić na działanie kluczowych funkcji, nawet jeśli model AI nie został jeszcze w pełni załadowany.
Wskazanie postępu
Podczas pobierania modelu wskaż postęp i pozostały czas.
- Jeśli pobieranie modeli jest obsługiwane przez bibliotekę AI po stronie klienta, użyj stanu postępu pobierania, aby wyświetlić go użytkownikowi. Jeśli ta funkcja jest niedostępna, rozważ przesłanie zgłoszenia z prośbą o jej dodanie (lub dodanie jej samodzielnie).
- Jeśli pobieranie modeli obsługujesz we własnym kodzie, możesz pobierać model w kawałkach za pomocą biblioteki, takiej jak fetch-in-chunks, i wyświetlać użytkownikowi postęp pobierania.
- Więcej wskazówek znajdziesz w artykule Sprawdzone metody dotyczące animowanych wskaźników postępu oraz Projektowanie z myślą o długim czasie oczekiwania i przerwach.
Obsługa przerw w działaniu sieci
Pobieranie modelu może zająć różny czas w zależności od jego rozmiaru. Zastanów się, jak obsłużyć przerwy w działaniu sieci, jeśli użytkownik przejdzie w tryb offline. Jeśli to możliwe, poinformuj użytkownika o utracie połączenia i kontynuuj pobieranie po jego przywróceniu.
Niestabilne połączenie to kolejny powód, dla którego warto pobierać pliki w porcjach.
Przekazywanie kosztownych zadań do instancji roboczej w sieci
Zadania wymagające dużych zasobów, np. etapy przygotowania modelu po pobraniu, mogą blokować wątek główny, co powoduje zakłócenia w działaniu aplikacji. Przeniesienie tych zadań do instancji roboczej w przeglądarce może pomóc.
Demo i pełną implementację na podstawie skryptu web worker znajdziesz tutaj:
Podczas wnioskowania
Gdy model zostanie pobrany i będzie gotowy, możesz przeprowadzić wnioskowanie. Wyciąganie wniosków może być kosztowne pod względem obliczeniowym.
Przenoszenie wnioskowania do elementu web worker
Jeśli wnioskowanie odbywa się za pomocą WebGL, WebGPU lub WebNN, korzysta z GPU. Oznacza to, że występuje w ramach osobnego procesu, który nie blokuje interfejsu.
W przypadku implementacji opartych na procesorze (takich jak Wasm, który może być rozwiązaniem zapasowym dla WebGPU, jeśli WebGPU nie jest obsługiwany) przeniesienie wnioskowania do skryptu web workera sprawia, że Twoja strona jest responsywna – tak jak podczas przygotowywania modelu.
Implementacja może być prostsza, jeśli cały kod związany z AI (pobieranie modelu, przygotowanie modelu, wnioskowanie) znajduje się w tym samym miejscu. Możesz więc wybrać zadanie wykonywane w przeglądarce, niezależnie od tego, czy jest używany GPU.
Obsługuj błędy
Nawet jeśli sprawdzisz, że model powinien działać na urządzeniu, użytkownik może później uruchomić inny proces, który będzie intensywnie zużywać zasoby. Aby rozwiązać ten problem:
- Obsługa błędów wnioskowania. Zamknij wnioskowanie w blokach
try
/catch
i obsługuj odpowiednie błędy w czasie wykonywania. - Przetwarzanie błędów WebGPU, zarówno nieoczekiwanych, jak i GPUDevice.lost, które występują, gdy GPU jest faktycznie resetowany, ponieważ urządzenie ma problemy.
Wskazuje stan wnioskowania
Jeśli wnioskowanie zajmuje więcej czasu niż natychmiastowy, wskaż użytkownikowi, że model myśli. Używaj animacji, aby uprzyjemnić użytkownikowi czas oczekiwania i zapewnić mu, że aplikacja działa zgodnie z oczekiwaniami.
Umożliwienie anulowania wnioskowania
Umożliwienie użytkownikowi doprecyzowania zapytania w bieżącym czasie, bez marnowania zasobów systemu na generowanie odpowiedzi, której użytkownik nigdy nie zobaczy.