BILIBILI là một trong những nền tảng nội dung giải trí hàng đầu ở Trung Quốc Đại lục và Đông Nam Á, lưu trữ một cơ sở dữ liệu khổng lồ về nội dung do người dùng tạo, chương trình phát trực tiếp và trải nghiệm chơi trò chơi, thu hút hơn 330 triệu người dùng đang hoạt động hằng tháng (MAU).
Một trong những đặc điểm nổi bật của nền tảng BILIBILI là tính năng tích hợp bình luận dạng trình đơn thả xuống. Đây là một tính năng phổ biến ở Nhật Bản và Trung Quốc, cho thấy ý kiến phản hồi của người xem theo thời gian thực dưới dạng văn bản cuộn trên các luồng video. Tính năng bình luận dạng trình bày nhanh tạo thêm yếu tố thú vị và hấp dẫn cho nội dung video trực tiếp, giúp người xem chủ động tương tác bằng cách thể hiện suy nghĩ của riêng họ và phản hồi cảm xúc của người xem khác theo thời gian thực.
Thách thức
Mặc dù bình luận dạng dấu đầu dòng là một cách hấp dẫn để người xem tương tác với nội dung, nhưng điều quan trọng là bạn phải đảm bảo không che khuất chân dung của người nói để mang lại trải nghiệm tốt nhất cho người dùng. Trong video sau, các bình luận dạng dấu đầu dòng có thể gây mất tập trung và khiến người xem không muốn tiếp tục xem.
Để bật tính năng bình luận dạng dấu đầu dòng chạy liền mạch phía sau chân dung của người nói, bạn cần có khả năng phân đoạn chính xác bằng công nghệ học máy. Tuy nhiên, việc này có thể khó chạy hiệu quả trên thiết bị. Đó là lý do tại sao trước đây, các tính năng mạnh mẽ như vậy cần được hỗ trợ phía máy chủ.
Do lượng nội dung mà BILIBILI phân phát hằng ngày, việc xử lý phần lớn nội dung đó ở 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 tìm một giải pháp phía máy khách để giảm chi phí. Một thách thức khác là việc chuyển sang công nghệ học máy phía máy khách khiến việc duy trì mức sử dụng CPU không tăng đến mức làm giảm hiệu suất trở nên khó khăn.
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 BILIBILI đã tận dụng tính năng Phân đoạn cơ thể bằng MediaPipe và TensorFlow.js, một tính năng tiền thân của Trình phân đoạn hình ảnh của MediaPipe. Điều này đã cung cấp một API phân đoạn hiệu quả trên thiết bị, cũng như các mô hình được huấn luyện trước để phân đoạn ảnh chân dung tự chụp và nhiều đối tượng.
Giờ đây, BILIBILI 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
Sau đây là cách BILIBILI triển khai giải pháp này:
- Nội dung phác thảo nhân vật theo thời gian thực: BILIBILI đã sử dụng mô hình Trình phân đoạn ảnh chân dung để trích xuất nội dung phác thảo nhân vật trong suốt video. Điều này cho phép họ tạo một mặt nạ xác định ranh giới của các ký tự.
- Tích hợp với lớp bình luận trực tiếp: Sau đó, họ hợp nhất đường viền ký tự đã trích xuất với lớp bình luận trực tiếp bằng các thuộc tính CSS
mask-image. Bằng cách đặt vùng ký tự trung tâm thành trong suốt, các chú thích màn hình dấu đầu dòng có thể xuất hiện liền mạch phía sau các ký tự mà không che khuất chúng.
Sơ đồ minh hoạ cách các nhà phát triển của BILIBILI trích xuất đường viền nhân vật từ một phần tử video và tích hợp đường viền đó với lớp bình luận trực tiếp bằng cách sử dụng tính năng điện toán theo thời gian thực của MediaPipe. - Tối ưu hoá quá trình triển khai: BILIBILI cần kiểm thử và đảm bảo quá trình 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 BILIBILI đã sử dụng OffscreenCanvas và Web Worker để di chuyển các tác vụ tốn thời gian sang worker, nhằm tránh chiếm dụng luồng chính. Sau đó, họ giảm kích thước của mặt nạ vì chỉ cần mặt nạ để trích xuất đường viền ký tự và không phụ thuộc vào kích thước hoặc chất lượng hình ảnh.
Sau khi giảm kích thước mặt nạ, nhóm phát triển của BILIBILI đã kéo giãn mặt nạ trong quá trình kết hợp và hợp nhất mặt nạ với lớp DOM để giảm áp lực kết xuất nhiều nhất có thể.
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 AI của MediaPipe, BILIBILI đã thành công trong việc mang đến trải nghiệm ứng dụng web mạnh mẽ và hấp dẫn cho hàng triệu người dùng. Và chỉ trong vòng một tháng triển khai, BILIBILI đã nhận thấy thời lượng phiên tăng đáng kể 30% và tỷ lệ nhấp vào video phát trực tiếp tăng 19%.
30 %
Tăng thời lượng phiên
19 %
CTR cao hơn
Nhờ các giải pháp AI web miễn phí trên thiết bị của MediaPipe, các nhà phát triển của BILIBILI có thể giữ lại các thành phần hình ảnh quan trọng một cách hiệu quả, đồng thời giữ chân người xem, đảm bảo hiệu suất mượt mà và cuối cùng là mang đến trải nghiệm xem trực tuyến video chất lượng cao mà người xem mong đợi từ nhà cung cấp nền tảng hàng đầu.
