Google Colab'de web AI model testi

GPU'larla tutarlı bir test ortamı oluşturmak beklenenden daha zor olabilir. İstemci tarafı, tarayıcı tabanlı AI modellerini gerçek tarayıcı ortamlarında test ederken aynı zamanda ölçeklenebilir, otomatikleştirilebilir ve bilinen bir standart donanım kurulumunda aşağıdaki adımları uygulayın.

Bu örnekte tarayıcı, yazılım emülasyonunun aksine donanım desteğine sahip gerçek bir Chrome tarayıcıdır.

İster Web AI, ister web oyunları, ister grafik geliştiricisi olun ister Web AI model testiyle ilgileniyor olun, bu kılavuz tam size göre.

1. Adım: Yeni bir Google Colab not defteri oluşturun

1. Yeni bir Colab not defteri oluşturmak için colab.new adresine gidin. Şekil 1'deki gibi olmalıdır. 2. Google Hesabınızda oturum açmak için istemi takip edin.

2. Adım: T4 GPU özellikli bir sunucuya bağlanın

1. Not defterinin sağ üst tarafına yakın yerde bulunan Bağlan'ı arrow_drop_down tıklayın.
2. Çalışma zamanı türünü değiştir'i seçin:

   

3. Kalıcı pencerede donanım hızlandırıcınız olarak T4 GPU'yu seçin. Bağlandığınızda Colab, NVIDIA T4 GPU ekli bir Linux örneği kullanır.

   

4. Kaydet'i tıklayın.
5. Çalışma zamanınıza bağlanmak için Bağlan düğmesini tıklayın. Bir süre sonra düğmede RAM ve disk kullanımı grafikleriyle birlikte yeşil bir onay işareti görüntülenir. Bu, gerekli donanımla sunucunun başarıyla oluşturulduğunu gösterir.

Tebrikler, GPU ekli bir sunucu oluşturdunuz.

3. Adım: Doğru sürücüleri ve bağımlılıkları yükleyin

1. Aşağıdaki iki satır kodu kopyalayıp not defterinin ilk kod hücresine yapıştırın. Colab ortamında, komut satırı yürütme işleminin başına ünlem işareti eklenir.

   !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
   

   • Bu komut dosyasının çalıştırdığı ham komut satırı kodunu görmek için komut dosyasını GitHub'da inceleyebilirsiniz.

   # 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. Kodu çalıştırmak için hücrenin yanındaki play_circle işaretini tıklayın.

   

3. Kodun yürütülmesi tamamlandıktan sonra, gerçekten de GPU'ya sahip olduğunuzu ve bu GPU'nun sunucunuzda tanındığını onaylamak için nvidia-smi'nin aşağıdaki ekran görüntüsüne benzer bir şey yazdırdığını doğrulayın. Bu çıkışı görüntülemek için günlüklerde önceki sayfalara gitmeniz gerekebilir.

   

4. Adım: Gözetimsiz Chrome'u kullanın ve otomatikleştirin

1. Yeni bir kod hücresi eklemek için add Kod düğmesini tıklayın.
2. Daha sonra, tercih ettiğiniz parametrelerle bir Node.js projesini çağırmak için özel kodunuzu yazabilirsiniz (veya doğrudan komut satırında google-chrome-stable yöntemini çağırabilirsiniz). Aşağıda bunların her ikisi için de örnekler verilmiştir.

A Bölümü: Gözetimsiz Chrome'u doğrudan komut satırında kullanın

# 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

Bu örnekte, elde edilen PDF yakalamasını /content/gpu.pdf içinde depoladık. Dosyayı görüntülemek için içeriği folder genişletin. Ardından PDF dosyasını yerel makinenize indirmek için more_vert düğmesini tıklayın.

B Bölümü: Puppeteer ile Chrome'u Yönetin

Gözetimsiz Chrome'u kontrol etmek için Puppeteer'ın kullanıldığı ve aşağıdaki gibi çalışan minimalist bir örnek hazırladık:

# 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

jPuppet örneğinde, ekran görüntüsü oluşturmak için Node.js komut dosyasını çağırabiliriz. Peki bu nasıl çalışır? jPuppet.js'deki Node.js koduyla ilgili bu adım adım açıklamalı kılavuzu inceleyin.

