Büyük Çin ve Güneydoğu Asya'daki en önemli eğlence içerik platformlarından biri olan BILIBILI, aylık 330 milyondan fazla etkin kullanıcıyı (MAU) çeken kullanıcı tarafından oluşturulan içerikler, canlı yayınlar ve oyun deneyimlerinden oluşan devasa bir veritabanına sahiptir.
BILIBILI'nin platformunun ayırt edici özelliklerinden biri, Japonya ve Çin'de popüler olan ve izleyicilerden gelen anlık geri bildirimleri video yayınlarında kayan metin olarak gösteren noktalı ekran yorumlarının entegrasyonudur. Metin kutusu yorumları, canlı video içeriğine heyecan verici ve sürükleyici bir unsur ekler. İzleyicilerin kendi düşüncelerini ifade etmelerine ve diğer izleyicilerin tepkilerine anında yanıt vermelerine olanak tanıyarak izleyicileri aktif bir şekilde etkileşime geçmeye teşvik eder.
Yarışma
Metin balonu yorumları, izleyicilerin içerikle etkileşime geçmesinin ilgi çekici bir yolu olsa da en iyi kullanıcı deneyimi için konuşmacının portresinin engellenmemesi önemlidir. Aşağıdaki videoda, ekranda gösterilen yorumlar dikkat dağıtıcı olabilir ve izleyicilerin videoyu izlemeye devam etmesini engelleyebilir.
Konuşmacının portresinin arkasında sorunsuz bir şekilde akan noktalı ekran yorumlarını etkinleştirmek için doğru makine öğrenimi segmentasyonuna ihtiyacınız vardır. Bu segmentasyonun cihaz üzerinde verimli bir şekilde çalıştırılması zor olabilir. Bu nedenle, geçmişte bu tür güçlü özelliklerin sunucu tarafında desteklenmesi gerekiyordu.
BILIBILI'nin günlük olarak sunduğu içerik miktarı göz önüne alındığında, bu içeriklerin büyük bir kısmını sunucu tarafında işlemek çok pahalı olur. Bu nedenle, geliştirme ekibinin maliyeti düşürmek için istemci tarafı bir çözüm bulması gerekiyordu. Diğer bir zorluk, istemci tarafı makine öğrenimine geçişin, CPU kullanımının performansın engelleneceği noktaya kadar artmasını önlemeyi zorlaştırmasıdır.
Çözüm: Cihaz üzerinde görüntü segmentasyonu
BILIBILI'nin geliştiricileri bu zorlukları gidermek için MediaPipe'in Resim Segmentörü'nün öncülü olan MediaPipe ve TensorFlow.js ile Vücut Segmentasyonu'ndan yararlandı. Bu sayede, selfie ve çok nesneli segmentasyon için önceden eğitilmiş modellerin yanı sıra verimli bir cihaz üzerinde segmentasyon API'si sağlandı.
BILIBILI artık maliyetleri düşürüp performansı korurken özelliği hızlı bir şekilde iteratif olarak geliştirebilir ve destekleyebilir.
Uygulama
BILIBILI bu çözümü şu şekilde uyguladı:
- Anlık karakter ana hatları: BILIBILI, videodaki karakterlerin ana hatlarını ayıklamak için Selfie Segmenter modelini kullandı. Bu sayede karakterlerin sınırlarını gösteren bir maske oluşturdular.
- Canlı yorum katmanıyla entegrasyon: Ardından, CSS
mask-imageözelliklerini kullanarak ayıklanan karakter ana hatlarını canlı yorum katmanıyla birleştirdiler. Ortadaki karakter alanını saydam olarak ayarlayarak, ekrandaki ipuçlarını karakterlerin arkasına görünmeden ve onları engellemeden sorunsuz bir şekilde yerleştirebilirsiniz.
BILIBILI'nin geliştiricilerinin, MediaPipe tarafından sunulan gerçek zamanlı hesaplama özelliğini kullanarak bir video öğesinden karakter ana hatlarını nasıl alıp canlı yorum katmanıyla entegre ettiğini gösteren bir şema. - Uygulamayı optimize etme: BILIBILI'nin, uygulamanın performansı düşürmediğinden emin olmak için test yapması gerekiyordu.
Performans optimizasyonu
BILIBILI'nin geliştiricileri, ana iş parçacığının işgal edilmesini önlemek için zaman alıcı görevleri çalışanlara taşımak amacıyla OffscreenCanvas ve Web Çalışanları'nı kullandı. Ardından, yalnızca karakter ana hatlarını ayıklamak için gerekli olduğu ve resim boyutuna ya da kalitesine bağlı olmadığı için maskenin boyutunu düşürdüler.
BILIBILI'nin geliştirme ekibi, maske boyutunu küçülttükten sonra oluşturma sırasında maskeyi uzattı ve oluşturma baskısını mümkün olduğunca azaltmak için DOM katmanıyla birleştirdi.
Artırılmış oturum süresi ve tıklama oranları
BILIBILI, web'in erişimini ve gücünü MediaPipe'ın yapay zeka çözümlerinin esnekliğiyle birleştirerek milyonlarca kullanıcıya güçlü ve ilgi çekici bir web uygulaması deneyimi sunmayı başardı. Uygulamadan yalnızca bir ay sonra BILIBILI, oturum süresinde% 30 ve canlı yayın videolarının tıklama oranında% 19 artış elde etti.
30 %
Artan oturum süresi
19 %
Daha yüksek TO
MediaPipe'in ücretsiz cihaz üzerinde web yapay zeka çözümleriyle BILIBILI'nin geliştiricileri, izleyicileri etkileşimde tutarken önemli görsel öğeleri verimli bir şekilde koruyabilir, sorunsuz performans sağlayabilir ve sonuç olarak izleyicilerin platform liderinden beklediği premium video akış deneyimini sunabilir.
