Tác vụ Trình tạo kiểu khuôn mặt MediaPipe cho phép bạn áp dụng kiểu khuôn mặt cho các khuôn mặt trong hình ảnh. Bạn có thể sử dụng nhiệm vụ này để tạo hình đại diện ảo theo nhiều kiểu.
Bạn có thể xem mã mẫu được mô tả trong các hướng dẫn này trên GitHub. Để biết thêm thông tin về các tính năng, mô hình và tuỳ chọn cấu hình của tác vụ này, hãy xem phần Tổng quan.
Ví dụ về mã
Mã mẫu cho Trình tạo kiểu mặt cung cấp cách triển khai đầy đủ tác vụ này trong JavaScript để bạn tham khảo. Mã này giúp bạn kiểm thử nhiệm vụ này và bắt đầu tạo ứng dụng tạo kiểu khuôn mặt của riêng mình. Bạn có thể xem, chạy và chỉnh sửa mã ví dụ của Trình tạo kiểu khuôn mặt chỉ bằng trình duyệt web.
Thiết lập
Phần này mô tả các bước chính để thiết lập môi trường phát triển dành riêng cho việc sử dụng Trình tạo kiểu mặt đồng hồ. Để biết thông tin chung về cách thiết lập môi trường phát triển web và JavaScript, bao gồm cả các yêu cầu về phiên bản nền tảng, hãy xem Hướng dẫn thiết lập cho web.
Gói JavaScript
Bạn có thể sử dụng mã Face Stylizer thông qua gói MediaPipe @mediapipe/tasks-vision
NPM. Bạn có thể tìm và tải các thư viện này xuống bằng cách làm theo hướng dẫn trong Hướng dẫn thiết lập của nền tảng.
Bạn có thể cài đặt các gói bắt buộc thông qua NPM bằng lệnh sau:
npm install @mediapipe/tasks-vision
Nếu bạn muốn nhập mã tác vụ bằng dịch vụ mạng phân phối nội dung (CDN), hãy thêm mã sau vào thẻ <head> trong tệp HTML:
<!-- You can replace JSDeliver with another CDN if you prefer -->
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
Mẫu
Tác vụ Trình tạo kiểu khuôn mặt MediaPipe yêu cầu một mô hình đã huấn luyện tương thích với tác vụ này. Để biết thêm thông tin về các mô hình đã huấn luyện hiện có cho Trình tạo kiểu khuôn mặt, hãy xem phần Mô hình trong phần tổng quan về tác vụ.
Chọn và tải một mô hình xuống, sau đó lưu trữ mô hình đó trong thư mục dự án:
<dev-project-root>/app/shared/models/
Tạo việc cần làm
Sử dụng một trong các hàm createFrom...() của Trình tạo kiểu khuôn mặt để chuẩn bị tác vụ chạy suy luận. Sử dụng hàm createFromModelPath() với đường dẫn tương đối hoặc tuyệt đối đến tệp mô hình đã huấn luyện. Nếu mô hình của bạn đã được tải vào bộ nhớ, bạn có thể sử dụng phương thức createFromModelBuffer().
Mã ví dụ bên dưới minh hoạ cách sử dụng hàm createFromOptions() để thiết lập tác vụ. Hàm createFromOptions cho phép bạn tuỳ chỉnh Face Stylizer bằng các tuỳ chọn cấu hình.
Mã sau đây minh hoạ cách tạo và định cấu hình tác vụ bằng các tuỳ chọn tuỳ chỉnh:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const facestylizer = await FaceStylizer.createFromOptions(
vision,
{
baseOptions: {
modelAssetPath: "https://storage.googleapis.com/mediapipe-models/face_stylizer/blaze_face_stylizer/float32/latest/face_stylizer_color_sketch.task"
},
});
Chuẩn bị dữ liệu
Trình tạo kiểu khuôn mặt có thể tạo kiểu cho khuôn mặt trong hình ảnh ở bất kỳ định dạng nào mà trình duyệt lưu trữ hỗ trợ. Tác vụ này cũng xử lý việc xử lý trước dữ liệu đầu vào, bao gồm cả việc đổi kích thước, xoay và chuẩn hoá giá trị.
Chạy tác vụ
Công cụ tạo kiểu khuôn mặt sử dụng phương thức stylize() để kích hoạt các suy luận. Tác vụ này xử lý dữ liệu, cố gắng tạo kiểu cho khuôn mặt, sau đó báo cáo kết quả.
Các lệnh gọi đến phương thức stylize() của Trình tạo kiểu khuôn mặt chạy đồng bộ và chặn luồng giao diện người dùng.
Mã sau đây minh hoạ cách thực thi quá trình xử lý bằng mô hình tác vụ:
const image = document.getElementById("image") as HTMLImageElement;
const faceStylizerResult = faceStylizer.stylize(image);
Xử lý và hiển thị kết quả
Trình tạo kiểu khuôn mặt trả về một đối tượng MPImage có kiểu của khuôn mặt nổi bật nhất trong hình ảnh đầu vào.
Sau đây là ví dụ về dữ liệu đầu ra của tác vụ này:
Kết quả ở trên được tạo bằng cách áp dụng mô hình Bản phác thảo màu cho hình ảnh đầu vào sau:
