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

François Beaufort
François Beaufort

Güzel bir haberimiz var. Havalı bir Web AI uygulaması geliştirdiniz makine öğrenimi modellerini doğrudan kullanıcının cihazında çalıştıran. Tamamen çalışır istemci tarafı web tarayıcısında hızlı bir şekilde iletebilir. Cihazdaki bu Tasarım kullanıcı gizliliğini artırır, performansı artırır ve maliyetleri azaltır önemli ölçüde artış gösteriyor.

Ancak bir zorluk var. Sizin TensorFlow.js modeli üzerinde çalışabilir hem CPU'lar (WebAssembly) hem de daha güçlü GPU'lar WebGL ve WebGPU). Soru: tarayıcı testini, seçilen donanımla tutarlı bir şekilde nasıl otomatik hale getirebilirsiniz?

Tutarlılığın sürdürülmesi, makine öğrenimi modellerinin karşılaştırılması açısından çok önemlidir. dağıtımdan önce, bunları geliştirip geliştirdikçe zaman içinde cihazlarında kullanmalarına izin verir.

GPU'larla tutarlı bir test ortamı oluşturmak bekleniyor. Bu blog yayınında, karşılaştığımız sorunları ve bu sorunları nasıl çözdüğümüzü paylaşacağız. bu sayede uygulamanızın performansını artırabilirsiniz.

Bu, yalnızca Web AI geliştiricileri için değildir. Web oyunları üzerinde çalışıyorsanız bu gönderi sizin için de değerlidir.

Otomasyon araç kutumuz

Kullandığımız özellikler:

  • Ortam: Linux tabanlı bir Google Colab NVIDIA'ya bağlı notebook T4 veya V100 GPU. Google Cloud gibi diğer bulut platformlarını kullanabilirsiniz (GCP) belirtin.
  • Tarayıcı: Chrome, WebGPU'yu, WebGL'nin devamı niteliğindeki modern GPU API'lerindeki ilerlemeleri web'e taşıyor.
  • Otomasyon: Puppeteer şunları sağlayan bir Node.js kitaplığıdır: tarayıcıları programlı bir şekilde JavaScript ile kontrol edersiniz. Puppeteer sayesinde Chrome'u gözetimsiz modda otomatikleştirir. Bu, tarayıcının gözetimsiz olarak çalışacağı anlamına gelir. sunucu üzerinde görünür. İyileştirilmiş yeni gözetimsiz mod eski formu kullanmayın.
ziyaret edin.

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 yazın. Şunları yapabilirsiniz: eşdeğeri Puppeteer ile programatik olarak gerçekleştirme console.log ile düzenleyin veya manuel olarak kontrol etmek için tam raporu PDF olarak kaydedin:

/* 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. Biz değildir. İnsanların çevrimiçi ortamda çok sayıda tartışması vardır. resmi Chrome destek kanalları da dahil olmak üzere (1), (2).

WebGPU ve WebGL desteğini etkinleştir

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

  • --no-sandbox işareti Chrome'un güvenlik korumalı alanını devre dışı bırakır. Bu korumalı alan, sistem geri kalanından uzaklaştırın. Chrome'u bu korumalı alan desteklenmiyor.
  • --headless=new işareti, Chrome'u yeni ve geliştirilmiş görünür kullanıcı arayüzü olmayan gözetimsiz mod.
  • --use-angle=vulkan işareti, Chrome'a Vulkan arka ucu ANGLE için OpenGL ES 2/3 çağrılarını Vulkan API çağrılarına çevirir.
  • --enable-features=Vulkan işareti, şunlar için Vulkan grafik arka ucunu etkinleştirir: birleştirme ve pikselleştirme.
  • --disable-vulkan-surface işareti VK_KHR_surface vulkan'ını devre dışı bırakır örnek uzantısıdır. Değişim zinciri kullanmak yerine Bit blit, ekranda oluşturma sonucunu sunma.
  • --enable-unsafe-webgpu işareti, şurada deneysel WebGPU API'yi etkinleştirir: Linux'ta Chrome'u açar 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 değer yalnızca yazılım için devre dışıdır.

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ılamıyor ve NVIDIA T4 GPU, algılandı.

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

Bazı GPU uzmanlarıyla birlikte chrome://gpu çıktılarını daha yakından inceledik mühendisim. Google Drive'da yüklü varsayılan sürücülerle ilgili sorunlar Linux Colab Chrome, Vulkan'da soruna neden olarak Chrome'un Aşağıdaki çıkışta gösterildiği gibi GL_RENDERER düzeyindeki NVIDIA T4 GPU. Bu Gözetimsiz Chrome ile ilgili sorunlara neden olur.

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. İlgili içeriği oluşturmak için kullanılan son iki satır, NVIDIA sürücülerinin süreç boyunca algıladığı çıkışları günlüğe vulkaninfo ile birlikte.

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 çalıştırırken doğru sürücüleri ve işaretleri kullanarak artık elimizde WebGPU var. yeni, gözetimsiz modu kullanarak WebGL desteğinden yararlanın.

Sahne arkası: Ekibimizin incelemesi

Uzun araştırmalardan sonra, geliştirdiğimiz ortama uygun çalışma yöntemleri bulamadık Google Colab'da yürütmem gerekiyordu. Ancak bununla birlikte, umut verici gönderiler başka ortamlarda işe yaradı ve bu da ümit vericiydi. Sonuç olarak, Colab NVIDIA T4 ortamında başarılarını tekrarlayabildik. temel sorunlar:

  1. Bazı işaret kombinasyonları GPU'nun algılanmasına olanak tanır ancak şunları yapmanıza izin vermez: GPU'yu kullanıyor.
  2. Eski Chrome gözetimsiz özelliğinin kullanıldığı üçüncü tarafların çalışan çözümlerine örnekler Bu sürüm, bir noktada kullanımdan kaldırılıp yeni sürüme gidin. Bir çözüme ihtiyacımız vardı geliştirildi.

GPU'nun yetersiz kullanıldığını doğruladığımızda görüntü tanıma için örnek TensorFlow.js web sayfası, Bu şekilde, bir modeli kıyafet numunelerini tanıyacak şekilde eğittik (örneğin, "merhaba" dünya" ilk adımıdır.

Normal bir makinede, 50 eğitim döngüsü (sıfır zaman olarak bilinir) daha kısa sürede 1 saniyeden fazla olacaktı. Gözetimsiz Chrome varsayılan durumunda çağrıldığında günlüğe nasıl yapıldığını görmek için JavaScript konsolu çıkışını Node.js sunucu tarafı komut satırına gerçekten çok hızlı aldı.

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

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

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

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

Özet

Web AI katlanarak büyüdü 2017'de kuruldu. WebGPU, WebGL gibi tarayıcı teknolojileri ve WebAssembly, makine öğrenimi modelinin istemci tarafında daha da hızlandırılabilir.

2023 itibarıyla TensorFlow.js ve MediaPipe Web 1 milyarı aşan indirme sayısı Bu, tarihi bir dönüm noktası ve web'in günümüzdeki geliştiriciler ve mühendisler yeni nesil süreçlerinde yapay zekayı benimsemeye bazı web uygulamaları geliştirebiliyor.

Uygulamada büyük başarı, büyük sorumluluk da beraberinde getirir. Bu kullanım düzeyinde üretim sistemlerinde istemci taraflı, tarayıcı tabanlı yapay zekanın test edilmesi modelleri geliştirirken ölçeklenebilir, otomatikleştirilebilir, ölçeklenebilir ve otomatik bilinen standart bir donanım kurulumu içinde kullanabilirsiniz.

Yeni Gözetimsiz Chrome ve Puppeteer'ın birleşik gücünden yararlanarak standartlaştırılmış ve tekrarlanabilir bir çalışma ortamında tutarlı ve güvenilir sonuçlar sağlar.

Son adım

Adım adım açıklamalı kılavuza aşağıdaki bağlantıdan ulaşabilirsiniz: belgelerimize göz atın. Böylece kurulumun tamamını kendiniz deneyebilirsiniz.

Bu içeriği yararlı bulduysanız LinkedIn, X (eski adıyla Twitter) veya #WebAI hashtag'ini kullanarak kullandığınız sosyal ağ. Proje yönetimi hakkında gelecekte buna benzer daha fazla yazı yazabilmemiz için lütfen geri bildirimlerinizi bizimle paylaşın.

GitHub kod deposuna yıldız ekleme almak için bizi bilgilendirin.

Teşekkür

Chrome ekibinde sürücünün hatalarını ayıklamaya yardımcı olan ve Bu çözümde karşılaştığımız WebGPU sorunları, Jecelyn Yeen ve Kelime ustalarına yardım ettiği için Alexandra White bu blog yayınına göz atın. Yuly Novikov, Andrey Kosyakov ve Alex Rudenko, dünyanın dört bir yanından işe yarayan nihai çözümü oluşturmaktır.