WebGPU Nedir? Tarayıcıda Yapay Zeka

01WebGPU Nedir?

Web sayfaları uzun yıllar boyunca ağırlıklı olarak işlemciyi (CPU) kullandı. Ekran kartına erişim için WebGL vardı, ama bu teknoloji esas olarak grafik çizmek için tasarlanmıştı. WebGPU nedir sorusunun kısa yanıtı şu: tarayıcıya ekran kartının tüm gücünü, hem grafik hem de hesaplama için açan yeni nesil web standardı.

WebGPU, W3C bünyesinde tarayıcı üreticilerinin birlikte geliştirdiği bir standarttır. Arka planda işletim sisteminin modern grafik arayüzlerini kullanır: Windows'ta Direct3D 12, macOS ve iOS'ta Metal, Linux ve Android'de Vulkan. Geliştirici tek bir JavaScript arayüzü yazar, tarayıcı bunu cihazın diline çevirir.

En önemli yeniliği compute shader desteğidir. Bu, ekran kartını yalnız piksel boyamak için değil, binlerce küçük hesabı paralel yapmak için de kullanabilmek demektir. Yapay zeka modellerinin çalışması tam olarak bu tür paralel matris hesaplarına dayanır.

Ekran kartında çalışan küçük programlara shader denir. WebGPU bunlar için WGSL (WebGPU Shading Language) adlı kendi dilini kullanır. Çoğu web geliştiricisi bu dille doğrudan uğraşmaz; grafik motorları ve yapay zeka kütüphaneleri WGSL kodunu arka planda üretir. Yine de performans sorunlarını anlamak için temel mantığı bilmek işe yarar: işlemci görevi tarif eder, ekran kartı aynı işlemi binlerce veri üzerinde aynı anda uygular.

02WebGPU ve WebGL Farkı

WebGL, eski bir masaüstü grafik standardı olan OpenGL ES'in web sürümüdür ve hâlâ yaygın biçimde kullanılır. WebGPU ise günümüz ekran kartlarının çalışma biçimine göre sıfırdan tasarlanmıştır. WebGPU WebGL farkı özetle şöyledir:

03Tarayıcıda Yapay Zeka Nasıl Çalışır?

Bir yapay zeka modelini tarayıcıda çalıştırmak için model dosyası (ağırlıklar) kullanıcının cihazına indirilir ve önbelleğe alınır. Ardından JavaScript kütüphaneleri, modelin hesaplarını WebGPU üzerinden ekran kartına yaptırır. Sonuç sunucuya gitmeden, doğrudan sayfada gösterilir.

Bu iş için geliştiricilerin sıfırdan kod yazması gerekmez. ONNX Runtime Web, Transformers.js, TensorFlow.js ve WebLLM gibi açık kaynak kütüphaneler WebGPU desteği sunar. Bu kütüphaneler hazır modelleri tarayıcıda çalıştırmayı birkaç satır koda indirir.

WebGPU'nun yanında sık anılan bir diğer teknoloji WebAssembly'dir. WebAssembly, işlemci tarafında yerel hıza yakın kod çalıştırır; WebGPU ise ekran kartını kullanır. Birçok kütüphane ikisini birlikte kullanır ve WebGPU olmayan cihazlarda WebAssembly'ye geri döner. Ayrıntılar için WebAssembly nedir yazımıza bakabilirsiniz.

04Cihaz Üzerinde Yapay Zekanın Avantajları

On-device AI ya da cihaz üzerinde yapay zeka, modelin buluttaki bir sunucuda değil, kullanıcının kendi cihazında çalışmasıdır. Bu yaklaşımın işletmeler ve kullanıcılar için önemli avantajları vardır.

• Gizlilik: fotoğraf, ses ya da metin cihazdan çıkmaz; hassas veriyle çalışan uygulamalar için büyük kolaylık.
• Düşük gecikme: ağ gidiş-dönüşü olmadığı için yanıt anlık gelir; canlı kamera efektleri ve ses işleme için kritik.
• Sunucu maliyeti: hesaplama kullanıcının cihazında yapıldığından her istek için sunucu ödemesi gerekmez.
• Çevrimdışı çalışma: model bir kez indirildikten sonra internet bağlantısı olmadan da kullanılabilir.
• Ölçeklenme: kullanıcı sayısı arttıkça sunucu yükü artmaz, çünkü her kullanıcı kendi cihazını kullanır.

05Kullanım Alanları

Tarayıcıda yapay zeka henüz büyük sohbet modellerinin tamamının yerini almaz; ama küçük ve odaklı modellerle şimdiden pek çok iş yapılabilir.

Görüntü ve kamera

