Bibili khai thác giải pháp AI trên web trên thiết bị của MediaPipe để cải thiện trải nghiệm người dùng phát video trực tuyến và tăng thời lượng phiên thêm 30%

Jun Jiu
Cecilia Cong
Cecilia Cong
Tyler Mullen
Tyler Mullen
LinkedIn
Jason Mayes

BLIBLI, một trong những nền tảng nội dung giải trí hàng đầu ở Đại Trung Hoa Đông Nam Á, nơi lưu trữ một cơ sở dữ liệu khổng lồ về nội dung do người dùng tạo, trực tiếp chương trình phát sóng và trải nghiệm trò chơi thu hút hơn 330 triệu người dùng đang hoạt động (MAU).

Một trong những tính năng đặc biệt về nền tảng của BILBLI là việc tích hợp bình luận dưới dạng dấu đầu dòng, một tính năng phổ biến ở Nhật Bản và Trung Quốc, giúp hiển thị phản hồi của người xem theo thời gian thực dưới dạng cuộn văn bản trên các luồng video. Màn hình đầu dòng phần bình luận giúp bổ sung yếu tố thú vị và sống động cho nội dung video trực tiếp, giúp đảm bảo người xem tích cực tương tác bằng cách để họ bày tỏ suy nghĩ và phản hồi đến những người xem khác lượt bày tỏ cảm xúc theo thời gian thực.

Thách thức

Bình luận trên màn hình đầu dòng là một cách thú vị để người xem tương tác với nội dung, bạn cần giữ cho ảnh chân dung của người nói không bị che khuất trải nghiệm người dùng tốt nhất. Trong video sau, bạn có thể gây phiền toái và cản trở người xem tiếp tục xem.

Trạng thái ban đầu: Video ban đầu có cảnh một người đang nói bình luận cuộn trên màn hình, qua mặt của người nói.

Giúp nhận xét ở màn hình đầu dòng hiển thị liền mạch phía sau chân dung, bạn cần phân đoạn máy học chính xác, khả năng này khó có thể chạy hiệu quả trên thiết bị. Đó là lý do tại sao trước đây, công cụ này mạnh mẽ đến vậy cần phải được hỗ trợ phía máy chủ.

Dựa trên lượng nội dung mà BILBLI phân phát mỗi ngày, việc xử lý số lượng nội dung lớn một phần ở phía máy chủ sẽ rất tốn kém. Vì vậy, nhóm phát triển của họ cần thiết để tìm một giải pháp phía máy khách nhằm giảm chi phí. Thử thách nâng cao việc chuyển sang công nghệ học máy phía máy khách có gây khó khăn cho việc duy trì CPU không tăng mức sử dụng đến khi hiệu suất bị cản trở.

Mục tiêu: Cuối cùng, BILBIL muốn cuộn các nhận xét trên màn hình đầu dòng từ phải sang trái phía sau người nói để không che mất khuôn mặt của người nói.

Giải pháp: Phân đoạn hình ảnh trên thiết bị

Để giải quyết những thách thức này, các nhà phát triển của BibiBLI đã tận dụng Phân đoạn nội dung bằng MediaPipe và TensorFlow.js, tiền thân của Trình phân đoạn hình ảnh của MediaPipe. Điều này mang lại API phân đoạn hiệu quả trên thiết bị, cũng như huấn luyện trước các mô hình để tự chụp ảnh chân dung và phân đoạn nhiều đối tượng.

Giờ đây, BIBIL có thể nhanh chóng lặp lại và hỗ trợ tính năng này, đồng thời giảm chi phí và duy trì hiệu suất.

Triển khai

