Xin giới thiệu LiteRT: Môi trường thời gian chạy hiệu suất cao của Google dành cho AI trên thiết bị, trước đây là TensorFlow Lite.

Trang này được dịch bởi Cloud Translation API.

Hướng dẫn phát hiện đối tượng cho web

Tác vụ Trình phát hiện đối tượng MediaPipe cho phép bạn phát hiện sự hiện diện và vị trí của nhiều các lớp đối tượng. Tác vụ này lấy dữ liệu hình ảnh và xuất ra một danh sách phát hiện kết quả, mỗi kết quả đại diện cho một đối tượng được xác định trong hình ảnh. Mã mẫu được mô tả trong các hướng dẫn này, có trên CodePen.

Bạn có thể xem công việc này trong thực tế bằng cách xem bản minh hoạ. Để biết thêm thông tin về các tính năng, mô hình và các tuỳ chọn cấu hình của tác vụ này, xem Tổng quan.

Ví dụ về mã

Mã ví dụ cho Trình phát hiện đối tượng cung cấp cách triển khai hoàn chỉnh cho 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 loại văn bản của riêng bạn. Bạn có thể xem, chạy và chỉnh sửa mã ví dụ về Trình phát hiện đối tượng 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 cụ thể để sử dụng Trình phát hiện đối tượng. Để biết thông tin chung về thiết lập môi trường phát triển web và JavaScript, 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át hiện đối tượng đượ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 bằng cách làm theo hướng dẫn trong nền tảng Hướng dẫn thiết lập.

Bạn có thể cài đặt các gói bắt buộc thông qua kháng nghị bằng lệnh sau:

npm install @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ẻ <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.js"
    crossorigin="anonymous"></script>
</head>

Mẫu

Nhiệm vụ Trình phát hiện đối tượng MediaPipe yêu cầu một mô hình đã huấn luyện 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ó dành cho Trình phát hiện đối tượng, hãy xem tổng quan về tác vụ trong 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 ObjectDetector.createFrom...() của Trình phát hiện đối tượng để 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ã dưới đây minh hoạ cách sử dụng hàm createFromOptions(), cho phép bạn đặt thêm cấu hình . Để biết thêm thông tin về các lựa chọn cấu hình hiện có, 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ụ 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
});

Để triển khai đầy đủ hơn việc tạo tác vụ Trình phát hiện đối tượng, 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
`runningMode`	Thiết lập chế độ chạy cho tác vụ. Có hai chế độ: HÌNH ẢNH: Chế độ cho đầu vào một hình ảnh. VIDEO: Chế độ cho khung đã giải mã của hoặc sự kiện phát trực tiếp dữ liệu đầu vào, chẳng hạn như từ camera.	{`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 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
`maxResults`	Đặt số lượng kết quả phát hiện có điểm số cao nhất (không bắt buộc) thành lợi nhuận.	Bất kỳ số dương nào	-1 (trả về tất cả kết quả)
`scoreThreshold`	Đặt ngưỡng điểm số dự đoán ghi đè ngưỡng điểm được cung cấp trong siêu dữ liệu của mô hình (nếu có). Những kết quả thấp hơn giá trị này sẽ bị từ chối.	Số thực bất kỳ	Chưa đặt
`categoryAllowlist`	Đặt danh sách các tên danh mục được phép (không bắt buộc). Nếu ô 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ẽ là đã lọc ra. Tên danh mục trùng lặp hoặc không xác định sẽ bị bỏ qua. Lựa chọn này loại trừ lẫn nhau với `categoryDenylist` và sử dụng cả hai đều dẫn đến lỗi.	Chuỗi bất kỳ	Chưa đặt
`categoryDenylist`	Đặt danh sách tên danh mục không được phép (không bắt buộc). Nếu kết quả phát hiện không trống, có tên danh mục nằm trong tập hợp này sẽ được lọc bị loại. Tên danh mục trùng lặp hoặc không xác định sẽ bị bỏ qua. Lựa chọn này mang tính tương đồng chỉ có với `categoryAllowlist` và sử dụng cả hai đều dẫn đến lỗi.	Chuỗi bất kỳ	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 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ị. Để phát hiện các đối tượng trong video, bạn có thể sử dụng API để xử lý nhanh một khung hình tại một thời điểm bằng cách sử dụng dấu thời gian của để xác định thời điểm các 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ý các hình ảnh đơn lẻ và detectForVideo() phát hiện đối tượng trong khung video. Tác vụ được xử lý dữ liệu, cố gắng nhận dạng đối tượng rồi báo cáo kết quả.

Các lệnh gọi đến phương thức detect() và detectForVideo() 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 nhận ra vật thể trong từ camera của một thiết bị, mỗi phân loại chặn đoạn mã chuỗi. 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 tính năng phát hiện trên chuỗi khác.

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;
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();
  });
}

Để triển khai hoàn chỉnh hơn quá trình chạy tác vụ Trình phát hiện đối tượng, hãy xem mã ví dụ.

Xử lý và hiện 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 phát hiện. Đối tượng kết quả chứa một danh sách phát hiện, trong đó mỗi lần phát hiện bao gồm thông tin danh mục và hộp giới hạn 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 của 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 minh hoạ 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ị tính năng phát hiệ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.