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

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 फ़ंक्शन की मदद से, इमेज सेगमेंटर को कॉन्फ़िगरेशन के विकल्पों के साथ अपनी पसंद के मुताबिक बनाया जा सकता है. टास्क के कॉन्फ़िगरेशन के बारे में ज़्यादा जानने के लिए, कॉन्फ़िगरेशन विकल्प देखें.

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

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

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

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

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

विकल्प का नाम ब्यौरा वैल्यू रेंज डिफ़ॉल्ट मान
runningMode टास्क के लिए, रनिंग मोड सेट करता है. इसके दो मोड हैं:

इमेज: सिंगल इमेज इनपुट के लिए मोड.

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

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

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

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

टास्क चलाएं

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

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

Image

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

Video

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 डेटासेट से सोर्स इमेज.

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