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

Güzel bir haberimiz var. Doğrudan kullanıcının cihazında makine öğrenimi modelleri çalıştıran havalı bir Web AI uygulaması tasarladınız. Buluta ihtiyaç duymadan tamamen istemci tarafındaki web tarayıcısında çalışır. Bu cihaz üzerinde tasarım, kullanıcı gizliliğini iyileştirir, performansı artırır ve maliyetleri önemli ölçüde azaltır.

Ancak bir engel var. TensorFlow.js modeliniz hem CPU'larda (WebAssembly) hem de daha güçlü GPU'larda (WebGL ve WebGPU üzerinden) çalışabilir. Asıl soru şudur: Seçilen donanımla tarayıcı testini tutarlı bir şekilde nasıl otomatik hale getirebilirsiniz?

Tutarlılığı korumak, gerçek dünyadaki kullanıcıların cihazlarında kullanmak için dağıtımdan önce, siz iterasyonlar yapıp bunları iyileştirirken makine öğrenimi modelinin zaman içindeki 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 üzerinden oyunlar veya grafikler üzerinde çalışıyorsanız bu gönderi sizin için de değerlidir.

Otomasyon araç kutumuzda neler var?

Şu bilgileri kullanıyoruz:

• Ortam: NVIDIA T4 veya V100 GPU'ya bağlı Linux tabanlı bir Google Colab not defteri. İsterseniz Google Cloud (GCP) gibi diğer bulut platformlarını da kullanabilirsiniz.
• Tarayıcı: Chrome, modern GPU API'lerinin ilerlemelerini web'e getiren ve WebGL'nin devamı olan WebGPU'yu destekler.
• Otomasyon: Puppeteer, JavaScript ile tarayıcıları programatik olarak kontrol etmenizi sağlayan bir Node.js kitaplığıdır. Puppeteer ile Chrome'u gözetimsiz modda otomatikleştirebiliriz. Bu, tarayıcının bir sunucuda görünür bir arayüz olmadan ç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 etkin olup olmadığını kontrol etmenin en iyi yolu adres çubuğuna chrome://gpu yazmaktır. console.log aracılığıyla programatik olarak Puppeteer ile eşdeğerini 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 dosyasını açtığınızda aşağıdaki sonuçları görürsünüz:

Grafik özellik durumu
OpenGL:	Devre dışı
Vulkan:	Devre dışı
WebGL:	Yalnızca yazılımdır. Donanım hızlandırma kullanılamaz.
WebGL2:	Yalnızca yazılımdır. Donanım hızlandırma kullanılamaz.
Web GPU'su:	Devre dışı
Sorunlar algılandı. WebGPU, engellenenler listesi veya komut satırı üzerinden devre dışı bırakıldı.

Pek iyi bir başlangıç değil. Donanım algılamanın başarısız olduğu açıktır. WebGL, WebGL2 ve WebGPU esasen devre dışıdır veya yalnızca yazılımdır. Bu sorun konusunda yalnız değiliz. Resmi Chrome destek kanalları (1), (2) de dahil olmak üzere, benzer durumda olan kişilerle çevrimiçi olarak çok sayıda tartışma var.

WebGPU ve WebGL desteğini etkinleştir

Gözetimsiz Chrome varsayılan olarak 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, tarayıcı işlemini sistemin geri kalanından izole eden Chrome'un güvenlik korumalı alanını devre dışı bırakır. Chrome'un bu korumalı alan olmadan kök olarak çalıştırılması desteklenmez.
• --headless=new flag'i, Chrome'u görünür bir kullanıcı arayüzü olmadan yeni ve iyileştirilmiş gözetimsiz modda çalıştırır.
• --use-angle=vulkan işareti, Chrome'a ANGLE için Vulkan arka ucunu kullanmasını bildirir. Bu arka ucu, OpenGL ES 2/3 çağrılarını Vulkan API çağrılarına çevirir.
• --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 oluşturma sonucu için değiştirme zinciri 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ı burada 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. WebGPU sorunu algılanmaz ve devre dışı olan değer yalnızca yazılım olarak değişir.

Grafik özellik durumu
OpenGL:	Devre dışı
Vulkan:	Devre dışı
WebGL:	Yalnızca yazılımdır. Donanım hızlandırma kullanılamaz.
WebGL2:	Yalnızca yazılımdır. Donanım hızlandırma kullanılamaz.
Web GPU'su:	Yalnızca yazılımdır. Donanım hızlandırma kullanılamaz.

Ancak donanım hızlandırma hâlâ kullanılamıyor, NVIDIA T4 GPU algılanmaz.

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

