1. शुरू करने से पहले
MediaPipe Solutions की मदद से अपने ऐप्लिकेशन में मशीन लर्निंग (एमएल) से जुड़े समाधान लागू किए जा सकते हैं. यह एक ऐसा फ़्रेमवर्क उपलब्ध कराता है जिसकी मदद से, पहले से बनी प्रोसेसिंग पाइपलाइन कॉन्फ़िगर की जा सकती है. इससे उपयोगकर्ताओं को तुरंत, दिलचस्प, और काम का आउटपुट मिलता है. आप डिफ़ॉल्ट मॉडल को अपडेट करने के लिए, इन समाधानों को Model Maker की मदद से कस्टमाइज़ भी कर सकते हैं.
ऑब्जेक्ट डिटेक्शन, MediaPipe Solutions के दिए गए एमएल विज़न टास्क में से एक है. MediaPipe Tasks, Android, Python, और वेब के लिए उपलब्ध है.
इस कोडलैब में, वेब ऐप्लिकेशन में ऑब्जेक्ट की पहचान करने की सुविधा जोड़ी जाती है, ताकि इमेज और लाइव वेबकैम वीडियो में कुत्तों की पहचान की जा सके.
आप इन चीज़ों के बारे में जानेंगे
- MediaPipe Tasks की मदद से, वेब ऐप्लिकेशन में ऑब्जेक्ट की पहचान करने वाले टास्क को शामिल करने का तरीका.
आपको क्या बनाना होगा
- ऐसा वेब ऐप्लिकेशन जो कुत्तों की मौजूदगी का पता लगाता है. MediaPipe Model Maker की मदद से, अपनी पसंद के ऑब्जेक्ट की क्लास का पता लगाने के लिए, मॉडल को अपनी पसंद के मुताबिक बनाया जा सकता है.
आपको इनकी ज़रूरत होगी
- एक CodePen खाता
- वेब ब्राउज़र वाला डिवाइस
- JavaScript, CSS, और HTML की बुनियादी जानकारी
2. सेट अप करें
यह कोडलैब आपके कोड को CodePen में चलाता है. यह एक सोशल डेवलपमेंट एनवायरमेंट है,जो आपको ब्राउज़र में कोड लिखने के बाद नतीजे देखने की सुविधा देता है.
सेट अप करने के लिए, यह तरीका अपनाएं:
- अपने CodePen खाते में, इस CodePen पर जाएं. अपना खुद का ऑब्जेक्ट डिटेक्टर बनाने के लिए, इस कोड का इस्तेमाल शुरुआती बेस के तौर पर किया जाता है.
- नेविगेशन मेन्यू में CodePen के सबसे नीचे, स्टार्टर कोड की कॉपी बनाने के लिए Fork पर क्लिक करें.
- JS टैब में,
एक्सपैंडर ऐरो पर क्लिक करें. इसके बाद, JavaScript एडिटर बड़ा करें चुनें. इस कोडलैब के लिए, सिर्फ़ JS टैब में काम में बदलाव किया जाता है, ताकि आपको एचटीएमएल या सीएसएस टैब देखने की ज़रूरत न पड़े.
स्टार्टर ऐप्लिकेशन की समीक्षा करें
- झलक दिखाने वाले पैनल में, ध्यान दें कि कुत्तों की दो इमेज मौजूद हैं और वेबकैम चलाने का विकल्प मौजूद है. इस ट्यूटोरियल में आपने जिस मॉडल का इस्तेमाल किया है उसे दो इमेज में दिख रहे तीन कुत्तों के डेटा के आधार पर ट्रेनिंग दी गई है.
- JS टैब में, ध्यान दें कि पूरे कोड में कई टिप्पणियां हैं. उदाहरण के लिए, आपको लाइन 15 पर यह टिप्पणी दिखेगी:
// Import the required package.
इन टिप्पणियों से पता चलता है कि कोड स्निपेट कहां डालने हैं.
3. MediaPipe के Tasks-विज़न पैकेज को इंपोर्ट करें और ज़रूरी वैरिएबल जोड़ें
- 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 या अपनी पसंद के पैकेज मैनेजर या CDN के साथ 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% या उससे ज़्यादा कॉन्फ़िडेंस लेवल वाले किसी भी ऑब्जेक्ट के लिए नतीजे दिखाता है. अपने ऐप्लिकेशन की ज़रूरतों के हिसाब से, इस थ्रेशोल्ड में बदलाव किया जा सकता है.
runningMode प्रॉपर्टी को ObjectDetector ऑब्जेक्ट शुरू करने पर सेट किया जाता है. इसे और अन्य विकल्पों को बाद में ज़रूरत के मुताबिक बदला जा सकता है.
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 पर ऐप्लिकेशन का पूरा हो चुका वर्शन देखें.