ভিডিও স্ট্রীম UX উন্নত করতে এবং সেশনের সময়কালকে +30% বৃদ্ধি করতে BILIBILI মিডিয়াপাইপের অন-ডিভাইস ওয়েব AI সমাধানে ট্যাপ করে

বিলিবিলি, বৃহত্তর চীন এবং দক্ষিণ-পূর্ব এশিয়ার অন্যতম প্রধান বিনোদন সামগ্রী প্ল্যাটফর্ম, ব্যবহারকারী-উত্পাদিত সামগ্রী, লাইভ সম্প্রচার এবং গেমিং অভিজ্ঞতার একটি বিশাল ডাটাবেস হোস্ট করে যা 330 মিলিয়নেরও বেশি মাসিক সক্রিয় ব্যবহারকারীদের (MAU) আকর্ষণ করে।

বিলিবিলির প্ল্যাটফর্মের স্বতন্ত্র বৈশিষ্ট্যগুলির মধ্যে একটি হল বুলেট-স্ক্রিন মন্তব্যগুলির একীকরণ, জাপান এবং চীনের একটি জনপ্রিয় বৈশিষ্ট্য যা ভিডিও স্ট্রিম জুড়ে স্ক্রলিং পাঠ্য হিসাবে রিয়েল-টাইম দর্শক প্রতিক্রিয়া প্রদর্শন করে। বুলেট-স্ক্রিন মন্তব্যগুলি লাইভ ভিডিও সামগ্রীতে একটি উত্তেজনাপূর্ণ এবং নিমগ্ন উপাদান যোগ করে, দর্শকদের তাদের নিজস্ব চিন্তাভাবনা প্রকাশ করতে এবং রিয়েল টাইমে অন্যান্য দর্শকদের প্রতিক্রিয়ার প্রতিক্রিয়া জানিয়ে সক্রিয়ভাবে জড়িত রাখে।

চ্যালেঞ্জ

যদিও বুলেট-স্ক্রিন মন্তব্যগুলি দর্শকদের জন্য বিষয়বস্তুর সাথে ইন্টারঅ্যাক্ট করার একটি আকর্ষক উপায়, সেরা ব্যবহারকারীর অভিজ্ঞতার জন্য স্পিকারের প্রতিকৃতিটি বাধামুক্ত রাখা গুরুত্বপূর্ণ৷ নিম্নলিখিত ভিডিওতে, বুলেট-স্ক্রিন মন্তব্যগুলি বিঘ্নিত হতে পারে এবং দর্শকদের দেখা চালিয়ে যাওয়া থেকে নিরুৎসাহিত করতে পারে৷

আসল অবস্থা : প্রাথমিক ভিডিওগুলি একজন ব্যক্তিকে কথা বলতে দেখায়, মন্তব্যগুলি স্ক্রীন জুড়ে, স্পিকারের মুখের উপর দিয়ে স্ক্রোল করা হয়৷

বুলেট-স্ক্রিন মন্তব্যগুলিকে সক্ষম করতে যা নির্বিঘ্নে একটি স্পিকারের প্রতিকৃতির পিছনে প্রবাহিত হয়, আপনার সঠিক মেশিন লার্নিং সেগমেন্টেশন প্রয়োজন, যা ডিভাইসে দক্ষতার সাথে চালানো কঠিন হতে পারে। এই কারণেই, ঐতিহাসিকভাবে, এই ধরনের শক্তিশালী বৈশিষ্ট্যগুলি সার্ভার-সাইড সমর্থিত হতে হবে।

বিলিবিলি দৈনিক ভিত্তিতে কত সামগ্রী পরিবেশন করে তা বিবেচনা করে, সার্ভার-সাইডের বড় অংশগুলিকে প্রক্রিয়াকরণ করা খুব ব্যয়বহুল হবে৷ সুতরাং, তাদের উন্নয়ন দলকে খরচ কমাতে একটি ক্লায়েন্ট-সাইড সমাধান খুঁজে বের করতে হবে। আরও একটি চ্যালেঞ্জ হল যে ক্লায়েন্ট-সাইড মেশিন লার্নিং-এ যাওয়ার ফলে কর্মক্ষমতা বাধাগ্রস্ত হওয়া পর্যন্ত সিপিইউ ব্যবহারকে বাড়তে রাখা কঠিন করে তোলে।

