वेब के लिए इमेज एम्बेड करने की गाइड

MediaPipe Image Embedder टास्क की मदद से, इमेज के डेटा को संख्या में बदला जा सकता है. इससे एमएल से जुड़े इमेज प्रोसेसिंग टास्क पूरे किए जा सकते हैं. जैसे, दो इमेज की समानता की तुलना करना. इन निर्देशों में, Node और वेब ऐप्लिकेशन के लिए Image Embedder का इस्तेमाल करने का तरीका बताया गया है.

इस टास्क की सुविधाओं, मॉडल, और कॉन्फ़िगरेशन के विकल्पों के बारे में ज़्यादा जानने के लिए, खास जानकारी देखें.

कोड का उदाहरण

इमेज एम्बेड करने वाले टूल के लिए दिए गए उदाहरण कोड में, इस टास्क को JavaScript में पूरी तरह से लागू करने का तरीका बताया गया है. इस कोड की मदद से, इस टास्क को टेस्ट किया जा सकता है. साथ ही, इमेज एम्बेड करने वाला अपना ऐप्लिकेशन बनाया जा सकता है. इमेज एम्बेड करने वाले उदाहरण को सिर्फ़ वेब ब्राउज़र का इस्तेमाल करके देखा, चलाया, और बदला जा सकता है.

सेटअप

इस सेक्शन में, इमेज एम्बेडर का इस्तेमाल करने के लिए, डेवलपमेंट एनवायरमेंट और कोड प्रोजेक्ट सेट अप करने का तरीका बताया गया है. MediaPipe Tasks का इस्तेमाल करने के लिए, डेवलपमेंट एनवायरमेंट सेट अप करने के बारे में सामान्य जानकारी के लिए, वेब के लिए सेटअप गाइड देखें. इसमें प्लैटफ़ॉर्म के वर्शन से जुड़ी ज़रूरी शर्तें भी शामिल हैं.

JavaScript पैकेज

MediaPipe @mediapipe/tasks-vision NPM पैकेज के ज़रिए, इमेज एम्बेड करने वाले कोड का इस्तेमाल किया जा सकता है. इन लाइब्रेरी को प्लैटफ़ॉर्म की सेटअप गाइड में दिए गए लिंक से ढूंढा और डाउनलोड किया जा सकता है.

स्थानीय स्टेजिंग के लिए ज़रूरी पैकेज इंस्टॉल करने के लिए, इस कोड का इस्तेमाल करें. इसके लिए, इस निर्देश का इस्तेमाल करें:

npm install @mediapipe/tasks-vision

अगर आपको कॉन्टेंट डिलीवरी नेटवर्क (सीडीएन) सेवा के ज़रिए टास्क कोड इंपोर्ट करना है, तो अपनी एचटीएमएल फ़ाइल में मौजूद टैग में यह कोड जोड़ें:

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

मॉडल

MediaPipe Image Embedder टास्क के लिए, ट्रेनिंग दिया गया ऐसा मॉडल ज़रूरी है जो इस टास्क के साथ काम करता हो. इमेज एम्बेडर के लिए उपलब्ध ट्रेन किए गए मॉडल के बारे में ज़्यादा जानने के लिए, टास्क की खास जानकारी वाला मॉडल सेक्शन देखें.

कोई मॉडल चुनें और उसे डाउनलोड करें. इसके बाद, उसे अपने प्रोजेक्ट डायरेक्ट्री में सेव करें:

<dev-project-root>/app/shared/models/

टास्क बनाना

