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

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

कोड का उदाहरण

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

सेटअप

इस सेक्शन में, खास तौर पर Image Segmenter का इस्तेमाल करने के लिए, डेवलपमेंट एनवायरमेंट और कोड प्रोजेक्ट सेट अप करने के मुख्य चरणों के बारे में बताया गया है. 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.js"
    crossorigin="anonymous"></script>
</head>

मॉडल

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

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

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

टास्क बनाना

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

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

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

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 मेटाडेटा राइटर एपीआई का इस्तेमाल करके, कस्टम मॉडल के मेटाडेटा में स्थानीय भाषा के लेबल जोड़े जा सकते हैं स्थानीय भाषा का कोड en
resultListener जब इमेज सेगमेंटर LIVE_STREAM मोड में हो, तब सेगमेंटेशन के नतीजे पाने के लिए, रिज़ल्ट लिसनर को असिंक्रोनस तरीके से सेट करता है. इसका इस्तेमाल सिर्फ़ तब किया जा सकता है, जब रनिंग मोड को LIVE_STREAM पर सेट किया गया हो लागू नहीं लागू नहीं

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

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

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

टास्क चलाना

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

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

इमेज

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

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

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

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

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

कैटगरी के बारे में भरोसा

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

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

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

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

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

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

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

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