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