Xin giới thiệu LiteRT: Môi trường thời gian chạy hiệu suất cao của Google dành cho AI trên thiết bị, trước đây là TensorFlow Lite.

Trang này được dịch bởi Cloud Translation API.

Hướng dẫn phát hiện khuôn mặt dành cho web

Nhiệm vụ của Trình phát hiện khuôn mặt MediaPipe cho phép bạn phát hiện các khuôn mặt trong một hình ảnh hoặc video. Bạn có thể sử dụng nhiệm vụ này nhằm xác định vị trí 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ột mô hình học máy (ML) hoạt động với các hình ảnh đơn lẻ hoặc luồng hình ảnh. Tác vụ sẽ xuất ra các vị trí khuôn mặt cùng với các giá trị sau các điểm chính trên khuôn mặt: mắt trái, mắt phải, đầu mũi, miệng, vị trí mắt trái và cận mắt phải.

Những 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 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 cho Trình phát hiện khuôn mặt cung cấp cách triển khai đầy đủ 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 phát hiện 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 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 để sử dụng Trình phát hiện 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

Mã Máy phát hiện khuôn mặt hiện được cung cấp thông qua MediaPipe @mediapipe/tasks-vision 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 phát hiện khuôn mặt MediaPipe cần một mô hình đã qua huấn luyện và tương thích với công việc. Để biết thêm thông tin về các mô hình đã được huấn luyện cho tính năng Phát hiện 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 hàm createFrom...() của Trình phát hiện 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 Trình phát hiện khuôn mặt với các tuỳ chọn cấu hình. Để biết thêm thông tin về cấu hình hãy xem phần 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 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 cho Web và JavaScript ứng dụng:

Tên lựa chọn	Mô tả	Khoảng giá trị	Giá trị mặc định
`option_var_1_web_js`	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`
`minDetectionConfidence`	Điểm tin cậy tối thiểu để tính năng phát hiện khuôn mặt được coi là thành công.	`Float [0,1]`	`0.5`
`minSuppressionThreshold`	Ngưỡng tối thiểu không áp dụng tối đa để phát hiện khuôn mặt sẽ được coi là bị 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 các khuôn mặt trong hình ảnh ở mọi định dạng mà 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ị. Cách phát hiện khuôn mặt 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ụ

Trình phát hiện khuôn mặt sử dụng detect() (có chế độ đang 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. Nhiệm vụ này sẽ xử lý dữ liệu, tìm cách phát hiện khuôn mặt 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 phát hiện 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 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 hoàn chỉnh hơn quá trình 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 kết quả

Trình phát hiện khuôn mặt tạo ra 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 phát hiện chạy. Đối tượng kết quả chứa các khuôn mặt trong toạ độ và các khuôn mặt trong hình ảnh trên thế giới toạ độ.

Sau đây là ví dụ về dữ liệu đầu ra của tác 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ó hộp giới hạn, 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ả được trả về từ tác vụ, hãy xem mã ví dụ