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

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

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

कोड का उदाहरण

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

सेटअप

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

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.js"
    crossorigin="anonymous"></script>
</head>

मॉडल

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

कोई मॉडल चुनें और उसे डाउनलोड करें और फिर उसे अपनी प्रोजेक्ट डायरेक्ट्री में स्टोर करें:

<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 इमेज एम्बेडर टास्क, टास्क सेट अप करने के लिए 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
l2Normalize रिटर्न किए गए फ़ीचर वेक्टर को L2 स्टैंडर्ड के साथ सामान्य बनाना है या नहीं. इस विकल्प का इस्तेमाल सिर्फ़ तब करें, जब मॉडल में पहले से ही कोई नेटिव L2_NORMALIZATION TFLite Op मौजूद न हो. ज़्यादातर मामलों में, ऐसा पहले से ही होता है और L2 नॉर्मलाइज़ेशन को TFLite अनुमान के ज़रिए पूरा किया जाता है. इसके लिए, इस विकल्प की कोई ज़रूरत नहीं होती. Boolean False
quantize दिखाए गए एम्बेड किए गए मैसेज को स्केलर क्वांटाइज़ेशन के ज़रिए बाइट में मापा जाना चाहिए या नहीं. एम्बेड किए गए डाइमेंशन को यूनिट-नर्म माना जाता है. इसलिए, किसी भी डाइमेंशन की वैल्यू [-1.0, 1.0] में होने की गारंटी होती है. अगर ऐसा नहीं है, तो l2 नॉर्मलाइज़ विकल्प का इस्तेमाल करें. Boolean False

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

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

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

टास्क चलाएं

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

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

Image

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

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

अनुमान चलाने पर, इमेज एम्बेडर टास्क एक 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]);

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