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

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

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

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

ขั้นตอนที่ 1: สร้างสมุดบันทึก Google Colab ใหม่

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

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

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

   

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

   

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

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

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

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

   

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

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 ไปยังเครื่องของคุณ

ส่วน ข: Command 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

รายละเอียดโค้ด Node ของ jPuppet.js

ก่อนอื่น ให้นําเข้า Puppeteer ซึ่งจะช่วยให้คุณควบคุม Chrome จากระยะไกลด้วย Node.js ได้

import puppeteer from 'puppeteer';

ถัดไป ให้ตรวจสอบว่ามีการส่งอาร์กิวเมนต์บรรทัดคำสั่งใดไปยังแอปพลิเคชันโหนด ตรวจสอบว่าได้ตั้งค่าอาร์กิวเมนต์ที่ 3 ซึ่งแสดง URL ที่จะไปยัง คุณต้องตรวจสอบอาร์กิวเมนต์ที่ 3 ที่นี่ เนื่องจากอาร์กิวเมนต์ 2 รายการแรกเรียก Node เองและสคริปต์ที่เราเรียกใช้ องค์ประกอบที่ 3 มีพารามิเตอร์ที่ 1 ที่ส่งไปยังโปรแกรม 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();

จากนั้นเพิ่ม Listener เหตุการณ์เพื่อรอเหตุการณ์ 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 สามารถจดจำกางเกงขายาวคู่หนึ่งในรูปภาพได้อย่างถูกต้อง โดยมีการประมวลผลฝั่งไคลเอ็นต์ในเบราว์เซอร์โดยใช้ GPU

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

แหล่งข้อมูล

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