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

Jason Mayes
François Beaufort
François Beaufort
GitHub

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

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

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

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

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

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

  1. คลิกเชื่อมต่อ ที่บริเวณด้านขวาบนของสมุดบันทึก
  2. เลือกเปลี่ยนประเภทรันไทม์
    ภาพหน้าจอระยะใกล้ที่แสดงขั้นตอนการเปลี่ยนรันไทม์
    รูปที่ 2 เปลี่ยนรันไทม์ในอินเทอร์เฟซ Colab
  3. ในหน้าต่างโมดัล ให้เลือก T4 GPU เป็นตัวเร่งฮาร์ดแวร์ เมื่อเชื่อมต่อ Colab จะใช้อินสแตนซ์ Linux ที่มี GPU NVIDIA T4 เชื่อมต่ออยู่
    ภาพหน้าจอของโมดูลเปลี่ยนประเภทรันไทม์
    ภาพที่ 3: เลือก T4 GPU ในส่วน "ตัวเร่งฮาร์ดแวร์"
  4. คลิกบันทึก
  5. คลิกปุ่มเชื่อมต่อเพื่อเชื่อมต่อกับรันไทม์ หลังจากนั้น จะแสดงเครื่องหมายถูกสีเขียว พร้อมด้วยกราฟ RAM และกราฟการใช้งานดิสก์ ซึ่งเป็นการระบุว่าได้สร้างเซิร์ฟเวอร์สำเร็จ ด้วยไฟล์ที่คุณต้องการ ฮาร์ดแวร์

เยี่ยมมาก คุณเพิ่งสร้างเซิร์ฟเวอร์ที่มี 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. คลิก ถัดจากเซลล์เพื่อ เรียกใช้โค้ด

    วันที่ ภาพหน้าจอของ Colab แบบใหม่
    รูปที่ 4

  3. เมื่อโค้ดเรียกใช้เสร็จสิ้นแล้ว ให้ยืนยันว่า nvidia-smi ได้พิมพ์เอกสารบางอย่าง คล้ายกับภาพหน้าจอต่อไปนี้เพื่อยืนยันว่าคุณมี GPU จริงๆ และถูกรับรู้บนเซิร์ฟเวอร์ของคุณ คุณอาจต้องเลื่อนไปก่อนหน้านี้ ในบันทึกเพื่อดูเอาต์พุตนี้

    วันที่
    รูปที่ 5: มองหาเอาต์พุตที่ขึ้นต้นด้วย "NVIDIA-SMI"

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

  1. คลิกปุ่ม โค้ดเพื่อเพิ่ม เซลล์โค้ด
  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 ถึง ดูไฟล์ดังกล่าวได้ ให้ขยายเนื้อหา จากนั้นคลิก เพื่อดาวน์โหลด PDF ไปยังเครื่องภายในของคุณ

วันที่ ภาพหน้าจอของ Colab แบบใหม่
รูปที่ 6: ดูขั้นตอนในการดาวน์โหลด PDF ในการจับภาพหน้าจอของอินเทอร์เฟซ Colab

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

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

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 แบบเป็นโปรแกรม

สำเร็จ

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

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

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

แหล่งข้อมูล

ติดดาวในที่เก็บ GitHub จะได้รับการอัปเดตในอนาคต