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

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

مع ذلك، هناك عقبة. يمكن أن يعمل نموذج 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 وWebGL وWebGPU وWebGPU بشكل أساسي أو استخدام برنامج فقط. ولسنا بمفردنا في هذه المشكلة، فهناك عدة مناقشات على الإنترنت لأشخاص واجهوا موقف مشابه، بما في ذلك النقاشات على قنوات دعم Chrome الرسمية (1)، (2).

تفعيل WebGPU وWebGPU

يعمل Chrome بلا واجهة مستخدم رسومية على إيقاف وحدة معالجة الرسومات تلقائيًا. لتفعيل هذه الميزة على نظام التشغيل Linux، عليك تطبيق جميع العلامات التالية عند تشغيل Chrome بلا واجهة مستخدم رسومية:

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

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

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

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

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

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

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

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

ملخّص

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

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

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

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

الخاتمة

يتوفر دليل مفصّل في مستنداتنا، لذا يمكنك تجربة الإعداد الكامل بنفسك.

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

أضِف نجمة على مستودع جيت هب لتلقّي أي تعديلات مستقبلية.

شكر وتقدير

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