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

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

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

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

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

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

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

1. انقر على رمز الاتصال arrow_drop_down بالقرب من أعلى يسار دفتر الملاحظات.
2. انقر على تغيير نوع بيئة التشغيل:

   

3. في النافذة المنبثقة، اختَر وحدة معالجة الرسومات T4 كمسرِّع الأجهزة. عند الاتصال، ستستخدم Colab مثيل Linux مع إرفاق وحدة معالجة الرسومات NVIDIA T4.

   

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

أحسنت، لقد أنشأت للتو خادمًا به وحدة GPU.

الخطوة 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
   

   • يمكنك فحص النص البرمجي على GitHub للاطّلاع على الرمز البرمجي الأوّلي لسطر الأوامر الذي ينفذه هذا النص البرمجي.

   # 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. انقر على play_circle بجانب الخلية ل ejecutan الرمز.

   

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

   

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

1. انقر على الزر add رمز لإضافة خلية رمز برمجي جديدة.
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. ولعرض هذا الملف، عليك توسيع المحتوى folder. بعد ذلك، انقر على more_vert لتنزيل ملف PDF على جهازك المحلي.

الجزء ب: توجيه 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.

تقسيم رمز Node.js في jPuppet.js

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

import puppeteer from 'puppeteer';

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

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

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

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. يتيح لك ذلك تسجيل الرسائل على سطر أوامر Node وفحص نص وحدة التحكّم أيضًا بحثًا عن عبارة خاصة (في هذه الحالة، 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 classifier التعرّف بشكل صحيح على بنطلون في صورة، وذلك من خلال المعالجة العميقة في المتصفّح باستخدام وحدة معالجة الرسومات (GPU).

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

الموارد

إضافة علامة "نجمة" على مستودع Github لتلقّي التحديثات المستقبلية