BILIBILI, MediaPipe'in cihaz üzerinde web yapay zeka çözümünden yararlanarak video akışı kullanıcı deneyimini iyileştirir ve oturum süresini %30'dan fazla artırdı

Cecilia Cong
Cecilia Cong
Tyler Mullen
Tyler Mullen

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.

Orijinal durum: İlk videolarda, videodaki konuşmacının yüzünün üzerinde kayan yorumlar

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.

Hedef: Sonunda BILIBILI, madde işareti ekranındaki yorumların kaydırılmasını istedi konuşmacının yüzünü engellememek için hoparlörün arkasında sağdan sola.

Çö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:

  1. 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.
  2. 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.
    Dikdörtgen kutu içindeki mavi bir karakter, SVG maskesini temsil eden gri bir karakterin bulunduğu başka bir kutuyu işaret ediyor. Mavi çizgili bir artı işareti, canlı yorumların eklendiğini gösterir. Birlikte bu, karakter ana hatlarının arkasındaki mavi çizgilere eşittir ve karakterin arkasından gelen yorumları temsil eder.
    BILIBILI'nin geliştiricilerinin, MediaPipe'in gerçek zamanlı hesaplama işlemini kullanarak bir video öğesinden karakter ana hatlarını nasıl çıkardığını ve bunu canlı yorum katmanıyla nasıl entegre ettiğini gösteren diyagram.
  3. 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.

Bir kutu içindeki mavi karakter, minik bir resmi işaret ediyor. Noktalı bir çizgi, saydam bir karakterin bulunduğu küçük bir siyah kutuyu işaret ediyor. Küçük siyah kutu, aynı ve daha büyük bir kutuyu işaret ediyor. Mavi çizgilerle temsil edilen bu küçültme işlemi ve canlı yorumlar, karakterin arkasına gelen yorumların birleştirilmiş sonuçlarına eşittir.
BILIBILI'nin maske boyutunu nasıl küçültüp uzatılmış bir maskeyle birleştirdiğini gösteren bir diyagram.

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.

BILIBILI'nin kıdemli mühendisi Jun Liu'nun sözleri: MediaPipe'in çözümü, dikey çıkarma modeli oluşturmaya odaklanmadan geliştirme maliyetlerinden tasarruf etmemize yardımcı oldu.