تست مدل هوش مصنوعی وب در Google Colab

فرانسوا بوفور
François Beaufort

راه‌اندازی یک محیط آزمایشی ثابت با پردازنده‌های گرافیکی می‌تواند سخت‌تر از حد انتظار باشد. در اینجا مراحل آزمایش مدل‌های هوش مصنوعی مبتنی بر مرورگر در سمت مشتری در محیط‌های مرورگر واقعی، در حالی که مقیاس‌پذیر، خودکار و در یک راه‌اندازی سخت‌افزار استاندارد شده شناخته شده هستند، آمده است.

در این مثال، مرورگر یک مرورگر کروم واقعی با پشتیبانی سخت افزاری است، برخلاف شبیه سازی نرم افزاری.

چه یک توسعه‌دهنده هوش مصنوعی وب، بازی‌های وب، یا توسعه‌دهنده گرافیک باشید یا به آزمایش مدل هوش مصنوعی وب علاقه‌مند باشید، این راهنما برای شما مناسب است.

مرحله 1: یک نوت بوک Google Colab جدید ایجاد کنید

1. برای ایجاد یک نوت بوک جدید Colab به colab.new بروید. باید شبیه شکل 1 به نظر برسد. 2. برای ورود به حساب Google خود دستور را دنبال کنید.
تصویری از یک کولب جدید
شکل 1 : یک نوت بوک جدید Colab.

مرحله 2: به یک سرور مجهز به GPU T4 متصل شوید

  1. روی Connect نزدیک سمت راست بالای نوت بوک کلیک کنید.
  2. تغییر نوع زمان اجرا را انتخاب کنید:
    اسکرین شات نزدیک که مراحل تغییر زمان اجرا را نشان می دهد.
    شکل 2 . زمان اجرا را در رابط Colab تغییر دهید.
  3. در پنجره مودال، T4 GPU را به عنوان شتاب دهنده سخت افزاری خود انتخاب کنید. هنگام اتصال، Colab از یک نمونه لینوکس با GPU NVIDIA T4 متصل استفاده می کند.
    تصویری از ماژول Change runtime type.
    شکل 3 : در قسمت Hardware Accelerator، T4 GPU را انتخاب کنید.
  4. روی ذخیره کلیک کنید.
  5. برای اتصال به زمان اجرا روی دکمه Connect کلیک کنید. پس از مدتی، دکمه یک علامت سبز به همراه نمودارهای استفاده از رم و دیسک را نشان می دهد. این نشان می دهد که یک سرور با موفقیت با سخت افزار مورد نیاز شما ایجاد شده است.

کار خوبی بود، شما به تازگی یک سرور با 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
    
    # 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. روی کنار سلول کلیک کنید تا کد اجرا شود.

    تصویری از یک کولب جدید
    شکل 4 .

  3. پس از اتمام اجرای کد، تأیید کنید که nvidia-smi چیزی مشابه تصویر زیر را چاپ کرده است تا مطمئن شوید که واقعاً یک GPU متصل شده‌اید و در سرور شما شناسایی شده است. ممکن است لازم باشد برای مشاهده این خروجی به قسمت قبلی در گزارش‌ها بروید.

    شکل 5 : به دنبال خروجی باشید که با "NVIDIA-SMI" شروع می شود.

مرحله 4: از کروم بدون هد استفاده و خودکارسازی کنید

  1. برای افزودن سلول کد جدید روی دکمه کد کلیک کنید.
  2. سپس می توانید کد سفارشی خود را برای فراخوانی یک پروژه Node.js با پارامترهای دلخواه خود بنویسید (یا فقط google-chrome-stable مستقیماً در خط فرمان تماس بگیرید). ما برای هر دو زیر مثال داریم.

قسمت A: از Headless 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

در مثال، ما پی‌دی‌اف حاصل را در /content/gpu.pdf ذخیره کردیم. برای مشاهده آن فایل، محتوا را گسترش دهید. سپس روی کلیک کنید تا فایل PDF را در دستگاه محلی خود دانلود کنید.

