Hướng dẫn phân đoạn hình ảnh dành cho web

Tác vụ Trình phân đoạn hình ảnh MediaPipe cho phép bạn chia hình ảnh thành các vùng dựa trên các danh mục được xác định trước để áp dụng hiệu ứng hình ảnh như làm mờ nền. Các hướng dẫn này cho bạn biết cách sử dụng Trình phân đoạn hình ảnh cho ứng dụng web và Node. Để biết thêm thông tin về các tính năng, mô hình và tuỳ 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 Trình phân đoạn hình ảnh cung cấp cách triển khai hoàn chỉnh nhiệm vụ này trong JavaScript để bạn tham khảo. Mã này giúp bạn kiểm thử nhiệm vụ này và bắt đầu xây dựng ứng dụng phân đoạn hình ảnh của riêng mình. Bạn có thể xem, chạy và chỉnh sửa mã ví dụ của Trình phân đoạn hình ảnh 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à dự án mã dành riêng cho việc sử dụng Trình phân đoạn hình ảnh. Để biết thông tin chung về cách thiết lập môi trường phát triển cho việc sử dụng các tác vụ MediaPipe, 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

Bạn có thể sử dụng mã Trình phân đoạn hình ảnh thông qua gói MediaPipe @mediapipe/tasks-vision NPM. 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 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 bằng mã sau đây để tạo bả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.js"
    crossorigin="anonymous"></script>
</head>

Mẫu

Tác vụ Trình phân đoạn hình ảnh 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 hiện có cho Trình phân đoạn hình ảnh, hãy xem phần Mô hình trong phần tổng quan về tác vụ.

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 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 để 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ủa bạn đã được tải vào bộ nhớ, bạn có thể sử dụng phương thức createFromModelBuffer().

Mã ví dụ 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 Trình phân đoạn hình ảnh bằng các tuỳ chọn cấu hình. Để biết thêm thông tin về cấu hình tác vụ, 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ác tuỳ chọn tuỳ chỉnh:

runningMode = "IMAGE";

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

  imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
    },
    outputCategoryMask: true,
    outputConfidenceMasks: false
    runningMode: runningMode
  });
}
createImageSegmenter();

Để triển khai đầy đủ hơn việc tạo tác vụ Trình phân đoạn hình ảnh, hãy xem ví dụ về mã.

Các lựa chọn về cấu hình

Tác vụ này có các tuỳ chọn cấu hình sau đây cho ứng dụng Web:

Tên tuỳ chọn Mô tả Phạm vi giá trị Giá trị mặc định
outputCategoryMask 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 uint8, trong đó mỗi giá trị pixel cho biết giá trị danh mục chiến thắ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ị float, trong đó mỗi giá trị float đại diện cho bản đồ điểm số tin cậy của danh mục. {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 đố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 ghi siêu dữ liệu TensorFlow Lite Mã ngôn ngữ vi
resultListener Đặt trình nghe kết quả để nhận kết quả phân đoạn một cách không đồng bộ khi trình phân đoạn hình ảnh ở chế độ LIVE_STREAM. Chỉ có thể sử dụng khi chế độ chạy được đặt thành LIVE_STREAM Không áp dụng Không áp dụng

Chuẩn bị dữ liệu

Trình phân đoạn hình ảnh 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ý việc xử lý trước 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 Trình phân đoạn hình ảnh 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 hình 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 chạy 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 sử dụng phương thức segment() với chế độ hình ảnh và phương thức segmentForVideo() với chế độ video để kích hoạt suy luận. Trình phân đoạn hình ảnh trả về các phân đoạn đã phát hiện dưới dạng dữ liệu hình ảnh cho một hàm gọi lại mà bạn đặt khi chạy quy trình suy luận cho tác vụ.

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

Hình ảnh

const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);

Video

async function renderLoop(): void {
  const video = document.getElementById("video");
  let startTimeMs = performance.now();

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

  requestAnimationFrame(() => {
    renderLoop();
  });
}

Để triển khai đầy đủ hơn việc chạy tác vụ Trình phân đoạn hình ảnh, hãy xem ví dụ về mã.

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

Khi chạy quy trình suy luận, tác vụ Trình phân đoạn hình ảnh sẽ trả về dữ liệu hình ảnh phân đoạn cho một hàm gọi lại. Nội dung của đầu ra phụ thuộc vào outputType mà bạn đặt khi định cấu hình tác vụ.

Các phần sau đây trình bày ví dụ về dữ liệu đầu ra của nhiệm vụ này:

Độ tin cậy của danh mục

Các hình ảnh sau đây cho thấy hình ảnh trực quan của kết quả tác vụ cho mặt nạ độ tin cậy của danh mục. Đầu ra của mặt nạ độ tin cậy chứa các giá trị float trong khoảng [0, 1].

Hai cô gái cưỡi ngựa và một cô gái đi bộ bên cạnh ngựa Mặt nạ hình ảnh phác thảo hình dạng của các cô gái và con ngựa trong bức ảnh trước. Nửa bên trái của đường viền hình ảnh được chụp, nhưng nửa bên phải của hình ảnh thì không

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

Giá trị danh mục

Các hình ảnh sau đây cho thấy hình ảnh trực quan của kết quả tác vụ cho mặt nạ giá trị danh mục. Phạm vi mặt nạ danh mục là [0, 255] và mỗi giá trị pixel đại diện cho chỉ mục danh mục chiến thắng của đầu ra mô hình. Chỉ mục danh mục chiến thắng có điểm số cao nhất trong số các danh mục mà mô hình có thể nhận dạng.

Hai cô gái cưỡi ngựa và một cô gái đi bộ bên cạnh ngựa Mặt nạ hình ảnh phác thảo hình dạng của các cô gái và con ngựa trong hình ảnh trước. Hình dạng của cả ba cô gái và con ngựa đều được che chính xác

Kết quả đầ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ã ví dụ về Trình phân đoạn hình ảnh minh hoạ cách hiển thị kết quả phân đoạn được trả về từ tác vụ, hãy xem ví dụ về mã để biết thông tin chi tiết.