ข่าวดี คุณได้สร้างแอปพลิเคชัน AI บนเว็บสุดเจ๋งที่เรียกใช้โมเดลแมชชีนเลิร์นนิงในอุปกรณ์ของผู้ใช้โดยตรง โดยทำงานทั้งหมดในเว็บเบราว์เซอร์ฝั่งไคลเอ็นต์โดยไม่ต้องอาศัยระบบคลาวด์ การออกแบบในอุปกรณ์นี้จะช่วยยกระดับความเป็นส่วนตัวของผู้ใช้ เพิ่มประสิทธิภาพ และลดต้นทุนได้อย่างมาก
แต่ก็มีอุปสรรคบางอย่าง โมเดล TensorFlow.js ทำงานได้บนทั้ง CPU (WebAssembly) และ GPU ที่มีประสิทธิภาพมากขึ้น (ผ่าน WebGL และ WebGPU) คำถามคือ คุณจะทำให้การทดสอบเบราว์เซอร์เป็นแบบอัตโนมัติกับฮาร์ดแวร์ที่เลือกได้อย่างไร
การรักษาความสม่ำเสมอเป็นสิ่งสำคัญในการเปรียบเทียบประสิทธิภาพของโมเดลแมชชีนเลิร์นนิงเมื่อเวลาผ่านไปขณะที่คุณทำซ้ำและปรับปรุงโมเดล ก่อนที่จะติดตั้งใช้งานสำหรับผู้ใช้จริงในอุปกรณ์
การตั้งค่าสภาพแวดล้อมการทดสอบที่สอดคล้องกันด้วย GPU อาจเป็นเรื่องยากกว่าที่คิด ในบล็อกโพสต์นี้ เราจะแชร์ปัญหาที่เราพบและวิธีแก้ปัญหาเหล่านั้น เพื่อให้คุณปรับปรุงประสิทธิภาพของแอปพลิเคชันได้
การเปลี่ยนแปลงนี้ไม่ได้มีไว้สำหรับนักพัฒนาซอฟต์แวร์ AI บนเว็บเท่านั้น ถ้าคุณทำงานเกี่ยวกับเกมบนเว็บหรือกราฟิก โพสต์นี้ก็มีค่าสำหรับคุณเช่นกัน
สิ่งที่อยู่ในกล่องเครื่องมืออัตโนมัติ
สิ่งที่เราใช้มีดังนี้
- สภาพแวดล้อม: โน้ตบุ๊กของ Google Colab ที่ใช้ Linux เชื่อมต่อกับ GPU NVIDIA T4 หรือ V100 คุณใช้แพลตฟอร์มระบบคลาวด์อื่นๆ ได้ เช่น Google Cloud (GCP) หากต้องการ
- เบราว์เซอร์: Chrome รองรับ WebGPU ซึ่งเป็นตัวรับช่วงต่อ WebGL ที่ทรงประสิทธิภาพ ซึ่งนำความก้าวหน้าของ GPU API สมัยใหม่มาสู่เว็บ
- การทำงานอัตโนมัติ: Puppeteer เป็นไลบรารี Node.js ที่ให้คุณควบคุมเบราว์เซอร์ด้วย JavaScript ได้อย่างเป็นโปรแกรม Puppeteer ช่วยให้เราทำให้ Chrome ทำงานโดยอัตโนมัติในโหมด Headless ได้ ซึ่งหมายความว่าเบราว์เซอร์จะทำงานโดยไม่มีอินเทอร์เฟซที่มองเห็นได้บนเซิร์ฟเวอร์ เราใช้โหมดไม่มีส่วนหัวแบบใหม่ที่ได้รับการปรับปรุง ไม่ใช่แบบฟอร์มเดิม
ยืนยันสภาพแวดล้อม
วิธีที่ดีที่สุดในการตรวจสอบว่ามีการเปิดการเร่งฮาร์ดแวร์ใน Chrome หรือไม่คือการพิมพ์ chrome://gpu
ลงในแถบที่อยู่ คุณสามารถดำเนินการให้เทียบเท่า Puppeteer แบบเป็นโปรแกรมได้ด้วย console.log
หรือบันทึกรายงานฉบับเต็มเป็น PDF เพื่อตรวจสอบด้วยตนเอง ดังนี้
/* Incomplete example.js */
import puppeteer from 'puppeteer';
// Configure launch parameters: Expands later
const browser = await puppeteer.launch({
headless: 'new',
args: ['--no-sandbox']
});
const page = await browser.newPage();
await page.goto('chrome://gpu');
// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({ path: './gpu.pdf' });
await browser.close();
เปิด chrome://gpu
และคุณควรเห็นผลลัพธ์ต่อไปนี้
สถานะฟีเจอร์กราฟิก | |
---|---|
OpenGL: | ปิดใช้แล้ว |
วัลคาน: | ปิดใช้แล้ว |
WebGL | ซอฟต์แวร์เท่านั้น การเร่งฮาร์ดแวร์ไม่พร้อมใช้งาน |
WebGL2 | ซอฟต์แวร์เท่านั้น การเร่งฮาร์ดแวร์ไม่พร้อมใช้งาน |
WebGPU: | ปิดใช้แล้ว |
ตรวจพบปัญหา |
ไม่ใช่จุดเริ่มต้นที่ดีเลย เป็นที่ชัดเจนว่าการตรวจหาฮาร์ดแวร์ล้มเหลว โดยพื้นฐานแล้ว WebGL, WebGL2 และ WebGPU จะถูกปิดใช้หรือมีเพียงซอฟต์แวร์เท่านั้น ปัญหานี้ไม่ได้เกิดขึ้นเพียงปัญหาเดียว เพราะยังมีการพูดคุยถึงผู้คนจำนวนมากในสถานการณ์ที่คล้ายกันทางออนไลน์ รวมถึงช่องทางการสนับสนุนอย่างเป็นทางการของ Chrome (1), (2)
เปิดใช้การรองรับ WebGPU และ WebGL
Chrome แบบ Headless ปิดใช้ GPU โดยค่าเริ่มต้น หากต้องการเปิดใช้ใน Linux ให้ใช้แฟล็กทั้งหมดต่อไปนี้เมื่อเปิด Chrome แบบ Headless
- Flag
--no-sandbox
จะปิดใช้แซนด์บ็อกซ์ความปลอดภัยของ Chrome ซึ่งจะแยกกระบวนการของเบราว์เซอร์ออกจากส่วนอื่นๆ ของระบบ ระบบไม่รองรับการเรียกใช้ Chrome เป็นรูทโดยไม่มีแซนด์บ็อกซ์นี้ - แฟล็ก
--headless=new
เรียกใช้ Chrome พร้อมโหมดไม่มีส่วนหัวใหม่ที่ได้รับการปรับปรุงให้ดีขึ้นโดยไม่มี UI ที่มองเห็นได้ - Flag
--use-angle=vulkan
จะบอกให้ Chrome ใช้แบ็กเอนด์ Vulkan สำหรับ ANGLE ซึ่งจะแปลการเรียก OpenGL ES 2/3 ไปยังการเรียก Vulkan API - แฟล็ก
--enable-features=Vulkan
เปิดใช้แบ็กเอนด์กราฟิก Vulkan สำหรับการเรียบเรียงและแรสเตอร์ใน Chrome - แฟล็ก
--disable-vulkan-surface
จะปิดใช้ส่วนขยายอินสแตนซ์VK_KHR_surface
Vulkan Bit Blit จะใช้สำหรับผลการนําเสนอบนหน้าจอ แทนที่จะใช้การสลับไปมา - แฟล็ก
--enable-unsafe-webgpu
จะเปิดใช้ WebGPU API รุ่นทดลองใน Chrome บน Linux และปิดใช้รายการที่บล็อกของอะแดปเตอร์
ตอนนี้เราได้รวมการเปลี่ยนแปลงทั้งหมดที่เราได้ดำเนินการจนถึงปัจจุบัน นี่คือสคริปต์ฉบับเต็ม
/* Complete example.js */
import puppeteer from 'puppeteer';
// Configure launch parameters
const browser = await puppeteer.launch({
headless: 'new',
args: [
'--no-sandbox',
'--headless=new',
'--use-angle=vulkan',
'--enable-features=Vulkan',
'--disable-vulkan-surface',
'--enable-unsafe-webgpu',
]
});
const page = await browser.newPage();
await page.goto('chrome://gpu');
// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({path: './gpu.pdf'});
await browser.close();
เรียกใช้สคริปต์อีกครั้ง ไม่พบปัญหาของ WebGPU และค่าจะเปลี่ยนจาก ปิดใช้เป็นซอฟต์แวร์เท่านั้น
สถานะฟีเจอร์กราฟิก | |
---|---|
OpenGL: | ปิดใช้แล้ว |
วัลคาน: | ปิดใช้แล้ว |
WebGL | ซอฟต์แวร์เท่านั้น การเร่งฮาร์ดแวร์ไม่พร้อมใช้งาน |
WebGL2 | ซอฟต์แวร์เท่านั้น การเร่งฮาร์ดแวร์ไม่พร้อมใช้งาน |
WebGPU: | ซอฟต์แวร์เท่านั้น การเร่งฮาร์ดแวร์ไม่พร้อมใช้งาน |
อย่างไรก็ตาม การเร่งฮาร์ดแวร์ยังใช้งานไม่ได้ ระบบตรวจไม่พบ GPU NVIDIA T4
ติดตั้งไดรเวอร์ GPU ที่ถูกต้อง
เราตรวจสอบผลลัพธ์ของ chrome://gpu
อย่างละเอียดมากขึ้นกับผู้เชี่ยวชาญด้าน GPU จากทีม Chrome เราพบปัญหากับไดรเวอร์เริ่มต้นที่ติดตั้งบนอินสแตนซ์สำหรับ Linux Colab ซึ่งทำให้เกิดปัญหากับ Vulkan ทำให้ Chrome ไม่สามารถตรวจพบ NVIDIA T4 GPU ที่ระดับ GL_RENDERER
ดังที่แสดงในเอาต์พุตต่อไปนี้ ซึ่งทำให้เกิดปัญหากับ Chrome แบบ Headless ได้
ข้อมูลผู้ขับ | |
---|---|
GL_RENDERER | ANGLE (Google, Vulkan 1.3.0 (อุปกรณ์ SwiftShader (Subzero) (0x0000C0DE)), ไดรเวอร์ SwiftShader-5.0.0) |
การติดตั้งไดรเวอร์ที่ถูกต้องซึ่งเข้ากันได้จะช่วยแก้ปัญหาได้
ข้อมูลผู้ขับ | |
---|---|
GL_RENDERER | ANGLE (NVIDIA Corporation, Tesla T4/PCIe/SSE2, OpenGL ES 3.2 NVIDIA 525.105.17) |
หากต้องการติดตั้งไดรเวอร์ที่ถูกต้อง ให้เรียกใช้คำสั่งต่อไปนี้ระหว่างการตั้งค่า สองบรรทัดสุดท้ายจะช่วยคุณบันทึกเอาต์พุตของสิ่งที่ไดรเวอร์ NVIDIA ตรวจพบโดยใช้ vulkaninfo
apt-get install -y vulkan-tools libnvidia-gl-525
// Verify the NVIDIA drivers detects along with vulkaninfo
nvidia-smi
vulkaninfo --summary
ตอนนี้ให้เรียกใช้สคริปต์อีกครั้ง และเราจะได้ผลลัพธ์ต่อไปนี้ 🎉
สถานะฟีเจอร์กราฟิก | |
---|---|
OpenGL: | เปิดใช้ |
วัลคาน: | เปิดใช้ |
WebGL | มีการเร่งฮาร์ดแวร์ แต่มีประสิทธิภาพลดลง |
WebGL2 | มีการเร่งฮาร์ดแวร์ แต่มีประสิทธิภาพลดลง |
WebGPU: | มีการเร่งฮาร์ดแวร์ แต่มีประสิทธิภาพลดลง |
การใช้ไดรเวอร์และแฟล็กที่ถูกต้องเมื่อใช้งาน Chrome ทำให้ตอนนี้เราสามารถรองรับ WebGPU และ WebGL โดยใช้โหมด Headless ใหม่ที่สว่างไสว
เบื้องหลัง: การตรวจสอบของทีมเรา
หลังจากค้นคว้าข้อมูลแล้ว เราไม่พบวิธีการทำงานสำหรับสภาพแวดล้อมที่จำเป็นต้องทำใน Google Colab แม้ว่าจะมีโพสต์หวังบางโพสต์ที่ทำงานในสภาพแวดล้อมอื่นๆ ซึ่งก็ให้ผลดี ท้ายที่สุดแล้ว เราไม่สามารถ จำลองความสำเร็จของพวกเขาในสภาพแวดล้อม NVIDIA T4 ของ Colab ได้เนื่องจากเรามีปัญหาสำคัญ 2 ประการดังนี้
- การใช้ Flag บางชุดร่วมกันทำให้สามารถตรวจจับ GPU ได้ แต่ไม่อนุญาตให้ใช้ GPU
- ตัวอย่างโซลูชันการทำงานของบุคคลที่สามใช้ Chrome Headless เวอร์ชันเก่า ซึ่ง ณ จุดใดจุดหนึ่งจะมีการเลิกใช้งานเพื่อเปลี่ยนไปใช้เวอร์ชันใหม่แทน เราต้องการโซลูชันที่ทำงานร่วมกับ Chrome แบบ Headless ใหม่เพื่อให้รองรับการใช้งานในอนาคตได้ดียิ่งขึ้น
เรายืนยันการใช้งานด้านล่างของ GPU โดยเรียกใช้ตัวอย่างหน้าเว็บ TensorFlow.js สำหรับการจดจำรูปภาพ ซึ่งเราฝึกโมเดลให้จดจำตัวอย่างเสื้อผ้า (คล้ายกับ "สวัสดีโลก" ของแมชชีนเลิร์นนิง)
ในเครื่องปกติ รอบการฝึก 50 รอบ (หรือที่เรียกว่า Epoch) ควรทำงานในแต่ละครั้งไม่เกิน 1 วินาที เมื่อเราเรียก Chrome แบบ Headless ในสถานะเริ่มต้น เราจะบันทึกเอาต์พุตของคอนโซล JavaScript ไปยังบรรทัดคำสั่งฝั่งเซิร์ฟเวอร์ Node.js เพื่อดูว่ารอบการฝึกเหล่านี้ทำงานได้เร็วเพียงใด
ตามที่คาดไว้ Epoch สำหรับการฝึกแต่ละครั้งใช้เวลานานกว่าที่คาดไว้ (หลายวินาที) ซึ่งบ่งชี้ว่า Chrome กลับไปใช้การใช้ CPU ของ JS แบบเก่าแบบธรรมดาแทนที่จะใช้ GPU ดังนี้
![Epoch ของการฝึกจะค่อยๆ เคลื่อนไหว](https://developer.chrome.google.cn/blog/supercharge-web-ai-testing/image/initial_epoch_timing.gif?hl=th)
หลังจากแก้ไขไดรเวอร์และใช้ชุดแฟล็กที่เหมาะสมสำหรับ Chrome แบบ Headless แล้ว การเรียกใช้ตัวอย่างการฝึก TensorFlow.js อีกครั้งจะส่งผลให้เกิด Epoch การฝึกที่เร็วขึ้นมาก
![Epoch ทำงานเร็วขึ้น](https://developer.chrome.google.cn/blog/supercharge-web-ai-testing/image/epoch_timing_with_headless.gif?hl=th)
สรุป
AI บนเว็บเติบโตขึ้นแบบทวีคูณ นับตั้งแต่สร้างขึ้นในปี 2017 เทคโนโลยีของเบราว์เซอร์อย่าง WebGPU, WebGL และ WebAssembly จะช่วยให้สามารถเร่งการคำนวณทางคณิตศาสตร์ของโมเดลแมชชีนเลิร์นนิงได้มากขึ้นในฝั่งไคลเอ็นต์
ในปี 2023 TensorFlow.js และ MediaPipe Web ดาวน์โหลดของโมเดลและไลบรารีได้มากกว่า 1 พันล้านครั้ง นับเป็นก้าวสำคัญครั้งประวัติศาสตร์และสัญญาณที่บอกถึงวิธีที่นักพัฒนาและวิศวกรเว็บต่างหันไปใช้ AI ในเว็บแอปรุ่นใหม่เพื่อสร้างโซลูชันที่ยอดเยี่ยมอย่างแท้จริง
เมื่อประสบความสำเร็จในการใช้งาน มาพร้อมกับความรับผิดชอบที่ยิ่งใหญ่ ในระดับการใช้งานในระบบที่ใช้งานจริงระดับนี้ จำเป็นต้องทดสอบโมเดล AI ฝั่งไคลเอ็นต์และบนเบราว์เซอร์ในสภาพแวดล้อมของเบราว์เซอร์อย่างแท้จริง ขณะเดียวกันก็รองรับการปรับขนาด ทำให้ทำงานอัตโนมัติได้ และอยู่ภายในการตั้งค่าฮาร์ดแวร์ที่ได้มาตรฐานที่ทราบกันดี
การใช้ประโยชน์จากศักยภาพของ Headless Chrome และ Puppeteer ใหม่จะทำให้คุณทดสอบภาระงานดังกล่าวในสภาพแวดล้อมที่เป็นมาตรฐานและทำซ้ำได้อย่างมั่นใจ เพื่อให้ได้ผลลัพธ์ที่สม่ำเสมอและเชื่อถือได้
สรุป
โปรดดูคำแนะนำทีละขั้นตอนในเอกสารประกอบของเรา เพื่อให้คุณได้ลองตั้งค่าทั้งหมดด้วยตนเอง
หากคิดว่าสิ่งนี้เป็นประโยชน์ ก็อย่าลืมเข้าไปถามใน LinkedIn, X (เดิมคือ Twitter) หรือโซเชียลเน็ตเวิร์กทางใดก็ได้ที่ใช้แฮชแท็ก #WebAI เรายินดีรับฟังความคิดเห็นจากคุณ เพื่อให้เราได้เขียนเนื้อหาแบบนี้มากขึ้นในอนาคต
ติดดาวในที่เก็บ GitHub เพื่อรับการอัปเดตในอนาคต
กิตติกรรมประกาศ
ขอขอบคุณทุกคนในทีม Chrome ที่ช่วยแก้ปัญหาไดรเวอร์และปัญหา WebGPU ที่เราพบในโซลูชันนี้ ขอขอบคุณเป็นพิเศษจาก Jecelyn Yeen และ Alexandra White ที่ช่วยฝึกคำศัพท์ในบล็อกโพสต์นี้ ต้องขอขอบคุณ Yuly Novikov, Andrey Kosyakov และ Alex Rudenko ที่เป็นเครื่องมือในการสร้างโซลูชันสุดท้ายที่ใช้งานได้