BILIBILI هي إحدى منصات المحتوى الترفيهي الرائدة في الصين العميقة وجنوب شرق آسيا، وتستضيف قاعدة بيانات ضخمة من المحتوى الذي ينشئه المستخدمون والبث المباشر والتجارب المتعلقة بالألعاب، ما يجذب أكثر من 330 مليون مستخدم نشط شهريًا (MAU).
من الميزات المميزة لمنصة BILIBILI هي دمج ميزة "تعليقات على الشاشة"، وهي ميزة رائجة في اليابان والصين تعرض ملاحظات المشاهدين في الوقت الفعلي كنص يتدفق على بث الفيديو. تضفي التعليقات المكتوبة على الشاشة عنصرًا مثيرًا وغامضًا إلى محتوى الفيديو المباشر، ما يحافظ على تفاعل المشاهدين بشكل نشط من خلال السماح لهم بالتعبير عن أفكارهم والرد على ردود فعل المشاهدين الآخرين في الوقت الفعلي.
التحدي
على الرغم من أنّ التعليقات على شكل نقاط هي طريقة تفاعلية للمشاهدين للتفاعل مع المحتوى، من المهم إبقاء صورة المتحدّث بدون عائق لتوفير أفضل تجربة للمستخدم. في الفيديو التالي، يمكن أن تكون التعليقات على شكل نقاط مزعجة وتثبط عزيمة المشاهدين على مواصلة المشاهدة.
لتفعيل التعليقات على الشاشة التي تظهر بسلاسة خلف صورة ملف شخصي للمتحدث، تحتاج إلى تقسيم دقيق من خلال تعلُّم الآلة، وقد يكون من الصعب تنفيذه بكفاءة على الجهاز. لهذا السبب، كان من الضروري في السابق أن تكون هذه الميزة القوية متاحة من جهة الخادم.
نظرًا لكمية المحتوى التي تعرضها منصة BILIBILI يوميًا، ستكون معالجة أجزاء كبيرة منه على الخادم باهظة التكلفة. لذلك، احتاج فريق التطوير إلى العثور على حلّ من جهة العميل لتقليل التكلفة. يتمثل أحد التحديات الأخرى في أنّ الانتقال إلى تعلُّم الآلة من جهة العميل يجعل من الصعب منع زيادة استخدام وحدة المعالجة المركزية إلى الحدّ الذي يؤدّي إلى إعاقة الأداء.
الحلّ: تقسيم الصور على الجهاز
لحلّ هذه التحديات، استفاد مطوّرو BILIBILI من ميزة تقسيم الجسم باستخدام MediaPipe وTensorFlow.js، وهي ميزة سابقة لميزة "تقسيم الصور" في MediaPipe. وقد وفّرت هذه الميزة واجهة برمجة تطبيقات فعّالة للفصل على الجهاز، بالإضافة إلى نماذج مُدرَّبة مسبقًا لفصل الصور الذاتية والأشياء المتعددة.
يمكن الآن لشركة BILIBILI تكرار الميزة وتوفيرها بسرعة، مع خفض التكاليف والحفاظ على الأداء.
التنفيذ
في ما يلي كيفية تنفيذ BILIBILI لهذا الحلّ:
- تحديد ملامح الشخصيات في الوقت الفعلي: استخدمت منصة BILIBILI نموذج "تحليل السيلفي" لاستخراج ملامح الشخصيات في الفيديو. سمح لهم ذلك بإنشاء قناع يحدّد حدود الأحرف.
- الدمج مع طبقة التعليقات المباشرة: بعد ذلك، دمج الفريق المخطط المُستخرَج
للشخصية مع طبقة التعليقات المباشرة باستخدام سمات CSS
mask-image. من خلال ضبط منطقة الشخصيات المركزية على أنّها شفافة، يمكن أن تظهر التعليقات على شكل علامات شاشة خلف الشخصيات بسلاسة بدون حجبها.
رسم بياني يعرض كيف استخرج مطوّرو BILIBILI مخطّط شخصية من عنصر فيديو وأدمجوه مع طبقة تعليقات مباشرة باستخدام الحوسبة في الوقت الفعلي من خلال MediaPipe - تحسين عملية التنفيذ: كان على BILIBILI اختبار عملية التنفيذ والتأكّد من عدم تراجع الأداء.
تحسين الأداء
استخدَم مطوّرو BILIBILI OffscreenCanvas وWeb Workers لنقل المهام التي تستغرق وقتًا طويلاً إلى وحدات العمل، لتجنُّب إشغال سلسلة التعليمات الرئيسية. بعد ذلك، تم تقليل حجم القناع، لأنّه لا يُستخدَم إلا لاستخراج محيط الشخصية ولا يعتمد على حجم الصورة أو جودتها.
بعد تقليل حجم القناع، وسَّع فريق التطوير في BILIBILI القناع أثناء الدمج ودمجه مع طبقة DOM لتقليل ضغط المعالجة قدر الإمكان.
زيادة في مدّة الجلسة ونسبة النقر إلى الظهور
من خلال الجمع بين مدى الوصول إلى الجمهور وفعالية الويب مع مرونة حلول الذكاء الاصطناعي (AI) من MediaPipe، نجحت شركة BILIBILI في تقديم تجربة فعالة وتفاعلية لتطبيق الويب لمليارات المستخدمين. وخلال شهر واحد فقط من التنفيذ، شهدت منصة BILIBILI زيادة ملحوظة بنسبة% 30 في مدة الجلسة وتحسينًا بنسبة% 19 في نسبة النقر إلى الظهور للفيديوهات التي يتم بثّها مباشرةً.
30 %
زيادة مدة الجلسة
19 %
نسبة نقر إلى ظهور أعلى
باستخدام حلول الذكاء الاصطناعي (AI) المجانية على الويب من MediaPipe، تمكّن مطوّرو BILIBILI من الاحتفاظ بفعالية بالعناصر المرئية المهمة مع الحفاظ على تفاعل المشاهدين، وضمان الأداء السلس، وفي النهاية، تقديم تجربة بث فيديو فائقة الجودة يتوقعها المشاهدون من منصة رائدة.
