Menyiapkan lingkungan pengujian yang konsisten dengan GPU dapat lebih sulit dari yang diharapkan. Berikut adalah langkah-langkah untuk menguji model AI sisi klien berbasis browser di lingkungan browser yang sebenarnya, sekaligus skalabel, dapat diotomatiskan, dan dalam penyiapan hardware standar yang dikenal.
Dalam contoh ini, browser adalah browser Chrome sungguhan dengan dukungan hardware, bukan emulasi software.
Baik Anda seorang AI Web, game web, atau developer grafis, maupun yang tertarik dengan pengujian model AI Web, panduan ini cocok untuk Anda.
Langkah 1: Buat notebook Google Colab baru
1. Buka colab.new untuk membuat notebook Colab baru. Konfigurasinya akan terlihat seperti gambar 1. 2. Ikuti perintah untuk login ke Akun Google Anda.Langkah 2: Hubungkan ke server yang mendukung GPU T4
- Klik Connect di dekat bagian kanan atas notebook.
- Pilih Change runtime type:
- Di jendela modal, pilih T4 GPU sebagai akselerator hardware Anda. Saat Anda terhubung, Colab akan menggunakan instance Linux dengan GPU NVIDIA T4 yang terpasang.
- Klik Save.
- Klik tombol Connect untuk terhubung ke runtime Anda. Setelah beberapa waktu, tombol akan menampilkan tanda centang hijau, beserta grafik penggunaan RAM dan disk. Ini menunjukkan bahwa server berhasil dibuat dengan hardware yang Anda butuhkan.
Kerja bagus, Anda baru saja membuat server dengan GPU terpasang.
Langkah 3: Instal driver dan dependensi yang benar
Salin dan tempel dua baris kode berikut ke sel kode pertama notebook. Di lingkungan Colab, eksekusi command line diawali dengan tanda seru.
!git clone https://github.com/jasonmayes/headless-chrome-nvidia-t4-gpu-support.git !cd headless-chrome-nvidia-t4-gpu-support && chmod +x scriptyMcScriptFace.sh && ./scriptyMcScriptFace.sh
- Anda dapat memeriksa skrip di GitHub untuk melihat kode command line mentah yang dijalankan skrip ini.
# Update, install correct drivers, and remove the old ones. apt-get install -y vulkan-tools libnvidia-gl-525 # Verify NVIDIA drivers can see the T4 GPU and that vulkan is working correctly. nvidia-smi vulkaninfo --summary # Now install latest version of Node.js npm install -g n n lts node --version npm --version # Next install Chrome stable curl -fsSL https://dl.google.com/linux/linux_signing_key.pub | sudo gpg --dearmor -o /usr/share/keyrings/googlechrom-keyring.gpg echo "deb [arch=amd64 signed-by=/usr/share/keyrings/googlechrom-keyring.gpg] http://dl.google.com/linux/chrome/deb/ stable main" | sudo tee /etc/apt/sources.list.d/google-chrome.list sudo apt update sudo apt install -y google-chrome-stable # Start dbus to avoid warnings by Chrome later. export DBUS_SESSION_BUS_ADDRESS="unix:path=/var/run/dbus/system_bus_socket" /etc/init.d/dbus start
Klik
di samping sel untuk menjalankan kode.Setelah kode selesai dieksekusi, pastikan
nvidia-smi
akan mencetak sesuatu yang mirip dengan screenshot berikut untuk mengonfirmasi bahwa Anda memang memiliki GPU yang terpasang dan dikenali di server Anda. Anda mungkin perlu men-scroll ke bagian sebelumnya di log untuk melihat output ini.
Langkah 4: Gunakan dan otomatiskan Chrome headless
- Klik tombol Code untuk menambahkan sel kode baru.
- Selanjutnya, Anda dapat menulis kode kustom untuk memanggil project Node.js dengan parameter pilihan (atau cukup memanggil
google-chrome-stable
langsung di command line). Kami memiliki contoh untuk keduanya.
Bagian A: Menggunakan Chrome Headless langsung di command line
# Directly call Chrome to dump a PDF of WebGPU testing page
# and store it in /content/gpu.pdf
!google-chrome-stable \
--no-sandbox \
--headless=new \
--use-angle=vulkan \
--enable-features=Vulkan \
--disable-vulkan-surface \
--enable-unsafe-webgpu \
--print-to-pdf=/content/gpu.pdf https://webgpureport.org
Dalam contoh, kami menyimpan pengambilan PDF yang dihasilkan di /content/gpu.pdf
. Untuk
melihat file tersebut, luaskan content .
Kemudian klik untuk mendownload file PDF ke komputer lokal Anda.
Bagian B: Perintah Chrome dengan Puppeteer
Kami telah memberikan contoh minimalis menggunakan Puppeteer untuk mengontrol Chrome Headless yang dapat dijalankan sebagai berikut:
# Call example node.js project to perform any task you want by passing
# a URL as a parameter
!node headless-chrome-nvidia-t4-gpu-support/examples/puppeteer/jPuppet.js chrome://gpu
Pada contoh jPuppet, kita dapat memanggil skrip Node.js untuk membuat screenshot. Tapi bagaimana cara kerjanya? Lihat panduan kode Node.js ini di jPuppet.js.
Perincian kode Node jPuppet.js
Pertama, impor Puppeteer. Hal ini memungkinkan Anda mengontrol Chrome dari jarak jauh dengan Node.js:
import puppeteer from 'puppeteer';
Selanjutnya, periksa argumen command line apa yang diteruskan ke aplikasi Node. Pastikan argumen ketiga ditetapkan—yang mewakili URL yang akan dibuka. Anda perlu memeriksa argumen ketiga di sini karena dua argumen pertama memanggil Node itu sendiri dan skrip yang sedang kita jalankan. Elemen ke-3 sebenarnya berisi parameter ke-1 yang diteruskan ke program Node:
const url = process.argv[2];
if (!url) {
throw "Please provide a URL as the first argument";
}
Sekarang tentukan fungsi asinkron bernama runWebpage()
. Tindakan ini akan membuat objek browser yang dikonfigurasi dengan argumen command line untuk menjalankan biner Chrome dengan cara yang kita perlukan agar WebGL dan WebGPU berfungsi seperti yang dijelaskan dalam Mengaktifkan dukungan WebGPU dan WebGL.
async function runWebpage() {
const browser = await puppeteer.launch({
headless: 'new',
args: [
'--no-sandbox',
'--headless=new',
'--use-angle=vulkan',
'--enable-features=Vulkan',
'--disable-vulkan-surface',
'--enable-unsafe-webgpu'
]
});
Buat objek halaman browser baru yang nantinya dapat Anda gunakan untuk mengunjungi URL mana pun:
const page = await browser.newPage();
Kemudian, tambahkan pemroses peristiwa untuk memproses peristiwa console.log
saat halaman web mengeksekusi JavaScript. Hal ini memungkinkan Anda mencatat pesan ke dalam log di command line Node
dan juga memeriksa teks konsol untuk menemukan frasa khusus (dalam hal ini,
captureAndEnd
) yang memicu screenshot, lalu mengakhiri proses browser di
Node. Hal ini berguna untuk halaman web yang perlu melakukan beberapa pekerjaan sebelum
screenshot dapat diambil, dan memiliki jumlah waktu eksekusi yang tidak
deterministik.
page.on('console', async function(msg) {
console.log(msg.text());
if (msg.text() === 'captureAndEnd') {
await page.screenshot({ path: '/content/screenshotEnd.png' });
await browser.close();
}
});
Terakhir, perintahkan halaman untuk mengunjungi URL yang ditentukan dan ambil screenshot awal saat halaman telah dimuat.
Jika memilih untuk mengambil screenshot chrome://gpu
, Anda dapat langsung menutup sesi
browser, tanpa menunggu output konsol apa pun, karena halaman ini
tidak dikontrol oleh kode Anda sendiri.
await page.goto(url, { waitUntil: 'networkidle2' });
await page.screenshot({path: '/content/screenshot.png'});
if (url === 'chrome://gpu') {
await browser.close();
}
}
runWebpage();
Mengubah package.json
Anda mungkin telah melihat bahwa kita menggunakan pernyataan impor di awal file jPuppet.js
. package.json
harus menetapkan nilai jenis sebagai module
. Jika tidak, Anda akan menerima error bahwa modul tidak valid.
{
"dependencies": {
"puppeteer": "*"
},
"name": "content",
"version": "1.0.0",
"main": "jPuppet.js",
"devDependencies": {},
"keywords": [],
"type": "module",
"description": "Node.js Puppeteer application to interface with headless Chrome with GPU support to capture screenshots and get console output from target webpage"
}
Itu saja, tidak ada lagi yang lain. Menggunakan Puppeteer memudahkan untuk berinteraksi dengan Chrome secara terprogram.
Berhasil
Sekarang kita dapat memverifikasi bahwa pengklasifikasi MNIST TensorFlow.js Fashion dapat mengenali sepasang celana dalam sebuah gambar dengan benar, dengan pemrosesan sisi klien di browser menggunakan GPU.
Anda dapat menggunakan ini untuk beban kerja berbasis GPU sisi klien, mulai dari model machine learning hingga pengujian grafis dan game.
Referensi
Tambahkan bintang di repo GitHub untuk menerima update mendatang.