BILIBILI ने MediaPipe' के डिवाइस पर मौजूद वेब एआई सलूशन का इस्तेमाल करके, वीडियो स्ट्रीम के उपयोगकर्ता अनुभव को बेहतर बनाया. साथ ही, सेशन की अवधि को 30% से ज़्यादा बढ़ाया

Jun Jiu

Cecilia Cong

Tyler Mullen

Jason Mayes

BILIBILI, ग्रेटर चाइना और दक्षिण-पूर्व एशिया में मनोरंजन कॉन्टेंट के प्रमुख प्लैटफ़ॉर्म में से एक है. इस पर उपयोगकर्ताओं के बनाए गए कॉन्टेंट, लाइव ब्रॉडकास्ट, और गेमिंग का बड़ा डेटाबेस मौजूद है. इसकी वजह से, हर महीने 33 करोड़ से ज़्यादा सक्रिय उपयोगकर्ता (एमएयू) जुड़ते हैं.

BILIBILI के प्लैटफ़ॉर्म की खास सुविधाओं में, स्क्रीन पर टिप्पणियां करने की सुविधा शामिल है. यह सुविधा, जापान और चीन में काफ़ी लोकप्रिय है. इसकी मदद से, दर्शकों के सुझाव, राय या शिकायत को वीडियो स्ट्रीम पर स्क्रीन पर स्क्रोल होने वाले टेक्स्ट के तौर पर दिखाया जाता है. लाइव वीडियो कॉन्टेंट में बुलेट स्क्रीन टिप्पणियां जोड़ने से, दर्शकों को मज़ेदार और दिलचस्प अनुभव मिलता है. साथ ही, दर्शकों को रीयल-टाइम में अपने विचारों को ज़ाहिर करने और दूसरे दर्शकों की प्रतिक्रियाओं का जवाब देने का मौका मिलता है. इससे दर्शकों का एंगेजमेंट बढ़ता है.

चुनौती

बुलेट स्क्रीन पर टिप्पणियां, दर्शकों के लिए कॉन्टेंट के साथ इंटरैक्ट करने का एक दिलचस्प तरीका है. हालांकि, बेहतर उपयोगकर्ता अनुभव के लिए, यह ज़रूरी है कि दर्शक को वीडियो में बोलने वाले व्यक्ति के पोर्ट्रेट को साफ़ तौर पर दिखे. नीचे दिए गए वीडियो में, बुलेट-स्क्रीन टिप्पणियां परेशानी पैदा कर सकती हैं और दर्शकों को वीडियो देखना बंद करने के लिए मजबूर कर सकती हैं.

बोलने वाले व्यक्ति के पोर्ट्रेट के पीछे, आसानी से दिखने वाली बुलेट-स्क्रीन टिप्पणियों को चालू करने के लिए, आपको मशीन लर्निंग से जुड़े सटीक सेगमेंटेशन की ज़रूरत होती है. इसे डिवाइस पर असरदार तरीके से चलाना मुश्किल हो सकता है. इसलिए, पहले ऐसी बेहतर सुविधाओं के लिए, सर्वर साइड की ज़रूरत होती थी.

BILIBILI हर दिन काफ़ी कॉन्टेंट अपलोड करता है. ऐसे में, सर्वर-साइड पर उसके बड़े हिस्से को प्रोसेस करना काफ़ी महंगा होगा. इसलिए, लागत कम करने के लिए, उनकी डेवलपमेंट टीम को क्लाइंट-साइड का समाधान ढूंढना पड़ा. एक और चुनौती यह है कि क्लाइंट-साइड मशीन लर्निंग पर स्विच करने से, सीपीयू के इस्तेमाल को उस हद तक बढ़ने से रोकना मुश्किल हो जाता है जहां परफ़ॉर्मेंस पर असर पड़ता है.

समाधान: डिवाइस पर इमेज का सेगमेंटेशन

इन चुनौतियों को हल करने के लिए, BILIBILI के डेवलपर ने MediaPipe और TensorFlow.js की मदद से, शरीर के हिस्सों को अलग-अलग करने की सुविधा का इस्तेमाल किया. यह सुविधा, MediaPipe के इमेज सेगमेंटर से पहले की है. इससे, डिवाइस पर सेगमेंटेशन एपीआई के साथ-साथ, सेल्फ़ी और एक से ज़्यादा ऑब्जेक्ट के सेगमेंटेशन के लिए, पहले से ट्रेन किए गए मॉडल भी मिले.

