قد يكون إعداد بيئة اختبار متسقة باستخدام وحدات معالجة الرسومات أكثر صعوبة من متوقع. في ما يلي خطوات اختبار نماذج الذكاء الاصطناعي المستندة إلى المتصفّح من جهة العميل في بيئات متصفح حقيقية، مع أن تكون أيضًا قابلة للتطوير وقابلة للبرمجة وداخل الأجهزة الموحدة المعروفة.
في هذه الحالة، يكون المتصفّح هو متصفّح Chrome حقيقيًا يدعم الأجهزة بدلاً من محاكاة البرامج.
سواء كنت مطوّر برامج تعتمد على الذكاء الاصطناعي على الويب أو ألعاب ويب أو رسومات، أو تتعرّف على نفسك بما أنّك مهتم باختبار نماذج الذكاء الاصطناعي على الويب، إليك هذا الدليل.
الخطوة 1: إنشاء ورقة ملاحظات Colab جديدة في Google Colab
1- انتقِل إلى colab.new لإنشاء ورقة ملاحظات Colab جديدة. يجب أن يبدو مشابهًا للشكل 1. 2. اتّبِع رسالة المطالبة لتسجيل الدخول إلى حسابك على Google.![لقطة شاشة لشريحة Colab الجديدة](https://developer.chrome.com/static/docs/web-platform/webgpu/colab-headless/image/colab_new.png?authuser=9&hl=ar)
الخطوة 2: الاتصال بخادم متوافق مع وحدة معالجة الرسومات من النوع T4
- انقر على رمز الربط بالقرب من أعلى يسار ورقة الملاحظات.
- اختَر تغيير نوع بيئة التشغيل:
الشكل 2. يمكنك تغيير بيئة التشغيل في واجهة Colab. - في النافذة المشروطة، اختَر وحدة معالجة الرسومات T4 كمسرِّع للأجهزة. عند الربط، ستستخدم Colab مثيلاً يعمل بنظام التشغيل Linux مع إرفاق وحدة معالجة رسومات NVIDIA T4.
الشكل 3: ضِمن "مسرِّع الأجهزة"، اختَر وحدة معالجة الرسومات T4. - انقر على حفظ.
- انقر على الزر ربط للاتصال ببيئة التشغيل. بعد مرور بعض الوقت، علامة اختيار خضراء مع الرسوم البيانية لذاكرة الوصول العشوائي (RAM) واستخدام القرص. ويشير هذا إلى أنه قد تم إنشاء خادم بنجاح باستخدام ملف الأجهزة.
أحسنت، لقد أنشأت للتو خادمًا به وحدة GPU.
الخطوة 3: تثبيت برامج التشغيل والتبعيات الصحيحة
انسخ السطرين التاليين من الرمز والصِقها في خلية الرمز البرمجي الأولى الدفتر. في بيئة 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
انقر على
بجانب الخلية التي وتنفيذ التعليمات البرمجية.الشكل 4: بعد انتهاء تنفيذ الرمز البرمجي، يُرجى التحقّق من طباعة
nvidia-smi
من المستندات. يشبه لقطة الشاشة التالية لتأكيد أن لديك وحدة معالجة رسومات. المرفق ويتم التعرف عليه في الخادم. قد تحتاج إلى الانتقال إلى مستوى أقدم في السجلات للاطّلاع على هذا الإخراج.الشكل 5: ابحث عن الناتج الذي يبدأ بـ "NVIDIA-SMI".
الخطوة 4: استخدام متصفِّح Chrome بلا واجهة مستخدم رسومية وتشغيله تلقائيًا
- انقر على زرّ الرمز لإضافة رمز جديد. خلية رمز برمجي.
- يمكنك بعد ذلك كتابة رمزك المخصّص لاستدعاء مشروع 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 الجديدة](https://developer.chrome.com/static/docs/web-platform/webgpu/colab-headless/image/download-pdf.gif?authuser=9&hl=ar)
الجزء (ب): قيادة 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 من التعرف بشكل صحيح على بنطلون في صورة، من جهة العميل المعالجة في المتصفح باستخدام وحدة معالجة الرسومات.
يمكنك استخدام هذه الطريقة في أي مهام عمل مستندة إلى وحدة معالجة الرسومات من جهة العميل، بدءًا من تعلُّم الآلة. والنماذج إلى اختبار الرسومات والألعاب.
![لقطة شاشة لشريحة Colab الجديدة](https://developer.chrome.com/static/docs/web-platform/webgpu/colab-headless/image/fashion-mnist-classifier.png?authuser=9&hl=ar)
الموارد
إضافة نجمة على مستودع GitHub لتلقي التحديثات المستقبلية.