การทดสอบโมเดล AI ของเว็บใน Google Colab

การตั้งค่าสภาพแวดล้อมการทดสอบที่สอดคล้องกันด้วย GPU อาจเป็นเรื่องยากกว่าที่คิด ขั้นตอนการทดสอบโมเดล AI บนเบราว์เซอร์ฝั่งไคลเอ็นต์ในสภาพแวดล้อมจริงของเบราว์เซอร์ ขณะเดียวกันก็ปรับขนาดได้ ทำงานอัตโนมัติได้ และอยู่ภายในการตั้งค่าฮาร์ดแวร์มาตรฐานที่รู้จัก

ในกรณีนี้ เบราว์เซอร์เป็นเบราว์เซอร์ Chrome จริงที่มีการสนับสนุนฮาร์ดแวร์ ไม่ใช่การจำลองซอฟต์แวร์

ไม่ว่าคุณจะเป็น AI บนเว็บ นักพัฒนาเกมบนเว็บ หรือนักพัฒนากราฟิก หรือสนใจในการทดสอบโมเดล AI บนเว็บ คู่มือนี้มีไว้สำหรับคุณ

ขั้นตอนที่ 1: สร้าง Google Colab Notebook ใหม่

1. ไปที่ colab.new เพื่อสร้าง Colab Notebook ใหม่ ซึ่งควรมีลักษณะคล้ายกับรูปที่ 1 2. ทำตามข้อความที่ปรากฏเพื่อลงชื่อเข้าใช้บัญชี Google

ขั้นตอนที่ 2: เชื่อมต่อกับเซิร์ฟเวอร์ที่เปิดใช้ GPU T4

1. คลิกเชื่อมต่อ arrow_drop_down บริเวณด้านขวาบนของสมุดบันทึก
2. เลือกเปลี่ยนประเภทรันไทม์

   

3. ในหน้าต่างโมดัล ให้เลือก GPU T4 เป็นตัวเร่งฮาร์ดแวร์ เมื่อเชื่อมต่อ Colab จะใช้อินสแตนซ์ Linux ที่ต่อเชื่อม GPU ของ NVIDIA T4

   

4. คลิกบันทึก
5. คลิกปุ่มเชื่อมต่อเพื่อเชื่อมต่อกับรันไทม์ เมื่อผ่านไประยะหนึ่ง ปุ่มดังกล่าวจะแสดงเครื่องหมายถูกสีเขียว พร้อมกับกราฟ RAM และกราฟการใช้งานดิสก์ ซึ่งเป็นการระบุว่าสร้างเซิร์ฟเวอร์ด้วยฮาร์ดแวร์ที่จำเป็นเรียบร้อยแล้ว

เยี่ยมมาก คุณเพิ่งสร้างเซิร์ฟเวอร์ที่มี GPU ต่ออยู่

ขั้นตอนที่ 3: ติดตั้งไดรเวอร์และ Dependencies ที่ถูกต้อง

1. คัดลอกและวางโค้ด 2 บรรทัดต่อไปนี้ลงในเซลล์โค้ดแรกของสมุดบันทึก ในสภาพแวดล้อม 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 พิมพ์บางสิ่งที่คล้ายกับภาพหน้าจอต่อไปนี้เพื่อยืนยันว่าคุณได้แนบ GPU ไว้จริงๆ และรับรู้ได้บนเซิร์ฟเวอร์ของคุณแล้ว คุณอาจต้องเลื่อนไปก่อนหน้าในบันทึกเพื่อดูเอาต์พุตนี้

   

ขั้นตอนที่ 4: ใช้และทำให้ Chrome แบบไม่มีส่วนหัวทำงานอัตโนมัติ

1. คลิกปุ่ม add Code เพื่อเพิ่มเซลล์โค้ดใหม่
2. จากนั้นคุณสามารถเขียนโค้ดที่กำหนดเองเพื่อเรียกใช้โปรเจ็กต์ Node.js ด้วยพารามิเตอร์ที่ต้องการ (หรือเรียกใช้ google-chrome-stable โดยตรงในบรรทัดคำสั่ง) เรามีตัวอย่างสำหรับทั้ง 2 กรณีต่อไปนี้

ส่วน ก: ใช้ 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 แบบ Headless ซึ่งใช้งานได้ดังนี้

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

ถัดไป ให้ตรวจสอบอาร์กิวเมนต์บรรทัดคำสั่งที่ส่งไปยังแอปพลิเคชันโหนด ตรวจสอบว่ามีการตั้งค่าอาร์กิวเมนต์ที่ 3 ซึ่งแสดงถึง URL ที่จะไปยัง คุณต้องตรวจสอบอาร์กิวเมนต์ที่ 3 ตรงนี้เพราะอาร์กิวเมนต์ 2 ตัวแรกเรียกใช้ตัวโหนดและสคริปต์ที่เรากำลังเรียกใช้ องค์ประกอบที่ 3 ประกอบด้วยพารามิเตอร์แรก ที่ส่งผ่านไปยังโปรแกรมโหนด:

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();

จากนั้นเพิ่ม Listener เหตุการณ์เพื่อรับเหตุการณ์ 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 แบบเป็นโปรแกรมง่ายขึ้น

Success

ตอนนี้เราสามารถยืนยันได้ว่าตัวแยกประเภท Financial MNIST ของ TensorFlow.js จดจำกางเกงในภาพได้อย่างถูกต้อง ผ่านการประมวลผลฝั่งไคลเอ็นต์ในเบราว์เซอร์โดยใช้ GPU

คุณใช้แพ็กเกจนี้สำหรับภาระงานที่อิงตาม GPU ฝั่งไคลเอ็นต์ได้ ตั้งแต่โมเดลแมชชีนเลิร์นนิงไปจนถึงการทดสอบกราฟิกและเกม

แหล่งข้อมูล

ติดดาวในที่เก็บ GitHub เพื่อรับการอัปเดตในอนาคต