تصویری از یک کولب جدید
شکل 6 : مراحل دانلود PDF را در این تصویربرداری از صفحه رابط Colab مشاهده کنید.

قسمت B: فرمان Chrome با Puppeteer

ما یک مثال مینیمالیستی با استفاده از Puppeteer برای کنترل Headless 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';

سپس بررسی کنید که چه آرگومان های خط فرمان به برنامه Node ارسال شده است. اطمینان حاصل کنید که آرگومان سوم تنظیم شده است - که نشان دهنده یک URL برای پیمایش است. شما باید آرگومان سوم را در اینجا بررسی کنید زیرا دو آرگومان اول خود Node و اسکریپتی را که در حال اجرا هستیم صدا می کنند. عنصر سوم در واقع شامل اولین پارامتر ارسال شده به برنامه Node است:

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

اکنون یک تابع ناهمزمان با نام runWebpage() تعریف کنید. این یک شی مرورگر ایجاد می‌کند که با آرگومان‌های خط فرمان پیکربندی شده است تا باینری کروم را به روشی که ما نیاز داریم تا WebGL و WebGPU را همانطور که در Enable 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 گوش دهد. این به شما امکان می دهد پیام ها را در خط فرمان 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();

بسته.json را اصلاح کنید

شاید متوجه شده باشید که ما از دستور import در ابتدای فایل 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 می‌تواند به درستی یک جفت شلوار را در یک تصویر، با پردازش سمت کلاینت در مرورگر با استفاده از GPU تشخیص دهد.

می‌توانید از این برای هر بار کاری مبتنی بر GPU سمت مشتری، از مدل‌های یادگیری ماشین گرفته تا آزمایش‌های گرافیکی و بازی‌ها استفاده کنید.

تصویری از یک کولب جدید
شکل 7 : ضبط موفقیت آمیز یک مدل TensorFlow.js با سرعت GPU که قادر به تشخیص سمت کلاینت لباس در مرورگر در زمان واقعی است.

منابع

برای دریافت به‌روزرسانی‌های آینده ، یک ستاره به مخزن GitHub اضافه کنید .

،

فرانسوا بوفور
François Beaufort

راه‌اندازی یک محیط آزمایشی ثابت با پردازنده‌های گرافیکی می‌تواند سخت‌تر از حد انتظار باشد. در اینجا مراحل آزمایش مدل‌های هوش مصنوعی مبتنی بر مرورگر در سمت مشتری در محیط‌های مرورگر واقعی، در حالی که مقیاس‌پذیر، خودکار و در یک راه‌اندازی سخت‌افزار استاندارد شده شناخته شده هستند، آمده است.

در این مثال، مرورگر یک مرورگر کروم واقعی با پشتیبانی سخت افزاری است، برخلاف شبیه سازی نرم افزاری.

چه یک توسعه‌دهنده هوش مصنوعی وب، بازی‌های وب، یا توسعه‌دهنده گرافیک باشید یا به آزمایش مدل هوش مصنوعی وب علاقه‌مند باشید، این راهنما برای شما مناسب است.

مرحله 1: یک نوت بوک Google Colab جدید ایجاد کنید

1. برای ایجاد یک نوت بوک جدید Colab به colab.new بروید. باید شبیه شکل 1 به نظر برسد. 2. برای ورود به حساب Google خود دستور را دنبال کنید.
تصویری از یک کولب جدید
شکل 1 : یک نوت بوک جدید Colab.

مرحله 2: به یک سرور مجهز به GPU T4 متصل شوید

  1. روی Connect نزدیک سمت راست بالای نوت بوک کلیک کنید.
  2. تغییر نوع زمان اجرا را انتخاب کنید:
    اسکرین شات نزدیک که مراحل تغییر زمان اجرا را نشان می دهد.
    شکل 2 . زمان اجرا را در رابط Colab تغییر دهید.
  3. در پنجره مودال، T4 GPU را به عنوان شتاب دهنده سخت افزاری خود انتخاب کنید. هنگام اتصال، Colab از یک نمونه لینوکس با GPU NVIDIA T4 متصل استفاده می کند.
    تصویری از ماژول Change runtime type.
    شکل 3 : در قسمت Hardware Accelerator، T4 GPU را انتخاب کنید.
  4. روی ذخیره کلیک کنید.
  5. برای اتصال به زمان اجرا روی دکمه Connect کلیک کنید. پس از مدتی، دکمه یک علامت سبز به همراه نمودارهای استفاده از رم و دیسک را نشان می دهد. این نشان می دهد که یک سرور با موفقیت با سخت افزار مورد نیاز شما ایجاد شده است.

کار خوبی بود، شما به تازگی یک سرور با 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
    
    # 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. روی کنار سلول کلیک کنید تا کد اجرا شود.

    تصویری از یک کولب جدید
    شکل 4 .

  3. پس از اتمام اجرای کد، تأیید کنید که nvidia-smi چیزی مشابه تصویر زیر را چاپ کرده است تا مطمئن شوید که واقعاً یک GPU متصل شده‌اید و در سرور شما شناسایی شده است. ممکن است لازم باشد برای مشاهده این خروجی به قسمت قبلی در گزارش‌ها بروید.

    شکل 5 : به دنبال خروجی باشید که با "NVIDIA-SMI" شروع می شود.

مرحله 4: از کروم بدون هد استفاده و خودکارسازی کنید

  1. برای افزودن سلول کد جدید روی دکمه کد کلیک کنید.
  2. سپس می توانید کد سفارشی خود را برای فراخوانی یک پروژه Node.js با پارامترهای دلخواه خود بنویسید (یا فقط google-chrome-stable مستقیماً در خط فرمان تماس بگیرید). ما برای هر دو نمونه زیر داریم.

قسمت A: از Headless 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

در مثال، ما پی‌دی‌اف حاصل را در /content/gpu.pdf ذخیره کردیم. برای مشاهده آن فایل، محتوا را باز کنید. سپس روی کلیک کنید تا فایل PDF را در دستگاه محلی خود دانلود کنید.

تصویری از یک کولب جدید
شکل 6 : مراحل دانلود PDF را در این تصویربرداری از صفحه رابط Colab مشاهده کنید.

قسمت B: فرمان Chrome با Puppeteer

ما یک مثال مینیمالیستی با استفاده از Puppeteer برای کنترل Headless 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';

سپس بررسی کنید که چه آرگومان های خط فرمان به برنامه Node ارسال شده است. اطمینان حاصل کنید که آرگومان سوم تنظیم شده است - که نشان دهنده یک URL برای پیمایش است. شما باید آرگومان سوم را در اینجا بررسی کنید زیرا دو آرگومان اول خود Node و اسکریپتی را که در حال اجرا هستیم صدا می کنند. عنصر سوم در واقع شامل اولین پارامتر ارسال شده به برنامه Node است:

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

اکنون یک تابع ناهمزمان با نام runWebpage() تعریف کنید. این یک شی مرورگر ایجاد می‌کند که با آرگومان‌های خط فرمان پیکربندی شده است تا باینری کروم را به روشی که ما نیاز داریم تا WebGL و WebGPU را همانطور که در Enable 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 گوش دهد. این به شما امکان می دهد پیام ها را در خط فرمان 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();

بسته.json را اصلاح کنید

شاید متوجه شده باشید که ما از دستور import در ابتدای فایل 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 می‌تواند به درستی یک جفت شلوار را در یک تصویر، با پردازش سمت کلاینت در مرورگر با استفاده از GPU تشخیص دهد.

می‌توانید از این برای هر بار کاری مبتنی بر GPU سمت مشتری، از مدل‌های یادگیری ماشین گرفته تا آزمایش‌های گرافیکی و بازی‌ها استفاده کنید.

تصویری از یک کولب جدید
شکل 7 : ضبط موفقیت آمیز یک مدل TensorFlow.js با سرعت GPU که قادر به تشخیص سمت کلاینت لباس در مرورگر در زمان واقعی است.

منابع

برای دریافت به‌روزرسانی‌های آینده ، یک ستاره به مخزن GitHub اضافه کنید .