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

Tác vụ của Công cụ 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 dữ liệu 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à ứ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ã mẫu cho Công cụ phân đoạn hình ảnh tương tác 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 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 mã mẫu của Công cụ phân đoạn hình ảnh tương tác chỉ bằng trình duyệt web. Bạn cũng có thể xem lại 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 cho các dự án cụ thể để 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 nhằm sử dụng các tác vụ của MediaPipe, bao gồm 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 @mediapipe/tasks-vision CNP. 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 trong 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 có mã sau đây để thử nghiệm cục bộ bằng cách dù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ụ của 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.js"
    crossorigin="anonymous"></script>
</head>

Mẫu

Tác vụ Phân đoạn hình ảnh tương tác MediaPipe 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 Công cụ phân đoạn hình ảnh tương tác, hãy xem phần Mô hình tổng quan về nhiệm 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 Phân đoạn hình ảnh tương tác để chuẩn bị tác vụ chạy thông tin 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 Trình phân đoạn hình ảnh tương tác 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:

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

Tên lựa chọn	Nội dung mô tả	Khoảng giá trị	Giá trị mặc định
`outputCategoryMask`	Nếu bạn đặt thành `True`, thì 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 nằm ở khu vực quan tâm hay không.	{`True, False`}	`False`
`outputConfidenceMasks`	Nếu được đặ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ị niềm tin rằng pixel là một phần của đối tượng nằm ở 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 của mô hình của tác vụ, nếu có. Giá trị mặc định là `en` đối với 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 cách sử dụng API Trình viết 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 ở bất kỳ định dạng nào mà trình duyệt lưu trữ 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ị.

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 đồ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 chặ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ụ

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 dự đoán. Trình phân đoạn hình ảnh tương tác sẽ 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 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);

Để triển khai hoàn chỉnh hơn việc chạy tác vụ Phân đoạn hình ảnh tương tác, hãy xem ví dụ về mã.

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

Sau khi chạy dự đoán, tác vụ Phân đoạn hình ảnh tương tác sẽ trả về dữ liệu hình ảnh phân đoạn cho hàm gọi lại. Nội dung của dữ liệu đầu ra là dữ liệu hình ảnh và có thể bao gồm mặt nạ danh mục, mặt nạ tin cậy hoặc cả hai, tuỳ thuộc vào chế độ bạn đặt khi định cấu hình tác vụ.

Các phần sau đây giải thích thêm về dữ liệu đầu ra của nhiệm vụ này:

Mặt nạ danh mục

Các hình ảnh sau đây minh hoạ kết quả đầu ra của tác vụ cho một mặt nạ giá trị danh mục với khu vực điểm quan tâm được biểu thị. Mỗi pixel là một giá trị uint8 cho biết liệu pixel có thuộc đối tượng nằm ở khu vực quan tâm hay không. Vòng tròn đen trắng trên hình ảnh thứ hai cho biết khu vực quan tâm đã chọn.

Đầu ra của mặt nạ danh mục và hình ảnh gốc. Hình ảnh nguồn từ tập dữ liệu Pascal VOC 2012.

Mặt nạ tin cậy

Đầu ra của mặt nạ tin cậy chứa các giá trị số thực giữa [0, 1] đối với từng kênh đầu vào hình ảnh. Giá trị cao hơn cho thấy độ tin cậy cao hơn rằng pixel hình ảnh là một phần của đối tượng nằm ở khu vực quan tâm.

Mã ví dụ về Bộ phân đoạn hình ảnh tương tác minh hoạ cách hiển thị kết quả phân loại được trả về từ tác vụ. Hãy xem ví dụ về mã để biết thông tin chi tiết.