मॉडल का पाथ तय करना

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`
    },
  });

मॉडल बफ़र तय करना

अगर आपका मॉडल पहले से ही मेमोरी में लोड है, तो 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(...)
);

कस्टम विकल्प तय करना

MediaPipe Image Embedder टास्क, टास्क को सेट अप करने के लिए createFromOptions फ़ंक्शन का इस्तेमाल करता है. createFromOptions फ़ंक्शन, कॉन्फ़िगरेशन के विकल्पों के लिए वैल्यू स्वीकार करता है. कॉन्फ़िगरेशन के विकल्पों के बारे में ज़्यादा जानने के लिए, कॉन्फ़िगरेशन के विकल्प लेख पढ़ें.

यहां दिए गए कोड में, कस्टम विकल्पों के साथ टास्क बनाने और उसे कॉन्फ़िगर करने का तरीका बताया गया है:

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
    });

कॉन्फ़िगरेशन विकल्प

इस टास्क में, वेब ऐप्लिकेशन के लिए कॉन्फ़िगरेशन के ये विकल्प उपलब्ध हैं:

विकल्प का नाम ब्यौरा वैल्यू की सीमा डिफ़ॉल्ट मान
running_mode यह कुकी, टास्क के रनिंग मोड को सेट करती है. इसके दो मोड हैं:

IMAGE: यह मोड, एक इमेज वाले इनपुट के लिए होता है.

VIDEO: यह वीडियो के डिकोड किए गए फ़्रेम या कैमरे जैसे इनपुट डेटा की लाइव स्ट्रीम के लिए मोड है.		 {IMAGE, VIDEO} IMAGE
l2Normalize क्या L2 नॉर्म का इस्तेमाल करके, दिखाए गए फ़ीचर वेक्टर को नॉर्मलाइज़ करना है. इस विकल्प का इस्तेमाल सिर्फ़ तब करें, जब मॉडल में पहले से कोई नेटिव L2_NORMALIZATION TFLite Op मौजूद न हो. ज़्यादातर मामलों में, ऐसा पहले से ही होता है. इसलिए, L2 नॉर्मलाइज़ेशन को TFLite इन्फ़रेंस के ज़रिए हासिल किया जाता है. इसके लिए, इस विकल्प की ज़रूरत नहीं होती. Boolean False
quantize क्या दिखाई गई एम्बेडिंग को स्केलर क्वांटाइज़ेशन के ज़रिए बाइट में क्वांटाइज़ किया जाना चाहिए. Embeddings को यूनिट-नॉर्म माना जाता है. इसलिए, किसी भी डाइमेंशन की वैल्यू [-1.0, 1.0] में होती है. अगर ऐसा नहीं है, तो l2Normalize विकल्प का इस्तेमाल करें. Boolean False

डेटा तैयार करना

Image Embedder, इमेज को ऐसे किसी भी फ़ॉर्मैट में एम्बेड कर सकता है जिसे होस्ट ब्राउज़र इस्तेमाल कर सकता है. यह टास्क, डेटा इनपुट की प्रीप्रोसेसिंग को भी मैनेज करता है. इसमें इमेज का साइज़ बदलना, उसे घुमाना, और वैल्यू को सामान्य करना शामिल है.

Image Embedder embed() और embedForVideo() के तरीके, सिंक्रोनस तरीके से काम करते हैं और यूज़र इंटरफ़ेस थ्रेड को ब्लॉक करते हैं. अगर आपको वीडियो फ़्रेम से फ़ीचर वेक्टर निकालने हैं, तो हर एम्बेडिंग मुख्य थ्रेड को ब्लॉक कर देगी. embed() और embedForVideo() तरीकों को किसी अन्य थ्रेड पर चलाने के लिए, वेब वर्कर लागू करके ऐसा होने से रोका जा सकता है.

टास्क को रन करना

इमेज एम्बेडर, अनुमानों को ट्रिगर करने के लिए embed() (रनिंग मोड image के साथ) और embedForVideo() (रनिंग मोड video के साथ) तरीकों का इस्तेमाल करता है. Image Embedder API, इनपुट इमेज के लिए एम्बेडिंग वेक्टर देगा.

नीचे दिए गए कोड में, टास्क मॉडल की मदद से प्रोसेसिंग को लागू करने का तरीका बताया गया है:

इमेज

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

वीडियो

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

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

नतीजों को मैनेज करना और दिखाना

इन्फ़्रेंस चलाने पर, Image Embedder टास्क एक ImageEmbedderResult ऑब्जेक्ट दिखाता है. इसमें इनपुट इमेज या फ़्रेम के लिए एम्बेडिंग वेक्टर होते हैं.

इस टास्क के आउटपुट डेटा का उदाहरण यहां दिया गया है:

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

इस नतीजे को पाने के लिए, यहां दी गई इमेज को एम्बेड किया गया था:

विदेशी बिल्ली का मीडियम शॉट

ImageEmbedder.cosineSimilarity फ़ंक्शन का इस्तेमाल करके, दो एम्बेडिंग की सिमैंटिक समानता की तुलना की जा सकती है. उदाहरण के लिए, यहां दिया गया कोड देखें.

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

इमेज एम्बेड करने वाले के उदाहरण कोड में बताया गया है कि टास्क से मिले एम्बेडर के नतीजों को कैसे दिखाया जाए. ज़्यादा जानकारी के लिए, उदाहरण देखें.