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%

Cecilia Cong
Cecilia Cong
Tyler Mullen
Tyler Mullen

BILIBILI, jedna z najlepszych platform rozrywkowych w Chinach. w regionie Azji Południowo-Wschodniej, gdzie znajduje się ogromna baza treści użytkowników, transmisje i gry, które miesięcznie przyciągają ponad 330 milionów użytkowników – aktywni użytkownicy (AUM).

Jedną z charakterystycznych cech platformy BILIBILI jest integracja komentarze w formie listy punktowanej, często spotykane w Japonii i Chinach, opinie widzów w czasie rzeczywistym – w formie przewijanego tekstu w strumieniach filmów. Ekran punktowy dodają do treści transmisji na żywo ekscytujący, wciągający element, widzów aktywnie angażują się, pozwalając im wyrażać własne opinie i na nie odpowiadać do innych widzów reakcji w czasie rzeczywistym.

Wyzwanie

Choć komentarze w formie listy punktowanej pozwalają wciągać widzów w interakcję , ważne jest, aby orientacja osoby mówiącej nie była zasłonięta przez i zapewniają użytkownikom najlepsze wrażenia. W kolejnym filmie komentarze w postaci listy punktowanej uciążliwe i zniechęcające do oglądania.

Stan oryginalny: początkowe filmy przedstawiają osobę mówiącą, a także przewijające się po ekranie komentarze na twarz osoby mówiącej.

Aby włączyć komentarze w formie listy punktowanej, które płynnie pojawiają się za w orientacji pionowej, potrzebna jest dokładna segmentacja w ramach systemów uczących się, które trudno jest wydajnie uruchamiać na urządzeniu. Dlatego w przeszłości tak duży nacisk funkcje wymagają obsługi po stronie serwera.

Biorąc pod uwagę ilość treści, które BILIBILI wyświetla w ciągu dnia, przetwarzanie dużych a części kosztów po stronie serwera. Zespół programistów znaleźć rozwiązanie po stronie klienta, które pozwoliłoby obniżyć koszty. Kolejne wyzwanie że przejście na uczenie maszynowe po stronie klienta utrudnia utrzymanie procesora od wzrostu do punktu, w którym wydajność spada.

Cel: BILIBILI chciała, by komentarze były przewijane od prawej do lewej za głośnikiem, aby nie blokować twarzy rozmówcy.

Rozwiązanie: segmentacja obrazów na urządzeniu

Aby sprostać tym wyzwaniom, deweloperzy BILIBILI wykorzystali Segmentacja ciała za pomocą MediaPipe i TensorFlow.js, były poprzednikiem narzędzia do segmentowania obrazów MediaPipe. W ten sposób powstał wydajny interfejs API podziału na segmenty na urządzeniu do robienia selfie i segmentacji według wielu obiektów.

BILIBILI może teraz szybko iterować i obsługiwać tę funkcję przy jednoczesnym obniżeniu kosztów i utrzymywanie ich skuteczności.

Implementacja

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

  1. Kontury postaci w czasie rzeczywistym: BILIBILI użył modelu segmentowania selfie. aby wyodrębnić zarys postaci z całego filmu. Dzięki temu mogli aby utworzyć maskę, która wyznaczała granice znaków.
  2. Integracja z warstwą komentarzy na żywo: następnie połączyli wyodrębnione fragmenty. kontur znaków z warstwą komentarzy na żywo za pomocą CSS mask-image. usług. Ustawienie przezroczystego środkowego obszaru znaków mogą płynnie pojawiać się za postaciami, zasłaniając je.
    Niebieski znak w prostokątnym polu wskazuje inne pole z szarym znakiem reprezentującym maskę SVG. Znak plusa z niebieskimi liniami oznacza dodanie komentarzy na żywo. Razem tworzy to niebieskie linie za konturem znaku, które reprezentują komentarze za postacią.
    Schemat pokazujący, jak programiści BILIBILI wyodrębnili konspekt postaci z elementu wideo i zintegrowali go z warstwą komentarzy na żywo za pomocą przetwarzania w czasie rzeczywistym przez MediaPipe.
  3. Optymalizowanie implementacji: narzędzie BILIBILI potrzebne do testowania i zapewniania nie obniżyło wydajności.

Optymalizacja skuteczności

Programiści BILIBILI OffscreenCanvas i Web Workers w i przekazywać czasochłonne zadania pracownikom w celu uniknięcia zajmowania się głównym wątkiem. Następnie: Zmniejszyli rozmiar maski, ponieważ trzeba było tylko wyodrębnić znak i nie zależy od rozmiaru ani jakości zdjęcia.

Po zmniejszeniu rozmiaru maski zespół programistów BILIBILI poprawił ją w trakcie kompozycji i scalone z warstwą DOM, by ograniczyć renderowanie jak największego nacisku.

Niebieski znak w polu wskazuje na miniaturowy identyczny obraz. Linia przerywana wskazuje małe czarne pole z przezroczystym znakiem. Małe czarne pole wskazuje na identyczne, większe pole. Ten proces minimalizacji oraz komentarze na żywo (oznaczone niebieskimi liniami) odpowiadają wynikom scalonych komentarzy za postacią.
Schemat pokazujący, jak funkcja BILIBILI zminimalizowała rozmiar maski i połączył ją z maską rozciągniętą.

Wydłużony czas trwania sesji i wydłużone współczynniki klikalności

Łącząc zasięg i możliwości internetu z elastycznością zapewnianą przez MediaPipe AI, firma BILIBILI z powodzeniem opracowała zaawansowaną i angażującą aplikację internetową z którego korzystają miliony użytkowników. Już po miesiącu od wdrożenia można Firma BILIBILI odnotowała zauważalny wzrost czasu trwania sesji o 30% i poprawę o 19%. współczynnika klikalności transmisji na żywo.

    30 %

    Wydłużony czas trwania sesji

    19 %

    Wyższy CTR

Dzięki bezpłatnym rozwiązaniom internetowym AI oferowanym przez MediaPipe na urządzeniu programiści BILIBILI skutecznie utrzymują kluczowe elementy wizualne przy jednoczesnym utrzymaniu zaangażowania widzów, zapewnia płynne działanie, a w końcu zapewnia wysokiej jakości wideo czego widzowie oczekują od lidera platformy.

Jun Liu, starszy inżynier w firmie BILIBILI: Rozwiązanie MediaPipe pomogło nam obniżyć koszty prac programistycznych, nie skupiając się na tworzeniu modelu wyodrębniania w orientacji pionowej.