Web AI model testini güçlendirin: WebGPU, WebGL ve gözetimsiz Chrome

François Beaufort
François Beaufort

Güzel bir haberimiz var. Makine öğrenimi modellerini doğrudan kullanıcının cihazında çalıştıran havalı bir Web AI uygulaması geliştirdiniz. Bu özellik, buluta bağlı olmadan tamamen istemci taraflı web tarayıcısında çalışır. Cihaz üzerinde bu tasarım; kullanıcı gizliliğini iyileştirir, performansı artırır ve maliyetleri önemli ölçüde azaltır.

Ancak bir zorluk var. TensorFlow.js modeliniz hem CPU'larda (WebAssembly) hem de daha güçlü GPU'larda (WebGL ve WebGPU aracılığıyla) çalışabilir. Soru şu: Seçilen donanımla tarayıcı testini tutarlı bir şekilde nasıl otomatikleştirebilirsiniz?

Tutarlılığın sürdürülmesi, gerçek kullanıcıların cihazlarında kullanmaları için dağıtımdan önce, modeli geliştirip geliştirdikçe zaman içinde makine öğrenimi modelinin performansını karşılaştırmak açısından çok önemlidir.

GPU'larla tutarlı bir test ortamı oluşturmak beklenenden daha zor olabilir. Bu blog yayınında, uygulamanızın performansını artırabilmeniz için karşılaştığımız sorunları ve bunları nasıl çözdüğümüzü paylaşacağız.

Bu, yalnızca Web AI geliştiricileri için değildir. Web oyunları veya grafikler üzerinde çalışıyorsanız bu yayın sizin için de değerlidir.

Otomasyon araç kutumuz

Kullandığımız özellikler:

  • Ortam: NVIDIA T4 veya V100 GPU'ya bağlı Linux tabanlı bir Google Colab not defteri. Dilerseniz Google Cloud (GCP) gibi diğer bulut platformlarını kullanabilirsiniz.
  • Tarayıcı: Chrome, modern GPU API'lerinin ilerlemelerini web'e taşıyan WebGPU'nun güçlü takipçisi olan WebGPU'yu destekler.
  • Otomasyon: Puppeteer, tarayıcıları JavaScript ile programlı şekilde kontrol etmenizi sağlayan bir Node.js kitaplığıdır. Puppeteer ile Chrome'u gözetimsiz modda otomatikleştirebiliriz. Bu, tarayıcının görünür bir arayüz olmadan bir sunucuda çalıştığı anlamına gelir. Eski formu değil, iyileştirilmiş yeni gözetimsiz modu kullanıyoruz.

Ortamı doğrulama

Chrome'da donanım hızlandırmanın açık olup olmadığını kontrol etmenin en iyi yolu adres çubuğuna chrome://gpu yazmaktır. console.log ile eşdeğerini Puppeteer ile programatik olarak gerçekleştirebilir veya manuel olarak kontrol etmek için tam raporu PDF olarak kaydedebilirsiniz:

/* Incomplete example.js */
import puppeteer from 'puppeteer';

// Configure launch parameters: Expands later
const browser = await puppeteer.launch({
  headless: 'new',
  args:  ['--no-sandbox']
});

const page = await browser.newPage();
await page.goto('chrome://gpu');

// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({ path: './gpu.pdf' });

await browser.close();

chrome://gpu uygulamasını açtığınızda aşağıdaki sonuçları göreceksiniz:

Grafik özelliği durumu
OpenGL: Devre dışı
Vulkan: Devre dışı
WebGL: Yalnızca yazılımla sınırlıdır, donanım hızlandırma özelliği kullanılamaz.
WebGL2: Yalnızca yazılımla sınırlıdır, donanım hızlandırma özelliği kullanılamaz.
WebGPU: Devre dışı

Sorunlar algılandı.
WebGPU, engellenenler listesi veya komut satırı aracılığıyla devre dışı bırakıldı.

İyi bir başlangıç değil. Donanım algılamanın başarısız olduğu oldukça açıktır. WebGL, WebGL2 ve WebGPU, temelde devre dışıdır veya yalnızca yazılım mevcuttur. Bu sorunla ilgili yalnız değiliz. Resmi Chrome destek kanalları (1), (2) de dahil olmak üzere benzer bir durumda olan kişilerle internette çok sayıda tartışma yaşanıyor.

WebGPU ve WebGL desteğini etkinleştir

Varsayılan olarak, Gözetimsiz Chrome GPU'yu devre dışı bırakır. Bu özelliği Linux'ta etkinleştirmek için Gözetimsiz Chrome'u başlatırken aşağıdaki işaretlerin tümünü uygulayın:

  • --no-sandbox işareti Chrome'un güvenlik korumalı alanını devre dışı bırakır. Bu da tarayıcı işlemini sistemin geri kalanından izole eder. Chrome'un bu korumalı alan olmadan kök olarak çalıştırılması desteklenmez.
  • --headless=new işareti, Chrome'u görünür herhangi bir kullanıcı arayüzü olmadan yeni ve iyileştirilmiş gözetimsiz mod ile çalıştırır.
  • --use-angle=vulkan işareti Chrome'a, ANGLE için Vulkan arka ucunu kullanmasını söyler. Bu, OpenGL ES 2/3 çağrılarını Vulkan API çağrılarına dönüştürür.
  • --enable-features=Vulkan işareti, Chrome'da birleştirme ve pikselleştirme için Vulkan grafik arka ucunu etkinleştirir.
  • --disable-vulkan-surface işareti, VK_KHR_surface vulkan örneği uzantısını devre dışı bırakır. Ekrandaki mevcut oluşturma sonucu için değiştirme zinciri kullanmak yerine Bit blit kullanılır.
  • --enable-unsafe-webgpu işareti, Linux'taki Chrome'da deneysel WebGPU API'yi etkinleştirir ve bağdaştırıcıların engellenenler listesini devre dışı bırakır.

Şimdiye kadar yaptığımız tüm değişiklikleri birleştiriyoruz. Komut dosyasının tamamını aşağıda bulabilirsiniz.

/* Complete example.js */
import puppeteer from 'puppeteer';

// Configure launch parameters
const browser = await puppeteer.launch({
  headless: 'new',
  args: [
    '--no-sandbox',
    '--headless=new',
    '--use-angle=vulkan',
    '--enable-features=Vulkan',
    '--disable-vulkan-surface',
    '--enable-unsafe-webgpu',
  ]
});

const page = await browser.newPage();
await page.goto('chrome://gpu');

// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({path: './gpu.pdf'});

await browser.close();

Komut dosyasını tekrar çalıştırın. Hiçbir WebGPU sorunu algılanmaz ve devre dışı olan değer, yalnızca yazılım olarak değişir.

Grafik özelliği durumu
OpenGL: Devre dışı
Vulkan: Devre dışı
WebGL: Yalnızca yazılımla sınırlıdır, donanım hızlandırma özelliği kullanılamaz.
WebGL2: Yalnızca yazılımla sınırlıdır, donanım hızlandırma özelliği kullanılamaz.
WebGPU: Yalnızca yazılımla sınırlıdır, donanım hızlandırma özelliği kullanılamaz.

Ancak donanım hızlandırma hâlâ kullanılamaz ve NVIDIA T4 GPU algılanmaz.

Doğru GPU sürücülerini yükleyin

Chrome ekibindeki bazı GPU uzmanlarıyla birlikte, chrome://gpu çıktısını daha yakından inceledik. Linux Colab örneğinde yüklü olan varsayılan sürücülerle ilgili sorunlar tespit ettik. Bu sorunlar Vulkan ile ilgili sorunlara yol açmıştır. Bu da Chrome'un, aşağıdaki çıkışta gösterildiği gibi GL_RENDERER düzeyinde NVIDIA T4 GPU'yu algılamamasına yol açmıştır. Bu durum, Gözetimsiz Chrome'da sorunlara yol açar.

Varsayılan çıkış, NVIDIA T4 GPU'yu algılamaz.
Sürücü bilgileri
GL_RENDERER ANGLE (Google, Vulkan 1.3.0 (SwiftShader Cihazı (Subzero)) (0x0000C0DE)), SwiftShader sürücüsü-5.0.0)

Uyumlu olan doğru sürücülerin yüklenmesi sorunu çözer.

Sürücüler yüklendikten sonra çıkış güncellenir.
Sürücü bilgileri
GL_RENDERER ANGLE (NVIDIA Corporation, Tesla T4/PCIe/SSE2, OpenGL ES 3.2 NVIDIA 525.105.17)

Doğru sürücüleri yüklemek için kurulum sırasında aşağıdaki komutları çalıştırın. Son iki satır, NVIDIA sürücülerinin vulkaninfo ile birlikte algıladığı çıkışları günlüğe kaydetmenize yardımcı olur.

apt-get install -y vulkan-tools libnvidia-gl-525

// Verify the NVIDIA drivers detects along with vulkaninfo
nvidia-smi
vulkaninfo --summary

Şimdi komut dosyasını tekrar çalıştırın. Aşağıdaki sonucu elde ederiz. 🎉

Grafik özelliği durumu
OpenGL: Etkin
Vulkan: Etkin
WebGL: Donanım hızlandı ancak düşük performansla.
WebGL2: Donanım hızlandı ancak düşük performansla.
WebGPU: Donanım hızlandı ancak düşük performansla.

Chrome'u çalıştırırken doğru sürücüleri ve işaretleri kullanarak artık parlak, yeni gözetimsiz modu kullanarak WebGPU ve WebGL desteğine sahip olduk.

Sahne arkası: Ekibimizin incelemesi

