การตั้งค่าสภาพแวดล้อมการทดสอบที่สอดคล้องกันด้วย GPU อาจเป็นเรื่องยากกว่าที่คิด ขั้นตอนการทดสอบโมเดล AI บนเบราว์เซอร์ฝั่งไคลเอ็นต์ในสภาพแวดล้อมจริงของเบราว์เซอร์ ขณะเดียวกันก็ปรับขนาดได้ ทำงานอัตโนมัติได้ และอยู่ภายในการตั้งค่าฮาร์ดแวร์มาตรฐานที่รู้จัก
ในกรณีนี้ เบราว์เซอร์เป็นเบราว์เซอร์ Chrome จริงที่มีการสนับสนุนฮาร์ดแวร์ ไม่ใช่การจำลองซอฟต์แวร์
ไม่ว่าคุณจะเป็น AI บนเว็บ นักพัฒนาเกมบนเว็บ หรือนักพัฒนากราฟิก หรือสนใจในการทดสอบโมเดล AI บนเว็บ คู่มือนี้มีไว้สำหรับคุณ
ขั้นตอนที่ 1: สร้าง Google Colab Notebook ใหม่
1. ไปที่ colab.new เพื่อสร้าง Colab Notebook ใหม่ ซึ่งควรมีลักษณะคล้ายกับรูปที่ 1 2. ทำตามข้อความที่ปรากฏเพื่อลงชื่อเข้าใช้บัญชี Googleขั้นตอนที่ 2: เชื่อมต่อกับเซิร์ฟเวอร์ที่เปิดใช้ GPU T4
- คลิกเชื่อมต่อ บริเวณด้านขวาบนของสมุดบันทึก
- เลือกเปลี่ยนประเภทรันไทม์
- ในหน้าต่างโมดัล ให้เลือก GPU T4 เป็นตัวเร่งฮาร์ดแวร์ เมื่อเชื่อมต่อ Colab จะใช้อินสแตนซ์ Linux ที่ต่อเชื่อม GPU ของ NVIDIA T4
- คลิกบันทึก
- คลิกปุ่มเชื่อมต่อเพื่อเชื่อมต่อกับรันไทม์ เมื่อผ่านไประยะหนึ่ง ปุ่มดังกล่าวจะแสดงเครื่องหมายถูกสีเขียว พร้อมกับกราฟ RAM และกราฟการใช้งานดิสก์ ซึ่งเป็นการระบุว่าสร้างเซิร์ฟเวอร์ด้วยฮาร์ดแวร์ที่จำเป็นเรียบร้อยแล้ว
เยี่ยมมาก คุณเพิ่งสร้างเซิร์ฟเวอร์ที่มี GPU ต่ออยู่
ขั้นตอนที่ 3: ติดตั้งไดรเวอร์และ Dependencies ที่ถูกต้อง
คัดลอกและวางโค้ด 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
คลิก
ข้างเซลล์เพื่อเรียกใช้โค้ดเมื่อเรียกใช้โค้ดเสร็จแล้ว ให้ตรวจสอบว่า
nvidia-smi
พิมพ์บางสิ่งที่คล้ายกับภาพหน้าจอต่อไปนี้เพื่อยืนยันว่าคุณได้แนบ GPU ไว้จริงๆ และรับรู้ได้บนเซิร์ฟเวอร์ของคุณแล้ว คุณอาจต้องเลื่อนไปก่อนหน้าในบันทึกเพื่อดูเอาต์พุตนี้
ขั้นตอนที่ 4: ใช้และทำให้ Chrome แบบไม่มีส่วนหัวทำงานอัตโนมัติ
- คลิกปุ่ม Code เพื่อเพิ่มเซลล์โค้ดใหม่
- จากนั้นคุณสามารถเขียนโค้ดที่กำหนดเองเพื่อเรียกใช้โปรเจ็กต์ 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 ไปยังเครื่องของคุณ
ส่วน ข: สั่งการ 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 เพื่อรับการอัปเดตในอนาคต