Nhiệm 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 dạng 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 độ tương đồng của 2 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ề 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 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ử 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 mình. Bạn có thể xem, chạy và chỉnh sửa mã mẫu 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à lập trình cho các dự án 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 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ã Trình nhúng hình ảnh có sẵn thông qua gói CNP của MediaPipe @mediapipe/tasks-vision. 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 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 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 đã huấn luyện hiện có cho Trình nhúng 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
Chỉ định đường dẫn mô hình
Bạn có thể tạo một tác vụ có 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 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 lựa 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 giá trị cho các lựa 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:
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 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 |
|---|---|---|---|
running_mode |
Đặ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 |
l2Normalize |
Liệu có chuẩn hoá vectơ tính năng được trả về với chuẩn L2 hay không. Chỉ sử dụng lựa chọn này nếu mô hình chưa chứa thành phần TFLite Op L2_NORMALIZATION gốc. Trong hầu hết các trường hợp, trường hợp này đã được chuẩn hoá và do đó, việc chuẩn hoá L2 có thể đạt được thông qua khả năng dự đoán TFLite mà không cần đến tuỳ chọn này. | Boolean |
False |
quantize |
Liệu hoạt động nhúng được trả về có phải được lượng tử hoá thành byte thông qua lượng tử hoá vô hướng hay không. Các hoạt động nhúng được ngầm giả định là chuẩn đơn vị và do đó, mọi thứ nguyên đều đảm bảo có giá trị trong [-1.0, 1.0]. Hãy sử dụng tuỳ chọn l2normalize nếu bạn không thấy 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ý 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 embed() và embedForVideo() của Trình nhúng hình ảnh sẽ 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 các vectơ đặc trưng từ khung video, 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 thực thi web để chạy 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 phương thức embed() (với chế độ chạy image) và embedForVideo() (với chế độ chạy video) để kích hoạt dự đoán. API 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ụ:
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 thị kết quả
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 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:
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 mức độ tương đồng về mặt ngữ nghĩa của 2 cách nhúng bằng cách sử dụng hàm ImageEmbedder.cosineSimilarity. Hãy xem mã ví dụ sau đây.
// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
imageEmbedderResult.embeddings[0],
otherEmbedderResult.embeddings[0]);
Mã ví dụ Image Embeddedder (Trình nhúng hình ảnh) minh hoạ cách hiển thị kết quả của trình nhúng mà tác vụ trả về. Hãy xem ví dụ về mã để biết thông tin chi tiết.