เพิ่มประสิทธิภาพการทดสอบโมเดล AI ของเว็บ: WebGPU, WebGL และ Chrome แบบ Headless

Jason Mayes

François Beaufort

ข่าวดี คุณได้สร้างแอปพลิเคชัน 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 และคุณควรเห็นผลลัพธ์ต่อไปนี้

ยังเริ่มต้นไม่ดีเลย เห็นได้ชัดว่าการตรวจจับฮาร์ดแวร์ล้มเหลว โดยพื้นฐานแล้ว 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 และค่าจะเปลี่ยนจากการปิดใช้เป็นซอฟต์แวร์เท่านั้น

อย่างไรก็ตาม การเร่งฮาร์ดแวร์ยังคงไม่พร้อมใช้งาน จึงไม่ตรวจหา GPU NVIDIA T4

ติดตั้งไดรเวอร์ GPU ที่ถูกต้อง

เราได้ตรวจสอบผลลัพธ์ของ chrome://gpu อย่างละเอียดยิ่งขึ้นร่วมกับผู้เชี่ยวชาญด้าน GPU บางส่วนในทีม Chrome เราพบปัญหากับไดรเวอร์เริ่มต้นที่ติดตั้งในอินสแตนซ์ Linux Colab ซึ่งทำให้เกิดปัญหากับ Vulkan ทำให้ Chrome ไม่สามารถตรวจพบ GPU ของ NVIDIA T4 ที่ระดับ GL_RENDERER ดังที่แสดงในเอาต์พุตต่อไปนี้ ซึ่งทำให้เกิดปัญหากับ Chrome แบบไม่มีส่วนหัว

การติดตั้งไดรเวอร์ที่ถูกต้องซึ่งเข้ากันได้จะช่วยแก้ไขปัญหาได้

หากต้องการติดตั้งไดรเวอร์ที่ถูกต้อง ให้เรียกใช้คำสั่งต่อไปนี้ระหว่างการตั้งค่า สองบรรทัดสุดท้ายจะช่วยให้คุณบันทึกเอาต์พุตของสิ่งที่ไดรเวอร์ NVIDIA ตรวจพบพร้อมกับ vulkaninfo

apt-get install -y vulkan-tools libnvidia-gl-525

// Verify the NVIDIA drivers detects along with vulkaninfo
nvidia-smi
vulkaninfo --summary

ในขั้นนี้ ให้เรียกใช้สคริปต์อีกครั้ง และเราได้ผลลัพธ์ดังต่อไปนี้ 🎉

การใช้ไดรเวอร์และแฟล็กที่ถูกต้องเมื่อใช้ Chrome ตอนนี้เราสามารถรองรับ WebGPU และ WebGL ได้โดยใช้โหมดไร้ส่วนหัวใหม่เอี่ยม

เบื้องหลัง: การตรวจสอบของทีมเรา

หลังจากค้นคว้ามาเป็นเวลานาน เราก็ไม่พบวิธีการทำงานสำหรับสภาพแวดล้อมที่เราจำเป็นต้องใช้ใน Google Colab แต่มีโพสต์ที่มีความหวัง ที่ทำงานในสภาพแวดล้อมอื่นๆ ซึ่งให้ผลดีจริงๆ ท้ายที่สุดแล้ว เราจำลองความสำเร็จของพวกเขาในสภาพแวดล้อม Colab NVIDIA T4 ไม่สำเร็จ เนื่องจากเรามี 2 ปัญหาหลักดังนี้

1. การใช้ Flag บางรูปแบบอนุญาตให้ตรวจจับ GPU ได้ แต่ไม่ให้คุณใช้ GPU
2. ตัวอย่างโซลูชันการทำงานที่บุคคลที่สามใช้ Chrome แบบไม่มีส่วนหัวเวอร์ชันเก่า ซึ่งจะมีการเลิกใช้งานไปเพื่อเวอร์ชันใหม่ในบางครั้ง เราต้องการโซลูชันที่ทำงานร่วมกับ Chrome แบบไม่มีส่วนหัวแบบใหม่ เพื่อให้รองรับการใช้งานในอนาคตได้ดียิ่งขึ้น

เรายืนยันการใช้งาน GPU ด้านล่างโดยเรียกใช้หน้าเว็บ���ัวอย่าง TensorFlow.js สำหรับการจดจำรูปภาพ โดยเราฝึกโมเดลให้จดจำตัวอย่างเสื้อผ้า (คล้ายๆ กับแมชชีนเลิร์นนิงใน "สวัสดีโลก")

ในเครื่องปกติ รอบการฝึก 50 รอบ (หรือที่���รียกว่า Epoch) ควรทำงานในเวลาไม่ถึง 1 วินาทีในแต่ละรอบ การเรียก Chrome แบบไม่มีส่วนหัวในสถ��น��เ����่��ต���� เรา����������ถบันทึกเอาต์พุตของคอนโซล JavaScript ไปยังบรรทัดคำสั่งฝั่งเซิร์ฟเวอร์ของ Node.js เพื่อดูว่ารอบการฝึกเหล่านี้ทำงานเร็วเพียงใด

ตามที่คาดไว้ การฝึกแต่ละตอนใช้เวลานานกว่าที่คาดไว้ (หลายวินาที) ซึ่งชี้ให้เห็นว่า Chrome กลับไปใช้การดำเนินการ CPU ของ JS แบบเดิมแทนการใช้ GPU

หลังจากแก้ไขไดรเวอร์และใช้ Flag ต่างๆ ร่วมกันสำหรับ Chrome แบบไม่มีส่วนหัว การเรียกใช้ตัวอย่างการฝึก TensorFlow.js อีกครั้งจะทำให้การฝึก Epoch ทำงานได้เร็วขึ้นมาก

สรุป

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 ที่มีบทบาทสำคัญในการสร้างโซลูชันการทำงานขั้นสุดท้าย