רוב תכונות ה-AI באינטרנט מסתמכות על שרתים, אבל ה-AI בצד הלקוח פועל ישירות בדפדפן של המשתמש. כך אפשר ליהנות מהיתרונות הבאים: זמן אחזור קצר, עלויות מופחתות בצד השרת, אין צורך במפתח API, פרטיות משופרת של המשתמשים וגישה אופליין. אפשר להטמיע AI בצד הלקוח שפועל בדפדפנים שונים באמצעות ספריות JavaScript כמו TensorFlow.js, Transformers.js ו-MediaPipe GenAI.
בנוסף, AI בצד הלקוח גורם לאתגרים בביצועים: המשתמשים צריכים להוריד יותר קבצים והדפדפן שלהם צריך לעבוד קשה יותר. כדי שהיא תפעל בצורה טובה, כדאי לשקול:
- תרחיש השימוש שלכם. האם AI מצד הלקוח הוא הפתרון המתאים לתכונה שלכם? האם התכונה היא חלק מתהליך קריטי שעובר המשתמש, ואם כן, האם יש לכם אפשרות כזו?
- שיטות מומלצות להורדה ולשימוש במודלים מידע נוסף מפורט בהמשך.
לפני הורדת המודל
ספריית המיינד והגודל של המודל
כדי להטמיע בינה מלאכותית בצד הלקוח, צריך מודל ובדרך כלל ספרייה. כשאתם בוחרים את הספרייה, חשוב להעריך את הגודל שלה כמו כל כלי אחר.
גם גודל המודל חשוב. מה נחשב כגדול עבור מודל AI תלוי. 5MB יכולים לשמש ככלל אצבע שימושי: זהו גם הפרמנטיל ה-75 של גודל דף האינטרנט החציוני. אפשר להשתמש גם ב-10MB.
ריכזנו כאן כמה שיקולים חשובים לגבי גודל המודל:
- הרבה מודלים של AI ספציפיים למשימה יכולים להיות קטנים מאוד. מודל כמו BudouX, שמאפשר פיצול מדויק של תווים בשפות אסייתיות, הוא רק 9.4KB בפורמט GZipped. מודל זיהוי השפה של MediaPipe הוא 315KB.
- גם מודלים של ראייה יכולים להיות בגודל סביר. הדגם Handpose וכל המשאבים הקשורים תופסים בסך הכול 13.4MB. הגודל הזה גדול בהרבה מרוב החבילות המקוצרות של ממשק הקצה, אבל הוא דומה לגודל החציוני של דף אינטרנט, שהוא 2.2MB (2.6MB במחשב).
- מודלים של בינה מלאכותית גנרטיבית יכולים לחרוג מהגודל המומלץ למקורות מידע באינטרנט. DistilBERT, שנחשב ל-LLM קטן מאוד או למודל NLP פשוט (הדעות שונות), הוא 67MB. גם מודלים גדולים של שפה, כמו 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 אכן מתאפס כי המכשיר מתקשה.
ציון סטטוס ההסקה
אם ההסקה נמשכת זמן רב יותר ממה שנראה מיידי, צריך לאותת למשתמש שהמודל חושב. כדאי להשתמש באנימציות כדי להקל על ההמתנה ולהבטיח למשתמש שהאפליקציה פועלת כצפוי.
להפוך את ההסקה לניתנת לביטול
מאפשרים למשתמש לשפר את השאילתה בזמן אמת, בלי שהמערכת תבזבז משאבים על יצירת תשובה שהמשתמש אף פעם לא יראה.