Nhiệm vụ MediaPipe Image Segmenter cho phép bạn chia hình ảnh thành các khu vực dựa trên danh mục được xác định trước để áp dụng các 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 Công cụ phân đoạn hình ảnh 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 nhiệm 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 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 của riêng mình. Bạn có thể xem, chạy và chỉnh sửa mã mẫu Image Segmenter 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 Image Segmenter. Để 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 có sẵn thông qua gói MediaPipe @mediapipe/tasks-vision
nay. 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ụ Trình phân đoạn hình ảnh MediaPipe cần có 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 Công cụ phân đoạn hình ảnh, hãy xem phần Mô hình tổng quan về tác 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 Image Segmenter (Phân đoạn hình ảnh) để chuẩn bị nhiệm vụ chạy thông tin suy luậ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 Công cụ 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 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();
Để triển khai hoàn chỉnh hơn việc tạo 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 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 |
|---|---|---|---|
runningMode |
Đặt chế độ chạy cho tác vụ. Có hai chế độ: IMAGE: Chế độ nhập một hình ảnh. VIDEO: Chế độ dành cho các khung hình đã giải mã của video hoặc trên một luồng phát trực tiếp dữ liệu đầu vào, chẳng hạn như từ máy ảnh. |
{IMAGE, VIDEO} |
IMAGE |
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 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ị số thực, trong đó mỗi giá trị số thực đạ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 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 có thể phân đoạn các đối tượng trong hình ảnh ở bất kỳ định dạng nào được 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 Image Segmenter 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 sử dụng phương thức segment() với chế độ hình ảnh và phương thức segmentForVideo() có chế độ video để kích hoạt thông tin dự đoán. Trình phân đoạn hình ảnh 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 hàm 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ụ:
Bài đăng có 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 hoàn chỉnh hơn việc chạy tác vụ Image Segmenter, hãy xem ví dụ về mã.
Xử lý và hiển thị kết quả
Khi chạy dự đoán, nhiệm 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 dữ liệu đầ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 minh hoạ kết quả đầu ra của tác vụ cho một 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ị số thực giữa [0, 1].
Đầu ra của mặt nạ tin cậy cho danh mục và hình ảnh gố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 kết quả đầu ra của tác vụ cho một 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 giành chiến thắng có điểm số cao nhất trong các danh mục mà mô hình có thể công nhậ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ã ví dụ về Công cụ 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.