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 wiele korzyści, w tym niskie opóźnienia, zmniejszone koszty po stronie serwera, brak wymagań dotyczących klucza API, większą 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ść zminiaturyzowanych pakietów interfejsu, to jest to porównywalne do przeciętnej strony internetowej, 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 modele 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ślonych zadań 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.
Sprawdzanie, 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 działania modelu są wykonywane lub uruchamiane inne wymagające procesy.
Do czasu udostępnienia rozwiązania możesz wykonać te czynności:
- Sprawdź, czy urządzenie obsługuje 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 związany z 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 prawdopodobnie chętniej pobierają duże pliki niż użytkownicy urządzeń mobilnych. Aby wykrywać urządzenia mobilne, użyj parametru mobile z interfejsu API User-Agent Client Hints (lub ciągu znaków klienta użytkownika, 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 będą używane funkcje AI. Jeśli na przykład masz funkcję AI przewidywania słów, 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 modeli może zająć różny czas w zależności od ich rozmiaru. Zastanów się, jak sobie radzić z przerwami 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 wznów 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 web workera
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óre mogą być rozwiązaniem zastępczym dla WebGPU, jeśli WebGPU nie jest obsługiwane) przeniesienie wnioskowania do skryptu web workera sprawia, że 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 GPU jest używany.
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 temu zapobiec:
- Zarządzanie błędami wnioskowania. Zamknij wnioskowanie w blokach
try/catchi 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ż natychmiast, 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żliwianie użytkownikowi doprecyzowania zapytania w biegu, bez marnowania zasobów systemu na generowanie odpowiedzi, której użytkownik nigdy nie zobaczy.