تعزيز اختبار نموذج الذكاء الاصطناعي (AI) للويب: WebGPU وWebG وChrome بلا واجهة مستخدم رسومية

Jason Mayes
François Beaufort
François Beaufort
GitHub

نحمل لك خبرًا سارًّا. لقد أنشأت تطبيقًا رائعًا للذكاء الاصطناعي على الويب التي تشغِّل نماذج التعلم الآلي مباشرةً على جهاز المستخدم. إنه يعمل بالكامل على متصفح الويب من جهة العميل، بدون الاعتماد على السحابة. هذا على الجهاز فقط التصميم يحسّن خصوصية المستخدم ويعزز الأداء ويقلل التكاليف بشكل ملحوظ.

مع ذلك، هناك عقبة. إنّ يمكن أن يعمل نموذج TensorFlow.js على كل من وحدات المعالجة المركزية (CPU) (WebAssembly) ووحدات معالجة الرسومات الأكثر فعالية (من خلال WebGL و WebGPU). السؤال هو: كيف يمكنك إجراء اختبار المتصفّح آليًا بشكلٍ متسق باستخدام الأجهزة المحدّدة؟

إنّ الحفاظ على الاتساق أمر مهم لمقارنة أداء نماذج تعلُّم الآلة بمرور الوقت أثناء تكرارها وتحسينها، قبل نشرها لكي يستخدمها المستخدمون في العالم الواقعي على أجهزتهم.

قد يكون إعداد بيئة اختبار متسقة باستخدام وحدات معالجة الرسومات أكثر صعوبة من متوقع. في هذه المشاركة على مدوّنتنا، سنشارك المشاكل التي واجهناها وكيفية حلّها، كي تتمكّن من تحسين أداء تطبيقك.

لا يقتصر الأمر على مطوّري برامج الذكاء الاصطناعي على الويب. إذا كنت تعمل في مجال ألعاب الويب أو الرسومات، ستكون هذه المشاركة مفيدة لك أيضًا.

محتوى مجموعة أدوات التشغيل الآلي

إليك الميزات التي نستخدمها:

  • البيئة: Google Colab المستند إلى Linux دفتر ملاحظات متصل بوحدة NVIDIA وحدة معالجة رسومات T4 أو V100 يمكنك استخدام منصات سحابية أخرى، مثل Google Cloud. (GCP) إذا كنت تفضّل ذلك
  • المتصفّح: يتيح Chrome استخدام WebGPU، وهو خليفة قوي لواجهة برمجة التطبيقات WebGL، ويقدّم الميزات المتقدّمة لواجهات برمجة تطبيقات وحدات معالجة الرسومات الحديثة على الويب.
  • التشغيل الآلي: Puppeteer هو مكتبة Node.js تتيح التحكم في المتصفحات آليًا باستخدام JavaScript. باستخدام Puppeteer، يمكننا Chrome في وضع التشغيل بلا واجهة مستخدم رسومية، ما يعني أنّ المتصفّح يعمل بدون وواجهة مرئية على الخادم. نستخدم النموذج المحسّن وضع التشغيل بلا واجهة مستخدم رسومية الجديد، وليس القديم.

التأكّد من البيئة

إن أفضل طريقة للتحقق مما إذا كان تسريع الأجهزة مفعَّلاً في 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 بلا واجهة مستخدم إلى إيقاف وحدة معالجة الرسومات. لتفعيله على نظام التشغيل Linux، طبِّق جميع العلامات التالية عند تشغيل إصدار بلا واجهة مستخدم رسومية. متصفِّح Chrome:

  • توقِف العلامة --no-sandbox وضع الحماية للأمان في Chrome، والذي يعزل المتصفح من بقية النظام. تشغيل Chrome كجذر بدون وضع الحماية هذا غير مدعم.
  • يعمل العلم --headless=new على تشغيل Chrome مع الميزات الجديدة والمحسّنة وضع التشغيل بلا واجهة مستخدم رسومية، بدون أي واجهة مستخدم مرئية
  • تطلب العلامة --use-angle=vulkan من Chrome استخدام خلفية Vulkan لـ ANGLE يترجم طلبات OpenGL ES 2/3 إلى طلبات Vulkan API.
  • تتيح العلامة --enable-features=Vulkan تشغيل الواجهة الخلفية لرسومات Vulkan في والتجميع والبكسلة في Chrome.
  • تعمل علامة --disable-vulkan-surface على إيقاف VK_KHR_surface vulkan. المثيل. فبدلاً من استخدام سلسلة التبديل، يُستخدم 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: البرامج فقط، وميزة تسريع الأجهزة غير متاحة.

