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ân loại hình ảnh cho Web

Tác vụ Trình phân loại hình ảnh MediaPipe cho phép bạn phân loại hình ảnh. Bạn có thể sử dụng nhiệm vụ này nhằm xác định nội dung mà một hình ảnh đại diện cho một tập hợp các danh mục được xác định vào thời gian huấn luyện. Các hướng dẫn này cho bạn biết cách sử dụng Trình phân loại hình ảnh cho Nút và ứng dụng web.

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ề tính năng, kiểu máy và các lựa chọn cấu hình của nhiệm vụ này, xem phần Tổng quan.

Ví dụ về mã

Mã ví dụ cho Trình phân loại hình ảnh cung cấp cách triển khai hoàn chỉnh 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 hình ảnh của riêng bạn. Bạn có thể xem, chạy và chỉnh sửa Mã ví dụ của Công cụ phân loại 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à mã dự án cụ thể để sử dụng Công cụ phân loại 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 dành cho Web.

Gói JavaScript

Mã Phân loại 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 @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:

<!-- 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ân loại hình ảnh MediaPipe cần có 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ó cho Công cụ phân loại 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 loại 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 loại hình ảnh với các lựa chọn cấu hình. Để biết thêm thông tin về cấu hình 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ông cụ tuỳ chỉnh tùy chọn:

async function createImageClassifier {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"
  );
  imageClassifier = await ImageClassifier.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_classifier/efficientnet_lite0/float32/1/efficientnet_lite0.tflite`
    },
  });
}

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ân loại có điểm số cao nhất (không bắt buộc) thành lợi nhuận. Nếu < 0, tất cả kết quả có sẵn sẽ được trả về.	Bất kỳ số dương nào	`-1`
`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ân loại 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ân loại 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
`resultListener`	Thiết lập trình nghe kết quả để nhận kết quả phân loại không đồng bộ khi Trình phân loại hình ảnh đang phát trực tiếp . Chỉ sử dụng được khi bạn đặt chế độ chạy thành `LIVE_STREAM`	Không áp dụng	Chưa đặt

Chuẩn bị dữ liệu

Trình phân loại hình ảnh có thể phân loại các đối tượng trong hình ảnh ở bất kỳ định dạng nào được hỗ trợ bởi 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 classify() và classifyForVideo() của Trình phân loại 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 loại các đối tượng theo từ camera của một thiết bị, mỗi phân loại sẽ chặn đoạn mã 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 classify() và classifyForVideo() trên một chuỗi khác.

Chạy tác vụ

Trình phân loại hình ảnh sử dụng phương thức classify() với chế độ hình ảnh và phương thức classifyForVideo() có chế độ video để kích hoạt suy luận. Image Classifier API sẽ trả về các danh mục có thể có cho các đối tượng trong hình ảnh đầu vào.

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 imageClassifierResult = imageClassifier.classify(image);

Video

const video = document.getElementById("video");
await imageClassifier.setOptions({ runningMode: "VIDEO" });

const timestamp = performance.now();
const classificationResult = await imageClassifier.classifyForVideo(
    video,
    timestamp
  );

Để triển khai đầy đủ hơn về việc chạy tác vụ Trình phân loại 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 loại hình ảnh sẽ trả về một Đối tượng ImageClassifierResult chứa danh sách các danh mục có thể có cho các đối tượng trong hình ảnh hoặc khung đầu vào.

Sau đây là ví dụ về dữ liệu đầu ra của tác vụ này:

ImageClassifierResult:
 Classifications #0 (single classification head):
  head index: 0
  category #0:
   category name: "/m/01bwb9"
   display name: "Passer domesticus"
   score: 0.91406
   index: 671
  category #1:
   category name: "/m/01bwbt"
   display name: "Passer montanus"
   score: 0.00391
   index: 670

Kết quả này thu được bằng cách chạy Trình phân loại chim vào:

Mã ví dụ của Trình phân loại hình ảnh minh hoạ cách hiển thị kết quả phân loại kết quả được trả về từ tác vụ, hãy xem mã ví dụ để biết thông tin chi tiết.