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

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

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

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

  interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
    },
  });
}
createSegmenter();

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

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

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

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

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

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

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

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

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

const image = document.getElementById("image") as HTMLImageElement;
interactiveSegmenter.segment(
  image,
  {
    keypoint: {
      x: event.offsetX / event.target.width,
      y: event.offsetY / event.target.height
    }
  },
  callback);