Uzun araştırmadan sonra Google Colab'de yürütmemiz gereken çevre için çalışma yöntemlerini bulamadık. Bununla birlikte, diğer ortamlarda işe yarayan ve ümit verici olan bazı umut verici yayınlar vardı. Sonuçta 2 önemli sorunumuz olduğu için Colab NVIDIA T4 ortamında başarılarını tekrar tekrar oluşturamadık:

  1. Bazı işaret kombinasyonları GPU'nun algılanmasına olanak tanır ancak GPU'yu kullanmanıza izin vermez.
  2. Üçüncü tarafların çalışan çözümlerine örnekler, Chrome'un gözetimsiz sürümünün kullanıldığı, bir noktada kullanımdan kaldırılacak ve yeni sürüme geçilecektir. Geleceğe daha hazır olması için yeni Gözetimsiz Chrome ile çalışan bir çözüme ihtiyacımız vardı.

Resim tanıma için örnek bir TensorFlow.js web sayfası çalıştırarak GPU'nun yetersiz kullanımını onayladık (bu sayede bir modeli kıyafet numunelerini tanıyacak şekilde eğittik (örneğin, makine öğreniminin bir "hello dünyası" gibi).

Normal bir makinede 50 eğitim döngüsünün (sıfırlar olarak bilinir) her biri 1 saniyeden kısa sürede çalışması gerekir. Gözetimsiz Chrome'u varsayılan durumunda çağırdığımızda, bu eğitim döngülerinin gerçekte ne kadar hızlı ilerlediğini görmek için JavaScript konsolu çıkışını Node.js sunucu tarafı komut satırına kaydedebildik.

Beklendiği gibi, her eğitim dönemi beklenenden çok daha uzun sürdü (birkaç saniye). Bu durum, Chrome'un GPU kullanmak yerine basit, eski JS CPU yürütmeye geri döndüğünü gösterir:

Eğitim dönemleri daha yavaş bir tempoda ilerler.
Şekil 1: Her eğitim döneminin ne kadar sürdüğünü (saniye cinsinden) gösteren gerçek zamanlı yakalama.

Sürücüleri düzelttikten ve Headless Chrome için doğru işaret kombinasyonunu kullandıktan sonra, TensorFlow.js eğitim örneğini yeniden çalıştırmak çok daha hızlı eğitim dönemleri sağlar.

Dönemlerde hızda artış var.
Şekil 2: dönemlerin hızını gösteren gerçek zamanlı yakalama.

Özet

Web AI, 2017'de ortaya çıktığından beri katlanarak büyüdü. WebGPU, WebGL ve WebAssembly gibi tarayıcı teknolojileriyle, bir makine öğrenimi modelinin matematiksel işlemleri istemci tarafında daha da hızlandırılabilir.

2023 itibarıyla TensorFlow.js ve MediaPipe Web 1 milyarı aşan model ve kitaplık indirme sayısını aştı. Bu önemli bir dönüm noktası ve web geliştiricileri ile mühendislerin gerçekten inanılmaz çözümler üretmek için yeni nesil web uygulamalarında yapay zekayı benimsemeye nasıl geçiş yaptıklarının bir göstergesi.

Uygulamada büyük başarı, büyük sorumluluk da beraberinde getirir. Üretim sistemlerinde bu kullanım düzeyinde, istemci taraflı, tarayıcı tabanlı yapay zeka modellerini gerçek bir tarayıcı ortamında test etmenin yanı sıra ölçeklenebilir, otomatikleştirilebilir ve bilinen standartlaştırılmış bir donanım kurulumu içinde olması gerekir.

Yeni Gözetimsiz Chrome ve Puppeteer'ın birleşik gücünden yararlanarak bu tür iş yüklerini standartlaştırılmış ve tekrarlanabilir bir ortamda güvenle test edebilir, tutarlı ve güvenilir sonuçlar elde edebilirsiniz.

Son adım

Belgelerimizde yer alan adım adım açıklamalı kılavuzu inceleyerek kurulumun tamamını kendiniz deneyebilirsiniz.

Bu özelliği faydalı bulduysanız LinkedIn, X (eski adıyla Twitter) veya kullandığınız sosyal ağdan #WebAI hashtag'ini kullanarak adınızı paylaşabilirsiniz. Geri bildirimlerinizi almaktan memnuniyet duyarız. Gelecekte buna benzer daha fazla içerik yazabileceğimizi biliyoruz.

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

Teşekkür

Chrome ekibinde, bu çözümde karşılaştığımız sürücü ve WebGPU sorunlarında hata ayıklamaya yardımcı olan herkese çok teşekkür ederiz. Google’da kelime uzmanına yardımcı olan Jecelyn Yeen ve Alexandra White'a özel olarak teşekkür ederiz. İşe yarayan nihai çözümün oluşturulmasında büyük rol oynayan Yuly Novikov, Andrey Kosyakov ve Alex Rudenko'ya teşekkür ederiz.