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.![Yeni bir Colab'ın ekran görüntüsü](https://developer.chrome.com/static/docs/web-platform/webgpu/colab-headless/image/colab_new.png?authuser=5&hl=tr)
2. Adım: T4 GPU özellikli bir sunucuya bağlanın
- Not defterinin sağ üst tarafına yakın yerde bulunan Bağlan'ı tıklayın.
- Çalışma zamanı türünü değiştir'i seçin:
Şekil 2. Colab arayüzünde çalışma zamanını değiştirin. - 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.
Şekil 3: Donanım hızlandırıcı altında T4 GPU'yu seçin. - Kaydet'i tıklayın.
- Ç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
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
Kodu çalıştırmak için hücrenin yanındaki
işaretini tıklayın.Şekil 4. 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.Şekil 5: "NVIDIA-SMI" ile başlayan çıkışı bulun.
4. Adım: Gözetimsiz Chrome'u kullanın ve otomatikleştirin
- Yeni bir kod hücresi eklemek için Kod düğmesini tıklayın.
- 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 genişletin.
Ardından PDF dosyasını
yerel makinenize indirmek için düğmesini tıklayın.
![Yeni bir Colab'ın ekran görüntüsü](https://developer.chrome.com/static/docs/web-platform/webgpu/colab-headless/image/download-pdf.gif?authuser=5&hl=tr)
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.
![Yeni bir Colab'ın ekran görüntüsü](https://developer.chrome.com/static/docs/web-platform/webgpu/colab-headless/image/fashion-mnist-classifier.png?authuser=5&hl=tr)
Kaynaklar
Gelecekteki güncellemeleri almak için GitHub deposuna bir yıldız ekleyin.