MediaPipe की मदद से, कस्टम ऑब्जेक्ट डिटेक्शन वेब ऐप्लिकेशन बनाएं

1. शुरू करने से पहले

MediaPipe Solutions की मदद से, अपने ऐप्लिकेशन में मशीन लर्निंग (एमएल) सलूशन लागू किए जा सकते हैं. यह एक ऐसा फ़्रेमवर्क है जिसकी मदद से, पहले से बनी प्रोसेसिंग पाइपलाइन कॉन्फ़िगर की जा सकती हैं. ये पाइपलाइन, उपयोगकर्ताओं को तुरंत, दिलचस्प, और काम का आउटपुट देती हैं. डिफ़ॉल्ट मॉडल को अपडेट करने के लिए, Model Maker की मदद से इन समाधानों को अपनी पसंद के मुताबिक बनाया जा सकता है.

ऑब्जेक्ट का पता लगाना, एमएल विज़न से जुड़े कई टास्क में से एक है. MediaPipe Solutions, एमएल विज़न से जुड़े कई टास्क उपलब्ध कराता है. MediaPipe Tasks, Android, Python, और वेब के लिए उपलब्ध है.

इस कोडलैब में, किसी वेब ऐप्लिकेशन में ऑब्जेक्ट डिटेक्शन की सुविधा जोड़ी जाती है. इससे इमेज और लाइव वेबकैम वीडियो में कुत्तों का पता लगाया जा सकता है.

आपको क्या सीखने को मिलेगा

MediaPipe Tasks की मदद से, वेब ऐप्लिकेशन में ऑब्जेक्ट की पहचान करने वाला टास्क कैसे शामिल करें.

आपको क्या बनाना है

कुत्तों की मौजूदगी का पता लगाने वाला वेब ऐप्लिकेशन. MediaPipe Model Maker की मदद से, अपनी पसंद के ऑब्जेक्ट की क्लास का पता लगाने के लिए, मॉडल को पसंद के मुताबिक बनाया जा सकता है.

आपको किन चीज़ों की ज़रूरत होगी

एक CodePen खाता
वेब ब्राउज़र वाला डिवाइस
JavaScript, सीएसएस, और एचटीएमएल की बुनियादी जानकारी

2. सेट अप करें

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

सेट अप करने के लिए, यह तरीका अपनाएं:

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

CodePen में मौजूद नेविगेशन मेन्यू, जहां 'फ़ोर्क करें' बटन मौजूद है

JS टैब में, एक्सपैंडर ऐरो पर क्लिक करें. इसके बाद, JavaScript एडिटर को बड़ा करें चुनें. आपको इस कोडलैब के लिए, सिर्फ़ JS टैब में बदलाव करना है. इसलिए, आपको HTML या CSS टैब देखने की ज़रूरत नहीं है.

स्टार्टर ऐप्लिकेशन की समीक्षा करना

झलक दिखाने वाले पैनल में देखें कि कुत्तों की दो इमेज हैं. साथ ही, वेबकैम चलाने का विकल्प भी है. इस ट्यूटोरियल में इस्तेमाल किए गए मॉडल को, दो इमेज में दिखाए गए तीन कुत्तों के बारे में ट्रेनिंग दी गई थी.

स्टार्टर कोड से बनाए गए वेब ऐप्लिकेशन की झलक

JS टैब में, ध्यान दें कि पूरे कोड में कई टिप्पणियां हैं. उदाहरण के लिए, आपको 15वीं लाइन पर यह टिप्पणी दिख सकती है:

// Import the required package.

इन टिप्पणियों से पता चलता है कि आपको कोड स्निपेट कहां डालने हैं.

3. MediaPipe tasks-vision पैकेज इंपोर्ट करें और ज़रूरी वैरिएबल जोड़ें

JS टैब में, MediaPipe tasks-vision पैकेज इंपोर्ट करें:

// Import the required package.
import { ObjectDetector, FilesetResolver, Detection } from "https://cdn.skypack.dev/@mediapipe/tasks-vision@latest";

इस कोड में, पैकेज को इंपोर्ट करने के लिए Skypack कॉन्टेंट डिलीवरी नेटवर्क (सीडीएन) का इस्तेमाल किया गया है. CodePen के साथ Skypack इस्तेमाल करने के तरीके के बारे में ज़्यादा जानने के लिए, Skypack + CodePen लेख पढ़ें.

