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

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

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

कोड का उदाहरण

इमेज एम्बेडर के लिए दिए गए उदाहरण के कोड में, इस टास्क को 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.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: एक इमेज इनपुट के लिए मोड.

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

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

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

इमेज एम्बेडर 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);

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

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

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