שיפור בדיקות המודלים של Web AI: WebGPU, WebGL ו-Chrome ללא GUI

Jason Mayes

François Beaufort

חדשות טובות! יצרת אפליקציה מגניבה של Web AI שמפעילה מודלים של למידת מכונה ישירות במכשיר של המשתמש. הוא פועל לחלוטין בדפדפן האינטרנט בצד הלקוח, בלי להסתמך על הענן. הפריט הזה במכשיר עיצוב משפר את פרטיות המשתמשים, משפר את הביצועים ומפחית עלויות באופן משמעותי.

אבל יש מכשול. שלך המודל TensorFlow.js יכול לפעול על מעבדים (CPUs) (WebAssembly) ומעבדי GPU חזקים יותר (באמצעות WebGL ו WebGPU). השאלה: איך אפשר לבצע באופן עקבי אוטומציה של בדיקות הדפדפן עם החומרה שנבחרה?

שמירה על עקביות היא חיונית להשוואה בין מודלים של למידת מכונה של הביצועים לאורך זמן, ככל שאתם מחדשים אותם ומשפרים אותם, לפני הפריסה של משתמשים בעולם האמיתי במכשיר שלהם.

יכול להיות קשה יותר להגדיר סביבת בדיקה עקבית עם מעבדי GPU מה מצופה. בפוסט הזה נשתף את הבעיות שניצבנו בפניהן ואת הדרכים שבהן פתרנו אותן, כדי שתוכלו לשפר את ביצועי האפליקציה שלכם.

המידע הזה לא מיועד רק למפתחי AI באינטרנט! אם אתם עובדים על גיימינג באינטרנט, או גרפי, הפוסט הזה חשוב גם לך.

מה כולל ארגז הכלים שלנו לאוטומציה

הנה מה שאנחנו משתמשים בו:

• סביבה: Google Colab מבוסס-Linux notebook שמחובר ל-NVIDIA GPU מסוג T4 או V100 GPU. תוכלו להשתמש בפלטפורמות ענן אחרות, כמו Google Cloud (GCP), אם עדיף.
• דפדפן: Chrome תומך ב-WebGPU, יורש מתקדם של WebGL, מביא לאינטרנט את הפיתוחים של ממשקי API מודרניים של GPU.
• Automation: Puppeteer היא ספריית Node.js שמאפשרת שולטים בדפדפנים באופן פרוגרמטי באמצעות JavaScript. עם Puppeteer, אנחנו יכולים להפוך את Chrome לאוטומטי במצב 'דפדפן ללא GUI', כלומר הדפדפן יפעל ללא בפועל, בשרת. אנחנו משתמשים מצב 'דפדפן ללא GUI', ולא מדור קודם.

אימות הסביבה

הדרך הטובה ביותר לבדוק אם ההגדרה 'שיפור מהירות באמצעות חומרה' מופעלת ב-Chrome היא מקלידים chrome://gpu בסרגל הכתובות. אפשר מבצעים את הפעולה המקבילה באמצעות Puppeteer באופן פרוגרמטי באמצעות console.log או לשמור את הדוח המלא כקובץ PDF כדי לבדוק אותו באופן ידני:

/* Incomplete example.js */
import puppeteer from 'puppeteer';

// Configure launch parameters: Expands later
const browser = await puppeteer.launch({
  headless: 'new',
  args:  ['--no-sandbox']
});

const page = await browser.newPage();
await page.goto('chrome://gpu');

// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({ path: './gpu.pdf' });

await browser.close();

פותחים את chrome://gpu ואמורות להתקבל התוצאות הבאות:

לא התחלה טובה. ברור למדי שזיהוי החומרה נכשל. WebGL, WebGL2 ו-WebGPU מושבתים למעשה, או שתוכנות בלבד. רביעי אנחנו לא לבד בבעיה הזו, יש דיונים רבים באינטרנט על אנשים במצב דומה, גם בערוצי התמיכה הרשמיים של Chrome (1), (2).

הפעלת תמיכה ב-WebGPU וב-WebGL

כברירת מחדל, דפדפן Chrome ללא ממשק גרפי משביתים את ה-GPU. כדי להפעיל אותו ב-Linux, צריך להוסיף את כל הדגלים הבאים כשמריצים את Chrome ללא ממשק משתמש:

• הדגל --no-sandbox משבית את ארגז החול לאבטחה של Chrome, שמבודד את עיבוד הדפדפן משאר המערכת. הפעלת Chrome ברמה הבסיסית (root) ללא אין תמיכה בארגז החול הזה.
• הדגל --headless=new מפעיל את Chrome במצב ללא מסך החדש והמשופר, ללא ממשק משתמש גלוי.
• הדגל --use-angle=vulkan מורה ל-Chrome להשתמש בקצה העורפי של Vulkan עבור ANGLE, שמתרגם קריאות ל-OpenGL ES 2/3 לקריאות ל-Vulkan API.
• הדגל --enable-features=Vulkan מפעיל את הקצה העורפי של Vulkan Graphics הרכבה ורסטרציה ב-Chrome.
• הדגל --disable-vulkan-surface משבית את ה-vulkan VK_KHR_surface של מכונה. במקום להשתמש ב-replacementchain, Bit blit את תוצאת העיבוד שמופיעה במסך.
• הדגל --enable-unsafe-webgpu מפעיל את WebGPU API הניסיוני ב-Chrome ב-Linux ומשבית את רשימת החסימות של המתאמים.

עכשיו נשלב את כל השינויים שביצענו עד עכשיו. הנה התסריט המלא.

/* Complete example.js */
import puppeteer from 'puppeteer';

// Configure launch parameters
const browser = await puppeteer.launch({
  headless: 'new',
  args: [
    '--no-sandbox',
    '--headless=new',
    '--use-angle=vulkan',
    '--enable-features=Vulkan',
    '--disable-vulkan-surface',
    '--enable-unsafe-webgpu',
  ]
});

const page = await browser.newPage();
await page.goto('chrome://gpu');

// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({path: './gpu.pdf'});

await browser.close();

מריצים את הסקריפט שוב. לא זוהו בעיות ב-WebGPU והערך משתנה מ- מושבת לתוכנה בלבד.

עם זאת, שיפור המהירות באמצעות חומרה עדיין לא זמין, ה-GPU של NVIDIA T4 זוהה.

התקנת מנהלי ההתקנים הנכונים של GPU

חקרנו לעומק את הפלט של chrome://gpu בעזרת כמה מומחי GPU בצוות Chrome. מצאנו בעיות במנהלי ההתקנים שמוגדרים כברירת מחדל שמותקנים Linux Colab דבר שעלול לגרום לבעיות ב-Vulkan, דבר שגרם ל-Chrome לא לזהות NVIDIA T4 GPU ברמת GL_RENDERER כפי שמוצג בפלט הבא. הזה גורמת לבעיות עם דפדפן Chrome ללא ממשק גרפי.

לכן, התקנת מנהלי ההתקנים הנכונים שהותאמה תפתור את הבעיה.

כדי להתקין את מנהלי ההתקנים הנכונים, מריצים את הפקודות הבאות במהלך ההגדרה. שתי השורות האחרונות עוזרות לך לתעד את הפלט של מה שמנהלי ההתקנים של NVIDIA מזהים עם vulkaninfo.

apt-get install -y vulkan-tools libnvidia-gl-525

// Verify the NVIDIA drivers detects along with vulkaninfo
nvidia-smi
vulkaninfo --summary

עכשיו מריצים שוב את הסקריפט ומקבלים את התוצאה הבאה. 🎉

באמצעות שימוש במנהלי ההתקנים ובדגלים הנכונים בזמן הפעלת Chrome, יש לנו עכשיו WebGPU וב-WebGL באמצעות מצב 'דפדפן ללא GUI' חדש ומבריק.

מאחורי הקלעים: החקירה של הצוות שלנו

לאחר מחקרים רבים, לא מצאנו שיטות עבודה שמתאימות לסביבה שמצאנו היה צריך לבצע ב-Google Colab, למרות שהיו כמה פוסטים של תקווה שעבד בסביבות אחרות, וזה היה מבטיח. בסופו של דבר, לא הצלחנו לשחזר את ההצלחה שלהם בסביבת Colab NVIDIA T4, כי היו לנו 2 בעיות מרכזיות:

1. חלק משילובי הדגלים מאפשרים זיהוי של ה-GPU, אבל לא מאפשרים להשתמש ב-GPU.
2. דוגמאות לפתרונות עבודה של צדדים שלישיים שהשתמשו בגרסה הישנה של Chrome ללא GUI שבשלב מסוים תוצא משימוש ותופסק גרסה חדשה. היינו צריכים פתרון שעבד עם הגרסה החדשה של Headless Chrome כדי לאפשר הגנה טובה יותר לעתיד.

וידאנו שנעשה שימוש מתחת ל-GPU על ידי הרצת דוגמה לדף אינטרנט של TensorFlow.js לזיהוי תמונה, שבו אימנו את המודל לזהות דוגמיות של בגדים (למשל עולם" של למידת מכונה).

במחשב רגיל, 50 מחזורי אימון (שנקראים 'עידנים') אמורים לפעול תוך פחות משנייה. התקשרות ל-Chrome ללא ממשק גרפי במצב ברירת המחדל שלו, ניתן להיכנס את הפלט של לוח JavaScript לשורת הפקודה בצד השרת של Node.js כדי לראות איך מהר מאוד מחזורי האימון האלה.

כצפוי, כל תקופת אימון נמשכה הרבה יותר זמן מהצפוי (כמה שניות), מה שמצביע על כך ש-Chrome חזר להרצה רגילה של JS במעבד במקום לנצל את ה-GPU:

אחרי שמתקנים את מנהלי ההתקנים ומשתמשים בשילוב הנכון של דגלים עבור 'דפדפן ללא GUI' ב-Chrome, הרצה מחדש של הדוגמה לאימון TensorFlow.js מניבה תוצאות הרבה יותר מהירות אימונים.

סיכום

טכנולוגיית ה-AI באינטרנט גדלה באופן אקספוננציאלי מאז הקמתה ב-2017. עם טכנולוגיות דפדפן כמו WebGPU , WebGL ו- WebAssembly, מודל למידת מכונה ניתן להאיץ עוד יותר פעולות מתמטיות בצד הלקוח.

נכון ל-2023, ב-TensorFlow.js וב-MediaPipe Web התבצעו יותר ממיליארד הורדות של מודלים וספריות - אבן דרך היסטורית וסימן לאופן שבו מפתחים ומהנדסים עוברים לאמץ את השימוש ב-AI בדור הבא שלהם באינטרנט כדי ליצור כמה פתרונות מדהימים במיוחד.

אחרי הצלחה גדולה בשימוש, נדרשת אחריות גדולה. ברמת השימוש הזו בסביבת ייצור, עולה הצורך לבדוק בינה מלאכותית מבוססת-דפדפן בצד הלקוח בסביבת דפדפן אמיתית, ובמקביל גם ניתנים להרחבה, ובתוך הגדרת חומרה סטנדרטית ידועה.

על ידי ניצול העוצמה המשולבת של Chrome ו-Puppeteer החדשים ללא ממשק גרפי, אתם יכולים לבדוק עומסי עבודה כאלה בצורה סטנדרטית כדי להבטיח תוצאות עקביות ואמינות.

סיכום

מדריך מפורט זמין במסמכי התיעוד שלנו, כדי שתוכלו לנסות את ההגדרה המלאה בעצמכם.

אם המידע הזה הועיל לך, אפשר להגיד תודה LinkedIn, X (לשעבר Twitter), או כל אחד אחר הרשת החברתית שבה אתם משתמשים באמצעות ה-hashtag הבא: #WebAI. נשמח לשמוע כל אחד המשוב שלך כדי שנדע לכתוב עוד דברים כאלה בעתיד.

מוסיפים כוכב למאגר ב-GitHub כדי לקבל עדכונים עתידיים.

אישורים

תודה רבה לכל חברי צוות Chrome שעזרו לנפות את הבאגים שגרמו לנהג עם הבעיות ב-WebGPU שהתמודדנו בפתרון הזה, תודה מיוחדת ג'סלין יין וגם אלכסנדרה ווייט על העזרה ביצירת מילים בפוסט הזה בבלוג. תודה ליולי נוביקוב, אנדריי קוסיאקוב אלכס רודנקו שהיה חשוב וחשוב ביצירת הפתרון הסופי והעובד.