BILIBILI korzysta z internetowego rozwiązania AI MediaPipe na urządzeniu, aby poprawić wygodę korzystania ze strumienia wideo i wydłużyć czas trwania sesji o ponad 30%

Jun Jiu
Cecilia Cong
Cecilia Cong
LinkedIn
Tyler Mullen
Tyler Mullen
LinkedIn
Jason Mayes

BILIBILI to jedna z najlepszych platform z treściami rozrywkowymi w regionie Chin i Azji Południowo-Wschodniej. Oferuje ogromną bazę danych z treściami użytkowników, transmisjami na żywo i grami, które przyciągają ponad 330 milionów aktywnych użytkowników miesięcznie (MAU).

Jedną z charakterystycznych cech platformy BILIBILI jest integracja z komentarzami na ekranie, popularną funkcją w Japonii i Chinach, która wyświetla opinie widzów w czasie rzeczywistym jako przewijany tekst na strumieniach wideo. Komentarze na ekranie z punktami dodają treściom wideo na żywo ekscytującego i angażującego elementu. Zachęcają widzów do aktywnego uczestnictwa, ponieważ pozwalają im wyrażać własne opinie i reagować na reakcje innych widzów w czasie rzeczywistym.

Wyzwanie

Komentarze w formie punktów to atrakcyjny sposób na interakcję widzów z treścią, ale aby zapewnić użytkownikom jak najlepsze wrażenia, należy zadbać o to, aby portret mówcy nie był zasłonięty. W tym filmie punktowe komentarze mogą być uciążliwe i zniechęcać widzów do dalszego oglądania.

Stan początkowy: filmy początkowe zawierające osobę mówiącą, a także komentarze przewijające się po ekranie nad twarzą tej osoby.

Aby umożliwić wyświetlanie komentarzy w formie listy, które płynnie przewijają się za portretem rozmówcy, musisz zastosować dokładne podziały na segmenty za pomocą systemów uczących się, co może być trudne do skutecznego wykonania na urządzeniu. Dlatego w przeszłości takie zaawansowane funkcje wymagały obsługi po stronie serwera.

Biorąc pod uwagę ilość treści, które BILIBILI udostępnia codziennie, przetwarzanie dużych ich części po stronie serwera byłoby bardzo kosztowne. Zespół programistów musiał więc znaleźć rozwiązanie po stronie klienta, które pozwoliłoby obniżyć koszty. Kolejnym wyzwaniem jest to, że przejście na uczenie maszynowe po stronie klienta utrudnia utrzymanie wykorzystania procesora na poziomie, który nie będzie utrudniał działania.

Cel: BILIBILI chciało, aby punkty na ekranie przewijały się od prawej do lewej za mówcą, tak aby nie zasłaniały jego twarzy.

Rozwiązanie: segmentacja obrazu na urządzeniu

Aby rozwiązać te problemy, deweloperzy BILIBILI wykorzystali segmentację ciała z MediaPipe i TensorFlow.js, która jest poprzedniczką segmentacji obrazu MediaPipe. Dzięki temu udostępniono wydajny interfejs API do segmentacji na urządzeniu oraz wstępnie przetrenowane modele do segmentacji selfie i wieloobiektowej.

BILIBILI może teraz szybko ulepszać i wspierać tę funkcję, jednocześnie obniżając koszty i utrzymywając wydajność.

Implementacja

Oto jak BILIBILI wdrożyło to rozwiązanie:

  1. Kontury postaci w czasie rzeczywistym: BILIBILI wykorzystało model Selfie Segmenter do wyodrębnienia kontur postaci w całym filmie. Dzięki temu udało się utworzyć maskę, która wyznacza granice znaków.
  2. Integracja z warstwą komentarzy na żywo: następnie połączono wyodrębnioną obrys postaci z warstwą komentarzy na żywo za pomocą właściwości CSS mask-image. Ustawienie przezroczystego obszaru rysunku postaci pozwala na wyświetlanie komentarzy na ekranie z strzałkami bez zasłaniania rysunku.
    Niebieski znak w prostokątnym polu wskazuje na inne pole z szarym znakiem, które reprezentuje maskę SVG. Znak plusa z niebieskim tłem oznacza dodanie komentarzy na żywo. W związku z tym niebieskie linie za obrysem postaci reprezentują komentarze przewijające się za postacią.
    Diagram pokazujący, jak deweloperzy BILIBILI wyodrębnili kontur postaci z elementu filmu i zintegrowali go z warstwą komentarzy na żywo, korzystając z obliczania w czasie rzeczywistym w MediaPipe.
  3. Optymalizacja implementacji: firma BILIBILI musiała przetestować implementację i sprawdzić, czy nie powoduje ona spadku wydajności.

Optymalizacja skuteczności

Deweloperzy BILIBILI użyli OffscreenCanvas i Web Workers, aby przenieść czasochłonne zadania do instancji roboczych i uniknąć zajmowania głównego wątku. Następnie zmniejszyli rozmiar maski, ponieważ jest ona potrzebna tylko do wyodrębnienia kontur postaci i nie zależy od rozmiaru ani jakości obrazu.

Po zmniejszeniu rozmiaru maski zespół programistów BILIBILI rozciągnął ją podczas komponowania i połączył z warstwą DOM, aby zminimalizować nacisk na renderowanie.

Niebieski znak w polu wskazuje na identyczny miniaturowy obraz. Przerywana linia wskazuje małe czarne pole z przezroczystym symbolem. Mały czarny prostokąt wskazuje na identyczny większy prostokąt. Ten proces minimalizacji plus komentarze na żywo (zaznaczone na niebiesko) odpowiadają połączonym wynikom komentarzy wyświetlanych za postacią.
Diagram pokazujący, jak BILIBILI zminimalizował rozmiar maski i połączył ją z rozciągniętą maską.

wydłużenie czasu trwania sesji i zwiększenie współczynników klikalności.

Łącząc zasięg i moc internetu z elastycznością rozwiązań AI firmy MediaPipe, BILIBILI zapewniła milionom użytkowników zaawansowaną i atrakcyjną aplikację internetową. Już w ciągu miesiąca od wdrożenia BILIBILI odnotowała znaczny wzrost czasu trwania sesji o 30% i wzrost współczynnika klikalności filmów w transmisjach na żywo o 19%.

    30 %

    wydłużenie czasu trwania sesji,

    19 %

    wyższy CTR,

Dzięki bezpłatnym rozwiązaniom AI do stosowania w internecie na urządzeniu od MediaPipe deweloperzy BILIBILI mogli skutecznie zachować kluczowe elementy wizualne, jednocześnie zapewniając widzom zaangażowanie, płynne działanie i ostatecznie najwyższą jakość strumieniowego przesyłania filmów, której widzowie oczekują od lidera platformy.

Cytat z wypowiedzi Jun Liu, starszego inżyniera w BILIBILI: „Rozwiązanie MediaPipe pomogło nam obniżyć koszty rozwoju bez konieczności tworzenia modelu do wyodrębniania portretów”.