वेब के लिए ऑब्जेक्ट का पता लगाने वाली गाइड

MediaPipe Object Detector टास्क की मदद से, अलग-अलग क्लास के ऑब्जेक्ट की मौजूदगी और उनकी जगह का पता लगाया जा सकता है. यह टास्क, इमेज डेटा लेता है और पहचान के नतीजों की एक सूची दिखाता है. हर नतीजा, इमेज में पहचाने गए ऑब्जेक्ट को दिखाता है. सिर्फ़ वेब ब्राउज़र का इस्तेमाल करके, ऑब्जेक्ट डिटेक्टर के उदाहरण को देखा, चलाया, और उसमें बदलाव किया जा सकता है.

इस टास्क की क्षमताओं, मॉडल, और कॉन्फ़िगरेशन के विकल्पों के बारे में ज़्यादा जानने के लिए, खास जानकारी देखें.

सेटअप

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

JavaScript पैकेज

ऑब्जेक्ट डिटेक्टर का कोड, MediaPipe @mediapipe/tasks-vision NPM पैकेज के ज़रिए उपलब्ध है. इन लाइब्रेरी को ढूंढने और डाउनलोड करने के लिए, प्लैटफ़ॉर्म की सेटअप गाइड में दिए गए निर्देशों का पालन करें.

ज़रूरी पैकेज को NPM के ज़रिए इंस्टॉल किया जा सकता है. इसके लिए, यह कमांड इस्तेमाल करें:

npm install @mediapipe/tasks-vision

अगर आपको कॉन्टेंट डिलीवरी नेटवर्क (सीडीएन) सेवा के ज़रिए टास्क कोड इंपोर्ट करना है, तो अपनी एचटीएमएल फ़ाइल में मौजूद <head> टैग में यह कोड जोड़ें:

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

मॉडल

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

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

<dev-project-root>/app/shared/models/

टास्क बनाना

इन्फ़रेंस चलाने के लिए टास्क तैयार करने के लिए, ऑब्जेक्ट डिटेक्टर ObjectDetector.createFrom...() फ़ंक्शन में से किसी एक का इस्तेमाल करें. ट्रेन किए गए मॉडल की फ़ाइल के रिलेटिव या ऐब्सलूट पाथ के साथ, createFromModelPath() फ़ंक्शन का इस्तेमाल करें. अगर आपका मॉडल पहले से ही मेमोरी में लोड है, तो createFromModelBuffer() तरीके का इस्तेमाल किया जा सकता है. नीचे दिए गए कोड के उदाहरण में, createFromOptions() फ़ंक्शन का इस्तेमाल करने का तरीका बताया गया है. इस फ़ंक्शन की मदद से, कॉन्फ़िगरेशन के ज़्यादा विकल्प सेट किए जा सकते हैं. कॉन्फ़िगरेशन के उपलब्ध विकल्पों के बारे में ज़्यादा जानने के लिए, कॉन्फ़िगरेशन के विकल्प सेक्शन देखें.

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

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
objectDetector = await ObjectDetector.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: `https://storage.googleapis.com/mediapipe-tasks/object_detector/efficientdet_lite0_uint8.tflite`
  },
  scoreThreshold: 0.5,
  runningMode: runningMode
});

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

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

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

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

IMAGE: यह मोड, एक इमेज वाले इनपुट के लिए होता है.

VIDEO: यह वीडियो के डिकोड किए गए फ़्रेम या कैमरे जैसे इनपुट डेटा की लाइव स्ट्रीम के लिए मोड है.		 {IMAGE, VIDEO} IMAGE
displayNamesLocale अगर टास्क के मॉडल के मेटाडेटा में डिसप्ले नेम उपलब्ध हैं, तो यह कुकी उन डिसप्ले नेम के लिए इस्तेमाल किए जाने वाले लेबल की भाषा सेट करती है. अंग्रेज़ी के लिए डिफ़ॉल्ट वैल्यू en है. TensorFlow Lite Metadata Writer API का इस्तेमाल करके, कस्टम मॉडल के मेटाडेटा में स्थानीय भाषा में लेबल जोड़े जा सकते हैं लोकल कोड en
maxResults इससे, सबसे ज़्यादा स्कोर वाले उन नतीजों की ज़्यादा से ज़्यादा संख्या सेट की जाती है जिन्हें दिखाना ज़रूरी नहीं है. कोई भी पॉज़िटिव नंबर -1 (सभी नतीजे दिखाए जाते हैं)
scoreThreshold यह विकल्प, अनुमान के स्कोर की थ्रेशोल्ड वैल्यू सेट करता है. यह वैल्यू, मॉडल के मेटाडेटा में दी गई थ्रेशोल्ड वैल्यू (अगर कोई है) को बदल देती है. इस वैल्यू से कम स्कोर वाले नतीजे अस्वीकार कर दिए जाते हैं. कोई भी फ़्लोट सेट नहीं है
categoryAllowlist इस नीति की मदद से, अनुमति वाले कैटगरी के नामों की सूची सेट की जाती है. यह सूची ज़रूरी नहीं है. अगर यह सेट खाली नहीं है, तो जिन कैटगरी के नामों का मिलान इस सेट से नहीं होगा उन्हें हटा दिया जाएगा. डुप्लीकेट या अज्ञात कैटगरी के नामों को अनदेखा किया जाता है. यह विकल्प, categoryDenylist के साथ इस्तेमाल नहीं किया जा सकता. इन दोनों को एक साथ इस्तेमाल करने पर गड़बड़ी होती है. कोई भी स्ट्रिंग सेट नहीं है
categoryDenylist इससे, कैटगरी के उन नामों की सूची सेट की जाती है जिन्हें अनुमति नहीं है. यह सूची ज़रूरी नहीं है. अगर यह सेट खाली नहीं है, तो इस सेट में मौजूद कैटगरी के नाम वाले नतीजे नहीं दिखाए जाएंगे. डुप्लीकेट या अज्ञात कैटगरी के नामों को अनदेखा किया जाता है. यह विकल्प, categoryAllowlist के साथ इस्तेमाल नहीं किया जा सकता. दोनों का इस्तेमाल करने पर गड़बड़ी होती है. कोई भी स्ट्रिंग सेट नहीं है

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

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

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

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

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

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

इमेज

const image = document.getElementById("image") as HTMLImageElement;
const detections = objectDetector.detect(image);

वीडियो

await objectDetector.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const detections = detector.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

ऑब्जेक्ट डिटेक्टर टास्क को चलाने के लिए, कोड का उदाहरण देखें.

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

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

इस टास्क के आउटपुट डेटा का उदाहरण यहां दिया गया है:

ObjectDetectorResult:
 Detection #0:
  Box: (x: 355, y: 133, w: 190, h: 206)
  Categories:
   index       : 17
   score       : 0.73828
   class name  : dog
 Detection #1:
  Box: (x: 103, y: 15, w: 138, h: 369)
  Categories:
   index       : 17
   score       : 0.73047
   class name  : dog

नीचे दी गई इमेज में, टास्क के आउटपुट का विज़ुअलाइज़ेशन दिखाया गया है:

बाउंडिंग बॉक्स में हाइलाइट किए गए दो कुत्ते

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