ข่าวดี คุณได้สร้างแอปพลิเคชัน Web 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 ทำงานอัตโนมัติในโหมดไม่มีส่วนหัว ซึ่งหมายความว่าเบราว์เซอร์จะทำงานโดยไม่มีอินเทอร์เฟซที่มองเห็นได้บนเซิร์ฟเวอร์ เราใช้โหมดไม่มีส่วนหัวแบบใหม่ที่ปรับปรุงแล้ว ไม่ใช่แบบฟอร์มเดิม
ยืนยันสภาพแวดล้อม
วิธีที่ดีที่สุดในการตรวจสอบว่าการเร่งฮาร์ดแวร์ใน 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 แบบไม่มีส่วนหัว จะปิดใช้ GPU หากต้องการเปิดใช้ใน Linux ให้ใช้ Flag ต่อไปนี้ทั้งหมดเมื่อเปิด Chrome แบบไม่มีส่วนหัว
- แฟล็ก
--no-sandbox
จะปิดใช้แซนด์บ็อกซ์ความปลอดภัยของ Chrome ซึ่งจะแยกกระบวนการของเบราว์เซอร์ออกจากส่วนอื่นๆ ของระบบ เราไม่รองรับการเรียกใช้ Chrome เป็นรูทโดยไม่มี แซนด์บ็อกซ์นี้ - Flag
--headless=new
เรียกใช้ Chrome ด้วยโหมดไม่มีส่วนหัวใหม่ที่ได้รับการปรับปรุงโดยไม่มี UI ที่มองเห็นได้ - Flag
--use-angle=vulkan
จะบอกให้ Chrome ใช้แบ็กเอนด์ Vulkan สำหรับ ANGLE ซึ่งแปลการเรียกใช้ OpenGL ES 2/3 เป็นการเรียก Vulkan API - Flag
--enable-features=Vulkan
เปิดใช้แบ็กเอนด์กราฟิก Vulkan สำหรับการประกอบและการแรสเตอร์ใน Chrome - แฟล็ก
--disable-vulkan-surface
ปิดใช้ส่วนขยายอินสแตนซ์ vulkan ของVK_KHR_surface
แทนที่จะใช้การสลับเชน ระบบจะใช้ Bit Blit กับผลลัพธ์การแสดงผลปัจจุบันบนหน้าจอ - Flag
--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 ไม่สามารถตรวจพบ GPU ของ NVIDIA T4 ที่ระดับ GL_RENDERER
ดังที่แสดงในเอาต์พุตต่อไปนี้ ซึ่งทำให้เกิดปัญหากับ Chrome แบบไม่มีส่วนหัว
ข้อมูลผู้ขับขี่ | |
---|---|
GL_RENDERER | ANGLE (Google, Vulkan 1.3.0 (SwiftShader Device (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 ได้โดยใช้โหมดไร้ส่วนหัวใหม่เอี่ยม
เบื้องหลัง: การตรวจสอบของทีมเรา
หลังจากค้นคว้ามาเป็นเวลานาน เราก็ไม่พบวิธีการทำงานสำหรับสภาพแวดล้อมที่เราจำเป็นต้องใช้ใน Google Colab แต่มีโพสต์ที่มีความหวัง ที่ทำงานในสภาพแวดล้อมอื่นๆ ซึ่งให้ผลดีจริงๆ ท้ายที่สุดแล้ว เราจำลองความสำเร็จของพวกเขาในสภาพแวดล้อม Colab NVIDIA T4 ไม่สำเร็จ เนื่องจากเรามี 2 ปัญหาหลักดังนี้
- การใช้ Flag บางรูปแบบอนุญาตให้ตรวจจับ GPU ได้ แต่ไม่ให้คุณใช้ GPU
- ตัวอย่างโซลูชันการทำงานที่บุคคลที่สามใช้ Chrome แบบไม่มีส่วนหัวเวอร์ชันเก่า ซึ่งจะมีการเลิกใช้งานไปเพื่อเวอร์ชันใหม่ในบางครั้ง เราต้องการโซลูชันที่ทำงานร่วมกับ Chrome แบบไม่มีส่วนหัวแบบใหม่ เพื่อให้รองรับการใช้งานในอนาคตได้ดียิ่งขึ้น
เรายืนยันการใช้งาน GPU ด้านล่างโดยเรียกใช้หน้าเว็บตัวอย่าง TensorFlow.js สำหรับการจดจำรูปภาพ โดยเราฝึกโมเดลให้จดจำตัวอย่างเสื้อผ้า (คล้ายๆ กับแมชชีนเลิร์นนิงใน "สวัสดีโลก")
ในเครื่องปกติ รอบการฝึก 50 รอบ (หรือที่เรียกว่า Epoch) ควรทำงานในเวลาไม่ถึง 1 วินาทีในแต่ละรอบ การเรียก Chrome แบบไม่มีส่วนหัวในสถานะเริ่มต้น เราสามารถบันทึกเอาต์พุตของคอนโซล JavaScript ไปยังบรรทัดคำสั่งฝั่งเซิร์ฟเวอร์ของ Node.js เพื่อดูว่ารอบการฝึกเหล่านี้ทำงานเร็วเพียงใด
ตามที่คาดไว้ การฝึกแต่ละตอนใช้เวลานานกว่าที่คาดไว้ (หลายวินาที) ซึ่งชี้ให้เห็นว่า Chrome กลับไปใช้การดำเนินการ CPU ของ JS แบบเดิมแทนการใช้ GPU
![Epoch การฝึกจะเคลื่อนไหวด้วยจังหวะที่ช้าลง](https://developer.chrome.google.cn/blog/supercharge-web-ai-testing/image/initial_epoch_timing.gif?authuser=6&hl=th)
หลังจากแก้ไขไดรเวอร์และใช้ Flag ต่างๆ ร่วมกันสำหรับ Chrome แบบไม่มีส่วนหัว การเรียกใช้ตัวอย่างการฝึก TensorFlow.js อีกครั้งจะทำให้การฝึก Epoch ทำงานได้เร็วขึ้นมาก
![ความเร็ว Epoch เพิ่มขึ้น](https://developer.chrome.google.cn/blog/supercharge-web-ai-testing/image/epoch_timing_with_headless.gif?authuser=6&hl=th)
สรุป
Web AI เติบโตขึ้นแบบทวีคูณ นับตั้งแต่ที่สร้างขึ้นในปี 2017 เทคโนโลยีเบราว์เซอร์อย่าง WebGPU, WebGL และ WebAssembly ช่วยเพิ่มความเร็วในการดำเนินการทางคณิตศาสตร์ของโมเดลแมชชีนเลิร์นนิงในฝั่งไคลเอ็นต์
ในปี 2023 TensorFlow.js และ MediaPipe Web มียอดดาวน์โหลดโมเดลและไลบรารีมากกว่า 1 พันล้านครั้ง ซึ่งนับเป็นความสำเร็จครั้งประวัติศาสตร์และเป็นสัญญาณที่แสดงให้เห็นว่านักพัฒนาและวิศวกรเว็บกำลังหันไปใช้ AI ในเว็บแอปรุ่นถัดไปเพื่อสร้างโซลูชันอันน่าทึ่งอย่างแท้จริง
การใช้งานที่ประสบความสำเร็จอย่างมากมาพร้อมกับความรับผิดชอบที่ยิ่งใหญ่ การใช้งานระดับนี้ในระบบที่ใช้งานจริงนั้นจำเป็นต่อการทดสอบโมเดล AI บนเบราว์เซอร์ฝั่งไคลเอ็นต์ในสภาพแวดล้อมของเบราว์เซอร์ที่แท้จริง ขณะเดียวกันก็ปรับขนาดได้ ใช้งานได้โดยอัตโนมัติ และอยู่ภายในการตั้งค่าฮาร์ดแวร์มาตรฐานที่รู้จัก
การใช้ประโยชน์จากขุมพลังของ Chrome แบบไม่มีส่วนหัวและ Puppeteer ใหม่ช่วยให้คุณทดสอบภาระงานดังกล่าวได้อย่างมั่นใจในสภาพแวดล้อมที่เป็นมาตรฐานและทำซ้ำได้ เพื่อให้ได้ผลลัพธ์ที่สอดคล้องกันและเชื่อถือได้
สรุป
เรามีคำแนะนำทีละขั้นตอนอยู่ในเอกสารของเรา คุณจึงสามารถลองตั้งค่าทั้งหมดด้วยตนเอง
หากข้อมูลนี้เป็นประโยชน์ โปรดส่งข้อความขอบคุณใน LinkedIn, X (เดิมคือ Twitter) หรือโซเชียลเน็ตเวิร์กใดก็ตามที่คุณใช้แฮชแท็ก #WebAI เรายินดีอย่างยิ่งหากได้รับความคิดเห็นจากคุณ เพื่อที่เราจะได้เขียนเรื่องราวเช่นนี้มากขึ้นในอนาคต
ติดดาวในที่เก็บ GitHub เพื่อรับการอัปเดตในอนาคต
กิตติกรรมประกาศ
ขอขอบคุณทุกท่านในทีม Chrome ที่ช่วยเราแก้ไขข้อบกพร่องของไดรเวอร์และ WebGPU ที่เราประสบในโซลูชันนี้ ขอขอบคุณเป็นพิเศษสำหรับ Jecelyn Yeen และ Alexandra White ที่ช่วยเหลือ WordPress โพสต์บนบล็อกนี้ ต้องขอขอบคุณ Yuly Novikov, Andrey Kosyakov และ Alex Rudenko ที่มีบทบาทสำคัญในการสร้างโซลูชันการทำงานขั้นสุดท้าย