Nhiệm vụ MediaPipe Face Stylizer cho phép bạn áp dụng các kiểu cách điệu khuôn mặt cho các khuôn mặt trong hình ảnh. Bạn có thể dùng nhiệm vụ này để tạo hình đại diện ảo theo nhiều phong cách.
Mã mẫu được mô tả trong những hướng dẫn này hiện có trên GitHub. Để biết thêm thông tin về các tính năng, mô hình và lựa chọn cấu hình của nhiệm vụ này, hãy xem phần Tổng quan.
Ví dụ về mã
Mã mẫu cho Face Stylizer 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ử tác vụ này và bắt đầu xây dựng ứng dụng cách điệu khuôn mặt của riêng mình. Bạn có thể xem, chạy và chỉnh sửa mã mẫu 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 cách điệu khuôn mặt. Để 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
Mã Face Stylizer hiện có thông qua gói CNP của MediaPipe @mediapipe/tasks-vision. 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 được yêu cầu thông qua SSID 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ụ MediaPipe Face Stylizer cần có một mô hình đã qua 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 được 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 tổng quan về tác vụ.
Chọn và tải một mô hình xuống, sau đó lưu trữ trong thư mục dự án của bạ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 Face Stylizer để chuẩn bị tác vụ chạy thông tin 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 tải vào bộ nhớ, bạn có thể sử dụng phương thức createFromModelBuffer().
Ví dụ về mã bên dưới minh hoạ cách sử dụng hàm createFromOptions() để thiết lập nhiệm vụ. Hàm createFromOptions cho phép bạn tuỳ chỉnh Trình cách điệu khuôn mặt 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 lựa 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ể cách điệu hoá khuôn mặt trong hình ảnh ở mọi định dạng mà trình duyệt máy chủ hỗ trợ. Tác vụ này cũng xử lý trước việc nhập dữ liệu, bao gồm đổi kích thước, xoay và chuẩn hoá giá trị.
Chạy tác vụ
Face Stylizer sử dụng phương thức stylize() để kích hoạt suy luận. Tác vụ này sẽ xử lý dữ liệu, cố gắng tạo kiểu cách điệu 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 Face Stylizer sẽ 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 cách điệu khuôn mặt trả về một đối tượng MPImage có kiểu cách điệ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 nhiệm vụ này:
Kết quả đầu ra ở trên được tạo bằng cách áp dụng mô hình Color sketch (Bản phác thảo màu) cho hình ảnh đầu vào sau:
