Giriş
Tarayıcıda makine öğrenmesi artık bir demodan öte; üretim senaryolarına hazır. WebGPU sayesinde GPU hızlandırmalı hesaplama, Chrome ve Edge gibi modern tarayıcılarda varsayılan olarak açıldı. Bu rehberde, ONNX Runtime Web (ORT Web) kullanarak tarayıcı içinde nesne tespiti (YOLO ailesi gibi) modelini çalıştırmayı ve WebGPU yürütme sağlayıcısı ile performansı nasıl artırabileceğinizi anlatıyorum. Kurulum adımlarını, küçük kod parçacıklarıyla ve pratik ipuçlarıyla beraber bulacaksınız.
Neden WebGPU?
WebGPU, WebGL’in ötesine geçerek daha modern bir grafik ve hesaplama API’si sunar. ML tarafında en kritik fark, tensör hesaplamalarını verimli çalıştırabilmesi ve veri kopyalamayı azaltmasıdır. Sonuç olarak, aynı model WebAssembly (WASM) ile 200-400 ms sürerken, WebGPU ile 60-120 ms aralığına inebilir; bu özellikle canlı kamera akışında kare kaçırmamak için belirleyici bir fark yaratır.
Ön Koşullar ve Tarayıcı Desteği
- Chrome 113+ ve Edge 113+ sürümlerinde WebGPU masaüstünde varsayılan olarak açık. Mac’te Apple Silicon ile daha istikrarlı sonuçlar alırsınız. Firefox’ta Nightly ile about:config altında dom.webgpu.enabled bayrağını etkinleştirmeniz gerekebilir. Safari’de ise Technology Preview önerilir.
- Geliştirme için basit bir statik sunucu kullanın: npx serve, python -m http.server veya VS Code Live Server eklentisi işinizi görür. Dosyaları doğrudan diskten açmak (file://) CORS hatalarına yol açar.
Proje Yapısı
Minimum örnek için şu dosyaları oluşturun: index.html, app.js ve model dosyanız (ör. yolov8n.onnx). Test için bir görüntü dosyası veya webcam akışı kullanabilirsiniz. Kamera ile test edecekseniz, HTTPS üzerinde yayınlamayı unutmayın; tarayıcılar güvenlik nedeniyle kamera erişimini HTTP’de kısıtlar.
ONNX Runtime Web’i Ekleme
CDN ile hızlı başlamak için index.html içine ORT Web’i ekleyebilirsiniz: <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort-web.min.js"></script>. Alternatif olarak modüler kullanım için paket yöneticileriyle onnxruntime-web kurabilir, bundler ile projeye dahil edebilirsiniz. WebGPU hızlandırma için çalışma zamanı seçeneklerinde executionProviders: ['webgpu'] belirtmeniz yeterli.
Oturum Oluşturma ve WebGPU’yu Açma
Temel başlatma adımı şöyledir: const session = await ort.InferenceSession.create('yolov8n.onnx', { executionProviders: ['webgpu'], graphOptimizationLevel: 'all' });. Eğer cihazda WebGPU yoksa otomatik olarak WASM’a düşmek isteyebilirsiniz; o durumda önce WebGPU ile dene, başarısız olursa executionProviders: ['wasm'] ile yeniden oluştur şeklinde bir sarmalayıcı yazın.
Girdi Hazırlama
Nesne tespiti modelleri tipik olarak BxCxHxW float32 tensörü bekler. Tarayıcı tarafında Canvas üzerinden resmi alıp 640x640 gibi modele uygun boyuta yeniden örnekleyin, ardından ImageData piksellerinden Float32Array oluşturun. Kanal sıralaması (NCHW vs NHWC) ve normalizasyon (0-1 arası ölçek, ortalama-standart sapma) modelinize göre değişir; ONNX ihracını yaparken hangi düzen kullanıldıysa ona sadık kalın. Örnek: const input = new ort.Tensor('float32', floatArray, [1,3,640,640]);
Çıktıların İşlenmesi
YOLO tarzı modeller, her kutu için [x, y, w, h, score, class] veya benzeri bir yapı üretir. Post-processing adımları: skor eşiği uygulama (örn. 0.25), Non-Maximum Suppression ile çakışan kutuları eleme ve sınıf etiketleri ile renklendirme. ORT WebGPU bazı durumlarda çıktı tensörünü GPU belleğinde tutabilir; tarayıcı tarafında çizmek için CPU’ya kopyalamanız gerekir. Performans için tek bir canvas üzerinde hem görüntü hem de kutuları çizmek, her karede gereksiz tahsislerden kaçınmak önemlidir.
Performans İpuçları
- Model boyutu: YOLOv8n gibi küçük varyantlarla başlayın; tarayıcıda latency dramatik şekilde düşer.
- Precision: FP16 desteği olan cihazlarda otomatik kazanç sağlanır. ORT Web, WebGPU arka ucunda uygunsa bunu kullanır.
- İşletim birleştirme: graphOptimizationLevel: 'all' genellikle faydalı. Bazı modellerde ek kazanımlar için ONNX’ı optimize edin (Fusion/Constant folding).
- Batch=1: Akış senaryolarında tekli batch en düşük gecikmeyi verir.
- Sıcak çalışma: İlk çalıştırmadan önce bir kez “ısındırma” inference’ı yapın; shader derlemeleri ve önbellekler sonrası kare süreleri iyileşir.
Güvenlik ve Barındırma
Model dosyanız büyükse (ör. 20-50 MB), ilk yükleme süresi kullanıcı deneyimini etkiler. HTTP istemci önbelleği için uzun Cache-Control süreleri ayarlayın ve sürümleme yapın. Kamera kullanan sayfalar için HTTPS zorunlu. Cross-origin model yüklerken CORS başlıklarını doğru verin (Access-Control-Allow-Origin). Ayrıca, kullanıcı donanımlarında GPU kaynakları sınırlı olabilir; bir hata durumunda kibarca WASM’a düşmek, uygulamanın kırılmasını engeller.
Hata Ayıklama
- navigator.gpu yoksa tarayıcı sürümünüzü ve bayrakları kontrol edin.
- ValidationError görüyorsanız tensör şekilleri/hizalamaları uyuşmuyor olabilir. Girdiyi ve modelin beklediği düzeni tekrar gözden geçirin.
- Performance sekmesiyle CPU/GPU zamanlarını izleyin; çoğu darboğaz, görüntü ön-işlemede ortaya çıkar. Web Workers ile ön-işlemeyi ana iş parçacığından ayırmak sayfa akıcılığını artırır.
Sonuç
WebGPU ve ONNX Runtime Web birleşimi, tarayıcıda ML uygulamaları için yeni bir performans eşiği sunuyor. Sunucuya görüntü yüklemeden, gizlilik dostu ve düşük gecikmeli nesne tespiti mümkün. Bu rehberdeki yapı ile kısa sürede çalışan bir prototip çıkarabilir, ardından model optimizasyonu, önbellekleme ve UI cilasıyla üretim seviyesine taşıyabilirsiniz. Bir kez kurduktan sonra, segmentasyon, yüz mesh’i ya da metin tespiti gibi diğer ONNX modellerini de aynı altyapı üzerinde hızla deneyebilirsiniz.