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

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

कोड का उदाहरण

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

सेटअप

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

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

मॉडल

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

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

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

टास्क बनाना

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

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

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

runningMode = "IMAGE";

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

  imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
    },
    outputCategoryMask: true,
    outputConfidenceMasks: false
    runningMode: runningMode
  });
}
createImageSegmenter();

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

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

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

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

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

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

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

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

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

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

इमेज

const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);

वीडियो

async function renderLoop(): void {
  const video = document.getElementById("video");
  let startTimeMs = performance.now();

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

  requestAnimationFrame(() => {
    renderLoop();
  });
}

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

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

इन्फ़्रेंस चलाने पर, Image Segmenter टास्क, सेगमेंट की गई इमेज का डेटा, कॉलबैक फ़ंक्शन को भेजता है. आउटपुट का कॉन्टेंट, उस outputType पर निर्भर करता है जिसे आपने टास्क को कॉन्फ़िगर करते समय सेट किया था.

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

कैटगरी के बारे में कॉन्फ़िडेंस स्कोर

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

एक घोड़े पर दो लड़कियां बैठी हैं और एक लड़की घोड़े के बगल में चल रही है इमेज मास्क, जिसमें पिछली फ़ोटो में मौजूद लड़कियों और घोड़े की आउटलाइन दिख रही है. इमेज की आउटलाइन का बायां हिस्सा कैप्चर किया गया है, लेकिन दायां हिस्सा कैप्चर नहीं किया गया है

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

कैटगरी की वैल्यू

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

एक घोड़े पर दो लड़कियां बैठी हैं और एक लड़की घोड़े के बगल में चल रही है इमेज मास्क, जिसमें पिछली इमेज में मौजूद लड़कियों और घोड़े की आउटलाइन दिख रही है. तीनों लड़कियों और घोड़े की आकृति को सटीक तरीके से मास्क किया गया है

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

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