MediaPipe हैंड लैंडमार्क टास्क की मदद से, इमेज में मौजूद हाथों के लैंडमार्क का पता लगाया जा सकता है. इन निर्देशों में आपको वेब और JavaScript ऐप्लिकेशन के लिए हैंड लैंडमार्कर इस्तेमाल करने का तरीका बताया गया है.
इस टास्क की क्षमताओं, मॉडल, और कॉन्फ़िगरेशन विकल्पों के बारे में ज़्यादा जानकारी के लिए, खास जानकारी देखें.
कोड का उदाहरण
हैंड लैंडमार्कर के लिए उदाहरण कोड, आपके रेफ़रंस के लिए 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/
टास्क बनाएं
अनुमान लगाने के लिए टास्क तैयार करने के लिए, हैंड लैंडमार्क createFrom...() फ़ंक्शन में से किसी एक का इस्तेमाल करें. ट्रेन की गई मॉडल फ़ाइल के रिलेटिव या ऐब्सलूट पाथ के साथ, createFromModelPath() फ़ंक्शन का इस्तेमाल करें.
अगर आपका मॉडल पहले ही मेमोरी में लोड हो गया है, तो createFromModelBuffer() तरीके का इस्तेमाल किया जा सकता है.
नीचे दिया गया कोड उदाहरण, टास्क सेट अप करने के लिए createFromOptions() फ़ंक्शन का इस्तेमाल करने के बारे में बताता है. createFromOptions फ़ंक्शन से आप कॉन्फ़िगरेशन विकल्पों के साथ हैंड लैंडमार्कर को
पसंद के मुताबिक बना सकते हैं. कॉन्फ़िगरेशन के विकल्पों के बारे में ज़्यादा जानकारी के लिए, कॉन्फ़िगरेशन के विकल्प देखें.
नीचे दिया गया कोड बताता है कि पसंद के मुताबिक विकल्पों की मदद से टास्क को कैसे बनाया और कॉन्फ़िगर किया जाए:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const handLandmarker = await HandLandmarker.createFromOptions(
vision,
{
baseOptions: {
modelAssetPath: "hand_landmarker.task"
},
numHands: 2
});
कॉन्फ़िगरेशन विकल्प
इस टास्क में वेब और JavaScript ऐप्लिकेशन के लिए ये कॉन्फ़िगरेशन विकल्प हैं:
| विकल्प का नाम | ब्यौरा | वैल्यू रेंज | डिफ़ॉल्ट मान |
|---|---|---|---|
runningMode |
टास्क के लिए, रनिंग मोड सेट करता है. इसके दो मोड हैं: इमेज: सिंगल इमेज इनपुट के लिए मोड. वीडियो: यह मोड, किसी वीडियो के डिकोड किए गए फ़्रेम या इनपुट डेटा की लाइवस्ट्रीम के दौरान होता है, जैसे कि कैमरे से. |
{IMAGE, VIDEO} |
IMAGE |
numHands |
हैंड लैंडमार्क डिटेक्टर की मदद से, ज़्यादा से ज़्यादा कितने हाथ पहचाने गए हैं. | Any integer > 0 |
1 |
minHandDetectionConfidence |
हाथ की पहचान करने वाली सुविधा के लिए, पाम डिटेक्शन मॉडल में सबसे कम कॉन्फ़िडेंस स्कोर. | 0.0 - 1.0 |
0.5 |
minHandPresenceConfidence |
हैंड लैंडमार्क डिटेक्शन मॉडल में हाथ की मौजूदगी के स्कोर के लिए कम से कम कॉन्फ़िडेंस स्कोर. वीडियो मोड और लाइव स्ट्रीम मोड में, अगर हैंड लैंडमार्क मॉडल के हाथ की मौजूदगी का कॉन्फ़िडेंस स्कोर इस थ्रेशोल्ड से कम है, तो हैंड लैंडमार्कर, हथेली की पहचान करने वाले मॉडल को ट्रिगर करता है. ऐसा न होने पर, लाइटवेट हैंड ट्रैकिंग एल्गोरिदम, लैंडमार्क की बाद में पहचान करने के लिए हाथों की जगह का पता लगाता है. | 0.0 - 1.0 |
0.5 |
minTrackingConfidence |
हैंड ट्रैकिंग के लिए सबसे कम कॉन्फ़िडेंस स्कोर, जिसे कामयाब माना जाएगा. यह मौजूदा फ़्रेम और आखिरी फ़्रेम में मौजूद हाथों के बीच का बाउंडिंग बॉक्स IoU थ्रेशोल्ड है. अगर हैंड लैंडमार्कर के वीडियो मोड और स्ट्रीम मोड में ट्रैकिंग काम नहीं करती है, तो हैंड लैंडमार्कर हाथ की पहचान करने की सुविधा को ट्रिगर कर देता है. ऐसा न होने पर, हाथ की पहचान करने वाली सुविधा को छोड़ दें. | 0.0 - 1.0 |
0.5 |
डेटा तैयार करना
हैंड लैंडमार्कर, इमेज में मौजूद हाथ के लैंडमार्क का ऐसे किसी भी फ़ॉर्मैट में पता लगा सकता है जो होस्ट ब्राउज़र पर काम करता हो. यह टास्क डेटा इनपुट की प्री-प्रोसेसिंग को भी हैंडल करता है, जिसमें साइज़ बदलना, रोटेशन, और वैल्यू को नॉर्मलाइज़ेशन शामिल हैं. वीडियो में हाथ के लैंडमार्क का पता लगाने के लिए, एपीआई का इस्तेमाल किया जा सकता है. इससे एक बार में एक फ़्रेम को तुरंत प्रोसेस किया जा सकता है. इसके लिए, फ़्रेम के टाइमस्टैंप का इस्तेमाल करके यह पता लगाया जा सकता है कि वीडियो में हैंड लैंडमार्क कब आते हैं.
टास्क चलाएं
हैंड लैंडमार्कर, अनुमानों को ट्रिगर करने के लिए detect() (रनिंग मोड image के साथ) और
detectForVideo() (रनिंग मोड video के साथ) तरीकों का इस्तेमाल करता है. यह टास्क डेटा को प्रोसेस करता है, हाथ के लैंडमार्क का पता लगाता है, और
फिर नतीजों की रिपोर्ट करता है.
हैंड लैंडमार्क detect() और detectForVideo() वाले तरीके पर किए जाने वाले कॉल सिंक्रोनस (एक ही समय पर) चलते हैं और यूज़र इंटरफ़ेस थ्रेड को ब्लॉक कर देते हैं. अगर आपको किसी डिवाइस के कैमरे से, वीडियो फ़्रेम में हैंड लैंडमार्क का पता चलता है, तो हर डिटेक्शन मुख्य थ्रेड को ब्लॉक कर देता है. किसी दूसरे थ्रेड पर detect() और detectForVideo() तरीके चलाने के लिए, वेब वर्कर लागू करके इसे रोका जा सकता है.
नीचे दिया गया कोड दिखाता है कि टास्क मॉडल के साथ प्रोसेसिंग कैसे एक्ज़ीक्यूट करें:
Image
const image = document.getElementById("image") as HTMLImageElement;
const handLandmarkerResult = handLandmarker.detect(image);
वीडियो
await handLandmarker.setOptions({ runningMode: "video" });
let lastVideoTime = -1;
function renderLoop(): void {
const video = document.getElementById("video");
if (video.currentTime !== lastVideoTime) {
const detections = handLandmarker.detectForVideo(video);
processResults(detections);
lastVideoTime = video.currentTime;
}
requestAnimationFrame(() => {
renderLoop();
});
}
हैंड लैंडमार्क टास्क को सही तरीके से चलाने के बारे में जानने के लिए, कोड का उदाहरण देखें.
नतीजे मैनेज करें और दिखाएं
हैंड लैंडमार्कर, जांच के बाद चलाए जाने वाले हर नतीजे के लिए, हैंड लैंडमार्कर नतीजे के लिए एक ऑब्जेक्ट जनरेट करता है. नतीजे के ऑब्जेक्ट में, इमेज के निर्देशांकों में हैंड लैंडमार्क, दुनिया के निर्देशांकों में हैंडमार्क, और पहचाने गए हाथों की हैंडराइटिंग(बायां/दाएं हाथ) होती है.
इस टास्क के आउटपुट डेटा का एक उदाहरण यहां दिया गया है:
HandLandmarkerResult आउटपुट में तीन कॉम्पोनेंट होते हैं. हर कॉम्पोनेंट एक कलेक्शन है. इसमें किसी एक हाथ की पहचान करने वाले हर एलिमेंट के लिए ये नतीजे शामिल होते हैं:
हाथ का इस्तेमाल
हाथ का इस्तेमाल यह बताता है कि पहचाने गए हाथ बाएं हाथ हैं या दाएं.
लैंडमार्क
यहां 21 हैंड लैंडमार्क हैं, जिनमें से हर एक में
x,y, औरzनिर्देशांक हैं.xऔरyकोऑर्डिनेट को इमेज की चौड़ाई और ऊंचाई के हिसाब से [0.0, 1.0] नॉर्मलाइज़ किया जाता है.zनिर्देशांक, लैंडमार्क की गहराई दिखाता है. इसमें, कलाई पर मौजूद गहराई का मतलब, शुरुआत की जगह होता है. वैल्यू जितनी छोटी होगी, लैंडमार्क कैमरे के उतना ही करीब होगा.zकी तीव्रताxके बराबर तीव्रता का इस्तेमाल करती है.विश्व भू-स्थल
दुनिया के निर्देशांकों में भी इन 21 हाथ की मशहूर जगहों को दिखाया गया है. हर लैंडमार्क
x,y, औरzसे मिलकर बना है. यह असल दुनिया के 3D निर्देशांक को मीटर में दिखाता है और इन निर्देशांकों को हाथ के ज्यामितीय केंद्र में रखा गया है.
HandLandmarkerResult:
Handedness:
Categories #0:
index : 0
score : 0.98396
categoryName : Left
Landmarks:
Landmark #0:
x : 0.638852
y : 0.671197
z : -3.41E-7
Landmark #1:
x : 0.634599
y : 0.536441
z : -0.06984
... (21 landmarks for a hand)
WorldLandmarks:
Landmark #0:
x : 0.067485
y : 0.031084
z : 0.055223
Landmark #1:
x : 0.063209
y : -0.00382
z : 0.020920
... (21 world landmarks for a hand)
इस इमेज में, टास्क के आउटपुट का विज़ुअलाइज़ेशन दिखाया गया है:
हैंड लैंडमार्कर के उदाहरण वाले कोड से पता चलता है कि टास्क से दिखाए गए नतीजों को कैसे दिखाया जाए. ज़्यादा जानकारी के लिए, कोड का उदाहरण देखें