Hướng dẫn phân loại hình ảnh cho Web

Tác vụ của 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 tác vụ này để xác định nội dung mà hình ảnh đại diện trong một tập hợp các danh mục được xác định tại thời điểm huấn luyện. Những hướng dẫn này chỉ cho bạn 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ách hoạt động của tác vụ này 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à 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 Trình phân loại 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 loại hình ảnh của riêng mình. Bạn có thể xem, chạy và chỉnh sửa mã ví dụ của Trình 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à các dự án mã dành riêng để sử dụng Công cụ phân loại hình ảnh. Để 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 dành cho web.

Gói JavaScript

Mã của Trình phân loại 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 @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:

<!-- 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

Tác vụ của Trình phân loại hình ảnh MediaPipe cần có một mô hình đã qua 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 được huấn luyện hiện có cho Trình phân loại 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 Trình phân loại hình ảnh để chuẩn bị tác vụ chạy thông tin dự đoá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 Trình phân loại hình ảnh bằng các tuỳ chọn cấu hình. Để biết thêm thông tin về các lựa chọn cấu hình, hãy xem phần Lựa 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:

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 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`
`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
`maxResults`	Đặt số lượng kết quả phân loại được tính điểm cao nhất (không bắt buộc) để trả về. Nếu < 0, hàm sẽ trả về tất cả kết quả hiện có.	Số dương bất kỳ	`-1`
`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ó). Những kết quả bên dưới giá trị này sẽ bị từ chối.	Số thực bất kỳ	Không đặt
`categoryAllowlist`	Đặt danh sách các tên danh mục được phép (không bắt buộc). Nếu không để trống, kết quả phân loại có tên danh mục không có tên trong tập hợp này sẽ bị lọc ra. 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.	Chuỗi bất kỳ	Không đặt
`categoryDenylist`	Đặt danh sách các tên danh mục không được phép (không bắt buộc). Nếu không để trống, kết quả phân loại có tên danh mục nằm trong tập hợp này sẽ bị lọc ra. 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ẽ gây ra lỗi.	Chuỗi bất kỳ	Không đặt
`resultListener`	Đặt trình nghe kết quả để nhận kết quả phân loại một cách không đồng bộ khi Trình phân loại hình ảnh đang ở chế độ phát trực tiếp. Chỉ có thể sử dụng khi bạn đặt chế độ chạy thành `LIVE_STREAM`	Không áp dụng	Không đặ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 ở mọi định dạng mà trình duyệt máy chủ 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 classify() và classifyForVideo() của Trình phân loại hình ảnh sẽ chạy đồ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 trong khung video bằng máy ảnh của thiết bị, thì mỗi cách 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 classify() và classifyForVideo() trên một luồng 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() với chế độ video để kích hoạt dự đoán. Image Classifier API (API Phân loại hình ảnh) 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 việc chạy tác vụ của Trình phân loại hình ảnh, hãy xem ví dụ về mã).

Xử lý và hiển thị kết quả

Khi chạy suy luậ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 nhiệm 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

Bạn có thể đạt được kết quả này bằng cách chạy Trình phân loại Bird trên:

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 được trả về từ tác vụ, hãy xem ví dụ về mã để biết thông tin chi tiết.