Hướng dẫn nhúng hình ảnh cho web

Tác vụ Trình nhúng hình ảnh MediaPipe cho phép bạn chuyển đổi dữ liệu hình ảnh thành một giá trị đại diện dạng số để thực hiện các tác vụ xử lý hình ảnh liên quan đến học máy, chẳng hạn như so sánh mức độ tương đồng của hai hình ảnh. Hướng dẫn này cho bạn biết cách sử dụng Trình nhúng hình ảnh cho ứng dụng web và Node.

Để biết thêm thông tin về các tính năng, mô hình và tuỳ chọn cấu hình của tác vụ này, hãy xem phần Tổng quan.

Ví dụ về mã

Mã ví dụ cho Trình nhúng hình ảnh cung cấp cách triển khai đầy đủ tác vụ này trong JavaScript để bạn tham khảo. Mã này giúp bạn kiểm thử nhiệm vụ này và bắt đầu xây dựng ứng dụng nhúng 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 nhúng 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à dự án mã dành riêng cho việc sử dụng Trình nhúng hình ảnh. Để biết thông tin chung về cách thiết lập môi trường phát triển cho việc sử dụng các tác vụ MediaPipe, 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

Bạn có thể sử dụng mã Trình nhúng hình ảnh thông qua gói MediaPipe @mediapipe/tasks-vision NPM. 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 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 bằng mã sau đây để tạo bản dựng 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ụ 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ẻ trong tệp HTML:

<!-- You can replace jsDelivr with your preferred CDN -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Mẫu

Tác vụ Trình nhúng hình ảnh MediaPipe yêu cầu một mô hình đã 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 đã huấn luyện hiện có cho Trình nhúng hình ảnh, hãy xem phần Mô hình trong phần tổng quan về tác vụ.

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 việc cần làm

Chỉ định đường dẫn mô hình

Bạn có thể tạo một tác vụ bằng các tuỳ chọn mặc định bằng cách sử dụng phương thức createFromModelPath():

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
  const imageEmbedder = await ImageEmbedder.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_embedder/mobilenet_v3_small/float32/1/mobilenet_v3_small.tflite`
    },
  });

Chỉ định vùng đệm mô hình

Nếu mô hình của bạn đã được tải vào bộ nhớ, bạn có thể sử dụng phương thức createFromModelBuffer():

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = ImageEmbedder.createFromModelBuffer(
    vision, 
    new Uint8Array(...)
);

Chỉ định các tuỳ chọn tuỳ chỉnh

Tác vụ Trình nhúng hình ảnh MediaPipe sử dụng hàm createFromOptions để thiết lập tác vụ. Hàm createFromOptions chấp nhận các giá trị cho tuỳ chọn cấu hình. Để biết thêm thông tin về các tuỳ chọn 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ác tuỳ chọn tuỳ chỉnh:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = await ImageEmbedder.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "model.tflite"
      },
      quantize: true
    });

Các lựa chọn về cấu hình

Tác vụ này có các tuỳ chọn cấu hình sau đây cho ứng dụng Web:

Tên tuỳ chọn Mô tả Phạm vi giá trị Giá trị mặc định
running_mode Đặt chế độ chạy cho tác vụ. Có hai chế độ:

IMAGE (HÌNH ẢNH): Chế độ cho dữ liệu đầu vào là một hình ảnh.

VIDEO: Chế độ cho các khung hình đã giải mã của một video hoặc trên luồng trực tiếp của dữ liệu đầu vào, chẳng hạn như từ máy ảnh.		 {IMAGE, VIDEO} IMAGE
l2Normalize Liệu có chuẩn hoá vectơ đặc điểm được trả về bằng chuẩn L2 hay không. Chỉ sử dụng tuỳ chọn này nếu mô hình chưa chứa thao tác L2_NORMALIZATION TFLite gốc. Trong hầu hết các trường hợp, đây đã là trường hợp và việc chuẩn hoá L2 được thực hiện thông qua suy luận TFLite mà không cần tuỳ chọn này. Boolean False
quantize Liệu nội dung nhúng được trả về có được lượng tử hoá thành byte thông qua lượng tử hoá vô hướng hay không. Các phần nhúng được giả định ngầm là đơn vị chuẩn và do đó, mọi phương diện đều được đảm bảo có giá trị trong [-1.0, 1.0]. Sử dụng tuỳ chọn l2Normalize nếu không phải như vậy. Boolean False

Chuẩn bị dữ liệu

Trình nhúng hình ảnh có thể nhúng hình ảnh ở bất kỳ định dạng nào mà trình duyệt lưu trữ hỗ trợ. Tác vụ này cũng xử lý việc xử lý trước dữ liệu đầu vào, bao gồm cả 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 Trình nhúng hình ảnh embed() và embedForVideo() chạy đồng bộ và chặn luồng giao diện người dùng. Nếu bạn muốn trích xuất vectơ đặc điểm từ các khung hình video, thì mỗi lần nhúng 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 chạy web để chạy các phương thức embed() và embedForVideo() trên một luồng khác.

Chạy tác vụ

Trình nhúng hình ảnh sử dụng các phương thức embed() (với chế độ chạy image) và embedForVideo() (với chế độ chạy video) để kích hoạt suy luận. API Trình nhúng hình ảnh sẽ trả về các vectơ nhúng cho 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ụ:

Hình ảnh

const image = document.getElementById("image") as HTMLImageElement;
const imageEmbedderResult = imageEmbedder.embed(image);

Video

  const video = document.getElementById("webcam");

  const startTimeMs = performance.now();
  const embedderResult = await imageEmbedder.embedForVideo(video, startTimeMs);

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

Sau khi chạy quy trình suy luận, tác vụ Trình nhúng hình ảnh sẽ trả về một đối tượng ImageEmbedderResult chứa các vectơ nhúng cho 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:

ImageEmbedderResult:
  Embedding #0 (sole embedding head):
    float_embedding: {0.0, 0.0, ..., 0.0, 1.0, 0.0, 0.0, 2.0}
    head_index: 0

Kết quả này được lấy bằng cách nhúng hình ảnh sau:

Cảnh quay trung bình về một con mèo lạ

Bạn có thể so sánh mức độ tương đồng ngữ nghĩa của hai nội dung nhúng bằng cách sử dụng hàm ImageEmbedder.cosineSimilarity. Hãy xem mã sau đây để biết ví dụ.

// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
  imageEmbedderResult.embeddings[0],
  otherEmbedderResult.embeddings[0]);

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