वेब के लिए इंटरैक्टिव इमेज सेगमेंटेशन गाइड

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

कोड का उदाहरण

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

सेटअप

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

JavaScript पैकेज

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

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

npm install --save @mediapipe/tasks-vision

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

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

टास्क बनाएं

अनुमान लगाने का टास्क तैयार करने के लिए, इंटरैक्टिव इमेज सेगमेंटर createFrom...() फ़ंक्शन में से किसी एक का इस्तेमाल करें. ट्रेन की गई मॉडल फ़ाइल के रिलेटिव या ऐब्सलूट पाथ के साथ, createFromModelPath() फ़ंक्शन का इस्तेमाल करें. अगर आपका मॉडल पहले ही मेमोरी में लोड हो गया है, तो createFromModelBuffer() तरीके का इस्तेमाल किया जा सकता है.

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

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

async function createSegmenter() {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
  );

  interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
    },
  });
}
createSegmenter();

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

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

विकल्प का नाम ब्यौरा वैल्यू रेंज डिफ़ॉल्ट मान
outputCategoryMask अगर इसे True पर सेट किया जाता है, तो आउटपुट में uint8 इमेज के तौर पर सेगमेंटेशन मास्क शामिल होता है. यहां हर पिक्सल वैल्यू से पता चलता है कि पिक्सल पसंद की जगह पर मौजूद ऑब्जेक्ट का हिस्सा है या नहीं. {True, False} False
outputConfidenceMasks अगर इसे True पर सेट किया जाता है, तो आउटपुट में सेगमेंटेशन मास्क को फ़्लोट वैल्यू इमेज के तौर पर शामिल किया जाता है. यहां हर फ़्लोट वैल्यू से यह पता चलता है कि पिक्सल, पसंदीदा जगह पर मौजूद ऑब्जेक्ट का हिस्सा है. {True, False} True
displayNamesLocale अगर यह उपलब्ध हो, तो टास्क के मॉडल के मेटाडेटा में दिए गए डिसप्ले नेम के लिए, लेबल की भाषा सेट करता है. अंग्रेज़ी के लिए डिफ़ॉल्ट रूप से en है. TensorFlow Lite Metadata Writer API का इस्तेमाल करके, कस्टम मॉडल के मेटाडेटा में स्थानीय भाषा के हिसाब से लेबल जोड़े जा सकते हैं स्थान-भाषा का कोड en

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

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

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

टास्क चलाएं

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

इस कोड में बताया गया है कि टास्क मॉडल के साथ प्रोसेसिंग कैसे करें:

const image = document.getElementById("image") as HTMLImageElement;
interactiveSegmenter.segment(
  image,
  {
    keypoint: {
      x: event.offsetX / event.target.width,
      y: event.offsetY / event.target.height
    }
  },
  callback);

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

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

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

नीचे दिए सेक्शन में, इस टास्क से मिलने वाले आउटपुट डेटा के बारे में बताया गया है:

कैटगरी मास्क

नीचे दी गई इमेज में कैटगरी वैल्यू मास्क के लिए टास्क के आउटपुट का विज़ुअलाइज़ेशन दिखाया गया है. इसके लिए, लोकप्रिय जगह के बारे में बताया गया है. हर पिक्सल एक uint8 वैल्यू होती है, जो बताती है कि पिक्सल पसंद की जगह पर मौजूद ऑब्जेक्ट का हिस्सा है या नहीं. दूसरी इमेज पर मौजूद काला और सफ़ेद गोला, उस इलाके की जानकारी देता है जिसमें उसकी दिलचस्पी है.

ओरिजनल इमेज और कैटगरी मास्क का आउटपुट. Pascal VOC 2012 डेटासेट से सोर्स इमेज.

कॉन्फ़िडेंस मास्क

कॉन्फ़िडेंस मास्क के आउटपुट में हर इमेज इनपुट चैनल के लिए, [0, 1] के बीच फ़्लोट वैल्यू होती हैं. ज़्यादा वैल्यू का मतलब है कि इमेज पिक्सल, पसंदीदा जगह पर मौजूद ऑब्जेक्ट का हिस्सा है.

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