Tác vụ Trình nhúng hình ảnh của MediaPipe cho phép bạn chuyển đổi dữ liệu hình ảnh thành một biểu diễn bằng số để hoàn thành 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. Các hướng dẫn này cho biết cách sử dụng Trình nhúng hình ảnh cho các ứng dụng Node và 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 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 một cách triển khai hoàn chỉnh tác vụ này bằng 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 ví dụ về 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 để sử dụng các tác vụ MediaPipe, bao gồm 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
Mã Trình nhúng hình ảnh có sẵn thông qua gói @mediapipe/tasks-vision
NPM của MediaPipe. Bạn có thể
tìm và tải các thư viện này xuống từ các đường liên kết được cung cấp trong hướng dẫn
Thiết lập nền tảng.
Bạn có thể cài đặt các gói bắt buộc bằng mã sau đây để dà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.mjs"
crossorigin="anonymous"></script>
</head>
Mô hình
Tác vụ Trình nhúng hình ảnh của MediaPipe yêu cầu một mô hình đã được huấn luyện và 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 có sẵn cho Trình nhúng hình ảnh, hãy xem phần tổng quan về tác vụ phần Mô hình.
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 tác vụ
Chỉ định đường dẫn mô hình
Bạn có thể tạo một tác vụ với các lựa chọn mặc định bằ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 bộ đệ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 lựa chọn tuỳ chỉnh
Tác vụ Trình nhúng hình ảnh của 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
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 Các lựa chọn về cấu hình.
Đoạn mã sau đây minh hoạ cách xây dựng 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 đây cho các ứng dụng web:
| Tên lựa 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ó 2
chế độ: IMAGE: 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 một sự kiện 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 |
Có chuẩn hoá vectơ đặc trưng được trả về bằng 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 một TFLite Op L2_NORMALIZATION gốc. Trong hầu hết các trường hợp, đây đã là trường hợp và do đó, quá trình chuẩn hoá L2 được thực hiện thông qua quá trình suy luận TFLite mà không cần lựa chọn này. | Boolean |
False |
quantize |
Có định lượng dữ liệu nhúng được trả về thành byte thông qua quá trình định lượng vô hướng hay không. Dữ liệu nhúng được giả định ngầm là chuẩn đơn vị và do đó, mọi phương diện đều được đảm bảo có giá trị trong [-1.0, 1.0]. Sử dụng lựa chọn l2Normalize nếu đây không phải là trường hợp. | Boolean |
False |
Chuẩn bị dữ liệu
Trình nhúng hình ảnh có thể nhúng hình ảnh ở mọi định dạng được trình duyệt lưu trữ hỗ trợ. Tác vụ này cũng xử lý quá trình tiền xử lý 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 các phương thức embed() và embedForVideo() của Trình nhúng hình ảnh 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 trưng từ các khung hình video, thì mỗi dữ liệu nhúng sẽ chặn luồng chính.
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 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
quá trình 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.
Đoạn 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 quá trình suy luận, tác vụ Trình nhúng hình ảnh sẽ trả về một
ImageEmbedderResult đối tượng chứa các vectơ nhúng cho hình ảnh hoặc khung hình đầu vào.
Sau đây là ví dụ về dữ liệu đầu ra từ 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 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ề ngữ nghĩa của hai dữ liệu nhúng bằ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ụ để biết thông tin chi tiết.