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

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

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

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

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

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

هناك زيادة في سرعة العصور..
الشكل 2: التقاط في الوقت الفعلي يُظهر سرعة العصور.

ملخّص

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

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

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

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

الخاتمة

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

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

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

شكر وتقدير

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