Dưới đây là cách BibiBLI triển khai giải pháp này:

  1. Đường viền nhân vật trong thời gian thực: BILBLI đã sử dụng mô hình Trình phân đoạn ảnh tự chụp để trích xuất đường viền nhân vật xuyên suốt video. Việc này cho phép họ để tạo một mặt nạ phân định ranh giới của các ký tự.
  2. Tích hợp với lớp nhận xét trực tiếp: Sau đó, họ hợp nhất các đối tượng đã trích xuất đường viền ký tự với lớp nhận xét trực tiếp bằng CSS mask-image các thuộc tính. Bằng cách đặt vùng ký tự trung tâm là trong suốt, nhận xét ở màn hình đầu dòng có thể xuất hiện liền mạch phía sau nhân vật mà không cản trở chúng.
    Một ký tự màu xanh dương trong hộp hình chữ nhật trỏ đến một hộp khác có ký tự màu xám, đại diện cho mặt nạ SVG. Dấu cộng có các đường màu xanh dương thể hiện việc thêm bình luận trực tiếp. Các đường viền này kết hợp với nhau bằng các đường màu xanh dương đằng sau đường viền ký tự, thể hiện những nhận xét nằm phía sau nhân vật.
    Sơ đồ cho thấy cách các nhà phát triển của BibiBLI trích xuất đường viền ký tự từ một phần tử video và tích hợp đường viền đó với lớp nhận xét trực tiếp bằng công nghệ điện toán theo thời gian thực của MediaPipe.
  3. Tối ưu hoá hoạt động triển khai: Cần có BILBLI để thử nghiệm và đảm bảo Việc triển khai không làm giảm hiệu suất.

Tối ưu hoá hiệu suất

Các nhà phát triển của BLIBLI đã sử dụng OffscreenCanvas và Web Workers để di chuyển các tác vụ tốn thời gian sang worker để tránh chiếm luồng chính. Sau đó: họ đã giảm kích thước của mặt nạ, vì chỉ cần trích xuất ký tự và không phụ thuộc vào kích thước hoặc chất lượng ảnh.

Sau khi giảm kích thước khẩu trang, nhóm phát triển của BILBIL đã kéo dài khẩu trang trong quá trình kết hợp và hợp nhất nó với lớp DOM để giảm kết xuất áp lực nhiều nhất có thể.

Một ký tự màu xanh dương trong hộp trỏ đến một hình ảnh nhỏ giống hệt. Một đường chấm trỏ vào một hộp đen nhỏ có ký tự trong suốt. Hộp đen nhỏ trỏ vào một hộp lớn hơn giống hệt. Quá trình giảm thiểu này cùng với bình luận trực tiếp (được thể hiện bằng các đường màu xanh dương) sẽ bằng với kết quả hợp nhất của những bình luận xuất hiện phía sau nhân vật.
Sơ đồ minh hoạ cách BLIBLI giảm thiểu kích thước mặt nạ và hợp nhất kích thước mặt nạ đó với một mặt nạ được kéo giãn.

Tăng thời lượng phiên và tỷ lệ nhấp

Bằng cách kết hợp phạm vi tiếp cận và sức mạnh của web với tính linh hoạt của Các giải pháp trí tuệ nhân tạo (AI), BIBLI đã cung cấp thành công một ứng dụng web hấp dẫn và mạnh mẽ trải nghiệm cho hàng triệu người dùng. Và chỉ trong vòng một tháng triển khai, Thời lượng phiên tăng 30% và mức cải thiện 19% tỷ lệ nhấp của video phát trực tiếp.

    30 %

    Tăng thời lượng phiên

    19 %

    CTR cao hơn

Nhờ các giải pháp AI web trên thiết bị miễn phí của MediaPipe, các nhà phát triển của BibiBLI có thể giữ lại hiệu quả các yếu tố hình ảnh quan trọng trong khi vẫn giữ chân người xem, đảm bảo hiệu suất mượt mà và mục tiêu cuối cùng là cung cấp video đặc biệt trải nghiệm xem trực tuyến mà người xem kỳ vọng ở nhà lãnh đạo của nền tảng này.

Trích dẫn từ Jun Liu, kỹ sư cấp cao tại BilBIL: Giải pháp của MediaPipe đã giúp chúng tôi tiết kiệm chi phí phát triển mà không cần tập trung vào việc tạo mô hình trích xuất chân dung.