jPuppet.js Düğüm kodu dökümü

Öncelikle Puppeteer'ı içe aktarın. Böylece, Chrome'u Node.js ile uzaktan kontrol edebilirsiniz:

import puppeteer from 'puppeteer';

Ardından, Düğüm uygulamasına hangi komut satırı bağımsız değişkenlerinin iletildiğini kontrol edin. Gidilecek bir URL'yi temsil eden üçüncü bağımsız değişkenin ayarlandığından emin olun. Burada üçüncü bağımsız değişkeni incelemeniz gerekir. Çünkü ilk iki bağımsız değişken, Düğümün kendisini ve çalıştırdığımız komut dosyasını çağırır. 3. öğe, aslında Düğüm programına aktarılan ilk parametreyi içerir:

const url = process.argv[2];
if (!url) {
  throw "Please provide a URL as the first argument";
}

Şimdi runWebpage() adlı eşzamansız bir işlev tanımlayın. Bu işlem, Chrome ikili programını WebGL ve WebGPU'yu WebGPU ve WebGL desteğini etkinleştirme bölümünde açıklandığı gibi çalıştırmamız için ihtiyacımız olan şekilde çalıştırmak üzere komut satırı bağımsız değişkenleriyle yapılandırılmış bir tarayıcı nesnesi oluşturur.

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'
      ]
  });

Daha sonra herhangi bir URL'yi ziyaret etmek için kullanabileceğiniz yeni bir tarayıcı sayfası nesnesi oluşturun:

const page = await browser.newPage();

Ardından, web sayfası JavaScript'i yürüttüğünde console.log etkinliklerini dinlemek için bir etkinlik işleyici ekleyin. Böylece, Düğüm komut satırında mesajları günlüğe kaydedebilir, ayrıca konsol metninde ekran görüntüsü tetikleyen ve ardından tarayıcı işlemini Düğüm'de sonlandıran özel bir ifade (bu örnekte captureAndEnd) olup olmadığını inceleyebilirsiniz. Bu özellik, ekran görüntüsü alınmadan önce bir miktar işlem yapması gereken ve belirli olmayan bir yürütme süresine sahip olan web sayfaları için kullanışlıdır.

page.on('console', async function(msg) {
  console.log(msg.text());
  if (msg.text() === 'captureAndEnd') {
    await page.screenshot({ path: '/content/screenshotEnd.png' });
    await browser.close();
  }
});

Son olarak, sayfaya belirtilen URL'yi ziyaret etmesi için komut verin ve sayfa yüklendiğinde ilk ekran görüntüsünü alın.

chrome://gpu ürününün ekran görüntüsünü almayı seçerseniz, herhangi bir konsol çıkışını beklemek yerine, bu sayfa kendi kodunuz tarafından kontrol edilmediğinden tarayıcı oturumunu hemen kapatabilirsiniz.

  await page.goto(url,  { waitUntil: 'networkidle2' });
  await page.screenshot({path: '/content/screenshot.png'});
  if (url === 'chrome://gpu') {
    await browser.close();
  }
}
runWebpage();

Bundle.json dosyasını değiştirin

jPuppet.js dosyasının başında bir "Import" ifadesi kullandığımızı fark etmiş olabilirsiniz. package.json öğeniz, tür değerlerini module olarak ayarlamalıdır. Aksi takdirde modülün geçersiz olduğuna dair bir hata alırsınız.

 {
    "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"
}

Hepsi bu kadar. Puppeteer'ı kullanmak, Chrome ile programlı arayüz kullanmayı kolaylaştırır.

Başarılı

Artık TensorFlow.js Fashion MNIST sınıflandırıcısının bir resimdeki bir çift pantolonu doğru şekilde tanıyabildiğini ve GPU'yu kullanan tarayıcıda istemci tarafı işlemenin yapıldığını doğrulayabiliriz.

Bunu, makine öğrenimi modellerinden grafik ve oyun testlerine kadar istemci taraflı GPU tabanlı tüm iş yükleri için kullanabilirsiniz.

Kaynaklar

Gelecekteki güncellemeleri almak için GitHub deposuna bir yıldız ekleyin.