BILIBILI, una delle principali piattaforme di contenuti di intrattenimento della Grande Cina e il sud-est asiatico, ospita un enorme database di contenuti generati dagli utenti, ed esperienze di gioco che attraggono più di 330 milioni di persone al mese per gli utenti attivi (MAU).
Una delle caratteristiche distintive della piattaforma BILIBILI è l'integrazione i commenti in una schermata puntato, una funzionalità molto usata in Giappone e Cina che mostra feedback in tempo reale degli spettatori sotto forma di testo che scorrono i video stream. Schermata elenco puntato i commenti aggiungono un elemento emozionante e coinvolgente ai contenuti video in diretta, mantenendo gli spettatori sono attivamente coinvolti consentendogli di esprimere i propri pensieri e rispondere a quello degli altri spettatori reazioni in tempo reale.
La sfida
Sebbene i commenti in una schermata elenco puntato rappresentino un modo coinvolgente per interagire con gli spettatori, con i contenuti, è importante mantenere ben visibile la foto dell'oratore la migliore esperienza utente possibile. Nel video che segue, i commenti della schermata elenco possono essere invasivi e dissuadono gli spettatori dal continuare a guardare.
Per attivare i commenti in una schermata puntata che si muovono senza soluzione di continuità dietro le quinte in verticale, è necessaria una segmentazione accurata del machine learning, che difficile da eseguire in modo efficiente sul dispositivo. Ecco perché storicamente, così potente devono essere supportate dal lato server.
Considerando la quantità di contenuti che BILIBILI fornisce giornalmente, l'elaborazione di parti lato server sarebbe molto costoso. Per questo, il team di sviluppo era necessario trovare una soluzione lato client per ridurre i costi. Un'altra sfida è che il passaggio al machine learning lato client rende difficile mantenere dall'aumento al punto in cui le prestazioni sono compromesse.
La soluzione: segmentazione delle immagini sul dispositivo
Per affrontare queste sfide, gli sviluppatori di BILIBILI hanno sfruttato Segmentazione del corpo con MediaPipe e TensorFlow.js, un predecessore del segmento di immagini di MediaPipe. Questo ha fornito un'API di segmentazione on-device efficiente, oltre a per selfie e segmentazione di più oggetti.
BILIBILI può ora eseguire rapidamente l'iterazione e supportare la funzionalità, riducendo al contempo i costi e mantenere le prestazioni.
Implementazione
Ecco come BILIBILI ha implementato questa soluzione:
- Contorni dei caratteri in tempo reale: BILIBILI ha utilizzato il modello Selfie Segmenter per estrarre i contorni dei personaggi del video. Questo ha permesso loro per creare una maschera che delinei i confini dei caratteri.
- Integrazione con il livello dei commenti live: hanno poi unito i dati estratti
contorno dei caratteri con il livello dei commenti live utilizzando CSS
mask-imageproprietà. Se imposti l'area carattere centrale come trasparente, i commenti in una schermata punto elenco possono essere visualizzati dietro i personaggi senza ostruiscono l'elemento.
Un diagramma che mostra come gli sviluppatori di BILIBILI hanno estratto un contorno dei caratteri da un elemento video e lo hanno integrato con un livello di commenti live utilizzando il computing in tempo reale di MediaPipe. - Ottimizza l'implementazione: BILIBILI necessarie per testare e garantire implementazione non ha peggiorato le prestazioni.
Ottimizzazione del rendimento
Gli sviluppatori di BILIBILI hanno utilizzato OffscreenCanvas e web worker per trasferire attività dispendiose in termini di tempo ai worker, per evitare di occupare il thread principale. Quindi, hanno ridotto le dimensioni della maschera, in quanto bastava estrarre il carattere contorno e non dipende dalle dimensioni o dalla qualità dell'immagine.
Dopo aver ridotto le dimensioni della maschera, il team di sviluppo di BILIBILI ha allungato la maschera durante la composizione e l'abbiamo unita al livello DOM per ridurre il rendering il più possibile.
Aumento della durata della sessione e delle percentuali di clic
Combinando la copertura e la potenza del web con la flessibilità del database di MediaPipe soluzioni di IA, BILIBILI ha fornito con successo un'app web potente e coinvolgente a milioni di utenti. Entro un solo mese dall'implementazione, BILIBILI ha registrato un aumento significativo del 30% della durata della sessione e un miglioramento del 19% di percentuale di clic dei video in live streaming.
30 %
Aumento della durata della sessione
19 %
CTR più elevato
Con le soluzioni di IA web on-device senza costi di MediaPipe, gli sviluppatori di BILI potrebbero mantenere in modo efficiente gli elementi visivi fondamentali coinvolgendo al contempo gli spettatori, garantire un rendimento fluido e, in ultima analisi, fornire il video premium un'esperienza di streaming che gli spettatori si aspettano dal leader della piattaforma.