BILIBILI अब इस सुविधा को तेज़ी से इस्तेमाल कर सकता है और इसे इस्तेमाल करने में मदद कर सकता है. साथ ही, इससे लागत कम करने और परफ़ॉर्मेंस को बनाए रखने में भी मदद मिलेगी.

लागू करना

BILIBILI ने इस समाधान को लागू करने का तरीका यहां बताया है:

1. किरदार की असल समय में आउटलाइन: BILIBILI ने पूरे वीडियो में किरदारों की आउटलाइन निकालने के लिए, सेल्फ़ी सेगमेंटर मॉडल का इस्तेमाल किया. इससे उन्हें एक ऐसा मास्क बनाने में मदद मिली जिससे कि वर्णों की सीमाओं को दिखाया जा सके.
2. लाइव टिप्पणी लेयर के साथ इंटिग्रेशन: इसके बाद, उन्होंने CSS mask-image प्रॉपर्टी का इस्तेमाल करके, निकाले गए वर्ण की आउटलाइन को लाइव टिप्पणी लेयर के साथ मर्ज किया. मुख्य किरदार के एरिया को पारदर्शी के तौर पर सेट करके, बुलेट-स्क्रीन टिप्पणियां आसानी से किरदारों के पीछे दिख सकती हैं. इससे, किरदारों को कोई रुकावट नहीं होती.

   

3. लागू करने की प्रोसेस को ऑप्टिमाइज़ करना: BILIBILI को यह जांचना था कि लागू करने की प्रोसेस से परफ़ॉर्मेंस पर कोई असर न पड़े.

परफ़ॉर्मेंस का ऑप्टिमाइज़ेशन

BILIBILI के डेवलपर ने मुख्य थ्रेड को व्यस्त रखने से बचने के लिए, ज़्यादा समय लेने वाले टास्क को वर्कर्स पर भेजने के लिए, OffscreenCanvas और Web Workers का इस्तेमाल किया. इसके बाद, उन्होंने मास्क का साइज़ कम कर दिया, क्योंकि यह सिर्फ़ वर्ण की आउटलाइन निकालने के लिए ज़रूरी है और यह इमेज के साइज़ या क्वालिटी पर निर्भर नहीं करता.

मास्क का साइज़ कम करने के बाद, BILIBILI की डेवलपमेंट टीम ने कॉम्पोज़िशन के दौरान मास्क को स्ट्रेच किया और उसे डीओएम लेयर के साथ मर्ज किया, ताकि रेंडरिंग के दबाव को ज़्यादा से ज़्यादा कम किया जा सके.

सेशन की अवधि और क्लिक मिलने की दर (सीटीआर) में बढ़ोतरी

MediaPipe के एआई सलूशन की सुविधाओं के साथ वेब की पहुंच और क्षमता को जोड़कर, BILIBILI ने लाखों उपयोगकर्ताओं को वेब ऐप्लिकेशन का बेहतरीन और दिलचस्प अनुभव दिया. साथ ही, इसे लागू करने के सिर्फ़ एक महीने के अंदर, BILIBILI को सेशन की अवधि में 30% की बढ़ोतरी और लाइव स्ट्रीमिंग वीडियो के क्लिक मिलने की दर (सीटीआर) में 19% का सुधार देखने को मिला.

30 _%

सेशन की अवधि में बढ़ोतरी

19 _%

ज़्यादा सीटीआर

MediaPipe के मुफ़्त, डिवाइस पर काम करने वाले वेब एआई समाधानों की मदद से, BILIBILI के डेवलपर दर्शकों को दिलचस्पी बनाए रखते हुए, अहम विज़ुअल एलिमेंट को बेहतर तरीके से बनाए रख सके. साथ ही, वे वीडियो की परफ़ॉर्मेंस को बेहतर बना सके और दर्शकों को ऐसा प्रीमियम वीडियो स्ट्रीमिंग अनुभव दे सके जो वे किसी लीडर प्लैटफ़ॉर्म से उम्मीद करते हैं.