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

เจสัน เมย์ส
เจสัน เมย์ส
Twitter GitHub
ฟร็องซัว โบฟอร์
François Beaufort
GitHub

ข่าวดี คุณได้สร้างแอปพลิเคชัน 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: ปิดใช้แล้ว

ตรวจพบปัญหา
ปิดใช้ 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 ได้

เอาต์พุตเริ่มต้นตรวจไม่พบ GPU NVIDIA T4
ข้อมูลผู้ขับ
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 ประการดังนี้

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

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

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

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

Epoch ของการฝึกจะค่อยๆ เคลื่อนไหว
รูปที่ 1: การบันทึกแบบเรียลไทม์ที่แสดงระยะเวลาในการฝึก Epoch ในการฝึกแต่ละครั้ง (วินาที)

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

Epoch ทำงานเร็วขึ้น
รูปที่ 2: จับภาพแบบเรียลไทม์ที่แสดงความเร็วของ Epoch

สรุป

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 ที่เป็นเครื่องมือในการสร้างโซลูชันสุดท้ายที่ใช้งานได้