BILIBILI، یکی از برترین پلتفرم های محتوای سرگرمی در چین بزرگ و آسیای جنوب شرقی، میزبان پایگاه داده عظیمی از محتوای تولید شده توسط کاربر، پخش زنده و تجربیات بازی است که بیش از 330 میلیون کاربر فعال ماهانه (MAU) را به خود جذب می کند.
یکی از ویژگی‌های متمایز پلتفرم BILIBILI، ادغام نظرات صفحه گلوله است، یک ویژگی محبوب در ژاپن و چین که بازخورد بینندگان را در زمان واقعی به‌عنوان متن پیمایشی در جریان‌های ویدیویی نمایش می‌دهد. نظرات صفحه گلوله یک عنصر هیجان انگیز و غوطه ور را به محتوای ویدیویی زنده اضافه می کند و بینندگان را فعالانه درگیر می کند و به آنها اجازه می دهد افکار خود را بیان کنند و به واکنش های دیگر بینندگان در زمان واقعی پاسخ دهند.
چالش
در حالی که نظرات صفحه گلوله روشی جذاب برای بینندگان برای تعامل با محتوا است، مهم است که پرتره گوینده را بدون مانع برای بهترین تجربه کاربری حفظ کنید. در ویدیوی زیر، کامنت‌های صفحه گلوله می‌توانند اختلال ایجاد کنند و بینندگان را از ادامه تماشا منصرف کنند.
برای فعال کردن کامنت‌های صفحه گلوله که به‌طور یکپارچه در پشت پرتره بلندگو جریان دارند، به تقسیم‌بندی دقیق یادگیری ماشین نیاز دارید، که اجرای کارآمد آن در دستگاه ممکن است دشوار باشد. به همین دلیل است که از نظر تاریخی، چنین ویژگی های قدرتمندی باید در سمت سرور پشتیبانی شوند.
با توجه به مقدار محتوایی که BILIBILI به صورت روزانه ارائه می‌کند، پردازش بخش‌های بزرگی از آن در سمت سرور بسیار گران خواهد بود. بنابراین، تیم توسعه آنها نیاز به یافتن یک راه حل سمت مشتری برای کاهش هزینه داشت. یک چالش دیگر این است که حرکت به سمت یادگیری ماشینی سمت کلاینت، حفظ استفاده از CPU را از افزایش تا جایی که عملکرد آن مانع می شود، دشوار می کند.
راه حل: تقسیم بندی تصویر روی دستگاه
برای مقابله با این چالش‌ها، توسعه‌دهندگان BILIBILI از تقسیم‌بندی بدنه با MediaPipe و TensorFlow.js ، پیشینی از MediaPipe's Image Segmenter استفاده کردند. این یک API بخش‌بندی کارآمد روی دستگاه و همچنین مدل‌های از پیش آموزش‌دیده‌شده برای تقسیم‌بندی سلفی و چند شی را ارائه می‌کند.
BILIBILI اکنون می تواند به سرعت این ویژگی را تکرار و پشتیبانی کند، در حالی که هزینه ها را کاهش داده و عملکرد را حفظ می کند.
پیاده سازی
در اینجا نحوه پیاده سازی BILIBILI این راه حل است:
- طرح کلی کاراکترها در زمان واقعی : BILIBILI از مدل Selfie Segmenter برای استخراج طرح کلی کاراکترها در سراسر ویدیو استفاده کرد. این به آنها اجازه داد تا ماسکی بسازند که مرزهای شخصیت ها را مشخص کند.
- ادغام با لایه کامنت زنده : سپس طرح کلی کاراکتر استخراج شده را با استفاده از ویژگی های CSS
mask-imageبا لایه نظر زنده ادغام کردند. با تنظیم ناحیه مرکزی کاراکترها به صورت شفاف، نظرات صفحه گلوله می‌توانند بدون ایجاد مانع در پشت کاراکترها ظاهر شوند.
نموداری که نشان می‌دهد چگونه توسعه‌دهندگان BILIBILI یک طرح کلی کاراکتر را از یک عنصر ویدیویی استخراج کرده و با استفاده از محاسبات بلادرنگ توسط MediaPipe با یک لایه نظر زنده ادغام کردند. - بهینه سازی پیاده سازی : BILIBILI برای آزمایش و اطمینان از اینکه پیاده سازی عملکرد را کاهش نمی دهد نیاز داشت.
بهینه سازی عملکرد
توسعه دهندگان BILIBILI از OffscreenCanvas و Web Workers برای انتقال کارهای وقت گیر به کارگران استفاده کردند تا از اشغال موضوع اصلی جلوگیری کنند. سپس، اندازه ماسک را کاهش دادند، زیرا فقط برای استخراج طرح کلی کاراکتر مورد نیاز است و به اندازه یا کیفیت تصویر وابسته نیست.
پس از کاهش اندازه ماسک، تیم توسعه BILIBILI ماسک را در حین ترکیب کردن کشیده و آن را با لایه DOM ادغام کرد تا فشار رندر را تا حد ممکن کاهش دهد.
افزایش مدت زمان جلسه و نرخ کلیک
BILIBILI با ترکیب دسترسی و قدرت وب با انعطاف‌پذیری راه‌حل‌های هوش مصنوعی MediaPipe، یک تجربه اپلیکیشن وب قدرتمند و جذاب را به میلیون‌ها کاربر ارائه کرد. و تنها در عرض یک ماه پس از اجرا، BILIBILI شاهد افزایش قابل توجه 30 درصدی در مدت زمان جلسه و بهبود 19 درصدی در نرخ کلیک ویدیوهای پخش زنده بود.
30 درصد
افزایش مدت زمان جلسه
19 %
CTR بالاتر
با راه‌حل‌های مبتنی بر هوش مصنوعی وب رایگان MediaPipe، توسعه‌دهندگان BILIBILI می‌توانند به طور موثر عناصر بصری حیاتی را حفظ کنند و در عین حال بینندگان را درگیر نگه می‌دارند، عملکردی روان را تضمین می‌کنند، و در نهایت، تجربه پخش ویدیوی ممتازی را ارائه می‌کنند که بینندگان از رهبر پلتفرم انتظار دارند.
