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

Jason Mayes

François Beaufort

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

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

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

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

الخطوة 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 بجانب الخلية التي وتنفيذ التعليمات البرمجية.

   

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.

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

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

import puppeteer from 'puppeteer';

بعد ذلك، تحقّق من وسيطات سطر الأوامر التي تم تمريرها إلى تطبيق العقدة. تأكَّد من ضبط الوسيطة الثالثة، التي تمثّل عنوان URL للانتقال إليه. إِنْتَ بحاجة إلى فحص الوسيطة الثالثة هنا لأن أول وسيطتين تستدعيان 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. يتيح لك هذا تسجيل الرسائل في سطر أوامر العقدة ونفحص أيضًا نص وحدة التحكم بحثًا عن عبارة خاصة (في هذه الحالة، captureAndEnd) التي تؤدي إلى أخذ لقطة شاشة ثم إنهاء عملية المتصفِّح عقدة. ويكون هذا مفيدًا لصفحات الويب التي تحتاج إلى تنفيذ قدر من العمل قبل. فيمكن أن يتم أخذ لقطة شاشة، ويكون لها وقت غير محدد والتنفيذ.

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 آليًا.

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

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

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

الموارد

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