Tingkatkan pengujian model Web AI: WebGPU, WebGL, dan Headless Chrome

Jason Mayes

François Beaufort

Kabar baik! Anda telah membuat aplikasi AI Web keren yang menjalankan model machine learning langsung di perangkat pengguna. Layanan ini berjalan sepenuhnya di browser web sisi klien, tanpa mengandalkan cloud. Desain di perangkat ini meningkatkan privasi pengguna, meningkatkan performa, dan mengurangi biaya secara signifikan.

Namun, ada rintangan. Model TensorFlow.js dapat beroperasi di kedua CPU (WebAssembly) dan GPU yang lebih canggih (melalui WebGL dan WebGPU). Pertanyaannya adalah: bagaimana cara mengotomatiskan pengujian browser secara konsisten dengan hardware yang dipilih?

Mempertahankan konsistensi sangat penting untuk membandingkan performa model machine learning dari waktu ke waktu saat Anda melakukan iterasi dan meningkatkannya, sebelum melakukan deployment untuk pengguna di dunia nyata untuk digunakan di perangkat mereka.

Menyiapkan lingkungan pengujian yang konsisten dengan GPU bisa jadi lebih sulit dari yang diharapkan. Dalam postingan blog ini, kami akan menyampaikan masalah yang kami hadapi dan cara kami menyelesaikannya, sehingga Anda dapat meningkatkan performa aplikasi.

Ini bukan hanya untuk developer AI Web. Jika Anda bekerja pada game web atau grafis, postingan ini juga bermanfaat bagi Anda.

Yang ada di toolbox otomatisasi kami

Inilah yang kami gunakan:

• Lingkungan: Notebook Google Colab berbasis Linux yang terhubung ke GPU NVIDIA T4 atau V100. Anda dapat menggunakan platform cloud lain, seperti Google Cloud (GCP), jika diinginkan.
• Browser: Chrome mendukung WebGPU, penerus WebGL yang andal, yang membawa kemajuan API GPU modern ke web.
• Otomatisasi: Puppeteer adalah library Node.js yang memungkinkan Anda mengontrol browser secara terprogram dengan JavaScript. Dengan Puppeteer, kita dapat mengotomatiskan Chrome dalam mode headless, yang berarti browser berjalan tanpa antarmuka yang terlihat di server. Kami menggunakan mode headless baru yang ditingkatkan, bukan bentuk lama.

Memverifikasi lingkungan

Cara terbaik untuk memeriksa apakah akselerasi hardware diaktifkan di Chrome adalah dengan mengetik chrome://gpu ke kolom URL. Anda dapat menjalankan pengujian yang setara dengan Puppeteer secara terprogram dengan console.log atau menyimpan laporan lengkapnya sebagai PDF untuk diperiksa secara manual:

/* 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();

Buka chrome://gpu dan Anda akan mendapatkan hasil berikut:

Bukan awal yang baik. Sudah cukup jelas bahwa deteksi perangkat keras gagal. WebGL, WebGL2, dan WebGPU pada dasarnya dinonaktifkan atau khusus untuk software. Kami tidak sendirian dalam masalah ini - ada banyak diskusi online tentang orang-orang dalam situasi serupa, termasuk di saluran dukungan resmi Chrome (1), (2).

Mengaktifkan dukungan WebGPU dan WebGL

Secara default, Chrome Headless menonaktifkan GPU. Untuk mengaktifkannya di Linux, terapkan semua tanda berikut saat meluncurkan Headless Chrome:

• Flag --no-sandbox menonaktifkan sandbox keamanan Chrome, yang memisahkan proses browser dari bagian sistem lainnya. Menjalankan Chrome sebagai root tanpa sandbox ini tidak didukung.
• Tanda --headless=new menjalankan Chrome dengan mode headless yang baru dan ditingkatkan, tanpa UI yang terlihat.
• Tanda --use-angle=vulkan memberi tahu Chrome untuk menggunakan backend Vulkan untuk ANGLE, yang menerjemahkan panggilan OpenGL ES 2/3 ke panggilan Vulkan API.
• Flag --enable-features=Vulkan mengaktifkan backend grafis Vulkan untuk pengomposisian dan rasterisasi di Chrome.
• Flag --disable-vulkan-surface menonaktifkan ekstensi instance vulkan VK_KHR_surface. Daripada menggunakan swapchain, Bit blit digunakan untuk hasil render saat ini di layar.
• Tanda --enable-unsafe-webgpu mengaktifkan WebGPU API eksperimental di Chrome pada Linux dan menonaktifkan daftar adaptor yang tidak diizinkan.

Sekarang kita menggabungkan semua perubahan yang telah kita buat sejauh ini. Berikut adalah skrip lengkapnya.

/* 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();

Jalankan kembali skrip. Tidak ada masalah WebGPU yang terdeteksi dan nilai berubah dari dinonaktifkan menjadi software saja.

Namun, akselerasi hardware masih tidak tersedia, GPU NVIDIA T4 tidak terdeteksi.

Instal driver GPU yang benar

Kami menyelidiki output chrome://gpu secara lebih mendalam, dengan beberapa pakar GPU di tim Chrome. Kami menemukan masalah pada driver default yang diinstal di instance Linux Colab, yang menyebabkan masalah pada Vulkan, yang menyebabkan Chrome tidak dapat mendeteksi GPU NVIDIA T4 pada level GL_RENDERER seperti yang ditunjukkan pada output berikut. Hal ini menyebabkan masalah pada Chrome Headless.

Menginstal {i>driver<i} yang benar dan kompatibel akan memperbaiki masalah tersebut.

Untuk menginstal driver yang benar, jalankan perintah berikut selama penyiapan. Dua baris terakhir membantu Anda mencatat output dari apa yang terdeteksi oleh driver NVIDIA beserta vulkaninfo.

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

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

Sekarang jalankan kembali skrip dan kita mendapatkan hasil berikut. 🎉

Dengan menggunakan driver dan flag yang benar saat menjalankan Chrome, kini kami memiliki dukungan WebGPU dan WebGL menggunakan mode headless yang baru dan baru.

Di balik layar: Investigasi tim kami

Setelah banyak penelitian, kami tidak menemukan metode kerja untuk lingkungan yang perlu kami jalankan di Google Colab, meskipun ada beberapa postingan yang penuh harapan yang berfungsi di lingkungan lain, dan ini sangat menjanjikan. Pada akhirnya, kami tidak dapat mereplikasi kesuksesan mereka di lingkungan Colab NVIDIA T4, karena kami memiliki 2 masalah utama:

1. Beberapa kombinasi tanda memungkinkan deteksi GPU, tetapi tidak memungkinkan Anda benar-benar menggunakan GPU.
2. Contoh solusi kerja oleh pihak ketiga menggunakan Chrome versi headless yang pada suatu saat tidak akan digunakan lagi dan digantikan versi baru. Kami memerlukan solusi yang berfungsi dengan Chrome Headless baru agar lebih siap menghadapi masa depan.

Kami mengonfirmasi kekurangan penggunaan GPU dengan menjalankan contoh halaman web TensorFlow.js untuk pengenalan gambar. Di sini, kami melatih model untuk mengenali sampel pakaian (semacam machine learning "halo dunia").

Pada mesin biasa, 50 siklus pelatihan (dikenal sebagai epoch) harus berjalan masing-masing dalam waktu kurang dari 1 detik. Dengan memanggil Chrome Headless dalam status default, kita dapat mencatat output konsol JavaScript ke command line sisi server Node.js untuk melihat seberapa cepat siklus pelatihan ini sebenarnya.

Seperti yang diharapkan, setiap epoch pelatihan memerlukan waktu lebih lama dari yang diharapkan (beberapa detik), yang menunjukkan bahwa Chrome telah beralih kembali ke eksekusi CPU JS lama biasa, bukan menggunakan GPU:

Setelah memperbaiki pengemudi dan menggunakan kombinasi flag yang tepat untuk Headless Chrome, menjalankan kembali contoh pelatihan TensorFlow.js akan menghasilkan epoch pelatihan yang jauh lebih cepat.

Ringkasan

AI Web telah berkembang secara eksponensial sejak dibuat pada tahun 2017. Dengan teknologi browser seperti WebGPU, WebGL, dan WebAssembly, operasi matematika model machine learning dapat dipercepat lebih jauh di sisi klien.

Sejak tahun 2023, TensorFlow.js dan MediaPipe Web telah melampaui 1 miliar download untuk model dan library, sebuah pencapaian bersejarah dan tanda bagaimana developer web dan engineer beralih menggunakan AI pada aplikasi web generasi berikutnya untuk membuat beberapa solusi yang benar-benar luar biasa.

Keberhasilan besar dalam penggunaan disertai tanggung jawab yang besar. Pada tingkat penggunaan dalam sistem produksi ini, diperlukan adanya pengujian model AI berbasis browser sisi klien di lingkungan browser sebenarnya, sekaligus juga skalabel, dapat diotomatiskan, dan dalam penyiapan hardware standar yang diketahui.

Dengan memanfaatkan kecanggihan gabungan Chrome Headless dan Puppeteer yang baru, Anda dapat menguji workload tersebut di lingkungan standar dan dapat direplikasi, sehingga memastikan hasil yang konsisten dan andal.

Penutup

Panduan langkah demi langkah tersedia dalam dokumentasi kami, sehingga Anda dapat mencoba sendiri penyiapan lengkapnya.

Jika Anda merasa ini berguna, sapalah di LinkedIn, X (sebelumnya Twitter), atau jejaring sosial apa pun yang Anda gunakan menggunakan hashtag #WebAI. Saya akan senang mendengar masukan Anda sehingga kami tahu untuk menulis lebih banyak hal seperti ini di masa mendatang.

Tambahkan bintang di repo GitHub untuk menerima semua update mendatang.

Ucapan terima kasih

Terima kasih banyak kepada semua orang di tim Chrome yang telah membantu men-debug masalah driver dan WebGPU yang kami hadapi dalam solusi ini, dan terima kasih khusus kepada Jecelyn Yeen dan Alexandra White yang telah membantu ahli kata-kata di postingan blog ini. Terima kasih kepada Yuly Novikov, Andrey Kosyakov, dan Alex Rudenko yang telah berperan penting dalam menciptakan solusi akhir yang efektif.