Pengujian model Web AI di Google Colab

Jason Mayes
François Beaufort
François Beaufort
GitHub

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.
Screenshot Colab baru
Gambar 1: Notebook Colab baru.

Langkah 2: Hubungkan ke server yang mendukung GPU T4

  1. Klik Connect di dekat bagian kanan atas notebook.
  2. Pilih Change runtime type:
    Screenshot closeup yang menunjukkan langkah-langkah untuk mengubah runtime.
    Gambar 2. Ubah runtime di antarmuka Colab.
  3. Di jendela modal, pilih T4 GPU sebagai akselerator hardware Anda. Saat Anda terhubung, Colab akan menggunakan instance Linux dengan GPU NVIDIA T4 yang terpasang.
    Screenshot modul Ubah jenis runtime.
    Gambar 3: Di bagian Hardware Accelerator, pilih T4 GPU.
  4. Klik Save.
  5. 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

  1. 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

    # 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

  2. Klik di samping sel untuk menjalankan kode.

    Screenshot Colab baru
    Gambar 4.

  3. 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.

    Gambar 5: Cari output yang diawali dengan "NVIDIA-SMI".

Langkah 4: Gunakan dan otomatiskan Chrome headless

  1. Klik tombol Code untuk menambahkan sel kode baru.
  2. 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.

Screenshot Colab baru
Gambar 6: Tonton langkah-langkah untuk mendownload PDF dalam screenshot antarmuka Colab ini.

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.

Screenshot Colab baru
Gambar 7: Pengambilan model TensorFlow.js yang berhasil dengan akselerasi GPU yang mampu mengenali sisi klien pakaian di browser secara real time

Referensi

Tambahkan bintang di repo GitHub untuk menerima update mendatang.