Chrome ekibindeki bazı GPU uzmanlarıyla birlikte chrome://gpu ürününün çıktısını daha yakından inceledik. Linux Colab örneğinde yüklü olan varsayılan sürücüler ile ilgili sorunlar tespit ettik. Bu da Vulkan ile ilgili sorunlara yol açmış ve Chrome'un aşağıdaki çıkışta gösterildiği gibi GL_RENDERER düzeyinde NVIDIA T4 GPU'yu algılayamıyor. Bu durum, gözetimsiz Chrome ile ilgili 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)

Bu nedenle, uyumlu olan doğru sürücülerin yüklenmesi sorunu çözer.

Sürücüler yüklendikten sonra çıkış güncellendi.

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, vulkaninfo ile birlikte NVIDIA sürücülerinin algıladığı çıkışları 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ırdığınızda aşağıdaki sonucu elde ederiz. 🎉

Grafik özellik durumu
OpenGL:	Etkin
Vulkan:	Etkin
WebGL:	Donanım hızlandı ancak performans azaldı.
WebGL2:	Donanım hızlandı ancak performans azaldı.
Web GPU'su:	Donanım hızlandı ancak performans azaldı.

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

Sahne arkası: Ekibimizin incelemesi

Uzun araştırmalar sonucunda, Google Colab'de yürütmemiz gereken ortam için çalışma yöntemleri bulamadık, ancak diğer ortamlarda işe yarayan ve umut vadeden bazı umutlu yayınlar vardı. 2 önemli sorunumuz olduğu için nihayetinde başarısını Colab NVIDIA T4 ortamında tekrarlayamadık:

1. Bazı işaret kombinasyonları GPU'nun algılanmasına izin verir ancak GPU'yu kullanmanıza izin vermez.
2. Üçüncü tarafların, eski Chrome gözetimsiz sürümünü kullanan, çalışan çözümlere örnekler. Bir noktada bu sürüm kullanımdan kaldırılacak ve yeni sürüme geçilecektir. Geleceğe daha iyi hazırlanabilmek 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ını çalıştırarak GPU'nun yetersiz kullanımını onayladık. Bu sayfada bir modeli giysi örneklerini tanıyacak şekilde eğittik (makine öğreniminin "merhaba" dünyası" gibi).

Normal bir makinede, her biri 1 saniyeden kısa bir sürede 50 eğitim döngüsünün (dönemler olarak bilinir) çalıştırılması gerekir. Gözetimsiz Chrome'u varsayılan durumunda çağırarak bu eğitim döngülerinin ne kadar hızlı gerçekleştiğini görmek için JavaScript konsolu çıkışını Node.js sunucu tarafı komut satırına kaydedebiliriz.

Beklendiği gibi, her eğitim dönemi beklenenden çok daha uzun sürdü (birkaç saniye). Bu da Chrome'un, GPU'yu kullanmak yerine, düz eski JS CPU çalıştırmasına kaldığı anlamına gelir:

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

Özet

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

2023 itibarıyla TensorFlow.js ve MediaPipe Web, 1 milyardan fazla model ve kitaplık indirmesini geçti. Bu tarihsel 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 işareti.

Kullanımda büyük başarı, büyük sorumluluk da beraberinde getirir. Üretim sistemlerinde bu kullanım düzeyinde, istemci tarafı, tarayıcı tabanlı AI modellerinin gerçek bir tarayıcı ortamında test edilmesi ve aynı zamanda ölçeklenebilir, otomatikleştirilebilir ve bilinen standartlaştırılmış bir donanım kurulumu içinde olması gerekir.

Yeni Headless Chrome ve Puppeteer'ın birleşik gücünden yararlanarak bu tür iş yüklerini standartlaştırılmış ve yinelenebilir bir ortamda güvenle test ederek tutarlı ve güvenilir sonuçlar elde edebilirsiniz.

Son adım

Dokümanlarımızda adım adım açıklamalı bir kılavuz mevcuttur. Bu sayede kurulumun tamamını kendiniz deneyebilirsiniz.

Bu yazıyı faydalı bulduysanız LinkedIn, X (eski adıyla Twitter) veya kullandığınız sosyal ağ üzerinden #WebAI hashtag'iyle paylaşabilirsiniz. Geri bildirimlerinizi bizimle paylaşırsanız seviniriz. Böylece gelecekte buna benzer daha fazla yazı yazabiliriz.

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ının giderilmesine yardımcı olan herkese çok teşekkür ederiz. Bu blog yayınına yardımcı olan Jecelyn Yeen ve Alexandra White'a da özel teşekkürler. Çalışan nihai çözümün üretilmesinde büyük rol oynayan Yuly Novikov, Andrey Kosyakov ve Alex Rudenko'ya teşekkür ederiz.