Kabar baik! Anda telah membuat aplikasi AI Web keren yang menjalankan model machine learning langsung di perangkat pengguna. API 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 rintangannya. Model TensorFlow.js Anda 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 digunakan oleh pengguna di dunia nyata agar dapat digunakan di perangkat mereka.
Menyiapkan lingkungan pengujian yang konsisten dengan GPU bisa jadi lebih sulit dari yang diharapkan. Dalam postingan blog ini, kami akan membagikan masalah yang kami hadapi dan cara kami menyelesaikannya, sehingga Anda dapat meningkatkan performa aplikasi Anda.
Ini bukan hanya untuk developer AI Web. Jika Anda sedang mengerjakan game web atau grafis, postingan ini juga sangat berharga 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 lainnya, seperti Google Cloud (GCP), jika diinginkan.
- Browser: Chrome mendukung WebGPU, penerus WebGL yang andal, yang menghadirkan kemajuan API GPU modern ke web.
- Automation: 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. Kita menggunakan mode headless baru yang telah ditingkatkan, bukan bentuk lama.
Memverifikasi lingkungan
Cara terbaik untuk memeriksa apakah akselerasi hardware diaktifkan di Chrome adalah dengan
mengetik chrome://gpu di kolom URL. Anda dapat
secara terprogram melakukan hal yang setara dengan Puppeteer
dengan console.log atau menyimpan 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: | Nonaktif |
| Vulkan: | Nonaktif |
| WebGL: | Khusus software, akselerasi hardware tidak tersedia. |
| WebGL2: | Khusus software, akselerasi hardware tidak tersedia. |
| WebGPU: | Nonaktif |
|
Masalah terdeteksi. |
|
Bukan awal yang baik. Sudah cukup jelas bahwa deteksi perangkat keras gagal. WebGL, WebGL2, dan WebGPU pada dasarnya dinonaktifkan atau hanya tersedia untuk software. Kami tidak sendirian dalam masalah ini - ada banyak diskusi online tentang orang-orang yang mengalami 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 Headless Chrome:
- Tanda
--no-sandboxmenonaktifkan sandbox keamanan Chrome, yang mengisolasi proses browser dari bagian sistem lainnya. Menjalankan Chrome sebagai root tanpa sandbox ini tidak didukung. - Flag
--headless=newmenjalankan Chrome dengan mode headless yang baru dan ditingkatkan, tanpa UI yang terlihat. - Tanda
--use-angle=vulkanmemberi tahu Chrome agar menggunakan backend Vulkan untuk ANGLE, yang menerjemahkan panggilan OpenGL ES 2/3 ke panggilan Vulkan API. - Flag
--enable-features=Vulkanmengaktifkan backend grafis Vulkan untuk pengomposisian dan rasterisasi di Chrome. - Flag
--disable-vulkan-surfacemenonaktifkan ekstensi instance vulkanVK_KHR_surface. Daripada menggunakan swapchain, Bit blit digunakan untuk hasil render saat ini di layar. - Tanda
--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 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 nilainya berubah dari dinonaktifkan menjadi software saja.
| Status fitur grafis | |
|---|---|
| OpenGL: | Nonaktif |
| Vulkan: | Nonaktif |
| WebGL: | Khusus software, akselerasi hardware tidak tersedia. |
| WebGL2: | Khusus software, akselerasi hardware tidak tersedia. |
| WebGPU: | Khusus software, akselerasi hardware tidak tersedia. |
Namun, akselerasi hardware masih tidak tersedia, GPU NVIDIA T4 tidak terdeteksi.
Menginstal driver GPU yang benar
Kami menyelidiki output chrome://gpu secara lebih mendalam, bersama beberapa pakar GPU
di tim Chrome. Kami menemukan masalah pada driver default yang diinstal pada 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. Ini
menyebabkan masalah pada Headless Chrome.
| Informasi pengemudi | |
|---|---|
| GL_RENDERER | ANGLE (Google, Vulkan 1.3.0 (Perangkat SwiftShader (Subzero) (0x0000C0DE)), driver SwiftShader-5.0.0) |
Menginstal driver yang benar yang kompatibel akan memperbaiki masalah.
| 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. Dua
baris terakhir membantu Anda mencatat output dari apa yang dideteksi driver NVIDIA bersama
vulkaninfo.
apt-get install -y vulkan-tools libnvidia-gl-525// Verify the NVIDIA drivers detects along with vulkaninfonvidia-smivulkaninfo --summary
Sekarang jalankan skrip lagi dan kita mendapatkan hasil berikut. 🎉
| Status fitur grafis | |
|---|---|
| OpenGL: | Aktif |
| Vulkan: | Aktif |
| WebGL: | Hardware dipercepat tetapi dengan performa yang lebih rendah. |
| WebGL2: | Hardware dipercepat tetapi dengan performa yang lebih rendah. |
| WebGPU: | Hardware dipercepat tetapi dengan performa yang lebih rendah. |
Dengan menggunakan driver dan tanda yang benar saat menjalankan Chrome, kini kami memiliki dukungan WebGPU dan WebGL menggunakan mode headless baru yang mengilap.
Di balik layar: Investigasi tim kami
Setelah melakukan riset, kami tidak menemukan metode kerja untuk lingkungan yang harus kami jalankan di Google Colab, meskipun ada beberapa postingan penuh harapan yang berfungsi di lingkungan lain, dan ini tampak menjanjikan. Pada akhirnya, kami tidak dapat mereplikasi keberhasilannya di lingkungan Colab NVIDIA T4, karena kami memiliki 2 masalah utama:
- Beberapa kombinasi tanda memungkinkan deteksi GPU, tetapi tidak memungkinkan Anda benar-benar menggunakan GPU.
- Contoh solusi kerja oleh pihak ketiga menggunakan versi headless Chrome lama, yang pada suatu saat tidak akan digunakan lagi dan digantikan dengan versi baru. Kami memerlukan solusi yang berfungsi dengan Headless Chrome baru agar siap untuk menghadapi masa depan yang lebih baik.
Kami mengonfirmasi penggunaan GPU yang kurang dengan menjalankan contoh halaman web TensorFlow.js untuk pengenalan citra, yang dengannya kami melatih model untuk mengenali sampel pakaian (semacam "hello world" machine learning).
Pada mesin reguler, 50 siklus pelatihan (dikenal sebagai epoch) masing-masing harus berjalan 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 benar-benar berlangsung.
Seperti yang diharapkan, setiap epoch pelatihan memerlukan waktu lebih lama dari yang diperkirakan (beberapa detik), yang menunjukkan bahwa Chrome telah beralih kembali ke eksekusi CPU JS lama yang biasa, bukan menggunakan GPU:
Setelah memperbaiki driver 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 tumbuh 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.
Pada tahun 2023, TensorFlow.js dan MediaPipe Web mencapai lebih dari 1 miliar download untuk model dan library—tonggak pencapaian bersejarah dan tanda bagaimana developer web dan engineer beralih untuk menerapkan AI dalam aplikasi web generasi berikutnya untuk membuat solusi yang benar-benar luar biasa.
Penggunaan yang sukses memerlukan tanggung jawab yang besar. Pada tingkat penggunaan dalam sistem produksi seperti ini, kebutuhan muncul untuk menguji model AI berbasis browser sisi klien di lingkungan browser sebenarnya, sekaligus menjadi skalabel, dapat diotomatiskan, dan dalam penyiapan hardware terstandardisasi yang diketahui.
Dengan memanfaatkan kekuatan gabungan antara Headless Chrome dan Puppeteer yang baru, Anda dapat menguji beban kerja tersebut dengan percaya diri di lingkungan standar yang dapat direplikasi, sehingga memastikan hasil yang konsisten dan andal.
Penutup
Panduan langkah demi langkah tersedia dalam dokumentasi kami, sehingga Anda dapat mencoba penyiapan lengkapnya sendiri.
Jika menurut Anda ini bermanfaat, sapa di LinkedIn, X (sebelumnya Twitter), atau jaringan sosial apa pun yang Anda gunakan menggunakan hashtag #WebAI. Saya senang mendengar masukan dari Anda sehingga kami bisa menulis lebih banyak hal seperti ini di masa mendatang.
Tambahkan bintang di repo GitHub untuk menerima 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, dengan ucapan terima kasih khusus kepada Jecelyn Yeen dan Alexandra White atas bantuannya dalam penulisan blog ini. Terima kasih kepada Yuly Novikov, Andrey Kosyakov, dan Alex Rudenko yang berperan dalam menciptakan solusi akhir yang efektif.