Giriş
Tarayıcıda yapay zeka çalıştırmak, artık sadece demo projelerin konusu değil. WebAssembly (WASM) ve WebGPU sayesinde, masaüstü benzeri performansla gerçek zamanlı çıkarım almak mümkün. Bu rehberde, ONNX Runtime Web kullanarak bir modeli tarayıcıda çalıştırmayı, WebGPU ve WASM arasında nasıl seçim yapacağınızı ve performansla ilgili pratik ipuçlarını adım adım anlatıyorum.
Neden Tarayıcıda Yapay Zeka?
Tarayıcı üzerinde çıkarımın üç büyük avantajı var: gizlilik (veri cihazdan çıkmıyor), kurulum kolaylığı (ekstra bağımlılık yok) ve dağıtım hızı (sadece bir web sayfası). Örneğin bir görüntü sınıflandırma modeli, web uygulamanızda kullanıcı fotoğrafını anında analiz edebilir ve bu sırada veriyi sunucuya göndermenize gerek kalmaz. Üstelik WebGPU desteği olan tarayıcılarda GPU hızlandırma ile mobil cihazlarda bile akıcı performans elde edebilirsiniz.
Gereksinimler
- Güncel bir tarayıcı (Chrome 113+, Edge 113+, Safari 17+). WebGPU desteği yoksa WASM sağlayıcısı otomatik devreye girer.
- Basit bir HTTP sunucu (ör. npx serve veya python -m http.server). Güvenlik nedeniyle dosyaları doğrudan dosya sistemi üzerinden açmak yerine bir sunucu gerekli.
- Bir ONNX modeli (ör. MobilNet v2 sınıflandırma modeli). Dilerseniz kendi modelinizi torch.onnx.export ile dışa aktarabilirsiniz.
Proje Kurulumu
1) Klasör oluşturun: mkdir ort-web-demo && cd ort-web-demo
2) Model dosyasını model.onnx olarak kök dizine koyun.
3) Aşağıdaki basit HTML dosyasını index.html olarak kaydedin (CDN üzerinden ONNX Runtime Web yüklenecek):
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>ONNX Runtime Web Demo</title>
</head>
<body>
<h3>Tarayıcıda Yapay Zeka (WebGPU / WASM)</h3>
<input type="file" id="file" accept="image/*"/>
<div id="log">Hazır...</div>
<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script>
<script>
(async () => {
// WebGPU uygunsa önce onu, değilse WASM'ı dene
const providers = (navigator.gpu) ? ['webgpu', 'wasm'] : ['wasm'];
ort.env.wasm.simd = true; // SIMD hızlandırma
ort.env.wasm.numThreads = Math.min(4, navigator.hardwareConcurrency || 2);
const session = await ort.InferenceSession.create('model.onnx', { executionProviders: providers });
document.getElementById('log').innerText = 'Model yüklendi. Sağlayıcı: ' + session.executionProvider;
const fileInput = document.getElementById('file');
fileInput.onchange = async () => {
const file = fileInput.files[0];
if (!file) return;
const img = new Image();
img.src = URL.createObjectURL(file);
await img.decode();
// Basit ön işleme: 224x224'e ölçekle, [0,1] normalizasyonu
const canvas = document.createElement('canvas');
canvas.width = 224; canvas.height = 224;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, 224, 224);
const { data } = ctx.getImageData(0, 0, 224, 224);
const input = new Float32Array(1 * 3 * 224 * 224);
for (let i = 0; i < 224 * 224; i++) {
const r = data[i * 4] / 255;
const g = data[i * 4 + 1] / 255;
const b = data[i * 4 + 2] / 255;
input[i] = r; input[i + 224 * 224] = g; input[i + 2 * 224 * 224] = b;
}
const tensor = new ort.Tensor('float32', input, [1, 3, 224, 224]);
const feeds = {}; feeds[session.inputNames[0]] = tensor;
const t0 = performance.now();
const results = await session.run(feeds);
const t1 = performance.now();
const output = results[session.outputNames[0]].data;
const maxIndex = output.indexOf(Math.max(...output));
document.getElementById('log').innerText = `Sınıf: ${maxIndex}, Süre: ${(t1 - t0).toFixed(1)}ms`;
};
})();
</script>
</body>
</html>
Uygulamayı Çalıştırma
Kök dizinde küçük bir sunucu başlatın. Node.js varsa: npx serve . veya Python ile: python -m http.server 8080. Ardından tarayıcıdan http://localhost:8080 adresine gidin. Bir görsel seçtiğinizde model çıkarımı yapacak ve süreyi ms cinsinden gösterecektir. WebGPU mevcutsa sağlayıcı olarak webgpu, değilse wasm kullanılır.
Performans İpuçları
- SIMD ve çok iş parçacığı: Kodda ort.env.wasm.simd = true ve numThreads ayarları etkin. Tarayıcı buna izin veriyorsa WASM performansı ciddi artar.
- WebGPU avantajı: Büyük modellerde GPU hızlandırma dramatik fark yaratır. Ancak WebGPU, HTTPS ve güvenli bağlam gerektirir. Üretimde daima HTTPS kullanın.
- Model optimizasyonu: ONNX modeli fuse ve constant folding ile optimize edin. INT8 quantization (ör. onnxruntime-tools veya optimum) tarayıcıda boyutu küçültür ve hız kazandırır.
- Lazy yükleme: Modeli sayfa yüklendiğinde değil, kullanıcı etkileşimi başladığında indirin. İlk TTI süresini iyileştirir.
- Önbellek: Model dosyasını IndexedDB veya Cache Storage ile saklayın. İlk açılıştan sonra bekleme neredeyse sıfırlanır.
Hata Ayıklama ve Uyumluluk
- Giriş/çıkış adları: Bazı modellerde giriş ismi input değil, farklı olabilir. session.inputNames ve session.outputNames ile dinamik alın.
- Bellek limitleri: Büyük modeller mobilde bellek sınırına takılabilir. Daha küçük veya quantized sürüme geçin.
- CORS: Modeli farklı bir domain’den çağırıyorsanız CORS başlıklarını doğru ayarlayın (Access-Control-Allow-Origin).
- Tarayıcı farkları: Safari’de GPU bellek kotaları daha katı olabilir; WASM yedek planınızın iyi çalıştığından emin olun.
Güvenlik ve Gizlilik
Tarayıcıda çıkarımın en güçlü yanı, verinin cihazda kalmasıdır. Yine de kullanıcı içeriğini asla arka plana otomatik yüklemeyin ve gerekli olmadıkça loglamayın. Model dosyalarınızı bütünlüğü doğrulanmış bir CDN’den servis edin ve içerik güvenlik politikanızda (Content-Security-Policy) sadece ihtiyaç duyulan kaynaklara izin verin.
Sonuç
ONNX Runtime Web ile WebGPU/WASM arasında otomatik geçiş yaparak, modern tarayıcılarda güçlü bir yapay zeka deneyimi sunmak mümkün. Yukarıdaki basit örnek; görüntü sınıflandırma, metin analizi veya poz tahmini gibi pek çok senaryonun temelini oluşturur. Üretime geçerken model optimizasyonu, önbellekleme ve güvenlik adımlarını uyguladığınızda, native’e yakın bir hız ve akıcılık elde edebilirsiniz.
