การทดสอบโมเดล 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 เพื่อรับการอัปเดตในอนาคต