লক্ষ্য : শেষ পর্যন্ত, বিলিবিলি চেয়েছিল বুলেট-স্ক্রিন মন্তব্যগুলি স্পিকারের পিছনে ডান থেকে বামে স্ক্রোল করতে, যাতে স্পিকারের মুখ আটকে না যায়।

সমাধান: ডিভাইসে ইমেজ সেগমেন্টেশন

এই চ্যালেঞ্জগুলি মোকাবেলা করার জন্য, BILIBILI এর বিকাশকারীরা MediaPipe এবং TensorFlow.js এর সাথে বডি সেগমেন্টেশনের সুবিধা নিয়েছে, যা MediaPipe-এর ইমেজ সেগমেন্টারের পূর্বসূরি। এটি একটি দক্ষ অন-ডিভাইস সেগমেন্টেশন API প্রদান করেছে, সেইসাথে সেলফি এবং মাল্টি-অবজেক্ট সেগমেন্টেশনের জন্য পূর্বপ্রশিক্ষিত মডেল।

বিলিবিলি এখন খরচ কমাতে এবং কর্মক্ষমতা বজায় রেখে বৈশিষ্ট্যটিকে দ্রুত পুনরাবৃত্তি এবং সমর্থন করতে পারে।

বাস্তবায়ন

বিলিবিলি এই সমাধানটি কীভাবে বাস্তবায়ন করেছে তা এখানে:

  1. রিয়েল-টাইম চরিত্রের রূপরেখা : বিলিবিলি ভিডিও জুড়ে অক্ষরের রূপরেখা বের করতে সেলফি সেগমেন্টার মডেল ব্যবহার করেছে। এটি তাদের একটি মুখোশ তৈরি করার অনুমতি দেয় যা অক্ষরের সীমানা বর্ণনা করে।
  2. লাইভ কমেন্ট লেয়ারের সাথে ইন্টিগ্রেশন : তারপরে, তারা CSS mask-image প্রোপার্টি ব্যবহার করে লাইভ কমেন্ট লেয়ারের সাথে এক্সট্র্যাক্ট করা ক্যারেক্টার আউটলাইনকে মার্জ করে। কেন্দ্রীয় চরিত্রের ক্ষেত্রটিকে স্বচ্ছ হিসাবে সেট করে, বুলেট-স্ক্রিন মন্তব্যগুলি বাধা না দিয়ে অক্ষরের পিছনে নির্বিঘ্নে উপস্থিত হতে পারে।
    একটি আয়তক্ষেত্রাকার বাক্সে একটি নীল অক্ষর একটি ধূসর অক্ষর সহ অন্য একটি বাক্সের দিকে নির্দেশ করে, যা SVG মুখোশের প্রতিনিধিত্ব করে। নীল রেখা সহ একটি প্লাস চিহ্ন লাইভ মন্তব্যের যোগকে প্রতিনিধিত্ব করে। একসাথে এটি একটি অক্ষরের রূপরেখার পিছনে নীল রেখার সমান, যা চরিত্রের পিছনে প্রবাহিত মন্তব্যগুলিকে উপস্থাপন করে।
    বিলিবিলির বিকাশকারীরা কীভাবে একটি ভিডিও উপাদান থেকে একটি অক্ষর রূপরেখা বের করেছে এবং MediaPipe দ্বারা রিয়েল-টাইম কম্পিউটিং ব্যবহার করে এটিকে একটি লাইভ মন্তব্য স্তরের সাথে একত্রিত করেছে তা দেখানো একটি চিত্র।
  3. বাস্তবায়নকে অপ্টিমাইজ করুন : বিলিবিলি পরীক্ষা এবং নিশ্চিত করার জন্য প্রয়োজন যে বাস্তবায়ন কর্মক্ষমতা হ্রাস করে না।