Arka plan kaldırma, fotoğraf iyileştirme, nesne tanıma ve canlı kamera efektleri cihaz üzerinde yapılabilir. Bir e-ticaret sitesinde ürünü kendi odanızda görme ya da gözlüğü yüzünüzde deneme gibi deneyimler bu teknolojiden yararlanır.

Metin ve ses

Konuşmayı metne çevirme, çeviri, özetleme ve sınıflandırma için küçük dil modelleri tarayıcıda çalışabilir. Form doldururken yazım önerileri ya da çevrimdışı çalışan bir not uygulaması bunun örnekleridir.

3D ve görselleştirme

Ürün konfigüratörleri, mimari ve emlak sunumları, büyük veri görselleştirmeleri ve tarayıcı oyunları WebGPU'nun grafik tarafından yararlanır. Bu tür deneyimler iyi bir UI/UX tasarım kurgusuyla birleştiğinde etkileyici sonuç verir.

06Tarayıcı Desteği ve Kontrol

WebGPU, Chromium tabanlı tarayıcılarda (Chrome, Edge) masaüstünde yaygın biçimde kullanılabilir durumdadır; Safari ve Firefox'ta da destek kademeli olarak gelmektedir. Mobil cihazlarda ve eski donanımlarda durum farklılık gösterebilir. Güncel destek tablosunu MDN WebGPU belgelerinden kontrol edin.

Bu nedenle WebGPU kullanan her projede özellik denetimi yapılmalı ve desteklenmeyen cihazlar için bir geri dönüş yolu bulunmalıdır. Aşağıdaki kod tarayıcının WebGPU destekleyip desteklemediğini kontrol eder.

• Kodu tarayıcının geliştirici konsolunda çalıştırarak hızlıca test edebilirsiniz.
• WebGPU yalnız güvenli bağlamda (HTTPS ya da localhost) kullanılabilir.
• Desteklenmeyen cihazlarda WebGL ya da WebAssembly tabanlı bir alternatife geçin.

async function webgpuHazirMi() {
  if (!navigator.gpu) {
    console.log('Bu tarayici WebGPU desteklemiyor.');
    return null;
  }
  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    console.log('Uygun GPU bulunamadi.');
    return null;
  }
  const device = await adapter.requestDevice();
  console.log('WebGPU hazir.');
  return device;
}

webgpuHazirMi();

07Sınırlar ve Dikkat Edilecekler

En büyük sınır model boyutudur. Büyük dil modelleri gigabaytlarca yer kaplar; bunları her ziyaretçiye indirtmek hem süre hem veri kotası açısından gerçekçi değildir. Tarayıcıda çalışacak modellerin küçük, sıkıştırılmış (quantize edilmiş) ve belirli bir işe odaklı olması gerekir.

İkinci sınır cihaz çeşitliliğidir. Güçlü bir masaüstü ekran kartında akıcı çalışan bir model, giriş seviyesi bir telefonda yavaş kalabilir ya da pil tüketimini artırabilir. Hedef kitlenizin hangi cihazları kullandığını analiz verilerinden kontrol edin.

Üçüncüsü sayfa performansıdır. Ağır model dosyaları ve hesaplamalar, sayfanın ilk açılışını yavaşlatmamalıdır. Modeli kullanıcı ilgili özelliğe ihtiyaç duyduğunda yüklemek, Core Web Vitals değerlerini (LCP ≤ 2,5 sn, INP ≤ 200 ms) korumanın yoludur. Bu dengeyi kurmak hız ve performans yönetimi çalışmasının konusudur.

08Web Projelerinde Ne Zaman Kullanılmalı?

WebGPU her site için gerekli değildir. Kurumsal bir tanıtım sitesi ya da standart bir e-ticaret mağazası için hızlı, sade ve erişilebilir bir yapı çok daha önemlidir. WebGPU; gizlilik gerektiren yapay zeka işlemleri, gerçek zamanlı görüntü ve ses işleme, yoğun 3D deneyimler ve sunucu maliyetini düşürmek istenen hesaplama işleri için anlamlıdır.

Karar verirken şu soruyu sorun: bu özellik sunucuda yapılsa ne kaybederim? Yanıt gizlilik, gecikme ya da maliyetse WebGPU güçlü bir adaydır. Yapay zekayı ürünün merkezine koyan yaklaşımı AI-native uygulama yazımızda, geliştirme sürecinde yapay zeka araçlarını yapay zeka ile kod yazma yazımızda ele aldık.

Aurora Yazılım, web tasarımı projelerinde ve sektörel yazılım çözümlerinde teknolojiyi ihtiyaca göre seçer; yeni bir standardı yalnız gerçekten değer kattığı yerde kullanır. Projenizi konuşmak isterseniz iletişim sayfamızdan bize ulaşabilirsiniz.