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