İstemci tarafı yapay zeka için performansı ve kullanıcı deneyimini iyileştirin

Maud Nalpas
Maud Nalpas

Web'deki yapay zeka özelliklerinin çoğu sunuculara dayansa da istemci tarafı 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. Bu özelliğin iyi çalışması için:

  • 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.

Model 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 az sayıda dosya için 10 MB'lık bir sınır uygulanır.

Model boyutuyla ilgili göz önünde bulundurmanız gereken bazı önemli noktalar şunlardır:

  • Göreve özel birçok yapay zeka modeli gerçekten küçük olabilir. Asyalı dillerde 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 boyutu 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, ortalama 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.

Chrome Geliştirici Araçları Ağ panelinde, MediaPipe dil algılama modelinin indirme boyutu. Demo.
Chrome DevTools Ağ panelinde, Gen AI modelleri için indirme boyutu: Gemma 2B (Küçük LLM), DistilBERT (Küçük NLP / Çok küçük LLM).

Model boyutunu optimize etme

  • 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. İnce ayar ve model küçültme teknikleri, yeterli doğruluğu korurken modelin boyutunu önemli ölçüde azaltmak için kullanılır.
  • 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.
j0rd1smit tarafından hazırlanan istemci tarafında yapay zeka tabanlı transkript demo için model seçici.

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 zorlanabilir.

Bir çözüm bulunana kadar şu anda şunları yapabilirsiniz:

  • WebGPU desteği olup olmadığını kontrol edin. Transformers.js 3 sürümü ve MediaPipe dahil olmak üzere istemci taraflı çeşitli yapay zeka kitaplıkları WebGPU'yu kullanır. Şu anda bu kitaplıklardan bazıları, WebGPU desteklenmiyorsa otomatik olarak Wasm'e geçmiyor. İ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.
  • Yeterince güçlü olmayan cihazları hariç tutun. 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 boyutlu 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ı algılamak için User-Agent İstemci İpuçları API'sinden mobile değerini (veya UA-CH desteklenmiyorsa Kullanıcı Aracısı 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. Yalnızca örtülü HTTP tarayıcı önbelleğinden yararlanmayın.
  • Model indirme işlemini parçalara ayırın. fetch-in-chunks, büyük bir indirme işlemini daha küçük parçalara ayırır.

Model indirme ve hazırlama

Kullanıcıyı engellemeyin

Sorunsuz bir kullanıcı deneyimine öncelik verin: Yapay zeka modeli henüz tam olarak yüklenmemiş olsa bile temel özelliklerin çalışmasına izin verin.

Kullanıcıların içerik yayınlamaya devam edebilmesini sağlayın.
İstemci tarafı yapay zeka özelliği henüz hazır olmasa bile kullanıcılar yorumlarını yayınlamaya devam edebilir. Demo: @maudnals.

İlerleme durumunu belirtme

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.
Model indirme işleminin ilerleme durumu gösterilir. fetch-in-chunks ile özel uygulama. @tomayac tarafından oluşturulan demo.

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 aktarma

İ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ı olacaktır.

Web çalışanına dayalı bir demo ve tam uygulama bulun:

Chrome Geliştirici Araçları'ndaki performans izleme.
Üst: Web işleyiciyle. Alt: Web işçisi yok.

Çı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

WebGL, WebGPU veya WebNN üzerinden çıkarım yapılırsa GPU kullanılır. Bu, kullanıcı arayüzünü engellemeyen ayrı bir süreçte 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ışacağını kontrol etmiş olsanız bile kullanıcı daha sonra çok fazla kaynak tüketen başka bir işlem başlatabilir. Bu sorunu azaltmak için:

  • Tahmin hatalarını ele alma. Çıkarımı try/catch blokları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 belirtin

Çı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.

Tahmin sırasındaki örnek animasyon.
@maudnals ve @argyleink tarafından hazırlanmış demo

Çı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.