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

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

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

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

इस टास्क में वेब ऐप्लिकेशन के लिए, नीचे दिए गए कॉन्फ़िगरेशन के विकल्प मौजूद हैं:

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

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

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

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

टास्क को पूरा करें

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

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

इमेज

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].

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

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

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

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

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