Tác vụ Trình phát hiện khuôn mặt MediaPipe cho phép bạn phát hiện khuôn mặt trong hình ảnh hoặc video. Bạn có thể dùng tác vụ này để xác định vị trí của khuôn mặt và các đặc điểm trên khuôn mặt trong một khung hình. Nhiệm vụ này sử dụng mô hình học máy (ML) hoạt động với các hình ảnh đơn lẻ hoặc một luồng hình ảnh liên tục. Nhiệm vụ sẽ xuất ra vị trí khuôn mặt, cùng với các điểm chính trên khuôn mặt sau: mắt trái, mắt phải, đầu mũi, miệng, tổn thương mắt trái và tổn thương mắt phải.
Các hướng dẫn này chỉ cho bạn cách sử dụng Trình phát hiện khuôn mặt 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ã mẫu cho Trình phát hiện khuôn 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ử tác vụ này và bắt đầu xây dựng ứng dụng phát hiện 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 phát hiện 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 phát hiện 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ã Trình phát hiện khuôn mặt có sẵn trong gói MediaPipe @mediapipe/tasks-vision
nay. 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ụ Trình phát hiện khuôn mặt MediaPipe 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 Công cụ phát hiện 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 Trình phát hiện khuôn mặt để chuẩn bị tác vụ chạy 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 Trình phát hiện khuôn mặt bằng các tuỳ chọn cấu hình. Để biết thêm thông tin về các lựa chọn cấu hình, hãy xem phần Lựa 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 facedetector = await FaceDetector.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 |
|---|---|---|---|
option_var_1_web_js |
Đặ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 |
minDetectionConfidence |
Điểm số tin cậy tối thiểu để phát hiện khuôn mặt được xem là thành công. | Float [0,1] |
0.5 |
minSuppressionThreshold |
Ngưỡng tối thiểu không áp dụng biện pháp tối đa để phát hiện khuôn mặt được coi là trùng lặp. | Float [0,1] |
0.3 |
Chuẩn bị dữ liệu
Trình phát hiện khuôn mặt có thể phát hiện 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ị. Để phát hiện 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, 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 phát hiện khuôn mặt sử dụng phương thức detect() (với chế độ 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 phát hiện khuôn mặt rồi 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 phát hiện khuôn mặt 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 faceDetectorResult = faceDetector.detect(image);
Video
await faceDetector.setOptions({ runningMode: "video" });
let lastVideoTime = -1;
function renderLoop(): void {
const video = document.getElementById("video");
if (video.currentTime !== lastVideoTime) {
const detections = faceDetector.detectForVideo(video);
processResults(detections);
lastVideoTime = video.currentTime;
}
requestAnimationFrame(() => {
renderLoop();
});
}
Để triển khai đầy đủ hơn cách chạy tác vụ Trình phát hiện khuôn mặt, hãy xem mã ví dụ.
Xử lý và hiển thị kết quả
Trình phát hiện khuôn mặt sẽ tạo một đối tượng kết quả của trình phát hiện khuôn mặt cho mỗi lần chạy tính năng phát hiện. Đối tượng kết quả chứa các khuôn mặt trong toạ độ hình ảnh và các khuôn mặt trong toạ độ thế giới.
Sau đây là ví dụ về dữ liệu đầu ra của nhiệm vụ này:
FaceDetectionResult:
Detections:
Detection #0:
BoundingBox:
origin_x: 126
origin_y: 100
width: 463
height: 463
Categories:
Category #0:
index: 0
score: 0.9729152917861938
NormalizedKeypoints:
NormalizedKeypoint #0:
x: 0.18298381567001343
y: 0.2961040139198303
NormalizedKeypoint #1:
x: 0.3302789330482483
y: 0.29289937019348145
... (6 keypoints for each face)
Detection #1:
BoundingBox:
origin_x: 616
origin_y: 193
width: 430
height: 430
Categories:
Category #0:
index: 0
score: 0.9251380562782288
NormalizedKeypoints:
NormalizedKeypoint #0:
x: 0.6151331663131714
y: 0.3713381886482239
NormalizedKeypoint #1:
x: 0.7460576295852661
y: 0.38825345039367676
... (6 keypoints for each face)
Hình ảnh sau đây minh hoạ kết quả của tác vụ:
Đối với hình ảnh không có giới hạn hộp, hãy xem hình ảnh gốc.
Mã ví dụ về Trình phát hiện khuôn mặt minh hoạ cách hiển thị kết quả trả về từ tác vụ, hãy xem mã ví dụ