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

Jason Mayes

François Beaufort

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

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

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

الخطوة 1: إنشاء دفتر ملاحظات جديد على 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 بجانب الخلية ل ejecutant الرمز.

   

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';

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

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

حدِّد الآن دالة غير متزامنة باسم runWebpage(). يؤدي ذلك إلى إنشاء ملف browser obj يتم ضبطه باستخدام مَعلمات سطر الأوامر لتشغيل ملف Chrome bin بالطريقة التي نحتاجها لتشغيل 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 لتلقّي التحديثات المستقبلية