Nhiệm vụ MediaPipe Face Editioner cho phép bạn phát hiện các điểm mốc khuôn mặt và biểu cảm khuôn mặt trong hình ảnh và video. Bạn có thể sử dụng nhiệm vụ này để xác định biểu cảm khuôn mặt của người, áp dụng bộ lọc và hiệu ứng khuôn mặt cũng như tạo hình đại diện ảo. Nhiệm vụ này sử dụng các mô hình học máy (ML) có thể hoạt động với một hình ảnh đơn lẻ hoặc một luồng hình ảnh liên tục. Nhiệm vụ này sẽ tạo ra các điểm mốc 3 chiều trên khuôn mặt, điểm kết hợp hình dạng (hệ số biểu thị biểu cảm khuôn mặt) để suy ra bề mặt khuôn mặt chi tiết theo thời gian thực và ma trận biến đổi để thực hiện các phép biến đổi cần thiết cho việc kết xuất hiệu ứng.
Các hướng dẫn này chỉ cho bạn cách sử dụng Face Marker cho các ứng dụng web và JavaScript. Để 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 tác vụ này, hãy xem phần Tổng quan.
Ví dụ về mã
Để bạn tham khảo, mã mẫu cho Face Thắng cảnh cung cấp cách triển khai đầy đủ tác vụ này trong JavaScript. 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 tạo điểm mốc 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 Face Marker 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 Face Marker. Để 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 Addresser có sẵn thông qua gói CNTT 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 phần 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 ALIAS bằng lệnh sau đây:
npm install @mediapipe/tasks-vision
Nếu bạn muốn nhập mã tác vụ qua dịch vụ của 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 to -->
<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 Marker 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 đã huấn luyện hiện có cho Face Marker, 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 nêu tên để chuẩn bị tác vụ chạy các dự đoán. Sử dụng hàm createFromModelPath() có đườ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 Face Marker với các tuỳ chọn cấu hình. Để biết thêm thông tin, hãy xem phần Các lựa chọn về 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 faceLandmarker = await faceLandmarker.createFromOptions(
vision,
{
baseOptions: {
modelAssetPath: "path/to/model"
},
runningMode: runningMode
});
Các lựa chọn về cấu hình
Tác vụ này có các lựa chọn cấu hình sau đây dành cho ứng dụng Web và JavaScript:
| Tên lựa chọn | Nội dung mô tả | Khoảng giá trị | Giá trị mặc định |
|---|---|---|---|
running_mode |
Đặt chế độ chạy cho tác vụ. Có hai chế độ: IMAGE: Chế độ nhập một hình ảnh. VIDEO: Chế độ dành cho các khung hình đã giải mã của video hoặc trên một luồng phát trực tiếp dữ liệu đầu vào, chẳng hạn như từ máy ảnh. |
{IMAGE, VIDEO} |
IMAGE |
numFaces |
FaceLandmarker có thể phát hiện số lượng khuôn mặt tối đa. Tính năng làm mượt chỉ được áp dụng khi đặt num_faces thành 1.
|
Integer > 0 |
1 |
minFaceDetectionConfidence |
Điểm số tin cậy tối thiểu để phát hiện khuôn mặt được coi là thành công. | Float [0.0,1.0] |
0.5 |
minFacePresenceConfidence |
Điểm số tin cậy tối thiểu về sự hiện diện khuôn mặt trong công cụ phát hiện mốc khuôn mặt. | Float [0.0,1.0] |
0.5 |
minTrackingConfidence |
Điểm số tin cậy tối thiểu để theo dõi khuôn mặt được coi là thành công. | Float [0.0,1.0] |
0.5 |
outputFaceBlendshapes |
Liệu Face Addresser có tạo ra các hình dạng khuôn mặt pha trộn hay không. Hình dạng khuôn mặt được dùng để kết xuất mô hình khuôn mặt 3D. | Boolean |
False |
outputFacialTransformationMatrixes |
Liệu FaceLandmarker có xuất ra ma trận biến đổi khuôn mặt hay không. FaceLandmarker dùng ma trận để chuyển đổi các điểm mốc trên khuôn mặt từ mẫu khuôn mặt chính tắc sang khuôn mặt được phát hiện, nhờ đó, người dùng có thể áp dụng hiệu ứng cho các điểm mốc được phát hiện. | Boolean |
False |
Chuẩn bị dữ liệu
Khuôn mặt có thể phát hiện các khuôn mặt trong hình ảnh ở bất kỳ định dạng nào được 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 việc đổi kích thước, xoay và chuẩn hoá giá trị. Để tạo điểm mốc cho các khuôn mặt trong video, bạn có thể sử dụng API để nhanh chóng xử lý từng khung hình một, bằng cách sử dụng dấu thời gian của khung hình để xác định thời điểm các khuôn mặt xuất hiện trong video.
Chạy tác vụ
Trình mốc khuôn mặt sử dụng các phương thức detect() (với chế độ đang chạy IMAGE) và detectForVideo() (với chế độ chạy VIDEO) để kích hoạt dự đoán. Tác vụ này sẽ xử lý dữ liệu, cố gắng hiển thị các khuôn mặt điểm mốc, sau đó báo cáo kết quả.
Các lệnh gọi đến phương thức detect() và detectForVideo() của Face Chronicleer sẽ chạy đồng bộ và chặn luồng giao diện người dùng. Nếu bạn phát hiện khuôn mặt trong khung hình video qua máy ảnh của thiết bị, thì mỗi lượt phát hiện sẽ chặn luồng chính. Bạn có thể ngăn chặn điều này bằng cách triển khai trình thực thi web để chạy phương thức detect() và detectForVideo() trên một luồng khác.
Mã sau đây minh hoạ cách thực thi quá trình xử lý bằng mô hình tác vụ:
Bài đăng có hình ảnh
const image = document.getElementById("image") as HTMLImageElement;
const faceLandmarkerResult = faceLandmarker.detect(image);
Video
await faceLandmarker.setOptions({ runningMode: "VIDEO" });
let lastVideoTime = -1;
function renderLoop(): void {
const video = document.getElementById("video");
if (video.currentTime !== lastVideoTime) {
const faceLandmarkerResult = faceLandmarker.detectForVideo(video);
processResults(detections);
lastVideoTime = video.currentTime;
}
requestAnimationFrame(() => {
renderLoop();
});
}
Để triển khai đầy đủ hơn việc chạy một tác vụ của Trình chuyển đổi khuôn mặt, hãy xem ví dụ về mã.
Xử lý và hiển thị kết quả
Face Marker trả về một đối tượng kết quả trong mỗi lần chạy phát hiện. Đối tượng kết quả chứa một lưới khuôn mặt cho mỗi khuôn mặt đã phát hiện, với toạ độ cho từng mốc khuôn mặt. Nếu muốn, đối tượng kết quả cũng có thể chứa các hình dạng hỗn hợp (biểu thị biểu cảm khuôn mặt) và ma trận biến đổi khuôn mặt để áp dụng hiệu ứng khuôn mặt trên các điểm mốc đã phát hiện.
Sau đây là ví dụ về dữ liệu đầu ra của nhiệm vụ này:
FaceLandmarkerResult:
face_landmarks:
NormalizedLandmark #0:
x: 0.5971359014511108
y: 0.485361784696579
z: -0.038440968841314316
NormalizedLandmark #1:
x: 0.3302789330482483
y: 0.29289937019348145
z: -0.09489090740680695
... (478 landmarks for each face)
face_blendshapes:
browDownLeft: 0.8296722769737244
browDownRight: 0.8096957206726074
browInnerUp: 0.00035583582939580083
browOuterUpLeft: 0.00035752105759456754
... (52 blendshapes for each face)
facial_transformation_matrixes:
[9.99158978e-01, -1.23036895e-02, 3.91213447e-02, -3.70770246e-01]
[1.66496094e-02, 9.93480563e-01, -1.12779640e-01, 2.27719707e+01]
...
Hình ảnh sau đây minh hoạ kết quả của tác vụ:
Mã ví dụ về Khuôn mặt biểu thị cách hiển thị kết quả trả về từ tác vụ, hãy xem ví dụ về mã