BILIBILI exploite la solution d'IA Web intégrée à l'appareil de MediaPipe pour améliorer l'expérience utilisateur lors des flux vidéo et augmenter la durée des sessions de 30%

Jun Jiu

Cecilia Cong

Tyler Mullen

Jason Mayes

BILIBILI, l'une des principales plates-formes de contenus de divertissement en Grande Chine et l'Asie du Sud-Est, héberge une immense base de données de contenus générés par les utilisateurs, diffusions et expériences de jeu qui attirent plus de 330 millions les utilisateurs actifs (UAM).

L'une des caractéristiques uniques de la plateforme de BILIBILI est l'intégration Les commentaires sous forme de puces, une fonctionnalité populaire au Japon et en Chine qui affiche les commentaires des spectateurs en temps réel sous forme de texte défilant à travers les flux vidéo ; Liste à puces les commentaires ajoutent une dimension captivante et immersive au contenu vidéo en direct, l'engagement des spectateurs en les laissant s'exprimer et réagir aux autres spectateurs en temps réel.

Problématique

Les commentaires sous forme de liste à puces permettent aux spectateurs d'interagir de façon engageante. avec du contenu, il est important que le portrait de l'intervenant ne soit pas obstrué pendant la meilleure expérience utilisateur. Dans la vidéo suivante, les commentaires sous forme de puces peuvent être perturbent et dissuadent les spectateurs de continuer à regarder la vidéo.

État d'origine: les premières vidéos montrent une personne qui parle, avec commentaires défilant à l'écran, par-dessus le visage de l'intervenant.

Pour activer les commentaires sous forme de liste à puces qui s'affichent de façon fluide derrière le présentateur en mode portrait, vous avez besoin d'une segmentation précise du machine learning, qui peut être difficiles à exécuter efficacement sur l'appareil. C'est pourquoi, historiquement, les fonctionnalités devraient être prises en charge côté serveur.

Compte tenu de la quantité de contenu diffusée chaque jour par BILIBILI, le traitement de grands volumes parties de celui-ci côté serveur serait très coûteux. Son équipe de développement nécessaire pour trouver une solution côté client afin de réduire les coûts. Autre défi est que le passage au machine learning côté client rend difficile la gestion d'augmenter jusqu'à atteindre un point où les performances s'affaiblissent.

Objectif: en fin de compte, BILIBILI voulait faire défiler les commentaires sous forme de liste à puces. de droite à gauche derrière l'enceinte afin de ne pas masquer son visage.

La solution: segmentation des images sur l'appareil

Pour relever ces défis, les développeurs de BILIBILI ont tiré parti Segmentation du corps avec MediaPipe et TensorFlow.js un prédécesseur du MediaPipe's Image Segmenter. L'API de segmentation sur l'appareil était efficace, tout comme les modèles pré-entraînés pour la segmentation par selfie et multi-objet.

BILIBILI peut désormais itérer et prendre en charge rapidement cette fonctionnalité, tout en réduisant les coûts. et maintenir les performances.

Implémentation

Voici comment BILIBILI a implémenté cette solution:

1. Contours des caractères en temps réel: BILIBILI a utilisé le modèle Segment de selfies pour extraire les contours des personnages tout au long de la vidéo. Cela lui a permis pour créer un masque délimitant les limites des caractères.
2. Intégration avec la couche de commentaires en direct: la fusion des extraits contour des caractères avec le calque de commentaires en direct à l'aide de CSS mask-image propriétés. En définissant la zone centrale des caractères comme transparente, les commentaires sous forme de liste à puces peuvent apparaître facilement derrière les caractères sans les obstruer.

   

   Schéma montrant comment les développeurs de BILIBILI ont extrait le contour d'un personnage d'un élément vidéo et l'ont intégré à une couche de commentaires en direct à l'aide de l'informatique en temps réel de MediaPipe.

3. Optimisation de l'implémentation: BILIBILI nécessaire pour tester et s'assurer que n'a eu aucune dégradation des performances.

Optimisation des performances

Les développeurs de BILIBILI ont utilisé OffscreenCanvas et les nœuds de calcul Web déplacer les tâches chronophages sur les nœuds de calcul, pour éviter d'occuper le thread principal. Ensuite, ils ont réduit la taille du masque, car il ne sert qu'à extraire le caractère et ne dépend pas de la taille ni de la qualité de l'image.

Après avoir réduit la taille du masque, l'équipe de développement de BILIBILI l'a étiré lors de la composition et l'a fusionné avec la couche DOM pour réduire l'affichage la pression autant que possible.

Schéma montrant comment BILIBILI a réduit la taille du masque et l'a fusionné avec un masque étiré.

Augmentation de la durée des sessions et des taux de clics

En combinant la portée et la puissance du Web avec la flexibilité de MediaPipe solutions d'IA, BILIBILI a réussi à créer une application Web puissante et attrayante à des millions d'utilisateurs. Seulement un mois après la mise en œuvre, BILIBILI a enregistré une augmentation notable de 30% de la durée des sessions et une amélioration de 19 %. du taux de clics sur les vidéos diffusées en direct.

30 _%

Durée de session plus longue

19 ans _%

CTR plus élevé

Grâce aux solutions d'IA Web disponibles sans frais et intégrées à l'appareil de MediaPipe, les développeurs de BILIBILI de conserver efficacement les éléments visuels essentiels tout en maintenant l'engagement des spectateurs, pour garantir des performances fluides que les spectateurs attendent du leader de la plate-forme.