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

Nhiệm vụ Trình phân đoạn hình ảnh tương tác MediaPipe lấy một vị trí trong một 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 hình ảnh . Các hướng dẫn này chỉ cho bạn cách sử dụng Trình phân đoạn hình ảnh tương tác cho Nút và web 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ã ví dụ cho Trình phân đoạn hình ảnh tương tác cung cấp cách triển khai hoàn chỉnh 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 phân đoạn hình ảnh tương tác của riêng bạn. Bạn có thể xem, chạy và chỉnh sửa Trình phân đoạn hình ảnh tương tác mã ví dụ chỉ bằng trình duyệt web. Bạn cũng có thể xem mã cho ví dụ này trên GitHub.

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à lập trình dự án cụ thể để sử dụng Trình phân đoạn hình ảnh tương tác. Để biết thông tin chung về thiết lập môi trường phát triển để sử dụng các tác vụ MediaPipe, 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ã Trình phân đoạn hình ảnh tương tác đượ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 qua các đường liên kết được cung cấp trong nền tảng Hướng dẫn thiết lập.

Bạn có thể cài đặt các gói cần thiết bằng mã sau để thử nghiệm 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ụ qua mạng phân phối nội dung (CDN) hãy thêm mã sau vào thẻ trong tệp HTML của bạn:

<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ân đoạn hình ảnh tương tác MediaPipe cần có một mô hình đã huấn luyện tương thích với công việc. Để biết thêm thông tin về các mô hình đã huấn luyện hiện có cho Trình phân đoạn hình ảnh tương tác, 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ân đoạn hình ảnh tương tác để 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ân đoạn hình ảnh tương tá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:

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ả Khoảng giá trị Giá trị mặc định
outputCategoryMask Nếu bạn đặt thành True, kết quả sẽ bao gồm một 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ó thuộc đối tượng tại khu vực quan tâm. {True, False} False
outputConfidenceMasks Nếu bạn đặt thành True, kết quả sẽ bao gồm một mặt nạ phân đoạn dưới dạng hình ảnh giá trị số thực, trong đó mỗi giá trị số thực biểu thị độ tin cậy rằng pixel là một phần của đối tượng nằm tại khu vực 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 về mô hình của công việc (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 TensorFlow Lite Metadata Writer API Mã ngôn ngữ vi

Chuẩn bị dữ liệu

Trình 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 ở bất kỳ định dạng nào 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ác lệnh gọi đến phương thức segment() và segmentForVideo() của Trình phân đoạn hình ảnh tương tác 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ân đoạn đối tượng trong từ camera trên thiết bị, mỗi tác vụ phân đoạn sẽ chặn ảnh chuỗi. 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 chuỗi khác.

Chạy tác vụ

Trình phân đoạn hình ảnh tương tác sử dụng phương thức segment() để kích hoạt thông tin suy luận. Chiến lược phát hành đĩa đơn Trình phân đoạn hình ảnh tương tác trả về các phân đoạn đã phát hiện dưới dạng dữ liệu hình ảnh cho lệnh gọi lại mà bạn đặt khi chạy dự đoán cho tác vụ.

Mã sau đây minh hoạ cách thực thi quá 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);