Nhiệm vụ của Trình tạo điểm ảnh khuôn mặt MediaPipe cho phép bạn phát hiện các điểm mốc trên 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 con người, áp dụng các bộ lọc và hiệu ứng khuôn mặt để 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 các hình ảnh đơn lẻ hoặc luồng hình ảnh. Tác vụ này sẽ đưa ra các điểm mốc khuôn mặt 3 chiều, hình dạng kết hợp điểm số (hệ số thể hiện biểu cảm khuôn mặt) để suy luận chi tiết về khuôn mặt bề mặt theo thời gian thực và ma trận biến đổi để thực hiện cần biến đổi để kết xuất hiệu ứng.
Những hướng dẫn này chỉ cho bạn cách sử dụng tính năng Điểm mốc khuôn mặt dành cho web và JavaScript của chúng tôi. Để biết thêm thông tin về tính năng, kiểu máy và cấu hình các tuỳ chọn của việc cần làm này, hãy xem phần Tổng quan.
Ví dụ về mã
Mã mẫu dành cho tính năng Điểm mốc khuôn mặt cung cấp cách triển khai hoàn chỉnh tính năng này trong JavaScript để bạn tham khảo. Mã này giúp bạn kiểm thử công việc 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 bạn. Bạn có thể xem, chạy và chỉnh sửa mã ví dụ của Trình xác định 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 Công cụ đánh dấu khuôn mặt. Để biết thông tin chung về thiết lập môi trường phát triển web và JavaScript, bao gồm 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ể dùng mã Điểm mốc khuôn mặt trên @mediapipe/tasks-vision của MediaPipe
Gói Trạng thái đã hiển thị 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 nền tảng
Hướng dẫn thiết lập.
Bạn có thể cài đặt các gói bắt buộc thông qua kháng nghị bằng lệnh sau:
npm install @mediapipe/tasks-vision
Nếu bạn muốn nhập mã tác vụ qua mạng phân phối nội dung (CDN) hãy thêm mã sau vào <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
Nhiệm vụ Trình xác định khuôn mặt MediaPipe cần có một mô hình đã qua đào tạo tương thích với tính năng này công việc. Để biết thêm thông tin về các mô hình đã qua đào tạo dùng được cho tính năng Đánh dấu khuôn mặt, hãy xem tổng quan về nhiệm vụ phần Mô hình.
Chọn và tải mô hình xuống rồi 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 chức năng createFrom...() của Trình xác định khuôn mặt để
chuẩn bị tác vụ để chạy các dự đoán. Sử dụng 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ạ việc sử dụng hàm createFromOptions() để
thiết lập việc cần làm. Hàm createFromOptions cho phép bạn tuỳ chỉnh
Máy đánh dấu khuôn mặt với các lựa chọn cấu hình. Để biết thêm thông tin, hãy xem
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ông cụ tuỳ chỉnh tùy chọn:
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 cho Web và JavaScript ứng dụng:
| Tên lựa chọn | Mô tả | Khoảng giá trị | Giá trị mặc định |
|---|---|---|---|
running_mode |
Thiết lập chế độ chạy cho tác vụ. Có hai
chế độ: HÌNH ẢNH: Chế độ cho đầu vào một hình ảnh. VIDEO: Chế độ cho khung đã giải mã của hoặc 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à ứng dụng có thể phát hiện
FaceLandmarker. 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 số tin cậy tối thiểu cho sự hiện diện của khuôn mặt điểm số trong tính năng phát hiện mốc khuôn mặt. | Float [0.0,1.0] |
0.5 |
minTrackingConfidence |
Điểm tin cậy tối thiểu cho tính năng theo dõi khuôn mặt để được coi là thành công. | Float [0.0,1.0] |
0.5 |
outputFaceBlendshapes |
Liệu Trình xác định khuôn mặt có xuất ra các hình dạng khuôn mặt kết hợp không. Các 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 |
FaceLandmarker xuất ra thông tin về khuôn mặt ma trận biến đổi. FaceLandmarker sử 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 chuẩn sang khuôn mặt được phát hiện, để người dùng có thể áp dụng hiệu ứng cho các địa danh được phát hiện. | Boolean |
False |
Chuẩn bị dữ liệu
Trình tạo mốc 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 hỗ trợ bởi trình duyệt chính. Tác vụ này cũng xử lý trước xử lý dữ liệu đầu vào, bao gồm đổi kích thước, xoay và chuẩn hoá giá trị. Đối với những khuôn mặt gây ấn tượng trong video: bạn có thể dùng API để xử lý nhanh từng khung hình bằng cách 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ụ
Tính năng Xác định khuôn mặt sử dụng detect() (có chế độ chạy IMAGE) và
Các phương thức detectForVideo() (với chế độ đang chạy VIDEO) để kích hoạt
suy luận. Tác vụ này sẽ xử lý dữ liệu, cố gắng di chuyển các mặt của điểm mốc, và
sau đó báo cáo kết quả.
Các lệnh gọi đến phương thức detect() và detectForVideo() của Trình xác định khuôn mặt sẽ chạy
một cách đồng bộ và chặn luồng giao diện người dùng. Nếu bạn phát hiện thấy khuôn mặt
trong khung hình video từ camera của thiết bị, mỗi lần phát hiện chặn
chuỗi. 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 detect()
và phương thức detectForVideo() trên một chuỗi 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 hoàn chỉnh hơn quá trình chạy tác vụ Trình xác định khuôn mặt, hãy xem mã ví dụ.
Xử lý và hiện kết quả
Trình xác định khuôn mặt trả về một đối tượng kết quả cho mỗi lần phát hiện chạy. Đố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 mốc khuôn mặt. Đối tượng kết quả cũng có thể tuỳ ý chứa các hình dạng hỗn hợp, biểu thị biểu cảm khuôn mặt và hình ảnh ma trận biến đổi để áp dụng hiệu ứng khuôn mặt cho các địa danh được phát hiện.
Sau đây là ví dụ về dữ liệu đầu ra của 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 minh hoạ kết quả của tác vụ:
Mã ví dụ của Trình xác định khuôn mặt minh hoạ cách hiển thị kết quả được trả về từ tác vụ, hãy xem mã ví dụ