Tác vụ Trình phát hiện đối tượng của MediaPipe cho phép bạn phát hiện sự hiện diện và vị trí của nhiều loại đối tượng. Tác vụ này lấy dữ liệu hình ảnh và xuất ra danh sách kết quả phát hiện, mỗi kết quả đại diện cho một đối tượng được xác định trong hình ảnh. Bạn có thể xem, chạy và chỉnh sửa ví dụ về Trình phát hiện đối tượng chỉ bằng trình duyệt 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.
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, đặc biệt là để sử dụng Trình phát hiện đối tượng. Để biết thông tin chung về cách thiết lập môi trường phát triển web và JavaScript, 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
Mã Trình phát hiện đối tượng có sẵn thông qua gói @mediapipe/tasks-vision
NPM MediaPipe. Bạn có thể
tìm và tải các thư viện này xuống bằng cách làm theo hướng dẫn trong hướng dẫn Thiết lập nền tảng
.
Bạn có thể cài đặt các gói bắt buộc thông qua NPM bằng lệnh sau:
npm install @mediapipe/tasks-vision
Nếu 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ẻ <head> trong tệp HTML:
<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
crossorigin="anonymous"></script>
</head>
Mô hình
Tác vụ Trình phát hiện đối tượng của MediaPipe 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 có sẵn cho Trình phát hiện đối tượng, hãy xem phần tổng quan về tác vụ trong phần Mô hình.
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 tác vụ
Sử dụng một trong các hàm ObjectDetector.createFrom...() của Trình phát hiện đối tượng để 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 đã được 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(), cho phép bạn đặt thêm các lựa chọn cấu hình. Để biết thêm thông tin về các lựa chọn cấu hình có sẵn, hãy xem
phần Các lựa chọn về cấu hình.
Đoạn mã sau đây minh hoạ cách xây dựng và định cấu hình tác vụ này:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
objectDetector = await ObjectDetector.createFromOptions(vision, {
baseOptions: {
modelAssetPath: `https://storage.googleapis.com/mediapipe-tasks/object_detector/efficientdet_lite0_uint8.tflite`
},
scoreThreshold: 0.5,
runningMode: runningMode
});
Để biết cách triển khai đầy đủ hơn về việc tạo tác vụ Trình phát hiện đối tượng, 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 ứng dụng web:
| Tên lựa chọn | Mô tả | Phạm vi giá trị | Giá trị mặc định |
|---|---|---|---|
runningMode |
Đặt chế độ chạy cho tác vụ. Có 2
chế độ: IMAGE: Chế độ cho dữ liệu đầu vào là hình ảnh đơn. VIDEO: Chế độ cho các khung hình đã giải mã của video hoặc trên sự kiện phát trực tiếp dữ liệu đầu vào, chẳng hạn như từ máy ảnh. |
{IMAGE, VIDEO} |
IMAGE |
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 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 API Trình ghi siêu dữ liệu TensorFlow Lite
|
Mã ngôn ngữ | vi |
maxResults |
Đặt số lượng tối đa không bắt buộc của kết quả phát hiện có điểm số cao nhất để trả về. | Bất kỳ số dương nào | -1 (tất cả kết quả đều được trả về) |
scoreThreshold |
Đặt ngưỡng điểm dự đoán ghi đè ngưỡng được cung cấp trong siêu dữ liệu mô hình (nếu có). Kết quả dưới giá trị này sẽ bị từ chối. | Bất kỳ số thực nào | Chưa đặt |
categoryAllowlist |
Đặt danh sách không bắt buộc gồm các tên danh mục được cho phép. Nếu không trống, kết quả phát hiện có tên danh mục không nằm trong tập hợp này sẽ bị lọc. Tên danh mục trùng lặp hoặc không xác định sẽ bị bỏ qua.
Tuỳ chọn này loại trừ lẫn nhau với categoryDenylist và việc sử dụng cả hai sẽ dẫn đến lỗi. |
Bất kỳ chuỗi nào | Chưa đặt |
categoryDenylist |
Đặt danh sách không bắt buộc gồm các tên danh mục không được phép. Nếu không trống, kết quả phát hiện có tên danh mục nằm trong tập hợp này sẽ bị lọc. Tên danh mục trùng lặp hoặc không xác định sẽ bị bỏ qua. Tuỳ chọn này loại trừ lẫn nhau với categoryAllowlist và việc sử dụng cả hai sẽ dẫn đến lỗi. |
Bất kỳ chuỗi nào | Chưa đặt |
Chuẩn bị dữ liệu
Trình phát hiện đối tượng có thể phát hiện các đối tượng trong hình ảnh ở mọi định dạng được trình duyệt lưu trữ hỗ trợ. Tác vụ này cũng xử lý quá trình 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ị. Để phát hiện các đối tượng trong video, bạn có thể sử dụng API để xử lý nhanh từng khung hình một, sử dụng dấu thời gian của khung hình để xác định thời điểm cử chỉ xảy ra trong video.
Chạy tác vụ
Trình phát hiện đối tượng sử dụng detect() để xử lý hình ảnh đơn và detectForVideo() để phát hiện các đối tượng trong khung hình video. Tác vụ này xử lý dữ liệu, cố gắng nhận dạng các đối tượng, sau đó báo cáo kết quả.
Các lệnh gọi đến phương thức detect() và detectForVideo() chạy đồng bộ và chặn luồng giao diện người dùng. Nếu bạn nhận dạng các đối tượng trong khung hình video từ máy ảnh của thiết bị, thì mỗi lần phân loại 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 quá trình phát hiện trên một luồng khác.
Đ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; const detections = objectDetector.detect(image);
Video
await objectDetector.setOptions({ runningMode: "video" }); let lastVideoTime = -1; function renderLoop(): void { const video = document.getElementById("video"); if (video.currentTime !== lastVideoTime) { const detections = detector.detectForVideo(video); processResults(detections); lastVideoTime = video.currentTime; } requestAnimationFrame(() => { renderLoop(); }); }
Để biết cách triển khai đầy đủ hơn về việc chạy tác vụ Trình phát hiện đối tượng, hãy xem ví dụ về mã.
Xử lý và hiển thị kết quả
Trình phát hiện đối tượng tạo một đối tượng kết quả phát hiện cho mỗi lần chạy phát hiện. Đối tượng kết quả chứa danh sách các kết quả phát hiện, trong đó mỗi kết quả phát hiện bao gồm một hộp giới hạn và thông tin danh mục về đối tượng được phát hiện, bao gồm tên của đối tượng và điểm tin cậy.
Sau đây là ví dụ về dữ liệu đầu ra từ tác vụ này:
ObjectDetectorResult:
Detection #0:
Box: (x: 355, y: 133, w: 190, h: 206)
Categories:
index : 17
score : 0.73828
class name : dog
Detection #1:
Box: (x: 103, y: 15, w: 138, h: 369)
Categories:
index : 17
score : 0.73047
class name : dog
Hình ảnh sau đây cho thấy hình ảnh trực quan về kết quả của tác vụ:
Mã ví dụ về Trình phát hiện đối tượng minh hoạ cách hiển thị kết quả phát hiện được trả về từ tác vụ, hãy xem ví dụ về mã để biết thông tin chi tiết.