اختبار نموذج الذكاء الاصطناعي (AI) على الويب في Google Colab

Jason Mayes
François Beaufort
François Beaufort
GitHub

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

وفي هذه الحالة، يكون المتصفّح هو متصفّح Chrome حقيقيًا متوافقًا مع الأجهزة، مقارنةً بمحاكاة البرامج.

سواء كنت من مطوّري الذكاء الاصطناعي على الويب أو ألعاب الويب أو الرسومات، أو كنت مهتمًا باختبار نموذج الذكاء الاصطناعي على الويب، هذا الدليل مناسب لك.

الخطوة 1: إنشاء ورقة ملاحظات Google Colab جديدة

1- انتقِل إلى colab.new لإنشاء ورقة ملاحظات Colab جديدة. يُفترض أن تبدو مشابهة للشكل 1. 2. اتّبِع رسالة المطالبة لتسجيل الدخول إلى حسابك على Google.
لقطة شاشة لعملية Colab الجديدة
الشكل 1: ورقة ملاحظات Colab جديدة.

الخطوة 2: الاتصال بخادم متوافق مع وحدة معالجة الرسومات T4

  1. انقر على ربط بالقرب من أعلى يسار دفتر الملاحظات.
  2. اختَر تغيير نوع وقت التشغيل:
    لقطة شاشة عن قرب تعرض خطوات تغيير وقت التشغيل
    الشكل 2. غيِّر وقت التشغيل في واجهة Colab.
  3. في النافذة المشروطة، اختَر وحدة معالجة الرسومات T4 كمُسرِّع للأجهزة. عند الاتصال، سيستخدم Colab مثيل Linux مع وحدة معالجة رسومات NVIDIA T4 مرفقة.
    لقطة شاشة لوحدة "تغيير نوع وقت التشغيل"
    الشكل 3: ضمن "مسرع الأجهزة"، اختَر وحدة معالجة الرسومات T4.
  4. انقر على حفظ.
  5. انقر على الزر اتصال للاتصال بوقت التشغيل. بعد مرور بعض الوقت، سيظهر على الزر علامة اختيار خضراء إلى جانب ذاكرة الوصول العشوائي (RAM) والرسومات البيانية لاستخدام القرص. وهذا يشير إلى أنه تم إنشاء الخادم بنجاح باستخدام أجهزتك المطلوبة.

أحسنت. لقد أنشأت للتو خادمًا مرفقًا بوحدة معالجة رسومات.

الخطوة 3: تثبيت برامج التشغيل والتبعيات الصحيحة

  1. انسخ والصق السطرين التاليين من التعليمة البرمجية في خلية التعليمة البرمجية الأولى من دفتر الملاحظات. في بيئة Colab، يتم إرفاق سطر الأوامر بعلامة تعجب قبل تنفيذ سطر الأوامر.

    !git clone https://github.com/jasonmayes/headless-chrome-nvidia-t4-gpu-support.git
!cd headless-chrome-nvidia-t4-gpu-support && chmod +x scriptyMcScriptFace.sh && ./scriptyMcScriptFace.sh

    # Update, install correct drivers, and remove the old ones.
apt-get install -y vulkan-tools libnvidia-gl-525

# Verify NVIDIA drivers can see the T4 GPU and that vulkan is working correctly.
nvidia-smi
vulkaninfo --summary

# Now install latest version of Node.js
npm install -g n
n lts
node --version
npm --version

# Next install Chrome stable
curl -fsSL https://dl.google.com/linux/linux_signing_key.pub | sudo gpg --dearmor -o /usr/share/keyrings/googlechrom-keyring.gpg
echo "deb [arch=amd64 signed-by=/usr/share/keyrings/googlechrom-keyring.gpg] http://dl.google.com/linux/chrome/deb/ stable main" | sudo tee /etc/apt/sources.list.d/google-chrome.list
sudo apt update
sudo apt install -y google-chrome-stable

# Start dbus to avoid warnings by Chrome later.
export DBUS_SESSION_BUS_ADDRESS="unix:path=/var/run/dbus/system_bus_socket"
/etc/init.d/dbus start

  2. انقر فوق بجوار الخلية لتنفيذ التعليمة البرمجية.

    لقطة شاشة لعملية Colab الجديدة
    الشكل 4.

  3. بعد الانتهاء من تنفيذ الرمز، تأكَّد من أنّ nvidia-smi طبع شيئًا مشابهًا للقطة الشاشة التالية لتأكيد أنّه تم إرفاق وحدة معالجة رسومات (GPU) وأنّه تم التعرّف عليه على الخادم. قد تحتاج إلى التمرير إلى وقت سابق في السجلات لعرض هذا الإخراج.

    الشكل 5: ابحث عن الناتج الذي يبدأ بـ "NVIDIA-SMI".

الخطوة 4: استخدام متصفِّح Chrome بلا واجهة مستخدم رسومية وتشغيله تلقائيًا

  1. انقر على زر الرمز "" لإضافة خلية رمز جديدة.
  2. يمكنك عندئذٍ كتابة الرمز المخصّص لاستدعاء مشروع Node.js باستخدام المعلَمات المفضّلة لديك (أو استدعاء google-chrome-stable مباشرةً في سطر الأوامر). لدينا أمثلة عن كليهما.

الجزء "أ": استخدام Chrome بلا واجهة مستخدم رسومية مباشرةً في سطر الأوامر

