BILIBILI, una delle principali piattaforme di contenuti di intrattenimento nella Grande Cina e nel Sud-est asiatico, ospita un enorme database di contenuti generati dagli utenti, trasmissioni in diretta ed esperienze di gioco che attirano più di 330 milioni di utenti attivi mensili (MAU).
Una delle caratteristiche distintive della piattaforma di BILIBILI è l'integrazione dei commenti con icone, una funzionalità molto apprezzata in Giappone e in Cina che mostra il feedback degli spettatori in tempo reale sotto forma di testo scorrevole negli stream video. I commenti con elenchi puntati aggiungono un elemento emozionante e coinvolgente ai contenuti video dal vivo, mantenendo gli spettatori attivamente coinvolti consentendo loro di esprimere i propri pensieri e rispondere alle reazioni di altri spettatori in tempo reale.
La sfida
Sebbene i commenti con elenchi puntati siano un modo coinvolgente per consentire agli spettatori di interagire con i contenuti, è importante mantenere il ritratto dell'oratore libero da ostacoli per offrire un'esperienza utente ottimale. Nel video seguente, i commenti con elenchi puntati possono essere disturbanti e scoraggiare gli spettatori dal continuare a guardare.
Per attivare i commenti con elenchi puntati che scorrono senza interruzioni dietro il ritratto di un oratore, è necessaria una segmentazione accurata del machine learning, che può essere difficile da eseguire in modo efficiente sul dispositivo. Ecco perché, in passato, queste funzionalità così potenti dovevano essere supportate lato server.
Dati i volumi di contenuti pubblicati quotidianamente da BILIBILI, l'elaborazione di gran parte di questi contenuti lato server sarebbe molto costosa. Di conseguenza, il team di sviluppo doveva trovare una soluzione lato client per ridurre i costi. Un'ulteriore sfida è che il passaggio al machine learning lato client rende difficile impedire all'utilizzo della CPU di aumentare al punto da ostacolare il rendimento.
La soluzione: segmentazione delle immagini sul dispositivo
Per risolvere questi problemi, gli sviluppatori di BILIBILI hanno utilizzato la segmentazione del corpo con MediaPipe e TensorFlow.js, un predecessore dell'Image Segmenter di MediaPipe. Ciò ha fornito un'API di segmentazione on-device efficiente, nonché modelli preaddestrati per la segmentazione di selfie e oggetti multipli.
BILIBILI ora può eseguire rapidamente l'iterazione e supportare la funzionalità, riducendo al contempo i costi e mantenendo le prestazioni.
Implementazione
Ecco come BILIBILI ha implementato questa soluzione:
- Contorni dei personaggi in tempo reale: BILIBILI ha utilizzato il modello Selfie Segmenter per estrarre il contorno dei personaggi nel video. In questo modo, è stato possibile creare una maschera che delimitasse i confini dei personaggi.
- Integrazione con il livello dei commenti in tempo reale: poi, ha unito il contorno dei caratteri estratto con il livello dei commenti in tempo reale utilizzando le proprietà CSS
mask-image. Se imposti l'area dei caratteri centrali come trasparente, i commenti con elenco puntato possono essere visualizzati senza problemi dietro i caratteri senza occluderli.
Un diagramma che mostra in che modo gli sviluppatori di BILIBILI hanno estratto il contorno di un personaggio da un elemento video e lo hanno integrato con un livello di commenti in tempo reale utilizzando il calcolo in tempo reale di MediaPipe. - Ottimizzare l'implementazione: BILIBILI doveva testare e assicurarsi che l'implementazione non peggiorasse le prestazioni.
Ottimizzazione del rendimento
Gli sviluppatori di BILIBILI hanno utilizzato OffscreenCanvas e Web Workers per spostare le attività che richiedono molto tempo nei worker, in modo da evitare di occupare il thread principale. Poi, abbiamo ridotto le dimensioni della maschera, in quanto è necessaria solo per estrarre il contorno del carattere e non dipende dalle dimensioni o dalla qualità dell'immagine.
Dopo aver ridotto le dimensioni della maschera, il team di sviluppo di BILIBILI l'ha allungata durante la composizione e l'ha unita al livello DOM per ridurre al massimo la pressione di rendering.
Aumento della durata delle sessioni e delle percentuali di clic
Combinando la copertura e la potenza del web con la flessibilità delle soluzioni di IA di MediaPipe, BILIBILI ha offerto con successo un'esperienza con app web coinvolgente ed efficace a milioni di utenti. Inoltre, dopo solo un mese dall'implementazione, BiliBili ha registrato un notevole aumento del 30% della durata della sessione e un miglioramento del 19% nel tasso di clic dei video in live streaming.
30 %
Durata della sessione aumentata
19 %
Un CTR più elevato
Grazie alle soluzioni di IA web on-device senza costi di MediaPipe, gli sviluppatori di BILIBILI hanno potuto mantenere in modo efficiente gli elementi visivi cruciali, coinvolgendo al contempo gli spettatori, garantendo un funzionamento regolare e, in ultima analisi, offrendo l'esperienza di streaming video premium che gli spettatori si aspettano dal leader della piattaforma.
