Pengujian model Web AI di Google Colab

Jason Mayes
François Beaufort
François Beaufort
GitHub

Menyiapkan lingkungan pengujian yang konsisten dengan GPU bisa jadi lebih sulit daripada yang diharapkan. Berikut langkah-langkah untuk menguji model AI berbasis browser sisi klien dalam lingkungan browser yang sesungguhnya, sekaligus tetap skalabel, dapat diotomatisasi, dan dalam pengaturan perangkat keras yang terstandardisasi.

Dalam contoh ini, {i>browser<i} adalah {i>browser<i} Chrome yang sebenarnya dengan dukungan perangkat keras, dibandingkan dengan emulasi perangkat lunak.

Baik Anda seorang AI Web, game web, atau developer grafis, atau Anda mendapati diri Anda tertarik pada pengujian model Web AI, panduan ini tepat untuk Anda.

Langkah 1: Buat notebook Google Colab baru

Akun Layanan 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 Ubah jenis runtime:
    Screenshot close-up 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 terpasang.
    Screenshot modul Mengubah jenis runtime.
    Gambar 3: Di bagian Akselerator hardware, pilih T4 GPU.
  4. Klik Simpan.
  5. Klik tombol Hubungkan untuk menghubungkan ke runtime Anda. Setelah beberapa waktu, akan menampilkan tanda centang hijau, bersama dengan grafik RAM dan {i>disk usage<i}. Hal ini menunjukkan bahwa server telah berhasil dibuat dengan perangkat keras.

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 dari notebook itu. Di lingkungan Colab, eksekusi command line ditambahkan 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 mengeksekusi kode.

    Screenshot Colab baru
    Gambar 4.

  3. Setelah kode selesai dieksekusi, verifikasi nvidia-smi yang mencetak sesuatu mirip dengan screenshot berikut untuk mengonfirmasi bahwa Anda memang memiliki GPU terpasang dan dikenali di server Anda. Anda mungkin perlu men-scroll ke bagian 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 kode baru sel kode.
  2. Selanjutnya Anda bisa menulis kode kustom untuk memanggil project Node.js dengan parameter pilihan (atau cukup panggil google-chrome-stable secara langsung dalam command line). Kami memiliki contoh untuk kedua hal berikut.

Bagian A: Gunakan 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, kita menyimpan pengambilan PDF yang dihasilkan di /content/gpu.pdf. Kepada melihat file tersebut, luaskan konten . Kemudian, klik untuk mendownload PDF ke komputer lokal Anda.

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

Bagian B: Perintahkan Chrome dengan Puppeteer

Kami telah menyediakan contoh minimalis penggunaan Puppeteer untuk mengontrol Headless Chrome yang dapat dijalankan seperti 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 dalam layar. Tapi bagaimana cara kerjanya? Lihat panduan Node.js ini kode 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 memeriksa argumen ketiga di sini karena dua argumen pertama memanggil Node itu sendiri dan skrip yang kita jalankan. Elemen ke-3 sebenarnya berisikan 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(). Ini menciptakan sebuah browser objek yang dikonfigurasikan dengan argumen command line untuk menjalankan biner dengan cara yang diperlukan agar WebGL dan WebGPU berfungsi seperti yang dijelaskan di Aktifkan 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 nanti dapat Anda gunakan untuk mengunjungi URL apa pun:

const page = await browser.newPage();

Kemudian, tambahkan pemroses peristiwa untuk memproses peristiwa console.log saat halaman web menjalankan JavaScript. Ini memungkinkan Anda mencatat pesan pada command line Node dan juga memeriksa teks konsol untuk 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 {i>screenshot<i} dapat diambil, dan memiliki waktu yang tidak dalam proses eksekusi.

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 mengambil screenshot awal saat halaman telah dimuat.

Jika memilih untuk mengambil screenshot chrome://gpu, Anda dapat menutup browser sesi segera alih-alih menunggu {i>output<i} konsol, 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 memperhatikan bahwa kita menggunakan pernyataan impor di awal File jPuppet.js. package.json Anda harus menetapkan nilai jenis sebagai module, atau Anda akan menerima pesan {i>error<i} bahwa modul tersebut 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 membuat antarmuka lebih mudah dengan Chrome secara terprogram.

Berhasil

Sekarang kita dapat memverifikasi bahwa Pengklasifikasi MNIST Mode TensorFlow.js bisa mengenali sepasang celana panjang dalam gambar, dengan sisi klien diproses di browser menggunakan GPU.

Anda dapat menggunakan ini untuk workload berbasis GPU sisi klien, dari machine learning hingga pengujian grafis dan game.

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

Resource

Menambahkan bintang di repo GitHub untuk menerima pembaruan berikutnya.