Tác vụ MediaPipe Face Landmarker (Điểm đánh dấu khuôn mặt) cho phép bạn phát hiện các điểm đánh dấu 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 tác vụ này để xác định biểu cảm khuôn mặt của con 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. Tác vụ này sử dụng các mô hình học máy (ML) có thể hoạt động với hình ảnh đơn lẻ hoặc luồng hình ảnh liên tục. Tác vụ này xuất ra các điểm đánh dấu khuôn mặt 3 chiều, điểm số blendshape (hệ số biểu thị biểu cảm khuôn mặt) để suy luận các 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 cho biết cách sử dụng Face Landmarker 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ã
Mã ví dụ cho Face Landmarker cung cấp một cách triển khai hoàn chỉnh tác vụ này bằng 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 điểm đánh dấu khuôn mặt của riêng mình. Bạn có thể xem, chạy và chỉnh sửa ví dụ về Face Landmarker 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, đặc biệt là để sử dụng Face Landmarker. Để 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 Landmarker có sẵn thông qua gói @mediapipe/tasks-vision
NPM MediaPipe. 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 nền tảng
.
Bạn có thể cài đặt các gói cần thiết 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ụ thông qua 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 to -->
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
crossorigin="anonymous"></script>
</head>
Mô hình
Tác vụ MediaPipe Face Landmarker yêu cầu một mô hình đã được huấn luyện và 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 có sẵn cho Face Landmarker, hãy xem phần tổng quan về tác vụ Mô hình.
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 tác vụ
Sử dụng một trong các hàm createFrom...() của Face Landmarker để 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 đã được 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 tác vụ. Hàm createFromOptions cho phép bạn tuỳ chỉnh Face Landmarker bằng các lựa chọn cấu hình. Để biết thêm thông tin, hãy xem
Các lựa chọn về cấu hình.
Đoạn mã sau đây minh hoạ cách xây dựng 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 cho các ứng dụng Web và JavaScript:
| Tên lựa chọn | Mô tả | Phạm vi giá trị | Giá trị mặc định |
|---|---|---|---|
running_mode |
Đặt chế độ chạy cho tác vụ. Có 2
chế độ: IMAGE: Chế độ cho dữ liệu đầu vào là hình ảnh đơn lẻ. VIDEO: Chế độ cho các khung hình đã giải mã của a video hoặc trên sự kiện phát trực tiếp dữ liệu đầu vào, chẳng hạn như từ camera. |
{IMAGE, VIDEO} |
IMAGE |
numFaces |
Số lượng khuôn mặt tối đa mà
FaceLandmarker có thể phát hiện. Tính năng làm mượt chỉ được áp dụng khi
num_faces được đặt thành 1.
|
Integer > 0 |
1 |
minFaceDetectionConfidence |
Điểm 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 tin cậy tối thiểu của điểm tin cậy về sự hiện diện của khuôn mặt điểm trong quá trình phát hiện điểm đánh dấu khuôn mặt. | Float [0.0,1.0] |
0.5 |
minTrackingConfidence |
Điểm 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 |
Face Landmarker có xuất ra blendshape khuôn mặt hay không. Blendshape khuôn mặt được dùng để kết xuất mô hình khuôn mặt 3D. | Boolean |
False |
outputFacialTransformationMatrixes |
FaceLandmarker có xuất ra ma trận biến đổi khuôn mặt hay không. FaceLandmarker sử dụng ma trận để biến đổi các điểm đánh dấu khuôn mặt từ mẫu khuôn mặt chuẩn tắc thành khuôn mặt được phát hiện, nhờ đó, người dùng có thể áp dụng hiệu ứng trên các điểm đánh dấu được phát hiện. | Boolean |
False |
Chuẩn bị dữ liệu
Face Landmarker có thể phát hiện khuôn mặt trong hình ảnh ở mọi định dạng được trình duyệt lưu trữ hỗ trợ. Tác vụ này cũng xử lý quá trình tiền xử lý dữ liệu đầu vào, bao gồm cả việc đổi kích thước, xoay và chuẩn hoá giá trị. Để đánh dấu khuôn mặt trong video, bạn có thể sử dụng API để xử lý nhanh từng khung hình một, sử dụng dấu thời gian của khung hình để xác định thời điểm khuôn mặt xuất hiện trong video.
Chạy tác vụ
Face Landmarker sử dụng các phương thức detect() (với chế độ chạy IMAGE) và detectForVideo() (với chế độ chạy VIDEO) để kích hoạt suy luận. Tác vụ này xử lý dữ liệu, cố gắng đánh dấu khuôn mặt, sau đó báo cáo kết quả.
Các lệnh gọi đến các phương thức detect() và detectForVideo() của Face Landmarker 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 các khung hình video từ camera của thiết bị, thì mỗi lần phát hiện sẽ chặn luồng chính. Bạn có thể ngăn điều này bằng cách triển khai web worker để chạy các phương thức detect() và detectForVideo() trên một luồng khác.
Đoạn mã sau đây minh hoạ cách thực thi quá trình xử lý bằng mô hình tác vụ:
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(); }); }
Để biết cách triển khai đầy đủ hơn về việc chạy tác vụ Face Landmarker, hãy xem ví dụ.
Xử lý và hiển thị kết quả
Face Landmarker trả về một đối tượng kết quả cho 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 được phát hiện, với toạ độ cho từng điểm đánh dấu khuôn mặt. Ngoài ra, đối tượng kết quả cũng có thể chứa blendshape (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 đánh dấu được phát hiện.
Sau đây là ví dụ về dữ liệu đầu ra từ tác 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 cho thấy hình ảnh trực quan về kết quả của tác vụ:
Mã ví dụ về Face Landmarker minh hoạ cách hiển thị các kết quả được trả về từ tác vụ, hãy xem ví dụ