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

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

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

कोड का उदाहरण

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

सेटअप

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

JavaScript पैकेज

ऑब्जेक्ट डिटेक्टर कोड, MediaPipe @mediapipe/tasks-vision 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.js"
    crossorigin="anonymous"></script>
</head>

मॉडल

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

कोई मॉडल चुनें और उसे डाउनलोड करें और फिर उसे अपनी प्रोजेक्ट डायरेक्ट्री में स्टोर करें:

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

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

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

टास्क चलाएं

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

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

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

Image

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

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

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