पेश है Google AI Edge Portal: बड़े पैमाने पर एज एआई का बेंचमार्क. निजी झलक के दौरान ऐक्सेस का अनुरोध करने के लिए, साइन-अप करें.

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

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

कोड का उदाहरण

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

सेटअप

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

मॉडल

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

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

<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

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

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

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

टास्क को रन करना

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

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

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

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

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

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

यहां दिए गए सेक्शन में, इस टास्क के आउटपुट डेटा के बारे में ज़्यादा जानकारी दी गई है:

कैटेगरी मास्क

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

पत्तियों के ढेर के बीच खड़ा कुत्ता पिछली इमेज में कुत्ते की आउटलाइन वाली इमेज

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

कॉन्फ़िडेंस मास्क

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

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