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