पेश है Google AI Edge Portal: बड़े पैमाने पर एज एआई का बेंचमार्क. निजी झलक के दौरान ऐक्सेस का अनुरोध करने के लिए, साइन-अप करें.

वेब के लिए हैंड लैंडमार्क की पहचान करने वाली गाइड

MediaPipe Hand Landmarker टास्क की मदद से, किसी इमेज में हाथों के लैंडमार्क का पता लगाया जा सकता है. इन निर्देशों में बताया गया है कि वेब और JavaScript ऐप्लिकेशन के लिए, Hand Landmarker का इस्तेमाल कैसे किया जाता है.

इस टास्क की सुविधाओं, मॉडल, और कॉन्फ़िगरेशन के विकल्पों के बारे में ज़्यादा जानने के लिए, खास जानकारी देखें.

कोड का उदाहरण

हैंड लैंडमार्कर के उदाहरण कोड में, इस टास्क को JavaScript में पूरी तरह से लागू करने का तरीका बताया गया है. इस कोड की मदद से, इस टास्क की जांच की जा सकती है. साथ ही, हाथ के लैंडमार्क का पता लगाने वाला अपना ऐप्लिकेशन बनाया जा सकता है. अपने वेब ब्राउज़र का इस्तेमाल करके, हैंड लैंडमार्कर उदाहरण को देखा, चलाया, और उसमें बदलाव किया जा सकता है.

सेटअप

इस सेक्शन में, हैंड लैंडमार्कर का इस्तेमाल करने के लिए, डेवलपमेंट एनवायरमेंट सेट अप करने का तरीका बताया गया है. वेब और JavaScript डेवलपमेंट एनवायरमेंट सेट अप करने के बारे में सामान्य जानकारी के लिए, वेब के लिए सेटअप गाइड देखें. इसमें प्लैटफ़ॉर्म के वर्शन से जुड़ी ज़रूरी शर्तें भी शामिल हैं.

JavaScript पैकेज

हैंड लैंडमार्कर कोड, MediaPipe @mediapipe/tasks-vision NPM पैकेज के ज़रिए उपलब्ध है. इन लाइब्रेरी को ढूंढने और डाउनलोड करने के लिए, प्लैटफ़ॉर्म की सेटअप गाइड में दिए गए निर्देशों का पालन करें.

ज़रूरी पैकेज को 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.mjs"
    crossorigin="anonymous"></script>
</head>

मॉडल

MediaPipe Hand Landmarker टास्क के लिए, एक ऐसे मॉडल की ज़रूरत होती है जिसे ट्रेनिंग दी गई हो और जो इस टास्क के साथ काम करता हो. हाथ के लैंडमार्क का पता लगाने के लिए उपलब्ध ट्रेन किए गए मॉडल के बारे में ज़्यादा जानने के लिए, टास्क की खास जानकारी वाला मॉडल सेक्शन देखें.

कोई मॉडल चुनें और उसे डाउनलोड करें. इसके बाद, उसे अपने प्रोजेक्ट डायरेक्ट्री में सेव करें:

<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, 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`

डेटा तैयार करना

Hand Landmarker, होस्ट ब्राउज़र के साथ काम करने वाले किसी भी फ़ॉर्मैट में मौजूद इमेज में हाथ के लैंडमार्क का पता लगा सकता है. यह टास्क, डेटा इनपुट की प्रीप्रोसेसिंग को भी मैनेज करता है. इसमें इमेज का साइज़ बदलना, उसे घुमाना, और वैल्यू को सामान्य करना शामिल है. वीडियो में हाथ के लैंडमार्क का पता लगाने के लिए, एपीआई का इस्तेमाल किया जा सकता है. इससे एक बार में एक फ़्रेम को तुरंत प्रोसेस किया जा सकता है. इसके लिए, फ़्रेम के टाइमस्टैंप का इस्तेमाल करके यह पता लगाया जा सकता है कि वीडियो में हाथ के लैंडमार्क कब दिखते हैं.

टास्क को रन करना

हाथ के लैंडमार्क का पता लगाने वाला मॉडल, अनुमान लगाने के लिए detect() (रनिंग मोड image के साथ) और detectForVideo() (रनिंग मोड video के साथ) तरीकों का इस्तेमाल करता है. यह टास्क, डेटा को प्रोसेस करता है, हाथ के लैंडमार्क का पता लगाने की कोशिश करता है, और फिर नतीजे दिखाता है.

हैंड लैंडमार्कर detect() और detectForVideo() के तरीके एक साथ चलते हैं और यूज़र इंटरफ़ेस थ्रेड को ब्लॉक करते हैं. अगर आपको किसी डिवाइस के कैमरे से वीडियो फ़्रेम में हाथ के लैंडमार्क का पता चलता है, तो हर बार पता चलने पर मुख्य थ्रेड ब्लॉक हो जाती है. detect() और detectForVideo() तरीकों को किसी अन्य थ्रेड पर चलाने के लिए, वेब वर्कर लागू करके ऐसा होने से रोका जा सकता है.

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

इमेज

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)

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

थंब्स अप का इशारा करते हुए हाथ की इमेज. इसमें हाथ की हड्डियों का ढांचा दिखाया गया है

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