ב-BILIBILI הקיש על פתרון ה-AI באינטרנט של MediaPipe' במכשיר כדי לשפר את חוויית המשתמש בסטרימינג בווידאו ולהגדיל את משך הסשן ב-30%

Jun Jiu

Cecilia Cong

Tyler Mullen

Jason Mayes

BILIBILI, אחת מפלטפורמות התוכן הטובות ביותר לבידור בסין רבתי ובדרום-מזרח אסיה יש מסד נתונים עצום של תוכן שנוצר על ידי משתמשים, וחוויות גיימינג שמושכות יותר מ-330 מיליון פעמים בחודש משתמשים פעילים (MAU).

אחת התכונות הייחודיות של פלטפורמת BILIBILI היא השילוב תגובות במסך תבליטים, תכונה פופולרית ביפן ובסין שמציגה משוב מהצופים בזמן אמת כטקסט נגלל בכל שידורי הווידאו. מסך תבליטים לתגובות מוסיפות אלמנט מרגש וסוחף לתוכן וידאו בשידור חי, לצופים מעורבים באופן פעיל בכך שהם מאפשרים להם לבטא את המחשבות שלהם ולהגיב לצופים אחרים או תגובות באמוג'י בזמן אמת.

האתגר

תגובות עם תבליטים הן דרך מעניינת לעורר עניין בקרב הצופים עם תוכן, חשוב לשמור על הדיוקן של הדובר את חוויית המשתמש הטובה ביותר. בסרטון הבא, ניתן להוסיף תגובות במסך התבליטים שמפריעות ומעודדים את הצופים לא להמשיך לצפות.

מצב מקורי: בסרטונים ראשוניים מוצג אדם שמדבר, עם על ידי גלילה על פני המסך, על פני הפנים של הדובר/ת.

כדי להפעיל תגובות במסך תבליטים שעוברות בצורה חלקה מאחורי הדובר לאורך, צריך פילוח מדויק של למידת מכונה, שקשה לפעול ביעילות במכשיר. בגלל זה, מבחינה היסטורית, כל כך חזק תכונות צריכות להיות נתמכות בצד השרת.

בהינתן כמות התוכן ש-BILIBILI מציגה מדי יום, מתבצע עיבוד חלקים ממנו בצד השרת יהיו יקרים מאוד. אז צוות הפיתוח שלהם שנדרשים למציאת פתרון בצד הלקוח כדי להפחית את העלות. אתגר נוסף שמעבר ללמידת מכונה בצד הלקוח, קשה יותר לשמור על מעלייה עד לנקודה שבה הביצועים נפגעים.

יעד: בסוף הפעולה BILIBILI רצתה שהתגובות במסך התבליטים נגללו מימין לשמאל, כדי לא לחסום את הפנים של הדובר/ת.

הפתרון: פילוח של תמונות במכשיר

כדי להתמודד עם האתגרים האלה, מפתחי BILIBILI נעזרו פילוח גוף באמצעות MediaPipe ו-TensorFlow.js, מכשיר קודם של MediaPipe's Image Segmenter. הם סיפקו ממשק API יעיל לפילוח במכשיר, וגם עברו אימון מראש הסגמנטציה של תמונות סלפי ואובייקטים מרובים.

עכשיו אפשר להשתמש ב-BILIBILI כדי לבצע איטרציה במהירות ולתמוך בתכונה, תוך צמצום העלויות ושמירה על הביצועים.

הטמעה

כך BILIBILI הטמיע את הפתרון הזה:

1. קווי מתאר בזמן אמת של תווים: חברת BILIBILI השתמשה במודל פילוח הסלפי כדי לחלץ את קווי המתאר של התווים לאורך הסרטון. כך הם יכולים כדי ליצור מסכה שמתארת את הגבולות של התווים.
2. שילוב עם שכבת התגובות בזמן אמת: לאחר מכן, ממזגים את התוכן שחולץ קו מתאר עם שכבת התגובות בזמן אמת באמצעות CSS mask-image נכסים. כשמגדירים את אזור התווים המרכזי כשקוף, תגובות במסך תבליטים יכולות להופיע בצורה חלקה מאחורי התווים שמפריעים להם.

   

   תרשים שמראה איך המפתחים של BILIBILI חילצו מתאר תווים מרכיב וידאו ושילבו אותו עם שכבת תגובות בזמן אמת באמצעות מחשוב בזמן אמת של MediaPipe.

3. אופטימיזציה של ההטמעה: נדרש BILIBILI כדי לבדוק ולוודא ההטמעה לא פגעה בביצועים.

אופטימיזציה של ביצועים

המפתחים של BILIBILI השתמשו OffscreenCanvas ו-Web Workers להעביר משימות שגוזלות זמן רב לעובדים, כדי לא לתפוס את השרשור הראשי. לאחר מכן: הם הקטינו את גודל המסכה, כי היא נדרשת רק כדי לחלץ את התו Outline ולא תלויה בגודל או באיכות התמונה.

לאחר הקטנת המסיכה, צוות הפיתוח של BILIBILI מתח את המסכה במהלך ההרכבה וממזגת אותו עם שכבת ה-DOM כדי להפחית את לחץ רב ככל האפשר.

תרשים שמראה איך BILIBILI המזער את גודל המסכה ומיזג אותה עם מסכה מתוחכמת.

משך סשן ארוך יותר ושיעור קליקים ארוך יותר

על ידי שילוב בין פוטנציאל החשיפה והעוצמה של האינטרנט עם הגמישות של בעזרת פתרונות AI, ב-BILIBILI בוצעה בהצלחה אפליקציית אינטרנט עוצמתית ומעניינת למיליוני משתמשים. בנוסף, תוך חודש ממועד ההטמעה, ב-BILIBILI נרשמה עלייה משמעותית של 30% במשך הסשן ושיפור של 19% בשיעור הקליקים של וידאו בשידור חי.

30 _%

משך סשן ארוך יותר

19 _%

עלייה בשיעור הקליקים (CTR)

בעזרת הפתרונות מבוססי ה-AI באינטרנט של MediaPipe שזמינים לשימוש בחינם במכשיר, המפתחים של BILIBILI לשמור ביעילות רכיבים חזותיים חיוניים, תוך שמירה על רמת העניין של הצופים, כדי להבטיח ביצועים חלקים, ובסופו של דבר לספק סרטון באיכות גבוהה. חוויית הסטרימינג שהצופים מצפים לקבל מהפלטפורמה המובילה.