רוב התכונות של AI באינטרנט מסתמכות על שרתים, אבל AI בצד הלקוח פועל ישירות בדפדפן של המשתמש. כך אפשר ליהנות מהיתרונות הבאים: זמן אחזור קצר, עלויות מופחתות בצד השרת, אין צורך במפתח API, פרטיות משופרת של המשתמשים וגישה אופליין. אפשר להטמיע AI בצד הלקוח שפועל בדפדפנים שונים באמצעות ספריות JavaScript כמו TensorFlow.js, Transformers.js ו-MediaPipe GenAI.
בנוסף, AI בצד הלקוח גורם לאתגרים בביצועים: המשתמשים צריכים להוריד יותר קבצים והדפדפן שלהם צריך לעבוד קשה יותר. כדי שהיא תפעל בצורה טובה, כדאי:
- תרחיש לדוגמה. האם AI מצד הלקוח הוא הפתרון המתאים לתכונה שלכם? האם התכונה נמצאת בתהליך קריטי של חוויית המשתמש, ואם כן, האם יש לכם חלופה?
- שיטות מומלצות להורדה ולשימוש במודלים מידע נוסף מופיע בהמשך.
לפני הורדת המודל
ספריית המיינד והגודל של המודל
כדי להטמיע AI מצד הלקוח, צריך מודל ובדרך כלל גם ספרייה. כשאתם בוחרים את הספרייה, חשוב להעריך את הגודל שלה כמו כל כלי אחר.
גם גודל המודל חשוב. מה נחשב כגדול עבור מודל AI תלוי. 5MB יכולים לשמש כלל אצבע שימושי: זהו גם הפרמנטיל ה-75 של גודל דף האינטרנט החציוני. אפשר להשתמש גם ב-10MB.
ריכזנו כאן כמה שיקולים חשובים לגבי גודל המודל:
- הרבה מודלים של AI שמותאמים למשימות ספציפיות יכולים להיות קטנים מאוד. מודל כמו BudouX, שמאפשר פיצול מדויק של תווים בשפות אסייתיות, הוא רק 9.4KB בפורמט GZipped. מודל זיהוי השפה של MediaPipe הוא בגודל 315KB.
- גם מודלים של ראייה ממוחשבת יכולים להיות בגודל סביר. הדגם Handpose וכל המשאבים הקשורים תופסים בסך הכול 13.4MB. הגודל הזה גדול בהרבה מרוב החבילות המקוצרות של ממשק הקצה, אבל הוא דומה לגודל החציוני של דף אינטרנט, שהוא 2.2MB (2.6MB במחשב).
- מודלים של בינה מלאכותית גנרטיבית יכולים לחרוג מהגודל המומלץ למקורות מידע באינטרנט. DistilBERT, שנחשב ל-LLM קטן מאוד או למודל NLP פשוט (הדעות חלוקות), שוקל 67MB. גם מודלים קטנים של LLM, כמו Gemma 2B, יכולים להגיע ל-1.3GB. זהו גודל גדול פי 100 מהגודל החציוני של דף אינטרנט.
אתם יכולים להעריך את גודל ההורדה המדויק של המודלים שאתם מתכננים להשתמש בהם באמצעות הכלים למפתחים בדפדפנים.
אופטימיזציה של גודל המודל
- השוואה בין איכות המודלים לבין גודל ההורדה יכול להיות שמודל קטן יותר יספק דיוק מספיק לתרחיש לדוגמה שלכם, ועדיין יהיה קטן בהרבה. אפשר להשתמש בשיטות של צמצום מודל ובשיטות של כוונון עדין כדי לצמצם באופן משמעותי את גודל המודל תוך שמירה על דיוק מספיק.
- בוחרים מודלים ייעודיים כשהדבר אפשרי. מודלים שמותאמים למשימה מסוימת נוטים להיות קטנים יותר. לדוגמה, אם אתם רוצים לבצע משימות ספציפיות כמו ניתוח של סנטימנטים או ניתוח של תוכן רעיל, כדאי להשתמש במודלים שמתמחים במשימות האלה במקום ב-LLM כללי.
כל המודלים האלה מבצעים את אותה משימה, עם רמות דיוק שונות, אבל הגדלים שלהם משתנים מאוד: מ-3MB עד 1.5GB.
בדיקה אם אפשר להריץ את המודל
לא כל המכשירים יכולים להריץ מודלים של AI. גם במכשירים עם מפרטי חומרה מספיקים יכולים להיות קשיים, אם תהליכים יקרים אחרים פועלים או מתחילים לפעול בזמן השימוש במודל.
עד שיהיה פתרון זמין, אתם יכולים לבצע את הפעולות הבאות:
- בודקים אם יש תמיכה ב-WebGPU. כמה ספריות AI בצד הלקוח, כולל Transformers.js גרסה 3 ו-MediaPipe, משתמשות ב-WebGPU. בשלב זה, חלק מהספריות האלה לא עוברות באופן אוטומטי ל-Wasm אם אין תמיכה ב-WebGPU. אם אתם יודעים שספריית ה-AI בצד הלקוח זקוקה ל-WebGPU, תוכלו להשתמש בבדיקה לזיהוי תכונות WebGPU כדי להפחית את הסיכון.
- מבטלים מכשירים עם עוצמה נמוכה. כדי להעריך את היכולות והלחץ של המכשיר, אפשר להשתמש ב-Navigator.hardwareConcurrency, ב-Navigator.deviceMemory וב-Compute Pressure API. ממשקי ה-API האלה לא נתמכים בכל הדפדפנים והם לא מדויקים בכוונה כדי למנוע יצירה של טביעת אצבע דיגיטלית. עם זאת, הם עדיין יכולים לעזור להחריג מכשירים שנראים חלשים מאוד.
שליחת אות על הורדות גדולות
לגבי מודלים גדולים, צריך להזהיר את המשתמשים לפני ההורדה. סביר יותר שמשתמשים במחשבים יהיו מוכנים להורדות גדולות יותר מאשר משתמשים בניידים. כדי לזהות מכשירים ניידים, משתמשים ב-mobile
מ-User-Agent Client Hints API (או במחרוזת User-Agent אם לא ניתן להשתמש ב-UA-CH).
הגבלת הורדות גדולות
- מורידים רק את מה שנחוץ. במיוחד אם המודל גדול, כדאי להוריד אותו רק אחרי שיש ודאות סבירה שתכונות ה-AI ישמשו. לדוגמה, אם יש לכם תכונה של AI להצעות להשלמת הטקסט, כדאי להוריד אותה רק כשהמשתמש מתחיל להשתמש בתכונות ההקלדה.
- שומרים את המודל במטמון באופן מפורש במכשיר באמצעות Cache API, כדי להימנע מהורדה שלו בכל ביקור. אל תסתמכו רק על המטמון המשתמע של דפדפני ה-HTTP.
- חלוקה של הורדת המודל לקטעים. הפונקציה fetch-in-chunks מפצלת הורדה גדולה לקטעים קטנים יותר.
הורדה והכנה של מודל
לא לחסום את המשתמש
לתת עדיפות לחוויית משתמש חלקה: לאפשר לתכונות מרכזיות לפעול גם אם מודל ה-AI עדיין לא נטען במלואו.
סימון ההתקדמות
בזמן הורדת המודל, מציינים את ההתקדמות שהושגה ואת הזמן שנותר.
- אם ספריית ה-AI בצד הלקוח מטפלת בהורדות של מודלים, תוכלו להשתמש בסטטוס של התקדמות ההורדה כדי להציג אותו למשתמש. אם התכונה הזו לא זמינה, כדאי לפתוח דיווח כדי לבקש אותה (או לתרום אותה!).
- אם אתם מטפלים בהורדות של מודלים בקוד שלכם, אתם יכולים לאחזר את המודל בקטעים באמצעות ספרייה, כמו fetch-in-chunks, ולהציג למשתמשים את התקדמות ההורדה.
- לקבלת עצות נוספות, אפשר לעיין במאמרים שיטות מומלצות לשימוש באינדיקטורים מונפשים של התקדמות ותכנון למקרה של המתנה ארוכה או הפרעה.
טיפול יעיל בהפרעות ברשת
הורדת מודלים עשויה להימשך זמן שונה, בהתאם לגודל שלהם. כדאי להחליט איך לטפל בהפרעות ברשת אם המשתמש עובר למצב אופליין. כשהדבר אפשרי, כדאי להודיע למשתמש על החיבור הלא תקין ולהמשיך את ההורדה אחרי שהחיבור יתחדש.
חיבור לא יציב הוא סיבה נוספת להורדה בחלקים.
העברת משימות יקרות ל-Web Worker
משימות יקרות, למשל שלבי הכנת מודל אחרי ההורדה, עלולות לחסום את השרשור הראשי ולגרום לחוויית משתמש לא יציבה. העברת המשימות האלה ל-web worker עוזרת.
כאן אפשר למצוא הדגמה והטמעה מלאה שמבוססות על web worker:
במהלך ההסקה
אחרי שהמודל יוריד ויהיה מוכן, תוכלו להריץ את ההסקה. יכול להיות שההסקה תהיה יקרה מבחינה חישובית.
העברת ההסקה ל-web worker
אם ההסקה מתבצעת דרך WebGL, WebGPU או WebNN, היא מסתמכת על ה-GPU. כלומר, הוא מתרחש בתהליך נפרד שלא חוסם את ממשק המשתמש.
עם זאת, בהטמעות שמבוססות על מעבד (כמו Wasm, שיכול לשמש כחלופה ל-WebGPU אם אין תמיכה ב-WebGPU), העברת ההסקה ל-web worker מאפשרת לדף להגיב במהירות – בדיוק כמו במהלך הכנת המודל.
יכול להיות שההטמעה תהיה פשוטה יותר אם כל הקוד שקשור ל-AI (אחזור מודל, הכנת מודל, הסקה) נמצא באותו מקום. לכן, אפשר לבחור ב-web worker גם אם ה-GPU לא בשימוש.
טיפול בשגיאות
גם אם בדקתם שהמודל אמור לפעול במכשיר, יכול להיות שהמשתמש יפעיל תהליך אחר שיצרוך משאבים באופן נרחב בשלב מאוחר יותר. כדי לצמצם את הבעיה:
- טיפול בשגיאות בהסקה צריך להקיף את ההסקה בבלוק
try
/catch
ולטפל בשגיאות זמן ריצה תואמות. - טיפול בשגיאות WebGPU, גם לא צפויות וגם GPUDevice.lost, שמתרחשת כשה-GPU אכן מתאפס כי המכשיר מתקשה.
ציון סטטוס ההסקה
אם ההסקה נמשכת יותר זמן ממה שמרגיש מיידי, כדאי להעביר למשתמש אות על כך שהמודל חושב. כדאי להשתמש באנימציות כדי להקל על ההמתנה ולהבטיח למשתמש שהאפליקציה פועלת כמצופה.
איך אפשר לבטל את ההסקה
מאפשרים למשתמש לשפר את השאילתה בזמן אמת, בלי שהמערכת תבזבז משאבים על יצירת תשובה שהמשתמש אף פעם לא יראה.