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 nhúng hình ảnh cho web

Nhiệm vụ MediaPipe Image Embeddedder (Trình nhúng hình ảnh MediaPipe) cho phép bạn chuyển đổi dữ liệu hình ảnh thành bản trình bày số để hoàn thành các nhiệm vụ xử lý hình ảnh liên quan đến học máy, chẳng hạn như so sánh điểm giống nhau của hai hình ảnh. Những hướng dẫn này cho bạn biết cách sử dụng Trình nhúng hình ảnh cho Nút và ứng dụng web.

Để 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 nhúng hình ảnh 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 nhúng hình ảnh của riêng bạn. Bạn có thể xem, chạy và chỉnh sửa Mã ví dụ về Công cụ 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à mã dự án cụ thể để sử dụng Công cụ nhúng 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ã của Trình nhúng hình ảnh hiện đượ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 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

Nhiệm vụ của Trình nhúng hình ảnh MediaPipe cần có một mô hình đã qua 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 Trình nhúng 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

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

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

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 tải vào bộ nhớ, bạn có thể sử dụng phương thức 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 để đặt công việc. Hàm createFromOptions chấp nhận các giá trị cho các tùy 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ông cụ tuỳ chỉnh tùy chọn:

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 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
`running_mode`	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`
`l2Normalize`	Liệu có chuẩn hoá vectơ đối tượng được trả về với chuẩn L2 hay không. Chỉ sử dụng tuỳ chọn này nếu mô hình không chứa đoạn mã gốc L2_NORMALIZATION TFLite Op. Trong hầu hết các trường hợp, điều này đã đúng và Do đó, quá trình chuẩn hoá L2 đạt được thông qua suy luận TFLite mà không cần cho tuỳ chọn này.	`Boolean`	`False`
`quantize`	Liệu có cần lượng tử hoá mục nhúng trả về thành byte qua hay không lượng tử vô hướng. Các lượt nhúng được ngầm xem là quy chuẩn đơn vị và do đó mọi chiều đều được đảm bảo có giá trị trong [-1.0, 1.0]. Sử dụng tuỳ chọn l2 chuẩn hoá nếu không phải như vậy.	`Boolean`	`False`

Chuẩn bị dữ liệu

Công cụ nhúng hình ảnh có thể nhúng 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 embed() và embedForVideo() của Công cụ nhúng 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 muốn trích xuất các vectơ đặc trưng từ khung video, mỗi mục nhúng sẽ chặn chuỗi 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 embed() và Phương thức embedForVideo() trên một chuỗi khác.

Chạy tác vụ

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

Bài đăng có 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 kết quả

Sau khi chạy dự đoá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 đầu vào hình ảnh hoặc khung.

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 thu được bằng cách nhúng hình ảnh sau:

Bạn có thể so sánh điểm tương đồng về mặt về mặt ngữ nghĩa của 2 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ị trình nhúng kết quả được trả về từ tác vụ, hãy xem mã ví dụ để biết thông tin chi tiết.