BILIBILI 是大中華地區的頂級娛樂內容平台之一 美國東南亞則代管龐大的使用者原創內容資料庫， 每月有超過 3 億 3 千萬的廣播和遊戲體驗 活躍使用者 (MAU)。
BILIBILI 平台的一項獨特功能之一，就是整合 項目符號畫面留言是日本和中國的熱門功能 觀眾可在不同影片串流中，透過捲動文字的方式即時提供意見回饋。項目符號螢幕 留言可為直播影片內容增添趣味性和臨場感 讓觀眾表達自己的想法並做出回應，從而積極參與互動 其他觀眾即時做出反應
難題
項目符號畫面留言能吸引觀眾與影片互動 內容時，請務必保持揚聲器的肖像， 最佳使用者體驗在以下影片中，您可以使用項目符號 幹擾觀眾繼續收看頻道內容
可讓講者在演講者心中流暢地呈現項目符號畫面註解 需要準確的機器學習區隔 或許難以在裝置上執行這也是為什麼 功能都必須在伺服器端提供支援。
考量到 BILIBILI 每天提供多少內容， 但伺服器端的數量可能非常昂貴所以他們的開發團隊 ，尋找可降低成本的用戶端解決方案。進階挑戰 遷移至用戶端機器學習技術 會讓我們難以維持 CPU 使用率 直到效能降低的程度
解決方案：裝置端圖片區隔
為因應這些挑戰，BILIBILI 的開發人員 使用 MediaPipe 和 TensorFlow.js 進行身體區隔、 MediaPipe's Image Segmenter 的前身。 這提供了高效率的裝置端分割 API，以及預先訓練的 藉此區分自拍照和多物件區隔
BILIBILI 現在可以快速疊代並支援功能，同時降低成本 並維持效能
導入作業
BILIBILI 實作這個解決方案的方式如下：
- 即時角色大綱：BILIBILI 採用 Selfie Segmenter 模型： 擷取整部影片中的角色輪廓這讓他們得以 建立用來分隔字元邊界的遮罩
- 與即時留言層整合：接著，他們將擷取出來的資料合併
含有即時註解層的字元大綱
mask-image敬上 資源。將中心字元區域設為透明後 項目符號畫面註解會自然地顯示在角色後方，而非 才能阻擋他們
這張圖表顯示 BILIBILI 開發人員如何從影片元素中擷取角色外框，並利用 MediaPipe 的即時運算功能，將角色大綱與即時留言層整合。 - 最佳化實作：測試和確保 實作並不會降低效能
效能最佳化
BILIBILI 的開發人員所使用的 OffscreenCanvas 和網路工作站 將耗時的工作移到工作站，避免佔用主執行緒。接著： 由於只需擷取 ，且與圖片大小或品質無關。
縮減遮罩大小後，BILIBILI 的開發團隊擴大了遮罩 並與 DOM 圖層合併 盡可能給出壓力
工作階段持續時間和點閱率增加
結合網路的廣度和威力，以及 MediaPipe 靈活彈性的功能 BILIBILI 採用 AI 解決方案後，成功提供功能強大且吸引人的網頁應用程式 輕鬆使用這項服務導入後一個月內 BILIBILI 的工作階段時間長度明顯提升 30%，效能提升 19% 直播影片的點閱率
30 天 %
工作階段持續時間延長
19 人 %
點閱率升幅
運用 MediaPipe 的免費裝置端網路 AI 解決方案，BILIBILI 的開發人員 有效保留關鍵視覺元素，同時持續吸引觀眾 可確保成效流暢，最終創造優質影片 觀眾對平台廣告的串流體驗抱有期待。
