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

MediaPipe ऑब्जेक्ट डिटेक्टर टास्क से, आपको कई यूआरएल की मौजूदगी और जगह का पता लगाने की सुविधा मिलती है चीज़ों को अलग-अलग ग्रुप में बांटना. यह टास्क, इमेज का डेटा लेकर, पहचान की पुष्टि करने की सूची तैयार करता है नतीजों में शामिल सभी नतीजे, इमेज में पहचाने गए किसी ऑब्जेक्ट का प्रतिनिधित्व करते हैं. कोड सैंपल जैसा इन निर्देशों में बताया गया है, 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() तरीकों पर किए जाने वाले कॉल साथ ही, यूज़र इंटरफ़ेस थ्रेड को ब्लॉक भी कर सकता है. अगर आपको इसमें मौजूद ऑब्जेक्ट वीडियो फ़्रेम सेट अप करते हैं, तो हर कैटगरी किसी मुख्य वीडियो फ़्रेम को ब्लॉक करती है थ्रेड. इस समस्या से बचने के लिए वेब वर्कर लागू करें, ताकि डिटेक्शन इन पर चल सके कोई दूसरी थ्रेड.

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

इमेज

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

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

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