Chociaż większość funkcji AI w internecie działa na serwerach, AI po stronie klienta działa bezpośrednio w przeglądarce użytkownika. Zapewnia to takie korzyści, jak małe opóźnienia, niższe koszty po stronie serwera, brak kluczowych wymagań dotyczących interfejsów API, większa prywatność użytkowników i dostęp offline. Możesz wdrożyć AI po stronie klienta, która działa w przeglądarkach z bibliotekami JavaScript, takimi jak TensorFlow.js, Transformers.js i MediaPipe GenAI.
Sztuczna inteligencja po stronie klienta wiąże się też z wyzwaniami w zakresie wydajności: użytkownicy muszą pobierać więcej plików, a przeglądarka musi pracować ciężej. Aby wszystko działało dobrze, zastanów się nad tymi kwestiami:
- Przypadek użycia Czy AI po stronie klienta będzie odpowiednim wyborem 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ą zasadą, ponieważ jest to również 75 centyl mediany 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.
- Pewne modele wizualne mogą mieć rozsądną wielkość. 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, 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.
Za pomocą narzędzi dla programistów w przeglądarce możesz sprawdzić dokładny rozmiar pobierania modeli, których zamierzasz używać.
Zoptymalizuj rozmiar modelu
- Porównanie jakości modelu i rozmiarów pobieranych danych Mniejszy model może mieć wystarczającą dokładność do Twojego przypadku użycia, a przy tym być znacznie mniejszy. Istnieją techniki dostrajania i zmniejszania modelu, które pozwalają znacznie zmniejszyć rozmiar modelu przy zachowaniu odpowiedniej 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ą te same zadania 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 się uruchamiać
Nie wszystkie urządzenia mogą uruchamiać modele AI. Nawet urządzenia o wystarczającej specyfikacji sprzętowej mogą mieć problemy, jeśli uruchomione są lub są uruchomione inne kosztowne procesy, podczas gdy używany jest model.
Dopóki nie znajdziemy rozwiązania, możesz:
- 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. Aby temu zaradzić, uwzględnij kod związany z AI w kontroli wykrywania funkcji WebGPU, jeśli wiesz, że biblioteka AI po stronie klienta wymaga 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 interfejsu 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.
Sygnały dotyczące pobierania dużych ilości danych
W przypadku dużych modeli ostrzegaj użytkowników przed pobraniem. Użytkownicy komputerów chętniej
pobierają treści z dużą ilością danych niż użytkownicy mobilni. 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 jeśli model jest duży, pobieraj go tylko wtedy, gdy masz pewność, że funkcje AI będą używane. 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 wyłącznie na niejawnej 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.
Wskazuje postęp
Podczas pobierania modelu wskaż postęp i pozostały czas.
- Jeśli Twoja biblioteka AI po stronie klienta obsługuje pobieranie modeli, użyj stanu postępu pobierania, aby wyświetlić go użytkownikowi. Jeśli ta funkcja nie jest dostępna, rozważ otwarcie problemu, aby poprosić o jej udostępnienie (lub o jej przekazanie).
- 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 artykułach o sprawdzonych metodach dotyczących animowanych wskaźników postępu i w artykule na ten temat.
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. W miarę możliwości poinformuj użytkownika o uszkodzeniu połączenia i kontynuuj pobieranie po jego przywróceniu.
Niestabilne połączenie to kolejny powód pobierania fragmentów.
Przekazanie drogich zadań pracownikowi internetowemu
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 service 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 odbywa się to w osobnym procesie, który nie blokuje interfejsu użytkownika.
W przypadku implementacji opartych na procesorze (takich jak Wasm, które mogą być rozwiązaniem zapasowym dla WebGPU, jeśli WebGPU nie jest obsługiwane) przeniesienie wnioskowania do skryptu web workera zapewni płynność działania strony – 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żna więc wybrać Webwork bez względu na to, czy używany jest GPU.
Obsługa błędów
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/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ż natychmiastowe, sygnalizuj 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.