अपने प्रोजेक्ट में, npm के साथ Node.js का इस्तेमाल किया जा सकता है. इसके अलावा, अपनी पसंद के पैकेज मैनेजर या सीडीएन का इस्तेमाल भी किया जा सकता है. आपको जो ज़रूरी पैकेज इंस्टॉल करना है उसके बारे में ज़्यादा जानने के लिए, JavaScript पैकेज देखें.

ऑब्जेक्ट डिटेक्टर और रनिंग मोड के लिए वैरिएबल तय करें:

// Create required variables.
let objectDetector = null;
let runningMode = "IMAGE";

runningMode वैरिएबल एक स्ट्रिंग है. इसे इमेज में ऑब्जेक्ट का पता लगाने पर "IMAGE" वैल्यू पर सेट किया जाता है. वहीं, वीडियो में ऑब्जेक्ट का पता लगाने पर इसे "VIDEO" वैल्यू पर सेट किया जाता है.

4. ऑब्जेक्ट डिटेक्टर को शुरू करना

ऑब्जेक्ट डिटेक्टर को शुरू करने के लिए, JS टैब में, काम की टिप्पणी के बाद यह कोड जोड़ें:

// Initialize the object detector.
async function initializeObjectDetector() {
  const visionFilesetResolver = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
  );
  objectDetector = await ObjectDetector.createFromOptions(visionFilesetResolver, {
    baseOptions: {
      modelAssetPath: "https://storage.googleapis.com/mediapipe-assets/dogs.tflite"
    },
    scoreThreshold: 0.3,
    runningMode: runningMode
  });
}
initializeObjectDetector();

FilesetResolver.forVisionTasks() तरीके से, टास्क के लिए WebAssembly (Wasm) बाइनरी की जगह की जानकारी मिलती है.

ObjectDetector.createFromOptions() वाला तरीका, ऑब्जेक्ट डिटेक्टर को इंस्टैंशिएट करता है. आपको पहचान करने के लिए इस्तेमाल किए गए मॉडल का पाथ देना होगा. इस मामले में, कुत्ते की पहचान करने वाले मॉडल को Cloud Storage पर होस्ट किया जाता है.

scoreThreshold प्रॉपर्टी को 0.3 वैल्यू पर सेट किया गया है. इसका मतलब है कि मॉडल, 30% या इससे ज़्यादा कॉन्फ़िडेंस लेवल पर पता लगाए गए किसी भी ऑब्जेक्ट के लिए नतीजे दिखाता है. अपने ऐप्लिकेशन की ज़रूरतों के हिसाब से, इस थ्रेशोल्ड में बदलाव किया जा सकता है.

ObjectDetector ऑब्जेक्ट के शुरू होने पर, runningMode प्रॉपर्टी सेट की जाती है. इसे और अन्य विकल्पों को बाद में अपनी ज़रूरत के हिसाब से बदला जा सकता है.

5. इमेज पर अनुमान लगाने की सुविधा इस्तेमाल करना

इमेज पर अनुमान लगाने के लिए, handleClick() फ़ंक्शन पर जाएं. इसके बाद, फ़ंक्शन के मुख्य हिस्से में यह कोड जोड़ें:

// Verify object detector is initialized and choose the correct running mode.
if (!objectDetector) {
    alert("Object Detector still loading. Please try again");
    return;
  }

  if (runningMode === "VIDEO") {
    runningMode = "IMAGE";
    await objectDetector.setOptions({ runningMode: runningMode });
  }

इस कोड से यह तय होता है कि ऑब्जेक्ट डिटेक्टर शुरू किया गया है या नहीं. साथ ही, यह पक्का किया जाता है कि इमेज के लिए रनिंग मोड सेट किया गया हो.

ऑब्जेक्ट का पता लगाना

इमेज में मौजूद ऑब्जेक्ट का पता लगाने के लिए, handleClick() फ़ंक्शन के मुख्य हिस्से में यह कोड जोड़ें:

// Run object detection.
  const detections = objectDetector.detect(event.target);

नीचे दिए गए कोड स्निपेट में, इस टास्क के आउटपुट डेटा का उदाहरण दिया गया है:

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

अनुमानों को प्रोसेस करना और उन्हें दिखाना

