Kabar baik! Anda telah membuat aplikasi Web AI keren yang menjalankan model machine learning langsung di perangkat pengguna. Fungsi ini berjalan sepenuhnya pada {i>browser<i} web sisi klien, tanpa mengandalkan {i>cloud<i}. Desain di perangkat ini meningkatkan privasi pengguna, meningkatkan performa, dan mengurangi biaya secara signifikan.
Namun, ada rintangan. Nama Model TensorFlow.js dapat beroperasi di CPU (WebAssembly) dan GPU yang lebih bertenaga (melalui WebGL dan WebGPU). Pertanyaannya adalah: bagaimana cara mengotomatiskan pengujian browser secara konsisten dengan hardware yang dipilih?
Menjaga konsistensi sangat penting untuk membandingkan performa model machine learning dari waktu ke waktu saat Anda melakukan iterasi dan meningkatkannya, sebelum deployment untuk pengguna di dunia nyata agar dapat menggunakannya di perangkat mereka.
Menyiapkan lingkungan pengujian yang konsisten dengan GPU bisa jadi lebih sulit daripada yang diharapkan. Dalam postingan blog ini, kami akan membagikan masalah yang kami hadapi dan cara kami menyelesaikannya sehingga Anda dapat meningkatkan performa aplikasi.
Ini bukan hanya untuk developer AI Web. Jika Anda sedang mengerjakan {i> game<i} web atau gambar, postingan ini juga bermanfaat bagi Anda.
Isi kotak alat otomatisasi kami
Berikut adalah yang kami gunakan:
- Lingkungan: Notebook Google Colab berbasis Linux yang terhubung ke GPU T4 atau V100 NVIDIA. Anda dapat menggunakan platform cloud lainnya, seperti Google Cloud, (GCP), jika diinginkan.
- Browser: Chrome mendukung WebGPU, penerus WebGL yang andal, yang menghadirkan kemajuan API GPU modern ke web.
- Otomatisasi: Puppeteer adalah library Node.js yang memungkinkan Anda mengontrol browser secara terprogram dengan JavaScript. Dengan Puppeteer, kita bisa mengotomatiskan Chrome dalam mode headless, yang berarti browser berjalan tanpa antarmuka yang terlihat, pada server. Kami menggunakan peningkatan mode headless baru, bukan formulir lama.
Memverifikasi lingkungan
Cara terbaik untuk memeriksa apakah akselerasi
perangkat keras diaktifkan di Chrome adalah dengan
ketik chrome://gpu di kolom URL. Anda dapat
secara terprogram melakukan yang setara dengan Puppeteer
dengan console.log atau simpan laporan lengkap 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:
| Status fitur grafis | |
|---|---|
| OpenGL: | Disabled |
| Vulkan: | Disabled |
| WebGL: | Khusus software, akselerasi hardware tidak tersedia. |
| WebGL2: | Khusus software, akselerasi hardware tidak tersedia. |
| WebGPU: | Disabled |
|
Masalah terdeteksi. |
|
Bukan awal yang baik. Sudah cukup jelas bahwa deteksi perangkat keras gagal. WebGL, WebGL2, dan WebGPU pada dasarnya dinonaktifkan atau khusus untuk software. Rab tidak sendirian dalam permasalahan ini - ada banyak diskusi {i>online<i} tentang orang-orang dalam situasi serupa, termasuk di saluran dukungan Chrome resmi (1), (2).
Mengaktifkan dukungan WebGPU dan WebGL
Secara default, Chrome Headless menonaktifkan GPU. Untuk mengaktifkannya di Linux, terapkan semua flag berikut saat meluncurkan Chrome tanpa GUI:
- Tanda
--no-sandboxmenonaktifkan sandbox keamanan Chrome, yang memisahkan proses {i>browser<i} dari seluruh sistem. Menjalankan Chrome sebagai root tanpa sandbox ini tidak didukung. - Tanda
--headless=newmenjalankan Chrome dengan versi baru dan yang ditingkatkan mode headless, tanpa UI yang terlihat. - Flag
--use-angle=vulkanmemberi tahu Chrome untuk menggunakan Backend Vulkan untuk ANGLE, yang menerjemahkan panggilan OpenGL ES 2/3 ke panggilan Vulkan API. - Flag
--enable-features=Vulkanmengaktifkan backend grafis Vulkan untuk komposisi dan raster di Chrome. - Flag
--disable-vulkan-surfacemenonaktifkan ekstensi instance vulkanVK_KHR_surface. Alih-alih menggunakan {i>swapchain<i}, Bit blit digunakan untuk menampilkan hasil render di layar. - Flag
--enable-unsafe-webgpumengaktifkan WebGPU API eksperimental di Chrome di 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 skrip lagi. Tidak ada masalah WebGPU yang terdeteksi dan nilai berubah dari dinonaktifkan untuk perangkat lunak saja.
| Status fitur grafis | |
|---|---|
| OpenGL: | Disabled |
| Vulkan: | Disabled |
| WebGL: | Khusus software, akselerasi hardware tidak tersedia. |
| WebGL2: | Khusus software, akselerasi hardware tidak tersedia. |
| WebGPU: | Khusus software, akselerasi hardware tidak tersedia. |
Namun, akselerasi perangkat keras masih belum tersedia, GPU NVIDIA T4 tidak terdeteksi.
Instal driver GPU yang benar
Kami menyelidiki output chrome://gpu lebih lanjut, dengan beberapa pakar GPU
di tim Chrome. Kami menemukan masalah dengan driver bawaan yang terinstal pada
Colab Linux
terjadi, 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 Headless Chrome.
| Informasi pengemudi | |
|---|---|
| GL_RENDERER | ANGLE (Google, Vulkan 1.3.0 (SwiftShader Device (Subzero) (0x0000C0DE)), driver SwiftShader-5.0.0) |
Menginstal {i>driver<i} yang benar dan kompatibel akan memperbaiki masalah tersebut.
| Informasi pengemudi | |
|---|---|
| GL_RENDERER | ANGLE (NVIDIA Corporation, Tesla T4/PCIe/SSE2, OpenGL ES 3.2 NVIDIA 525.105.17) |
Untuk menginstal driver yang benar, jalankan perintah berikut selama penyiapan. Tujuan
dua baris terakhir membantu Anda untuk mencatat {i>
output<i} dari apa yang terdeteksi oleh {i>driver<i} NVIDIA
dengan vulkaninfo.
apt-get install -y vulkan-tools libnvidia-gl-525// Verify the NVIDIA drivers detects along with vulkaninfonvidia-smivulkaninfo --summary
Sekarang jalankan kembali skrip dan kita mendapatkan hasil berikut. 🎉
| Status fitur grafis | |
|---|---|
| OpenGL: | Enabled |
| Vulkan: | Enabled |
| WebGL: | Hardware dipercepat tetapi performanya lebih rendah. |
| WebGL2: | Dipercepat hardware, tetapi dengan performa yang lebih rendah. |
| WebGPU: | Dipercepat hardware, tetapi dengan performa yang lebih rendah. |
Dengan menggunakan driver dan flag yang benar saat menjalankan Chrome, kini kami memiliki WebGPU dan dukungan WebGL menggunakan mode headless baru yang keren.
Di balik layar: Investigasi tim kami
Setelah banyak penelitian, kami tidak menemukan metode kerja untuk lingkungan yang kami diperlukan untuk eksekusi di Google Colab, meskipun ada beberapa postingan penuh harapan yang bekerja di lingkungan lain, itu sangat menjanjikan. Pada akhirnya, kami tidak dapat mereplikasi kesuksesan mereka di lingkungan Colab NVIDIA T4, karena kami memiliki 2 masalah utama:
- Beberapa kombinasi tanda memungkinkan deteksi GPU, tetapi tidak benar-benar menggunakan GPU.
- Contoh solusi kerja oleh pihak ketiga yang menggunakan Chrome headless versi lama yang pada akhirnya akan dihentikan dan digantikan oleh versi baru. Kami membutuhkan solusi yang berfungsi dengan Chrome Headless baru agar lebih siap menghadapi masa depan.
Kita mengonfirmasi kekurangan pemanfaatan GPU dengan menjalankan contoh halaman web TensorFlow.js untuk pengenalan gambar, di mana kami melatih seorang model untuk mengenali sampel pakaian (semacam "halo dunia" machine learning).
Pada mesin biasa, 50 siklus pelatihan (dikenal sebagai epoch) harus berjalan dalam waktu lebih singkat masing-masing lebih dari 1 detik. Memanggil Chrome Headless dalam status defaultnya, kita dapat mencatat output konsol JavaScript ke command line sisi server Node.js untuk melihat cepat yang diselesaikan siklus pelatihan ini.
Seperti yang diharapkan, setiap epoch pelatihan membutuhkan waktu lebih lama dari yang diharapkan (beberapa detik), yang menunjukkan bahwa Chrome telah beralih kembali ke eksekusi CPU JS lama biasa alih-alih menggunakan GPU:
Setelah memperbaiki pengemudi dan menggunakan kombinasi flag yang tepat untuk Headless Chrome, menjalankan ulang contoh pelatihan TensorFlow.js akan jauh lebih cepat epoch pelatihan.
Ringkasan
AI web telah berkembang secara eksponensial sejak dibuat pada tahun 2017. Dengan teknologi browser seperti WebGPU, WebGL, dan WebAssembly, model machine learning operasi matematika dapat dipercepat lebih lanjut di sisi klien.
Pada tahun 2023, TensorFlow.js dan MediaPipe Web melampaui 1 miliar download model dan perpustakaan—tonggak sejarah penting dan tanda bagaimana developer dan engineer beralih untuk mengadopsi AI pada generasi berikutnya aplikasi web untuk membuat solusi yang benar-benar luar biasa.
Keberhasilan besar dalam penggunaan disertai tanggung jawab yang besar. Pada tingkat penggunaan ini dalam sistem produksi, diperlukan juga pengujian AI berbasis browser untuk sisi klien di lingkungan browser yang sesungguhnya, sekaligus berskala, dapat diotomatiskan, dan dalam pengaturan perangkat keras yang terstandardisasi.
Dengan memanfaatkan kecanggihan gabungan dari Chrome Headless dan Puppeteer yang baru, Anda dapat menguji workload tersebut tanpa ragu lingkungan, memastikan hasil yang konsisten dan dapat diandalkan.
Rangkuman
Panduan langkah demi langkah tersedia di dokumentasi kami, jadi Anda dapat mencoba pengaturan lengkapnya sendiri.
Jika Anda merasa ini bermanfaat, sapa Anda di LinkedIn, X (sebelumnya Twitter), atau apa pun jejaring sosial yang Anda gunakan menggunakan hashtag #WebAI. Saya akan sangat senang mendengar masukan Anda agar kami tahu untuk menulis lebih banyak hal seperti ini di masa mendatang.
Menambahkan bintang di repo GitHub untuk menerima pembaruan di masa mendatang.
Ucapan terima kasih
Terima kasih banyak kepada semua orang di tim Chrome yang telah membantu debug pengemudi dan Masalah WebGPU yang kami hadapi dalam solusi ini, dengan ucapan terima kasih khusus kepada Jecelyn Yeen dan Alexandra White yang telah membantu pandai kata postingan blog ini. Terima kasih kepada Yuly Novikov, Andrey Kosyakov, dan Alex Rudenko yang berperan sangat penting dalam menciptakan solusi akhir yang berfungsi.