BILIBILI היא אחת מפלטפורמות התוכן המובילות בתחום הבידור בסין הגדולה ובדרום מזרח אסיה. הפלטפורמה מארחת מסד נתונים עצום של תוכן שנוצר על ידי משתמשים, שידורים חיים וחוויות גיימינג, שמושכים יותר מ-330 מיליון משתמשים פעילים בחודש (MAU).
אחת מהתכונות הייחודיות של פלטפורמת BILIBILI היא השילוב של תגובות מסך עם נקודה, תכונה פופולרית ביפן ובסין שמציגה משוב מהצופים בזמן אמת כטקסט שמוצג בגלילה בסטרימינג של הסרטונים. תגובות בחלונית מאפשרות לכם להוסיף אלמנט מרגש ומעניין לתוכן של סרטונים בשידור חי. התגובות מאפשרות לצופים להביע את המחשבות שלהם ולהגיב לתגובות של צופים אחרים בזמן אמת, וכך לשמור על רמת עניין גבוהה.
האתגר
תגובות בחלונית עם תיבות טקסט הן דרך מעניינת לאפשר לצופים לקיים אינטראקציה עם התוכן, אבל חשוב שהתמונה של הדובר או הדוברת לא תהיה חסומה כדי לספק את חוויית המשתמש הטובה ביותר. בסרטון הבא, תגובות עם תיבות טקסט יכולות להפריע לצופים ולהניא אותם מלצפות בהמשך.
כדי להציג תגובות בפורמט של נקודות שמופיעות בצורה חלקה מאחורי תמונת הווידאו של הדובר, צריך לבצע פילוח מדויק באמצעות למידת מכונה, ויכול להיות שיהיה קשה להריץ אותו ביעילות במכשיר. לכן, בעבר היה צורך בתמיכה בצד השרת בתכונות חזקות כאלה.
בהתחשב בכמות התוכן ש-BILIBILI מציגה מדי יום, עיבוד חלקים גדולים ממנו בצד השרת יהיה יקר מאוד. לכן, צוות הפיתוח שלהם היה צריך למצוא פתרון בצד הלקוח כדי להפחית את העלות. אתגר נוסף הוא שעם המעבר ללמידת מכונה בצד הלקוח קשה למנוע עלייה בשימוש ב-CPU עד כדי פגיעה בביצועים.
הפתרון: פילוח תמונות במכשיר
כדי להתמודד עם האתגרים האלה, המפתחים של BILIBILI השתמשו ב-Body Segmentation with MediaPipe and TensorFlow.js, קודמו של MediaPipe's Image Segmenter. כך קיבלנו ממשק API יעיל לפילוח במכשיר, וגם מודלים שהותאמו מראש לפילוח של סלפי ושל כמה אובייקטים.
עכשיו צוות BILIBILI יכול לתמוך בתכונה במהירות, להוסיף לה פיצ'רים ולשפר אותה, תוך שמירה על הביצועים והפחתת העלויות.
הטמעה
כך BILIBILI הטמיעה את הפתרון הזה:
- קווי מתאר של דמויות בזמן אמת: צוות BILIBILI השתמש במודל Selfie Segmenter כדי לחלץ את קווי המתאר של הדמויות לאורך הסרטון. כך הם יכלו ליצור מסכה שסימנה את גבולות התווים.
- שילוב עם שכבת התגובות בשידור חי: לאחר מכן, הם מיזגו את קווי המתאר של התווים שחולצו עם שכבת התגובות בשידור חי באמצעות מאפייני CSS
mask-image. כשמגדירים את אזור התווים המרכזי כשקוף, התגובות במסך עם התמונות והציטוטים יכולות להופיע בצורה חלקה מאחורי התווים בלי לחסום אותם.
תרשים שבו מוצג איך המפתחים של BILIBILI חילוץ קו מתאר של דמות מרכיב וידאו ושילבו אותו בשכבת תגובות בזמן אמת באמצעות מחשוב בזמן אמת של MediaPipe. - ביצוע אופטימיזציה להטמעה: צוות BILIBILI נזקק לבדיקות כדי לוודא שההטמעה לא פגעה בביצועים.
אופטימיזציה של ביצועים
המפתחים של BILIBILI השתמשו ב-OffscreenCanvas וב-Web Workers כדי להעביר משימות שאורכות זמן רב ל-workers, וכך למנוע תפוסה של ה-thread הראשי. לאחר מכן, הם הקטינו את גודל המסכה, כי היא נדרשת רק כדי לחלץ את קווי המתאר של התווים, והיא לא תלויה בגודל או באיכות התמונה.
אחרי שהקטינו את גודל המסכה, צוות הפיתוח של BILIBILI הרחיב את המסכה במהלך הרכבת התמונה ומיזג אותה עם שכבת ה-DOM כדי לצמצם את עומס העיבוד ככל האפשר.
עלייה במשך הסשן ובשיעורי הקליקים
בעזרת השילוב של פוטנציאל החשיפה והעוצמה של האינטרנט עם הגמישות של פתרונות ה-AI של MediaPipe, חברת BILIBILI הצליחה לספק חוויית שימוש יעילה ומעניינת באפליקציית אינטרנט למיליוני משתמשים. בנוסף, תוך חודש אחד בלבד מההטמעה, ב-BILIBILI ראו עלייה משמעותית של 30% במשך הסשן ושיפור של 19% בשיעור הקליקים בסרטונים בשידור חי.
30 %
עלייה במשך הסשן
19 %
שיעור קליקים (CTR) גבוה יותר
בעזרת פתרונות ה-AI ל-Web בחינם של MediaPipe במכשיר, המפתחים של BILIBILI הצליחו לשמור על רכיבים חזותיים חיוניים תוך שמירה על רמת עניין בקרב הצופים, להבטיח ביצועים חלקים ובסופו של דבר לספק חוויית סטרימינג של וידאו ברמה גבוהה שהצופים מצפים ממנה ממנה כפלטפורמה מובילה.
