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.

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

Nhiệm vụ MediaPipe Pose Tager cho phép bạn phát hiện các địa danh của cơ thể người trong một hình ảnh hoặc video. Bạn có thể sử dụng nhiệm vụ này để xác định vị trí chính của cơ thể, phân tích tư thế, và phân loại các chuyển động. Nhiệm vụ này sử dụng các mô hình học máy (ML) bạn có thể làm việc với các hình ảnh hoặc video đơn lẻ. Tác vụ sẽ xuất ra các điểm mốc tạo dáng cơ thể trong hình ảnh và toạ độ trong các 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 Điểm mốc tư thế 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 cho tính năng Mốc quan trọng tư thế cung cấp 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 bằng cách tạo ứng dụng tạo điểm mốc cho tư thế của riêng bạn. Bạn có thể xem, chạy và chỉnh sửa mã ví dụ Trình phân tích tư thế 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 Công cụ phân tích tư thế. Để 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 Pose qua @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 -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Mẫu

Tác vụ Tạo điểm mốc MediaPipe Pose cần có một mô hình đã huấn luyện tương thích với chức năng này 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 Điểm mốc tư thế, 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 tính năng Phân cách tư thế để 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 Tạo điểm mốc với các lựa 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 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 cho Web và JavaScript ứng dụng:

Tên lựa chọn	Mô tả	Khoảng giá trị	Giá trị mặc định
`runningMode`	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`
`numPoses`	Số lượng tư thế tối đa có thể được phát hiện bởi Điểm mốc tư thế.	`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 số tin cậy tối thiểu khi xuất hiện tư thế điểm số trong tính năng phát hiện điểm mốc tư thế.	`Float [0.0,1.0]`	`0.5`
`minTrackingConfidence`	Điểm tin cậy tối thiểu cho hoạt động theo dõi tư thế để được coi là thành công.	`Float [0.0,1.0]`	`0.5`
`outputSegmentationMasks`	Liệu Trình xác định tư thế có xuất ra mặt nạ phân đoạn cho tư thế.	`Boolean`	`False`

Chuẩn bị dữ liệu

Tạo điểm ảnh tư thế có thể phát hiện các tư thế 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 các tư thế tạo điểm mốc 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 tư thế xảy ra trong video.

Chạy tác vụ

Điểm mốc tư thế sử dụng detect() (với 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 tạo vị trí 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 phân cách tư thế sẽ chạy một cách đồng bộ và chặn luồng xen kẽ của người dùng. Nếu bạn phát hiện các tư thế 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 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 hoàn chỉnh hơn việc chạy tác vụ Xác định vị trí tư thế, hãy xem mã ví dụ.

Xử lý và hiện kết quả

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

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

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

x và y: Toạ độ điểm mốc được chuẩn hoá trong khoảng từ 0,0 đến 1,0 theo chiều rộng và chiều cao của hình ảnh (x) (y).
z: Độ sâu của mốc, trong đó độ sâu ở điểm giữa hông là máy chủ gốc. Giá trị càng nhỏ thì điểm mốc càng gần camera. Chiến lược phát hành đĩa đơn độ lớn của z có cùng tỷ lệ với x.
visibility: Khả năng điểm mốc hiển thị trong hình ảnh.

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

x, y và z: Toạ độ 3 chiều thế giới thực tính bằng mét, với là điểm giữa của hông.
visibility: Khả năng điểm mốc hiển thị 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 tuỳ chọn thể hiện khả năng thuộc về từng pixel cho một người bị 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ã ví dụ về Điểm quan hệ tư thế minh hoạ cách hiển thị kết quả được trả về từ tác vụ, hãy xem mã ví dụ