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

Jason Mayes

François Beaufort

ข่าวดี คุณได้สร้างแอปพลิเคชัน AI บนเว็บเจ๋งๆ ที่เรียกใช้โมเดลแมชชีนเลิร์นนิงในอุปกรณ์ของผู้ใช้โดยตรง ทำงานทุกอย่างได้ บนเว็บเบราว์เซอร์ฝั่งไคลเอ็นต์ โดยไม่ต้องพึ่งระบบคลาวด์ ในอุปกรณ์เครื่องนี้ การออกแบบช่วยเพิ่มความเป็นส่วนตัวของผู้ใช้ เพิ่มประสิทธิภาพ และลดต้นทุน อย่างมีนัยสำคัญ

แต่ก็มีอุปสรรค โมเดล TensorFlow.js ทำงานได้ทั้งบน CPU (WebAssembly) และ GPU ที่มีประสิทธิภาพมากขึ้น (ผ่าน WebGL และ WebGPU) คำถามก็คือ คุณจะทดสอบเบราว์เซอร์โดยอัตโนมัติอย่างต่อเนื่องด้วยฮาร์ดแวร์ที่เลือกได้อย่างไร

การรักษาความสอดคล้องกันเป็นสิ่งสำคัญในการเปรียบเทียบโมเดลแมชชีนเลิร์นนิง เมื่อเวลาผ่านไปเรื่อยๆ ในขณะที่ปรับปรุงและปรับปรุง ก่อนที่จะนำไปใช้ ผู้ใช้งานจริงมาใช้งานบนอุปกรณ์ของตน

การตั้งค่าสภาพแวดล้อมการทดสอบที่สอดคล้องกันด้วย GPU อาจทำได้ยากกว่าที่คาดไว้ ในบล็อกโพสต์นี้เราจะแชร์ปัญหาที่เราเจอและวิธีแก้ไข เพื่อให้คุณปรับปรุงประสิทธิภาพของแอปพลิเคชันได้

เครื่องมือนี้ไม่ได้มีไว้สำหรับนักพัฒนา Web AI เท่านั้น หากคุณกำลังเล่นเกมบนเว็บหรือ กราฟิก ดังนั้นโพสต์นี้ก็มีค่าสำหรับคุณเช่นกัน

สิ่งที่มีอยู่ในกล่องเครื่องมือการทำงานอัตโนมัติ

สิ่งที่เราใช้อยู่มีดังนี้

• สภาพแวดล้อม: Google Colab ใน Linux โน้ตบุ๊กที่เชื่อมต่อกับ NVIDIA GPU 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 แบบ Headless จะปิดใช้ GPU หากต้องการเปิดใช้ใน Linux ให้ใช้ Flag ต่อไปนี้ทั้งหมดเมื่อเปิดใช้งาน Headless Chrome

• แฟล็ก --no-sandbox จะปิดใช้แซนด์บ็อกซ์ความปลอดภัยของ Chrome ซึ่งจะแยก เบราว์เซอร์จากส่วนที่เหลือของระบบ การเรียกใช้ Chrome เป็นรูทโดยไม่มี ไม่สนับสนุนแซนด์บ็อกซ์นี้
• --headless=new Flag เรียกใช้ Chrome ด้วยเวอร์ชันใหม่ที่ได้รับการปรับปรุง โหมดไม่มีส่วนหัว โดยไม่มี UI ที่มองเห็นได้
• --use-angle=vulkan Flag จะบอกให้ Chrome ใช้ แบ็กเอนด์ Vulkan สำหรับ ANGLE ซึ่ง แปลการเรียกใช้ OpenGL ES 2/3 เป็นการเรียก Vulkan API
• --enable-features=Vulkan Flag เปิดใช้แบ็กเอนด์กราฟิก Vulkan สำหรับ การประสานและการแรสเตอร์ใน Chrome
• Flag --disable-vulkan-surface ปิดใช้ vulkan ของ VK_KHR_surface ของส่วนขยายอินสแตนซ์ ระบบจะใช้ Bit blit เพื่อแสดงผลลัพธ์การแสดงผลบนหน้าจอแทนการใช้ Swapchain
• แฟล็ก --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 เราพบปัญหากับไดรเวอร์เริ่มต้นที่ติดตั้งบน Colab สำหรับ Linux ทำให้เกิดปัญหากับ Vulkan จึงส่งผลให้ Chrome ไม่สามารถตรวจพบ NVIDIA T4 GPU ที่ระดับ 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. ชุดแฟล็กบางชุดอนุญาตให้ตรวจจับ GPU ได้ แต่ไม่อนุญาตให้คุณทำ ใช้ GPU จริงๆ
2. ตัวอย่างโซลูชันที่ใช้งานได้ซึ่งบุคคลที่สามใช้ Chrome แบบ Headless เวอร์ชันเก่า ซึ่งจะเลิกใช้งานในบางจุดเพื่อเปลี่ยนไปใช้เวอร์ชันใหม่ เราต้องการวิธีแก้ไข ที่ทำงานร่วมกับ Chrome แบบไม่มีส่วนหัวแบบใหม่เพื่อให้รองรับการใช้งานในอนาคตได้ดียิ่งขึ้น

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

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

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

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

สรุป

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 จากการช่วยเหลือเกี่ยวกับ Wordsmith บล็อกโพสต์นี้ ต้องขอบคุณ Yuly Novikov, Andrey Kosyakov และ Alex Rudenko ที่เป็นเสียงดนตรี ในการสร้างโซลูชันที่ใช้งานได้ขั้นสุดท้าย