Web'deki çoğu AI özelliği sunuculara dayalı olsa da istemci taraflı yapay zeka doğrudan kullanıcının tarayıcısında çalışır. Bu, düşük gecikme süresi, sunucu tarafı maliyetlerinin azaltılması, API anahtarı gerekmemesi, kullanıcı gizliliğinin artırılması ve çevrimdışı erişim gibi avantajlar sunar. TensorFlow.js, Transformers.js ve MediaPipe GenAI gibi JavaScript kitaplıklarıyla tarayıcılar arasında çalışan istemci tarafı yapay zeka uygulayabilirsiniz.
İstemci tarafı yapay zeka, performans sorunlarına da yol açar: Kullanıcıların daha fazla dosya indirmesi ve tarayıcıların daha fazla çalışması gerekir. İyi bir performans için şunları göz önünde bulundurun:
- Kullanım alanınız. İstemci tarafı yapay zeka, özelliğiniz için doğru seçim mi? Özelliğiniz kritik bir kullanıcı yolculuğunda mı yer alıyor? Bu durumda, yedek bir planınız var mı?
- Model indirme ve kullanımıyla ilgili en iyi uygulamalar. Daha fazla bilgi edinmek için okumaya devam edin.
Modeli indirmeden önce
Zihin kitaplığı ve model boyutu
İstemci tarafı yapay zekayı uygulamak için bir modele ve genellikle bir kitaplığa ihtiyacınız vardır. Kitaplığı seçerken diğer araçlarda olduğu gibi boyutunu değerlendirin.
Model boyutu da önemlidir. Bir yapay zeka modeli için büyük olarak kabul edilen boyut değişir. 5 MB, faydalı bir kural olabilir: Bu değer aynı zamanda ortalama web sayfası boyutunun 75. yüzdesidir. Daha esnek bir sayı 10 MB olabilir.
Model boyutuyla ilgili dikkate alınması gereken bazı önemli noktalar şunlardır:
- Göreve özgü birçok yapay zeka modeli çok küçük olabilir. Asya dillerinde doğru karakter bölme için BudouX gibi bir model, sıkıştırılmış halde yalnızca 9,4 KB'tır. MediaPipe'in dil algılama modeli 315 KB'tır.
- Görüntü modelleri de makul boyutta olabilir. Handpose modeli ve ilgili tüm kaynakların toplamı 13,4 MB'tır. Bu, çoğu sıkıştırılmış ön uç paketinden çok daha büyük olsa da 2,2 MB (masaüstünde 2,6 MB) olan ortalama web sayfasıyla karşılaştırılabilir.
- Üretken yapay zeka modelleri, web kaynakları için önerilen boyutu aşabilir. Çok küçük bir LLM veya basit bir NLP modeli olarak kabul edilen (görüşler değişiklik gösterir) DistilBERT'in boyutu 67 MB'tır. Gemma 2B gibi küçük LLM'ler bile 1,3 GB'a ulaşabilir. Bu boyut, ortanca web sayfasının boyutunun 100 katından fazladır.
Kullanmayı planladığınız modellerin tam indirme boyutunu tarayıcılarınızın geliştirici araçlarıyla değerlendirebilirsiniz.
Model boyutunu optimize edin
- Model kalitesini ve indirme boyutlarını karşılaştırın. Daha küçük bir model, kullanım alanınız için yeterli doğruluğa sahip olabilir ve çok daha küçüktür. Yeterli doğruluğu korurken modelin boyutunu önemli ölçüde azaltmak için ince ayar ve model küçültme teknikleri mevcuttur.
- Mümkün olduğunda uzmanlaşmış modelleri seçin. Belirli bir göreve göre uyarlanmış modeller genellikle daha küçüktür. Örneğin, yaklaşım veya toksisite analizi gibi belirli görevleri gerçekleştirmek istiyorsanız genel bir LLM yerine bu görevlerde uzmanlaşmış modelleri kullanın.
Bu modellerin tümü aynı görevi farklı doğruluk dereceleriyle gerçekleştirse de boyutları 3 MB ile 1,5 GB arasında değişir.
Modelin çalışıp çalışamayacağını kontrol etme
Tüm cihazlar yapay zeka modellerini çalıştıramaz. Model kullanılırken diğer pahalı işlemler çalışıyorsa veya başlatılıyorsa yeterli donanım özelliklerine sahip cihazlar bile sorun yaşayabilir.
Bir çözüm bulunana kadar şu anda şunları yapabilirsiniz:
- WebGPU desteği olup olmadığını kontrol edin. Transformers.js sürüm 3 ve MediaPipe dahil olmak üzere çeşitli istemci tarafı yapay zeka kitaplıkları, WebGPU kullanır. Şu anda WebGPU'nun desteklenmediği durumlarda bu kitaplıklardan bazıları Wasm'a otomatik olarak dönmez. İstemci tarafı yapay zeka kitaplığınızın WebGPU'ye ihtiyacı olduğunu biliyorsanız yapay zeka ile ilgili kodunuzu bir WebGPU özellik algılama kontrolüne ekleyerek bu sorunu azaltabilirsiniz.
- Düşük performans gösteren cihazları devre dışı bırakın. Cihaz özelliklerini ve baskısını tahmin etmek için Navigator.hardwareConcurrency, Navigator.deviceMemory ve Compute Pressure API'yi kullanın. Bu API'ler tüm tarayıcılarda desteklenmez ve parmak izi bırakmayı önlemek için kasıtlı olarak kesin değildir. Yine de çok düşük güçlü görünen cihazları elemeye yardımcı olabilirler.
Büyük indirme işlemlerini bildirme
Büyük modeller için indirmeden önce kullanıcıları uyarın. Masaüstü kullanıcılarının, büyük indirmelerle ilgili sorun yaşama olasılığı mobil kullanıcılara göre daha yüksektir. Mobil cihazları tespit etmek için User-Agent İstemci İpuçları API'sindeki mobile simgesini (veya UA-CH desteklenmiyorsa User-Agent dizesini) kullanın.
Büyük boyutlu indirmeleri sınırlama
- Yalnızca gerekli olanları indirin. Özellikle model büyükse yapay zeka özelliklerinin kullanılacağından emin olduktan sonra indirin. Örneğin, yazmaya başlamadan önce öneri sunan yapay zeka özelliğiniz varsa bu özelliği yalnızca kullanıcı yazma özelliklerini kullanmaya başladığında indirin.
- Her ziyarette indirilmesini önlemek için Cache API'yi kullanarak modeli cihazda açıkça önbelleğe alın. Örtülü HTTP tarayıcı önbelleğine güvenmeyin.
- Model indirme işlemini parçalara ayırırsınız. fetch-in-chunks özelliği, büyük bir indirme işlemini daha küçük parçalara böler.
Model indirme ve hazırlama
Kullanıcıyı engellemeyin
Sorunsuz bir kullanıcı deneyimine öncelik verin: Yapay zeka modeli henüz tam olarak yüklenmese bile temel özelliklerin çalışmasına izin verin.
İlerleme durumunu belirtin
Modeli indirirken tamamlanan ilerleme durumunu ve kalan süreyi belirtin.
- Model indirmeleri istemci tarafı yapay zeka kitaplığınız tarafından yönetiliyorsa indirme ilerleme durumunu kullanarak kullanıcıya gösterin. Bu özellik kullanılamıyorsa istekte bulunmak (veya katkıda bulunmak) için bir sorun kaydı açabilirsiniz.
- Model indirmelerini kendi kodunuzda yönetiyorsanız fetch-in-chunks gibi bir kitaplık kullanarak modeli parçalara ayırabilir ve indirme ilerleme durumunu kullanıcıya gösterebilirsiniz.
- Daha fazla tavsiye için Animasyonlu ilerleme göstergeleriyle ilgili en iyi uygulamalar ve Uzun beklemeler ve kesintiler için tasarım başlıklı makaleleri inceleyin.
Ağ kesintilerini sorunsuz şekilde yönetme
Model indirmeleri, boyutlarına bağlı olarak farklı sürelerde gerçekleşebilir. Kullanıcı çevrimdışı olursa ağ kesintilerini nasıl ele alacağınızı düşünün. Mümkünse kullanıcıyı bağlantının kesildiği konusunda bilgilendirin ve bağlantı yeniden kurulduğunda indirmeye devam edin.
Bağlantının kararsız olması da parçalara ayırarak indirme yapmanın nedenlerinden biridir.
Pahalı görevleri bir web çalışanına boşaltma
İndirme sonrası model hazırlama adımları gibi pahalı görevler, ana iş parçacığınızı engelleyerek titrek bir kullanıcı deneyimine neden olabilir. Bu görevleri bir web çalışanına taşımak faydalı olabilir.
Web çalışanına dayalı bir demo ve tam uygulamayı burada bulabilirsiniz:
Çıkarsama sırasında
Model indirilip hazır olduğunda çıkarım çalıştırabilirsiniz. Çıkarsama, bilgi işlem açısından pahalı olabilir.
Çıkarımı bir web çalışanına taşıma
Çıkarım WebGL, WebGPU veya WebNN üzerinden gerçekleşirse GPU'ya dayanır. Bu, hatanın kullanıcı arayüzünü engellemeyen ayrı bir işlemde gerçekleştiği anlamına gelir.
Ancak CPU tabanlı uygulamalarda (WebGPU desteklenmiyorsa WebGPU için yedek olabilecek Wasm gibi), çıkarım işlemini bir web çalışanına taşımak, sayfanızı tıpkı model hazırlama sırasında olduğu gibi duyarlı tutar.
Yapay zeka ile ilgili tüm kodunuz (model getirme, model hazırlama, çıkarım) aynı yerdeyse uygulamanız daha basit olabilir. Bu nedenle, GPU'nun kullanılıp kullanılmadığına bakılmaksızın bir web işleyici seçebilirsiniz.
Hataları işleme
Modelin cihazda çalışması gerektiğini kontrol etmiş olsanız bile, kullanıcı daha sonra kaynakları yoğun bir şekilde tüketen başka bir işlem başlatabilir. Bu sorunu azaltmak için:
- Tahmin hatalarını işleme. Çıkarımı
try/catchbloklarına alın ve ilgili çalışma zamanındaki hataları ele alın. - Hem beklenmedik hem de GPUDevice.lost WebGPU hatalarını ele alın. Bu hata, cihaz zorlandığı için GPU'nun sıfırlanmasından kaynaklanır.
Çıkarsama durumunu belirtme
Çıkarsama, hemen olarak algılanandan daha uzun sürerse kullanıcıya modelin düşündüğünü belirtin. Bekleme süresini kısaltmak ve kullanıcıya uygulamanın beklendiği gibi çalıştığından emin olmak için animasyonlardan yararlanın.
Çıkarımı iptal edilebilir hale getirme
Sistemin, kullanıcının hiçbir zaman görmeyeceği bir yanıt oluşturmak için kaynak israf etmeden kullanıcının sorgusunu anında hassaslaştırmasına izin verin.