কর্মক্ষমতা অপ্টিমাইজেশান

বিলিবিলির ডেভেলপাররা অফস্ক্রিন ক্যানভাস এবং ওয়েব ওয়ার্কারদের ব্যবহার করে সময়সাপেক্ষ কাজগুলিকে কর্মীদের কাছে নিয়ে যেতে, যাতে মূল থ্রেডটি দখল না করা যায়৷ তারপরে, তারা মুখোশের আকার হ্রাস করেছে, কারণ এটি শুধুমাত্র অক্ষরের রূপরেখা বের করার জন্য প্রয়োজন এবং এটি ছবির আকার বা গুণমানের উপর নির্ভর করে না।

মুখোশের আকার হ্রাস করার পরে, বিলিবিলির উন্নয়ন দল কম্পোজিশনের সময় মুখোশটিকে প্রসারিত করে এবং যতটা সম্ভব রেন্ডারিং চাপ কমাতে এটিকে DOM স্তরের সাথে একত্রিত করে।

একটি বাক্সে একটি নীল অক্ষর একটি ছোট অভিন্ন চিত্রকে নির্দেশ করে৷ একটি বিন্দুযুক্ত রেখা একটি স্বচ্ছ অক্ষর সহ একটি ছোট কালো বাক্সের দিকে নির্দেশ করে৷ ছোট কালো বাক্সটি একটি অভিন্ন বড় বাক্সের দিকে নির্দেশ করে। এই মিনিমাইজেশন প্রক্রিয়া প্লাস লাইভ মন্তব্য, নীল রেখা দ্বারা উপস্থাপিত, চরিত্রের পিছনে প্রবাহিত মন্তব্যের একত্রিত ফলাফলের সমান।
বিলিবিলি কীভাবে মুখোশের আকার ছোট করেছে এবং একটি প্রসারিত মুখোশের সাথে একত্রিত করেছে তা প্রদর্শন করে একটি চিত্র৷

সেশনের সময়কাল এবং ক্লিক-থ্রু রেট বেড়েছে

MediaPipe-এর AI সমাধানগুলির নমনীয়তার সাথে ওয়েবের নাগাল এবং শক্তিকে একত্রিত করে, BILIBILI সফলভাবে লক্ষ লক্ষ ব্যবহারকারীদের কাছে একটি শক্তিশালী এবং আকর্ষক ওয়েব অ্যাপের অভিজ্ঞতা প্রদান করেছে৷ এবং, বাস্তবায়নের মাত্র এক মাসের মধ্যে, BILIBILI সেশনের সময়কালের একটি উল্লেখযোগ্য 30% বৃদ্ধি এবং লাইভ স্ট্রিমিং ভিডিওগুলির ক্লিক-থ্রু হারে 19% উন্নতি দেখেছে।

    30 %

    বর্ধিত সেশনের সময়কাল

    19 %

    উচ্চতর CTR

MediaPipe-এর বিনামূল্যের, অন-ডিভাইস ওয়েব AI সমাধানগুলির সাথে, BILIBILI-এর বিকাশকারীরা দর্শকদের নিযুক্ত রাখার সময়, মসৃণ কর্মক্ষমতা নিশ্চিত করে এবং শেষ পর্যন্ত, প্ল্যাটফর্ম লিডারের কাছ থেকে দর্শকরা আশা করা প্রিমিয়াম ভিডিও স্ট্রিমিং অভিজ্ঞতা প্রদান করার সময় দক্ষতার সাথে গুরুত্বপূর্ণ ভিজ্যুয়াল উপাদানগুলি বজায় রাখতে পারে।

বিলিবিলির সিনিয়র প্রকৌশলী জুন লিউ এর থেকে উদ্ধৃতি: মিডিয়াপিপের সমাধান একটি প্রতিকৃতি নিষ্কাশন মডেল তৈরিতে মনোযোগ না দিয়ে আমাদের উন্নয়ন খরচ বাঁচাতে সাহায্য করেছে।