Hướng dẫn về phân đoạn hình ảnh tương tác dành cho web

Tác vụ Phân đoạn hình ảnh tương tác của MediaPipe lấy một vị trí trong hình ảnh, ước tính ranh giới của một đối tượng tại vị trí đó và trả về phân đoạn cho đối tượng dưới dạng dữ liệu hình ảnh. Các hướng dẫn này cho biết cách sử dụng công cụ Phân đoạn hình ảnh tương tác cho các ứng dụng Node và ứng dụng web. Để 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ã ví dụ cho công cụ Phân đoạn hình ảnh tương tác 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 phân đoạn hình ảnh tương tác của riêng mình. Bạn có thể xem, chạy và chỉnh sửa ví dụ về công cụ Phân đoạn hình ảnh tương tác example 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 và dự án mã dành riêng cho việc sử dụng công cụ Phân đoạn hình ảnh tương tác. Để biết thông tin chung về cách thiết lập môi trường phát triển để sử dụng các tác vụ MediaPipe, bao gồm 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ã Phân đoạn hình ảnh tương tác có sẵn thông qua gói @mediapipe/tasks-vision NPM MediaPipe. Bạn có thể tìm và tải các thư viện này xuống từ các đường liên kết được cung cấp 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 bằng mã sau đây để dàn dựng cục bộ bằng lệnh sau:

npm install --save @mediapipe/tasks-vision

Nếu bạn 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ẻ trong tệp HTML:

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

Mô hình

Tác vụ Phân đoạn hình ảnh tương tác của MediaPipe yêu cầu một mô hình đã 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 có sẵn cho công cụ Phân đoạn hình ảnh tương tác, hãy xem phần tổng quan về tác vụ phần Mô hình.

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 công cụ Phân đoạn hình ảnh tương tác để 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 đã 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 công cụ Phân đoạn hình ảnh tương tác 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 phần 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:

async function createSegmenter() {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
  );

  interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
    },
  });
}
createSegmenter();

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 ứng dụng web:

Tên lựa chọn Mô tả Phạm vi giá trị Giá trị mặc định
outputCategoryMask Nếu được đặt thành True, đầu ra sẽ bao gồm mặt nạ phân đoạn dưới dạng hình ảnh uint8, trong đó mỗi giá trị pixel cho biết liệu pixel có phải là một phần của đối tượng nằm ở vùng quan tâm hay không. {True, False} False
outputConfidenceMasks Nếu được đặt thành True, đầu ra sẽ bao gồm mặt nạ phân đoạn dưới dạng hình ảnh giá trị dấu phẩy động, trong đó mỗi giá trị dấu phẩy động đại diện cho độ tin cậy rằng pixel là một phần của đối tượng nằm ở vùng quan tâm. {True, False} True
displayNamesLocale Đặt ngôn ngữ của nhãn để sử dụng cho tên hiển thị được cung cấp trong siêu dữ liệu của mô hình tác vụ (nếu có). Mặc định là en cho tiếng Anh. Bạn có thể thêm nhãn đã bản địa hoá vào siêu dữ liệu của mô hình tuỳ chỉnh bằng API Trình ghi siêu dữ liệu TensorFlow Lite Mã ngôn ngữ vi

Chuẩn bị dữ liệu

Công cụ Phân đoạn hình ảnh tương tác có thể phân đoạn các đối tượng trong hình ảnh ở mọi định dạng được 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ị.

Các lệnh gọi đến phương thức segment() và segmentForVideo() của công cụ Phân đoạn hình ảnh tương tác chạy đồng bộ và chặn luồng giao diện người dùng. Nếu bạn phân đoạn các đối tượng trong khung video từ máy ảnh của thiết bị, thì mỗi tác vụ phân đoạ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 segment() và segmentForVideo() trên một luồng khác.

Chạy tác vụ

Công cụ Phân đoạn hình ảnh tương tác sử dụng phương thức segment() để kích hoạt suy luận. Công cụ Phân đoạn hình ảnh tương tác trả về các phân đoạn được phát hiện dưới dạng dữ liệu hình ảnh cho một hàm callback mà bạn đặt khi chạy suy luận cho tác vụ.

Đoạn mã sau đây minh hoạ cách thực thi quy trình xử lý bằng mô hình tác vụ:

const image = document.getElementById("image") as HTMLImageElement;
interactiveSegmenter.segment(
  image,
  {
    keypoint: {
      x: event.offsetX / event.target.width,
      y: event.offsetY / event.target.height
    }
  },
  callback);