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

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

Các hướng dẫn này chỉ cho bạn cách sử dụng Pose Emojier 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 Pose Thắng cảnh cung cấp cách triển khai đầy đủ của 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 tạo điểm mốc tạo dáng của riêng mình. Bạn có thể xem, chạy và chỉnh sửa mã ví dụ về Pose Towerer 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 Pose Viewser. Để 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 Viewser có sẵn thông qua gói MediaPipe @mediapipe/tasks-vision cpc. 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 -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Mẫu

Tác vụ MediaPipe Pose Viewser 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 đã huấn luyện hiện có cho Pose Emojier, 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 Pose vô hình để chuẩn bị tác vụ chạy các 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 Pose Viewser 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 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 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
runningMode Đặ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
numPoses Số lượng tư thế tối đa có thể được phát hiện bằng Pose Towerer. Integer > 0 1
minPoseDetectionConfidence Điểm số 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 số tin cậy tối thiểu về sự hiện diện tư thế trong quá trình phát hiện mốc tư thế. Float [0.0,1.0] 0.5
minTrackingConfidence Điểm số tin cậy tối thiểu để việc theo dõi tư thế được coi là thành công. Float [0.0,1.0] 0.5
outputSegmentationMasks Liệu Pose quen thuộc có tạo ra một mặt nạ phân đoạn cho tư thế đã phát hiện hay không. Boolean False

Chuẩn bị dữ liệu

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

Chạy tác vụ

Pose Viewser 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 dự đoán. Tác vụ này sẽ xử lý dữ liệu, cố gắng tạo các tư thế mốc, sau đó báo cáo kết quả.

Các lệnh gọi đến phương thức detect()detectForVideo() của Pose Emojier sẽ chạy đồng bộ và chặn các luồng xen kẽ của người dùng. Nếu bạn phát hiện các tư thế trong khung video từ 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()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 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();
  });
}

Để triển khai đầy đủ hơn cách chạy một tác vụ Pose Towerer, hãy xem ví dụ về mã.

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

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

Sau đây là ví dụ về dữ liệu đầu ra của nhiệm 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ả đầu ra chứa cả toạ độ chuẩn hoá (Landmarks) và toạ độ thế giới (WorldLandmarks) cho từng điểm mốc.

Kết quả đầu ra chứa các toạ độ được chuẩn hoá sau (Landmarks):

  • xy: Các toạ độ của địa danh được chuẩn hoá trong khoảng từ 0 đến 1 theo chiều rộng hình ảnh (x) và chiều cao (y).

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

  • visibility: Khả năng điểm mốc sẽ xuất hiện trong hình ảnh.

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

  • x, yz: Toạ độ 3 chiều thực tế 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 mốc sẽ xuất hiện trong hình ảnh.

Hình ảnh sau đây minh hoạ kết quả của tác vụ:

Mặt nạ phân đoạn không bắt buộc biểu thị 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 đầu ra tác vụ:

Mã ví dụ về Pose Viewser minh hoạ cách hiển thị kết quả trả về từ tác vụ, hãy xem mã ví dụ