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

François Beaufort
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 והתוצאות הבאות אמורות להתקבל:

הסטטוס של תכונת הגרפיקה
OpenGL: מושבת
Vulkan: מושבת
WebGL: תוכנה בלבד, שיפור המהירות באמצעות חומרה לא זמין.
WebGL2: תוכנה בלבד, שיפור המהירות באמצעות חומרה לא זמין.
WebGPU: מושבת

זוהו בעיות.
WebGPU הושבת באמצעות רשימת חסימה או שורת הפקודה.

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

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

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

  • הדגל --no-sandbox משבית את ארגז החול לאבטחה של Chrome, שמבודד את עיבוד הדפדפן משאר המערכת. הפעלת Chrome ברמה הבסיסית (root) ללא אין תמיכה בארגז החול הזה.
  • התכונה הניסיונית --headless=new מפעילה את Chrome עם התכונות החדשות והמשופרות מצב 'דפדפן ללא GUI', ללא ממשק משתמש גלוי.
  • הדגל --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 והערך משתנה מ- מושבת לתוכנה בלבד.

הסטטוס של תכונת הגרפיקה
OpenGL: מושבת
Vulkan: מושבת
WebGL: תוכנה בלבד, שיפור המהירות באמצעות חומרה לא זמין.
WebGL2: תוכנה בלבד, שיפור המהירות באמצעות חומרה לא זמין.
WebGPU: תוכנה בלבד, שיפור המהירות באמצעות חומרה לא זמין.

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

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

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

פלט ברירת המחדל לא מזהה NVIDIA T4 GPU.
פרטי הנהג/ת
GL_RENDERER ANGLE (Google, Vulkan 1.3.0 (SwiftShader Device (Subzero) (0x0000C0DE)), SwiftShader -5.0.0)

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

הפלט המעודכן לאחר התקנת מנהלי ההתקנים.
פרטי הנהג/ת
GL_RENDERER ANGLE (NVIDIA Corporation, Tesla T4/PCIe/SSE2, OpenGL ES 3.2 NVIDIA 525.105.17)

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

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

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

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

הסטטוס של תכונת הגרפיקה
OpenGL: מופעל
Vulkan: מופעל
WebGL: החומרה האיצה את הביצועים, אבל הביצועים שלה ירדו.
WebGL2: החומרה האיצה את הביצועים, אבל הביצועים שלה ירדו.
WebGPU: החומרה האיצה את הביצועים, אבל הביצועים שלה ירדו.

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

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

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

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

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

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

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

תקופות האימון נעות בקצב איטי יותר.
איור 1: תיעוד בזמן אמת שמראה כמה זמן נמשך זמן האימון של כל תקופת אימון (בשניות).

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

יש עלייה במהירות בתקופות של זמן מערכת.
איור 2: צילום בזמן אמת שמציג את המהירות של תקופות זמן שונות.

סיכום

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

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

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

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

סיכום

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

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

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

אישורים

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