handleClick() फ़ंक्शन के आखिर में, displayImageDetections() फ़ंक्शन को कॉल करें:

// Call the displayImageDetections() function.
displayImageDetections(detections, event.target);

ऑब्जेक्ट का पता लगाने के नतीजे दिखाने के लिए, displayImageDetections() फ़ंक्शन के मुख्य हिस्से में यह कोड जोड़ें:

// Display object detection results.
  
  const ratio = resultElement.height / resultElement.naturalHeight;

  for (const detection of result.detections) {
    // Description text
    const p = document.createElement("p");
    p.setAttribute("class", "info");
    p.innerText =
      detection.categories[0].categoryName +
      " - with " +
      Math.round(parseFloat(detection.categories[0].score) * 100) +
      "% confidence.";
    // Positioned at the top-left of the bounding box.
    // Height is that of the text.
    // Width subtracts text padding in CSS so that it fits perfectly.
    p.style =
      "left: " +
      detection.boundingBox.originX * ratio +
      "px;" +
      "top: " +
      detection.boundingBox.originY * ratio +
      "px; " +
      "width: " +
      (detection.boundingBox.width * ratio - 10) +
      "px;";
    const highlighter = document.createElement("div");
    highlighter.setAttribute("class", "highlighter");
    highlighter.style =
      "left: " +
      detection.boundingBox.originX * ratio +
      "px;" +
      "top: " +
      detection.boundingBox.originY * ratio +
      "px;" +
      "width: " +
      detection.boundingBox.width * ratio +
      "px;" +
      "height: " +
      detection.boundingBox.height * ratio +
      "px;";

    resultElement.parentNode.appendChild(highlighter);
    resultElement.parentNode.appendChild(p);
  }

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

ऐप्लिकेशन को टेस्ट करना

CodePen में कोड में बदलाव करने पर, सेव करने पर झलक वाला पैनल अपने-आप रीफ़्रेश हो जाता है. अगर अपने-आप सेव होने की सुविधा चालू है, तो हो सकता है कि आपका ऐप्लिकेशन पहले ही रीफ़्रेश हो गया हो. हालांकि, इसे फिर से रीफ़्रेश करना बेहतर होगा.

ऐप्लिकेशन को टेस्ट करने के लिए, यह तरीका अपनाएं:

पूर्वानुमान देखने के लिए, झलक दिखाने वाले पैनल में मौजूद हर इमेज पर क्लिक करें. बाउंडिंग बॉक्स में, कुत्ते का नाम और मॉडल का कॉन्फ़िडेंस लेवल दिखाया गया है.
अगर बाउंडिंग बॉक्स नहीं है, तो Chrome DevTools खोलें. इसके बाद, गड़बड़ियों के लिए कंसोल पैनल देखें या पिछले चरणों की समीक्षा करें, ताकि यह पक्का किया जा सके कि आपने कोई चरण नहीं छोड़ा है.

वेब ऐप्लिकेशन की झलक, जिसमें इमेज में पहचाने गए कुत्तों के ऊपर बाउंडिंग बॉक्स दिखाए गए हैं

6. लाइव वेबकैम वीडियो पर अनुमान लगाने की सुविधा का इस्तेमाल करना

ऑब्जेक्ट का पता लगाना

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

// Run video object detection.
  // If image mode is initialized, create a classifier with video runningMode.
  if (runningMode === "IMAGE") {
    runningMode = "VIDEO";
    await objectDetector.setOptions({ runningMode: runningMode });
  }
  let nowInMs = performance.now();

  // Detect objects with the detectForVideo() method.
  const result = await objectDetector.detectForVideo(video, nowInMs);

  displayVideoDetections(result.detections);

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

अनुमानों को प्रोसेस करना और उन्हें दिखाना

डिटेक्शन के नतीजों को प्रोसेस करने और दिखाने के लिए, displayVideoDetections() फ़ंक्शन पर जाएं. इसके बाद, फ़ंक्शन के मुख्य हिस्से में यह कोड जोड़ें:

//  Display video object detection results.
  for (let child of children) {
    liveView.removeChild(child);
  }
  children.splice(0);

  // Iterate through predictions and draw them to the live view.
  for (const detection of result.detections) {
    const p = document.createElement("p");
    p.innerText =
      detection.categories[0].categoryName +
      " - with " +
      Math.round(parseFloat(detection.categories[0].score) * 100) +
      "% confidence.";
    p.style =
      "left: " +
      (video.offsetWidth -
        detection.boundingBox.width -
        detection.boundingBox.originX) +
      "px;" +
      "top: " +
      detection.boundingBox.originY +
      "px; " +
      "width: " +
      (detection.boundingBox.width - 10) +
      "px;";

    const highlighter = document.createElement("div");
    highlighter.setAttribute("class", "highlighter");
    highlighter.style =
      "left: " +
      (video.offsetWidth -
        detection.boundingBox.width -
        detection.boundingBox.originX) +
      "px;" +
      "top: " +
      detection.boundingBox.originY +
      "px;" +
      "width: " +
      (detection.boundingBox.width - 10) +
      "px;" +
      "height: " +
      detection.boundingBox.height +
      "px;";

    liveView.appendChild(highlighter);
    liveView.appendChild(p);

    // Store drawn objects in memory so that they're queued to delete at next call.
    children.push(highlighter);
    children.push(p);
  }
}

यह कोड, पहले से की गई किसी भी हाइलाइटिंग को हटा देता है. इसके बाद, यह <p> टैग बनाता है और उन्हें दिखाता है, ताकि पता लगाए गए हर ऑब्जेक्ट को हाइलाइट किया जा सके.

ऐप्लिकेशन को टेस्ट करना

लाइव ऑब्जेक्ट डिटेक्शन की सुविधा को टेस्ट करने के लिए, उस कुत्ते की इमेज का इस्तेमाल करें जिस पर मॉडल को ट्रेन किया गया था.

ऐप्लिकेशन को टेस्ट करने के लिए, यह तरीका अपनाएं:

कुत्ते की किसी एक फ़ोटो को अपने फ़ोन पर डाउनलोड करें.
झलक देखने वाले पैनल में, वेबकैम चालू करें पर क्लिक करें.
अगर आपका ब्राउज़र कोई ऐसा डायलॉग दिखाता है जिसमें आपसे वेबकैम का ऐक्सेस देने के लिए कहा जाता है, तो अनुमति दें.
अपने फ़ोन पर मौजूद कुत्ते की तस्वीर को वेबकैम के सामने रखें. बाउंडिंग बॉक्स में कुत्ते का नाम और मॉडल का कॉन्फ़िडेंस लेवल दिखाया गया है.
अगर बाउंडिंग बॉक्स नहीं है, तो Chrome DevTools खोलें. इसके बाद, गड़बड़ियों के लिए कंसोल पैनल देखें या पिछले चरणों की समीक्षा करें, ताकि यह पक्का किया जा सके कि आपने कोई चरण नहीं छोड़ा है.

लाइव वेबकैम के सामने रखे गए कुत्ते की इमेज पर बाउंडिंग बॉक्स

7. बधाई हो

बधाई हो! आपने एक ऐसा वेब ऐप्लिकेशन बनाया है जो इमेज में मौजूद ऑब्जेक्ट की पहचान करता है. ज़्यादा जानने के लिए, CodePen पर ऐप्लिकेशन का पूरा वर्शन देखें.

MediaPipe की मदद से, कस्टम ऑब्जेक्ट डिटेक्शन वेब ऐप्लिकेशन बनाएं

1. शुरू करने से पहले

आपको क्या सीखने को मिलेगा

आपको क्या बनाना है

आपको किन चीज़ों की ज़रूरत होगी

2. सेट अप करें

स्टार्टर ऐप्लिकेशन की समीक्षा करना

3. MediaPipe tasks-vision पैकेज इंपोर्ट करें और ज़रूरी वैरिएबल जोड़ें

4. ऑब्जेक्ट डिटेक्टर को शुरू करना

5. इमेज पर अनुमान लगाने की सुविधा इस्तेमाल करना

ऑब्जेक्ट का पता लगाना

अनुमानों को प्रोसेस करना और उन्हें दिखाना

ऐप्लिकेशन को टेस्ट करना

6. लाइव वेबकैम वीडियो पर अनुमान लगाने की सुविधा का इस्तेमाल करना

ऑब्जेक्ट का पता लगाना

अनुमानों को प्रोसेस करना और उन्हें दिखाना

ऐप्लिकेशन को टेस्ट करना

7. बधाई हो

ज़्यादा जानें