BILIBILI, Büyük Çin'in önde gelen eğlence içeriği platformlarından biri ABD ve Güneydoğu Asya'da bulunan, kullanıcı tarafından oluşturulan içeriklerden oluşan devasa bir veritabanına aylık 330 milyondan fazla kullanıcı çeken yayınlar ve oyun deneyimleri etkin kullanıcı sayısı (AEKS) kadardır.
BILIBILI'nin platformunun ayırt edici özelliklerinden biri de Japonya ve Çin'de popüler bir özellik olan ve gerçek zamanlı izleyici geri bildirimi sağlar. Madde işaretli ekran yorumlar, canlı video içeriklerine heyecan verici ve etkileyici bir öğe katarak İzleyiciler, düşüncelerini ifade edip yanıt vermelerini sağlayarak aktif bir şekilde etkileşim kurabilir. diğer izleyicilerine anlık olarak göstermenizi sağlar.
Yarışma
Madde işaretli yorumlar, izleyicilerin etkileşimde bulunması için konuşma sırasında, konuşmacının portresini engellememeye dikkat ederek en iyi kullanıcı deneyimini sunmak. Aşağıdaki videoda, madde işaretli yorumlar ve izleyicileri izlemeye devam etmekten vazgeçirebilir.
Konuşmacının yorumlarının arkasına sorunsuzca yayılan madde işaretli yorumları etkinleştirmek için için doğru makine öğrenimi segmentasyonuna ihtiyacınız vardır. verimli bir şekilde çalıştırılması zor olur. Bu nedenle, tarihsel olarak bu kadar güçlü sunucu tarafında desteklenmesi gerekir.
BILIBILI'nin günlük olarak ne kadar içerik sunduğu göz önünde bulundurulduğunda, bir kısmı çok pahalı olurdu. Bu nedenle, geliştirme ekibi müşteri tarafında bir çözüm bulmanız gerekir. Bir diğer hedef istemci taraflı makine öğrenimine geçmek CPU'yu düştüğünden performansın düştüğü noktaya kadar yükseliyor.
Çözüm: Cihaz üzerinde görüntü segmentasyonu
Bu zorlukların üstesinden gelmek için BILIBILI'nin geliştiricileri MediaPipe ve TensorFlow.js ile Gövde Segmentasyonu, MediaPipe'in Resim Segmenter'inin öncüsü. Bu, cihaz üzerinde etkili bir segmentasyon API'si sağladı ve ayrıca önceden eğitilmiş modellerine yer verir.
BILIBILI, artık bu özelliği hızla geliştirip destekleyebilir ve maliyetleri düşürebilir. ve performansı sürdürmeye yardımcı olur.
Uygulama
BILIBILI'nin bu çözümü nasıl uyguladığı aşağıda açıklanmıştır:
- Gerçek zamanlı karakter dış çizgileri: BILIBILI, Selfie Segmenter modelini kullandı ana hatlarını çıkarmanızı sağlar. Bu onlara izin verdi karakter sınırlarını çizen bir maske oluşturuyoruz.
- Canlı yorum katmanıyla entegrasyon: Daha sonra, çıkarılan yorumları
CSS kullanılarak canlı yorum katmanıyla birlikte karakter ana hatları
mask-image
özellikler. Ortadaki karakter alanını şeffaf olarak ayarladığınızda madde işaretli ekran yorumları, herhangi bir öğe olmadan karakterlerin arkasında bir engelim var. - Uygulamayı optimize edin: performansında herhangi bir düşüşe yol açmadı.
Performans optimizasyonu
BILIBILI'nin geliştiricileri OffscreenCanvas ve Web Çalışanlarının ana iş parçacığını meşgul etmemek için zaman alan görevleri çalışanlara taşıma. Ardından, yalnızca karakteri ayıklamak için gerektiğinden maskenin boyutunu düşürdüler. dış çizgilidir ve resmin boyutuna ya da kalitesine bağlı değildir.
BILIBILI'nin geliştirme ekibi maske boyutunu küçülttükten sonra maskeyi genişletti. ve oluşturma oranını azaltmak için bunu DOM katmanıyla birleştirdi mümkün olduğunca çok baskı altında tutabilirsiniz.
Daha yüksek oturum süresi ve tıklama oranları
Web'in erişimini ve gücünü MediaPipe'in esnekliğiyle birleştirerek AI çözümleri sunan BILIBILI, güçlü ve ilgi çekici web uygulamasını başarıyla kullanıma sundu milyonlarca kullanıcıya sunmamızı sağlıyor. Uygulamayı takip eden yalnızca bir ay içinde BILIBILI, oturum süresinde% 30 artış ve% 19 iyileşme gözlemledi Tıklama oranında %200 artış oldu.
30 %
Daha uzun oturum süresi
19 %
Daha yüksek TO
MediaPipe'in ücretsiz, cihaz üzerinde web AI çözümleri sayesinde BILIBILI'nin geliştiricileri önemli görsel öğeleri etkili şekilde korurken izleyicilerin ilgisini canlı tutmanın sorunsuz bir performans sağlıyor ve nihayetinde premium video izleyicilerin platform liderinden beklediği akış deneyimidir.