Tác vụ Phân đoạn hình ảnh của 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, chẳng hạn như làm mờ nền. Các hướng dẫn này cho bạn biết cách sử dụng Image Segmenter cho các ứng dụng Node và web. Để biết thêm thông tin về các chức 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 Image Segmenter cung cấp một quy trình triển khai hoàn chỉnh của tác vụ này bằng JavaScript để bạn tham khảo. Đoạn 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 của riêng mình. Bạn có thể xem, chạy và chỉnh sửa ví dụ về Trình phân đoạn hình ảnh 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ã của bạn, đặc biệt là để sử dụng Image Segmenter. Để 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á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ã Image Segmenter 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 từ 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 cần thiết bằng mã sau để 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ụ MediaPipe Image Segmenter yêu cầu một mô hình đã được huấn luyện và tương thích với tác vụ này. Để biết thêm thông tin về các mô hình được huấn luyện hiện có cho Công cụ 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 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 Image Segmenter để chuẩn bị tác vụ chạy các 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().
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 Image Segmenter bằng các lựa 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.
Đoạn 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:
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();
Để biết cách triển khai đầy đủ hơn về việc tạo một tác vụ Image Segmenter, 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 lựa chọn cấu hình sau đây cho các ứ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, đầu ra 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, đầu ra 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ị 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ó). 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ột mô hình tuỳ chỉnh bằng TensorFlow Lite Metadata Writer API |
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 công cụ phân đoạn hình ảnh ở chế độ LIVE_STREAM.
Chỉ có thể 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
Image Segmenter có thể phân đoạn các đối tượng trong hình ảnh ở mọi định dạng mà trình duyệt lưu trữ hỗ trợ. Tác vụ này cũng xử lý việc 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 Image Segmenter 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ừ camera 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 các worker trên web để chạy segment() và segmentForVideo() trên một luồng khác.
Chạy tác vụ
Image Segmenter 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. Image Segmenter 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 quy trình 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ụ:
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(); }); }
Để biết cách triển khai đầy đủ hơn về việc chạy một tác vụ Image Segmenter, hãy xem ví dụ.
Xử lý và hiển thị kết quả
Sau khi chạy suy luận, tác vụ Image Segmenter sẽ trả về dữ liệu hình ảnh phân đoạn cho một hàm callback. 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 minh hoạ 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 về kết quả của nhiệm vụ đối với một mặt nạ độ tin cậy của danh mục. Đầu ra mặt nạ độ tin cậy chứa các giá trị số thực trong khoảng [0, 1].
Hình ảnh gốc và đầu ra mặt nạ độ tin cậy của 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 về kết quả của nhiệm vụ đối với 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 của 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.
Hình ảnh gốc và đầu ra mặt nạ danh mục. Hình ảnh nguồn từ tập dữ liệu Pascal VOC 2012.
Mã ví dụ về Image Segmenter minh hoạ cách hiển thị kết quả phân đoạn do tác vụ trả về, hãy xem ví dụ để biết thông tin chi tiết.