Đặt hướng dẫn phát hiện mốc cho Web

Tác vụ MediaPipe Pose Landmarker cho phép bạn phát hiện các điểm đặc trưng của cơ thể người trong hình ảnh hoặc video. Bạn có thể sử dụng tác vụ này để xác định các vị trí chính trên cơ thể, phân tích tư thế và phân loại chuyển động. Tác vụ này sử dụng các mô hình học máy (ML) hoạt động với hình ảnh hoặc video riêng lẻ. Tác vụ này xuất các điểm đặc trưng về tư thế cơ thể theo toạ độ hình ảnh và toạ độ thế giới 3 chiều.

Những hướng dẫn này cho bạn biết cách sử dụng Pose 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 bài viết Tổng quan.

Ví dụ về mã

Mã ví dụ cho Pose 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 Pose Landmarker của riêng mình. Bạn có thể xem, chạy và chỉnh sửa ví dụ về Pose Landmarker chỉ bằng trình 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 Pose 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ã Pose Landmarker có sẵn thông qua gói NPM MediaPipe @mediapipe/tasks-vision NPM. 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 bắt buộc thông qua NPM bằng lệnh sau:

npm install @mediapipe/tasks-vision

Nếu 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 -->
<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 Pose 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 Pose Landmarker, hãy xem phần Mô hình trong bài viết tổng quan về tác vụ.

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 Pose 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 Pose Landmarker bằng các lựa 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 bài viết 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 poseLandmarker = await poseLandmarker.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
runningMode Đặt chế độ chạy cho tác vụ. Có 2 chế độ:

IMAGE: Chế độ cho dữ liệu đầu vào là hình ảnh riêng 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
numPoses Số lượng tư thế tối đa mà Pose Landmarker có thể phát hiện. Integer > 0 1
minPoseDetectionConfidence Điểm tin cậy tối thiểu để phát hiện tư thế được coi là thành công. Float [0.0,1.0] 0.5
minPosePresenceConfidence Điểm tin cậy tối thiểu về điểm hiện diện tư thế điểm trong quá trình phát hiện điểm đặc trưng về tư thế. Float [0.0,1.0] 0.5
minTrackingConfidence Điểm tin cậy tối thiểu để theo dõi tư thế được coi là thành công. Float [0.0,1.0] 0.5
outputSegmentationMasks Liệu Pose Landmarker có xuất mặt nạ phân đoạn cho tư thế được phát hiện hay không. Boolean False

Chuẩn bị dữ liệu

Pose Landmarker có thể phát hiện tư thế trong hình ảnh ở mọi định dạng mà 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 tư thế 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 tư thế xuất hiện trong video.

Chạy tác vụ

Pose 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 tư thế, sau đó báo cáo kết quả.

Các lệnh gọi đến phương thức detect()detectForVideo() của Pose Landmarker chạy đồng bộ và chặn luồng xen kẽ của người dùng. Nếu bạn phát hiện tư thế 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 trình thực thi web để chạy các phương thức detect()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 poseLandmarkerResult = poseLandmarker.detect(image);

Video

await poseLandmarker.setOptions({ runningMode: "VIDEO" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const poseLandmarkerResult = poseLandmarker.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ụ Pose Landmarker, hãy xem ví dụ.

Xử lý và hiển thị kết quả

Pose Landmarker trả về một đối tượng poseLandmarkerResult cho mỗi lần chạy phát hiện. Đối tượng kết quả chứa toạ độ cho từng điểm đặc trưng về tư thế.

Sau đây là ví dụ về dữ liệu đầu ra từ tác vụ này:

PoseLandmarkerResult:
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : 0.129959
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
      visibility   : 0.999909
      presence     : 0.999958
    ... (33 landmarks per pose)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
      visibility   : 0.999976
      presence     : 0.999998
    ... (33 world landmarks per pose)
  SegmentationMasks:
    ... (pictured below)

Kết quả chứa cả toạ độ đã chuẩn hoá (Landmarks) và toạ độ thế giới (WorldLandmarks) cho từng điểm đặc trưng.

Kết quả chứa các toạ độ đã chuẩn hoá sau đây (Landmarks):

  • xy: Toạ độ điểm đặc trưng được chuẩn hoá trong khoảng từ 0,0 đến 1,0 theo chiều rộng (x) và chiều cao (y) của hình ảnh.

  • z: Độ sâu của điểm đặc trưng, với độ sâu tại điểm giữa của hông là gốc. Giá trị càng nhỏ thì điểm đặc trưng càng gần camera. Độ lớn của z sử dụng cùng một tỷ lệ với x.

  • visibility: Khả năng điểm đặc trưng hiển thị trong hình ảnh.

Kết quả chứa các toạ độ thế giới sau đây (WorldLandmarks):

  • x, yz: Toạ độ 3 chiều trong thế giới thực tính bằng mét, với điểm giữa của hông là gốc.

  • visibility: Khả năng điểm đặc trưng hiển thị trong hình ảnh.

Hình ảnh sau đây cho thấy hình ảnh trực quan về kết quả của tác vụ:

Một người phụ nữ đang ở tư thế thiền. Tư thế của cô được làm nổi bật bằng một khung lưới cho biết vị trí của các chi và thân người

Mặt nạ phân đoạn không bắt buộc thể hiện khả năng mỗi pixel thuộc về một người được phát hiện. Hình ảnh sau đây là mặt nạ phân đoạn của kết quả tác vụ:

Mặt nạ phân đoạn của hình ảnh trước đó, phác thảo hình dạng của người phụ nữ

Mã ví dụ về Pose 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ụ