Nhiệm vụ của 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 để áp dụng hiệu ứng hình ảnh như làm mờ nền. Các hướng dẫn cho bạn cách sử dụng Trình phân đoạn hình ảnh cho Nút và các ứng dụng web. Cho thông tin khác về tính năng, kiểu máy và tuỳ 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ã ví dụ cho Trình phân đoạn hình ảnh cung cấp cách triển khai hoàn chỉnh trình phân đoạn 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 bạn. Bạn có thể xem, chạy và chỉnh sửa Công cụ phân đoạn hình ảnh 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à mã dự án cụ thể để sử dụng Trình phân đoạn hình ảnh. Để 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 đượ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ụ về Trình phân đoạn hình ảnh MediaPipe cần có một mô hình đã qua đào tạo 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, 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 để
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
Công cụ phân đoạn hình ảnh với các lựa chọn cấu hình. Để biết thêm thông tin về nhiệm vụ
cấu hình, hãy xem 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:
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 về việc tạo tác vụ Trình phân đoạn hình ảnh, hãy xem mã ví dụ.
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 danh mục chiến thắng
giá trị. |
{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
bản đồ điểm số 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 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 |
resultListener |
Thiết lập trình nghe kết quả để nhận kết quả phân đoạn
không đồng bộ khi trình phân đoạn hình ảnh đang ở chế độ LIVE_STREAM .
Chỉ sử dụng được khi bạn đặt chế độ chạy 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 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 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 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 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 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ụ:
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 đầy đủ hơn việc chạy tác vụ Trình phân đoạn hình ảnh, hãy xem mã ví dụ.
Xử lý và hiện kết quả
Sau khi chạy dự đoá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
hàm callback. Nội dung của đầu ra phụ thuộc vào outputType
bạn đặt
khi bạn đị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 tác 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 danh mục
mặt nạ tin cậy. Đầu ra mặt nạ tin cậy chứa các giá trị số thực giữa
[0, 1]
.
Đầu ra mặt nạ tin cậy cho danh mục và hình ảnh gốc. Hình ảnh nguồn từ Pascal VOC 2012 tập dữ liệu.
Giá trị 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 danh mục
mặt nạ giá trị. Phạm vi mặt nạ danh mục là [0, 255]
và mỗi giá trị pixel
biểu thị chỉ mục danh mục chiến thắng của dữ liệu đầu ra của mô hình. Hạng mục chiến thắng
chỉ mục có điểm cao nhất trong số các danh mục mà mô hình có thể nhận ra.
Đầu ra mặt nạ danh mục và hình ảnh gốc. Hình ảnh nguồn từ Pascal VOC 2012 tập dữ liệu.
Mã ví dụ về Trình phân đoạn hình ảnh minh hoạ cách hiển thị phân đoạn kết quả được trả về từ tác vụ, hãy xem mã ví dụ để biết thông tin chi tiết.