# Directly call Chrome to dump a PDF of WebGPU testing page
# and store it in /content/gpu.pdf
!google-chrome-stable \
--no-sandbox \
--headless=new \
--use-angle=vulkan \
--enable-features=Vulkan \
--disable-vulkan-surface \
--enable-unsafe-webgpu \
--print-to-pdf=/content/gpu.pdf https://webgpureport.org

في المثال، تم تخزين الملف الناتج بتنسيق PDF في /content/gpu.pdf. ولعرض هذا الملف، عليك توسيع المحتوى . بعد ذلك، انقر على لتنزيل ملف PDF على جهازك المحلي.

لقطة شاشة لعملية Colab الجديدة
الشكل 6: شاهِد خطوات تنزيل ملف PDF في لقطة الشاشة هذه لواجهة Colab.

الجزء ب: توجيه Chrome باستخدام Puppeteer

لقد قدمنا مثالاً مبسطًا باستخدام Puppeteer للتحكّم في Chrome بلا واجهة مستخدم رسومية الذي يمكن تشغيله على النحو التالي:

# Call example node.js project to perform any task you want by passing
# a URL as a parameter
!node headless-chrome-nvidia-t4-gpu-support/examples/puppeteer/jPuppet.js chrome://gpu

في مثال jPuppet، يمكننا استدعاء برنامج Node.js النصي لإنشاء لقطة شاشة. ولكن كيف يعمل هذا؟ اطّلع على هذه الخطوات في ما يتعلق برمز Node.js في jPuppet.js.

تحليل رمز العقدة jPuppet.js

أولاً، عليك استيراد Puppeteer. يتيح لك هذا الإجراء التحكّم في Chrome عن بُعد باستخدام Node.js:

import puppeteer from 'puppeteer';

بعد ذلك، تحقق من وسيطات سطر الأوامر التي تم تمريرها إلى تطبيق العقدة. تأكَّد من ضبط الوسيطة الثالثة، والتي تمثل عنوان URL للانتقال إليه. عليك فحص الوسيطة الثالثة هنا لأن الوسيطتين الأوليتين تستدعيان العقدة نفسها والنص البرمجي الذي نقوم بتشغيله. يحتوي العنصر الثالث بالفعل على المعلمة الأولى التي تم تمريرها إلى برنامج العقدة:

const url = process.argv[2];
if (!url) {
  throw "Please provide a URL as the first argument";
}

حدِّد الآن دالة غير متزامنة باسم runWebpage(). يؤدي هذا إلى إنشاء كائن متصفح تم ضبطه باستخدام وسيطات سطر الأوامر لتشغيل ثنائي Chrome بالطريقة التي نحتاج إليها لتشغيل WebGL وWebGPU على النحو الموضَّح في تفعيل WebGPU وWebGPU.

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

أنشِئ كائن صفحة متصفحًا جديدًا يمكنك استخدامه لاحقًا لزيارة أي عنوان URL:

const page = await browser.newPage();

يمكنك بعد ذلك إضافة أداة معالجة أحداث للاستماع إلى أحداث console.log عندما تنفّذ صفحة الويب JavaScript. يتيح لك ذلك تسجيل الرسائل على سطر أوامر "عقدة" وفحص أيضًا نص وحدة التحكّم بحثًا عن عبارة خاصة (في هذه الحالة، captureAndEnd) تؤدي إلى ظهور لقطة شاشة ثم إنهاء عملية المتصفِّح في Node. يفيد ذلك في صفحات الويب التي تحتاج إلى بذل مجهود كبير قبل أخذ لقطة شاشة، وهي تستغرق وقتًا غير محدّد.

page.on('console', async function(msg) {
  console.log(msg.text());
  if (msg.text() === 'captureAndEnd') {
    await page.screenshot({ path: '/content/screenshotEnd.png' });
    await browser.close();
  }
});

وأخيرًا، اطلب من الصفحة زيارة عنوان URL المحدد وخذ لقطة شاشة أولية عند تحميل الصفحة.

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

  await page.goto(url,  { waitUntil: 'networkidle2' });
  await page.screenshot({path: '/content/screenshot.png'});
  if (url === 'chrome://gpu') {
    await browser.close();
  }
}
runWebpage();

تعديل package.json

ربما لاحظت أننا استخدمنا عبارة استيراد في بداية ملف jPuppet.js. يجب أن تضبط السمة package.json قيم النوع على أنّها module، وإلا ستظهر رسالة خطأ تفيد بأنّ الوحدة غير صالحة.

 {
    "dependencies":  {
      "puppeteer": "*"
    },
    "name": "content",
    "version": "1.0.0",
    "main": "jPuppet.js",
    "devDependencies": {},
    "keywords": [],
    "type": "module",
    "description": "Node.js Puppeteer application to interface with headless Chrome with GPU support to capture screenshots and get console output from target webpage"
}

هذا كل ما في الأمر. يؤدي استخدام Puppeteer إلى تسهيل التعامل مع Chrome بشكل آلي.

تم الإجراء بنجاح

يمكننا الآن التحقق من أنّ مصنِّفTensorFlow.js Fashion MNIST يمكنه التعرّف بشكل صحيح على بنطال واحد في صورة، وستتم المعالجة من جهة العميل في المتصفح باستخدام وحدة معالجة الرسومات.

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

لقطة شاشة لعملية Colab الجديدة
الشكل 7: التقاط ناجح لنموذج TensorFlow.js المسرّع من خلال وحدة معالجة الرسومات والذي يمكنه التعرّف على جانب عميل الملابس في المتصفح في الوقت الفعلي

المراجِع

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