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

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

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

कोड का उदाहरण

इमेज एम्बेडर के लिए दिए गए उदाहरण में, इसे पूरी तरह लागू करने की सुविधा मिलती है आपके संदर्भ के लिए 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 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
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]);

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