ومع ذلك، لا تزال ميزة تسريع الأجهزة غير متاحة، ولن يتم استخدام وحدة معالجة الرسومات NVIDIA T4 الجديدة.

تثبيت برامج تشغيل وحدة معالجة الرسومات الصحيحة

لقد فحصنا عن كثب نتائج "chrome://gpu"، مع بعض الخبراء في وحدات معالجة الرسومات. في فريق Chrome. لقد رصدنا مشاكل في برامج التشغيل التلقائية المثبَّتة على Linux Colab مما يتسبب في حدوث مشكلات في Vulkan، مما يؤدي إلى عدم تمكن Chrome من اكتشاف وحدة معالجة الرسومات NVIDIA T4 على مستوى GL_RENDERER كما هو موضّح في الإخراج التالي. هذا النمط يتسبب في حدوث مشاكل في Chrome بلا واجهة مستخدم رسومية.

لا ترصد النتيجة التلقائية وحدة معالجة الرسومات NVIDIA T4.
معلومات السائق
GL_RENDERER ANGLE (Google وVulkan 1.3.0 (SwiftShader Device (Subzero) (0x0000C0DE)) وSwiftShader driver-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: مفعّلة
فولكان: مفعّلة
WebGL: تم تسريع الأجهزة ولكن بأداء أقل.
‫WebGL2: تم تسريع الأجهزة ولكن بأداء أقل.
WebGPU: تم تسريع الأجهزة ولكن بأداء أقل.

باستخدام برامج التشغيل والعلامات الصحيحة عند تشغيل Chrome، أصبح لدينا الآن WebGPU متوافقة مع WebGL باستخدام الوضع الجديد اللامع بلا واجهة مستخدم رسومية.

ما وراء الكواليس: تحقيق فريقنا

بعد الكثير من البحث، لم نعثر على طرق عمل للبيئة التي اللازمة للتنفيذ في Google Colab، على الرغم من وجود بعض مشاركات تبعث على الأمل التي عملت في بيئات أخرى، وكان ذلك واعدًا. في النهاية، لم نكن تكرار نجاحها في بيئة Colab NVIDIA T4، حيث تمكّنا من المشكلات الرئيسية:

  1. تسمح بعض مجموعات العلامات برصد وحدة GPU، ولكنّها لا تسمح لك باستخدام وحدة GPU فعليًا.
  2. أمثلة على حلول العمل التي ابتكرتها جهات خارجية والتي استخدمت الإصدار القديم من Chrome بلا واجهة مستخدم رسومية والذي سيتم إيقافه في مرحلة ما لصالح الإصدار الجديد. احتجنا إلى حلّ يتوافق مع الإصدار الجديد من Headless Chrome ليكون أكثر ملاءمةً للمستقبل.

أكّدنا على قلة استخدام وحدة GPU من خلال تشغيل مثال على صفحة الويب TensorFlow.js للتعرّف على الصور، ومن خلاله، دربنا نموذجًا للتعرف على عينات الملابس (نوعًا ما مثل " العالم التعلم الآلي).

على جهاز عادي، من المفترض أن يتم تنفيذ 50 دورة تدريب (المعروفة باسم "العهود") في مدّة تقل عن ثانية واحدة لكل دورة. عند الاتصال بمتصفّح Chrome بلا واجهة مستخدم رسومية بحالته التلقائية، يمكننا تسجيل إخراج وحدة تحكم JavaScript إلى سطر الأوامر من جانب الخادم Node.js لمعرفة كيف السرعة التي تستغرقها هذه الدورات التدريبية بالفعل.

وكما هو متوقع، استغرقت كل فترة تدريب وقتًا أطول بكثير من المتوقع (العديد من ثانية)، ما يشير إلى عودة Chrome إلى التنفيذ القديم لوحدة المعالجة المركزية (CPU) JS بدلاً من استخدام وحدة معالجة الرسومات:

وتتحرك فترات التدريب بوتيرة أبطأ.
الشكل 1: تسجيل في الوقت الفعلي يوضّح المدة التي استغرقها تنفيذ كل فترة تدريب (بالثواني)

بعد إصلاح برامج التشغيل واستخدام المجموعة الصحيحة من العلامات لإصدار Chrome بدون واجهة مستخدم رسومية، يؤدي إعادة تشغيل مثال تدريب TensorFlow.js إلى تسريع دورات التدريب بدرجة كبيرة.

هناك زيادة في سرعة العصور..
الشكل 2: تسجيل في الوقت الفعلي يعرض تسريع فترات التدريب.

ملخّص

تطوّر الذكاء الاصطناعي على الويب بشكل كبير منذ إنشائها في عام 2017. باستخدام تقنيات المتصفح مثل WebGPU وWebGL WebAssembly، وهو نموذج لتعلُّم الآلة يمكن تسريع العمليات الرياضية من جانب العميل.

اعتبارًا من عام 2023، تجاوزت TensorFlow.js وMediaPipe Web أكثر من مليار عملية تنزيل من والنماذج والمكتبات — معلم رئيسي تاريخي ودلالة على كيفية عمل الويب يتحوّل المطوّرون والمهندسون إلى استخدام الذكاء الاصطناعي في الجيل التالي تطبيقات الويب لإنشاء بعض الحلول الرائعة حقًا.

مع النجاح الكبير في الاستخدام، تقع على عاتقنا مسؤولية كبيرة. في هذا المستوى من الاستخدام في أنظمة الإنتاج، تنشأ الحاجة إلى اختبار الذكاء الاصطناعي من جهة العميل النماذج في بيئة متصفح حقيقية، مع أن تكون أيضًا قابلة للتطوير وقابلة للتطوير تلقائيًا، وضمن أي جهاز موحّد معروف.

من خلال الاستفادة من القوة المجمعة لكلّ من "Chrome بلا واجهة مستخدم رسومية" وPuppeteer الجديدَين، يمكنك اختبار هذه الأعباء الثقيلة بثقة في بيئة موحّدة وقابلة للتكرار، ما يضمن لك نتائج متّسقة وموثوقة.

الخاتمة

يتوفر دليل مفصّل في وثائقنا، حتى يمكنك تجربة الإعداد بالكامل بنفسك.

إذا وجدت هذا مفيدًا، فأرسل صيحة على LinkedIn, X (المعروف سابقًا باسم Twitter)، أو أي شيء شبكة اجتماعية تستخدمها من خلال علامة التصنيف #WebAI. سيكون من الرائع سماع أي ملاحظاتكم حتى نعرف أننا لكتابة المزيد من مثل هذه الأمور في المستقبل.

إضافة نجمة على مستودع GitHub لتلقي أي تحديثات مستقبلية.

شكر وتقدير

نتوجّه بالشكر إلى جميع أعضاء فريق Chrome الذين ساعدوا في تصحيح أخطاء برنامج التشغيل وقد واجهنا مشاكل WebGPU في هذا الحل، ويرجع الفضل في ذلك إلى جيسلين ين ألكسندرا وايت للمساعدة في تحسين الكلمات مشاركة المدونة هذه. بفضل يولي نوفيكوف، وأندري كوزياكوف، أليكس رودينكو الذي كان له دور رائد في إيجاد الحل النهائي والعملي.