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

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

कोड का उदाहरण

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

सेटअप

इस सेक्शन में, खास तौर पर Image Segmenter का इस्तेमाल करने के लिए, डेवलपमेंट एनवायरमेंट और कोड प्रोजेक्ट सेट अप करने के मुख्य चरणों के बारे में बताया गया है. इस पर सामान्य जानकारी के लिए 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 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 Metadata Writer API का इस्तेमाल करें स्थान-भाषा कोड en
resultListener जब इमेज सेगमेंटर LIVE_STREAM मोड में हो, तब सेगमेंटेशन के नतीजे पाने के लिए, रिज़ल्ट लिसनर को असाइन करता है. इसका इस्तेमाल सिर्फ़ तब किया जा सकता है, जब रनिंग मोड को LIVE_STREAM पर सेट किया गया हो लागू नहीं लागू नहीं

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

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

इमेज सेगमेंटर 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] के बीच की फ़्लोट वैल्यू होती हैं.

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

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

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

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

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