वेब के लिए जेस्चर पहचानने की गाइड

MediaPipe Gestures पहचानकर्ता टास्क आपको रीयल टाइम में हाथ के जेस्चर पहचानने की सुविधा देता है. साथ ही, इससे पहचाने गए हाथों के हाव-भाव के नतीजे और हैंड लैंडमार्क की जानकारी मिलती है. ये निर्देश आपको बताते हैं कि वेब और 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 Gestures पहचानकर्ता टास्क के लिए एक ऐसा प्रशिक्षित मॉडल होना ज़रूरी है जो इस टास्क के साथ काम कर सके. जेस्चर आइडेंटिफ़ायर के लिए उपलब्ध प्रशिक्षित मॉडल के बारे में ज़्यादा जानकारी के लिए, टास्क की खास जानकारी मॉडल सेक्शन देखें.

मॉडल चुनें और डाउनलोड करें और फिर इसे अपनी प्रोजेक्ट डायरेक्ट्री में स्टोर करें:

<dev-project-root>/app/shared/models/

टास्क बनाएं

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

नीचे दिया गया कोड उदाहरण, टास्क सेट अप करने के लिए createFromOptions() फ़ंक्शन का इस्तेमाल करने के बारे में बताता है. createFromOptions फ़ंक्शन की मदद से आप कॉन्फ़िगरेशन के विकल्पों के साथ, जेस्चर आइडेंटिफ़ायर को पसंद के मुताबिक बना सकते हैं. कॉन्फ़िगरेशन के विकल्पों के बारे में ज़्यादा जानकारी के लिए, कॉन्फ़िगरेशन के विकल्प देखें.

नीचे दिया गया कोड बताता है कि पसंद के मुताबिक विकल्पों की मदद से टास्क को कैसे बनाया और कॉन्फ़िगर किया जाए:

// Create task for image file processing:
const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm "
);
const gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: "https://storage.googleapis.com/mediapipe-tasks/gesture_recognizer/gesture_recognizer.task"
  },
  numHands: 2
});

कॉन्फ़िगरेशन विकल्प

वेब ऐप्लिकेशन के लिए, इस टास्क में कॉन्फ़िगरेशन के ये विकल्प हैं:

विकल्प का नाम ब्यौरा वैल्यू रेंज डिफ़ॉल्ट मान
runningMode टास्क के लिए, रनिंग मोड सेट करता है. इसके दो मोड हैं:

इमेज: सिंगल इमेज इनपुट के लिए मोड.

वीडियो: यह मोड, किसी वीडियो के डिकोड किए गए फ़्रेम या इनपुट डेटा की लाइवस्ट्रीम के दौरान होता है, जैसे कि कैमरे से.		 {IMAGE, VIDEO} IMAGE
num_hands GestureRecognizer, यह पता लगाता है कि आपने ज़्यादा से ज़्यादा कितने हाथ इस्तेमाल किए हैं. Any integer > 0 1
min_hand_detection_confidence हाथ की पहचान करने वाली सुविधा के लिए, पाम डिटेक्शन मॉडल में सबसे कम कॉन्फ़िडेंस स्कोर. 0.0 - 1.0 0.5
min_hand_presence_confidence हैंड लैंडमार्क की पहचान करने वाले मॉडल में, हाथ की मौजूदगी की पहचान के स्कोर का कम से कम कॉन्फ़िडेंस स्कोर. 'जेस्चर आइडेंटिफ़ायर' के वीडियो मोड और लाइव स्ट्रीम मोड में, अगर हैंड लैंडमार्क मॉडल के हाथ की मौजूदगी का स्कोर इस थ्रेशोल्ड से कम है, तो यह हथेली की पहचान करने वाले मॉडल को ट्रिगर करता है. इसके अलावा, लाइटवेट हैंड ट्रैकिंग एल्गोरिदम का इस्तेमाल करके, हाथों की जगह का पता लगाया जाता है, ताकि लैंडमार्क का पता लगाया जा सके. 0.0 - 1.0 0.5
min_tracking_confidence हैंड ट्रैकिंग के लिए सबसे कम कॉन्फ़िडेंस स्कोर, जिसे कामयाब माना जाएगा. यह मौजूदा फ़्रेम और आखिरी फ़्रेम में मौजूद हाथों के बीच का बाउंडिंग बॉक्स IoU थ्रेशोल्ड है. जेस्चर आइडेंटिफ़ायर के वीडियो मोड और स्ट्रीम मोड में, अगर ट्रैकिंग काम नहीं करती है, तो जेस्चर आइडेंटिफ़ायर हैंड डिटेक्शन ट्रिगर करता है. ऐसा न होने पर, हाथ की पहचान करने वाली सुविधा को छोड़ दिया जाएगा. 0.0 - 1.0 0.5
canned_gestures_classifier_options पहले से तैयार जेस्चर क्लासिफ़ायर व्यवहार को कॉन्फ़िगर करने के विकल्प. पहले से तैयार किए गए जेस्चर ["None", "Closed_Fist", "Open_Palm", "Pointing_Up", "Thumb_Down", "Thumb_Up", "Victory", "ILoveYou"]
हैं
  • डिसप्ले नेम की स्थान-भाषा: TFLite मॉडल के मेटाडेटा में बताए गए डिसप्ले नेम के लिए इस्तेमाल की जाने वाली स्थान-भाषा, अगर कोई है, तो उसे चुनें.
  • ज़्यादा से ज़्यादा नतीजे: लौटाए जाने वाले, सबसे ज़्यादा स्कोर किए गए वर्गीकरण के नतीजों की ज़्यादा से ज़्यादा संख्या. अगर < 0 है, तो सभी उपलब्ध नतीजे दिखाए जाएंगे.
  • स्कोर थ्रेशोल्ड: वह स्कोर जिसके नीचे नतीजे अस्वीकार किए जाते हैं. अगर नीति को 0 पर सेट किया जाता है, तो सभी उपलब्ध नतीजे दिखाए जाएंगे.
  • कैटगरी की अनुमति: कैटगरी के नामों की अनुमति वाली सूची. अगर यह खाली नहीं है, तो कैटगरी के जिन नतीजों की कैटगरी इस सेट में नहीं होगी उन्हें फ़िल्टर करके बाहर कर दिया जाएगा. ब्लॉकलिस्ट के साथ म्यूचुअली एक्सक्लूसिव.
  • कैटगरी की ब्लॉकलिस्ट: कैटगरी के नामों की ब्लॉकलिस्ट. अगर यह खाली नहीं है, तो कैटगरी के जिन नतीजों की कैटगरी इस सेट में होगी उन्हें फ़िल्टर करके बाहर कर दिया जाएगा. अनुमति वाली सूची के साथ म्यूचुअली एक्सक्लूसिव.
    		•
    • डिसप्ले नेम की स्थान-भाषा: any string
    • अधिकतम परिणाम: any integer
    • स्कोर थ्रेशोल्ड: 0.0-1.0
    • अनुमति वाली कैटगरी: vector of strings
    • कैटगरी की ब्लॉकलिस्ट: vector of strings
    • डिसप्ले नेम की स्थान-भाषा: "en"
    • अधिकतम परिणाम: -1
    • स्कोर थ्रेशोल्ड: 0
    • अनुमति वाली कैटगरी: खाली
    • कैटगरी की ब्लॉकलिस्ट: खाली
    custom_gestures_classifier_options हाथ के जेस्चर की कैटगरी तय करने वाले कस्टम तरीके को कॉन्फ़िगर करने के विकल्प.
  • डिसप्ले नेम की स्थान-भाषा: TFLite मॉडल के मेटाडेटा में बताए गए डिसप्ले नेम के लिए इस्तेमाल की जाने वाली स्थान-भाषा, अगर कोई है, तो उसे चुनें.
  • ज़्यादा से ज़्यादा नतीजे: लौटाए जाने वाले, सबसे ज़्यादा स्कोर किए गए वर्गीकरण के नतीजों की ज़्यादा से ज़्यादा संख्या. अगर < 0 है, तो सभी उपलब्ध नतीजे दिखाए जाएंगे.
  • स्कोर थ्रेशोल्ड: वह स्कोर जिसके नीचे नतीजे अस्वीकार किए जाते हैं. अगर नीति को 0 पर सेट किया जाता है, तो सभी उपलब्ध नतीजे दिखाए जाएंगे.
  • कैटगरी की अनुमति: कैटगरी के नामों की अनुमति वाली सूची. अगर यह खाली नहीं है, तो कैटगरी के जिन नतीजों की कैटगरी इस सेट में नहीं होगी उन्हें फ़िल्टर करके बाहर कर दिया जाएगा. ब्लॉकलिस्ट के साथ म्यूचुअली एक्सक्लूसिव.
  • कैटगरी की ब्लॉकलिस्ट: कैटगरी के नामों की ब्लॉकलिस्ट. अगर यह खाली नहीं है, तो कैटगरी के जिन नतीजों की कैटगरी इस सेट में होगी उन्हें फ़िल्टर करके बाहर कर दिया जाएगा. अनुमति वाली सूची के साथ म्यूचुअली एक्सक्लूसिव.
    		•
    • डिसप्ले नेम की स्थान-भाषा: any string
    • अधिकतम परिणाम: any integer
    • स्कोर थ्रेशोल्ड: 0.0-1.0
    • अनुमति वाली कैटगरी: vector of strings
    • कैटगरी की ब्लॉकलिस्ट: vector of strings
    • डिसप्ले नेम की स्थान-भाषा: "en"
    • अधिकतम परिणाम: -1
    • स्कोर थ्रेशोल्ड: 0
    • अनुमति वाली कैटगरी: खाली
    • कैटगरी की ब्लॉकलिस्ट: खाली

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

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

    टास्क चलाएं

    जेस्चर आइडेंटिफ़ायर, अनुमानों को ट्रिगर करने के लिए recognize() (रनिंग मोड 'image' के साथ) और recognizeForVideo() (रनिंग मोड 'video' के साथ) का इस्तेमाल करता है. यह टास्क डेटा को प्रोसेस करता है, हाथ के जेस्चर पहचानने की कोशिश करता है, और फिर नतीजों की रिपोर्ट करता है.

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

    Image

    const image = document.getElementById("image") as HTMLImageElement;
const gestureRecognitionResult = gestureRecognizer.recognize(image);

    वीडियो

    await gestureRecognizer.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const gestureRecognitionResult = gestureRecognizer.recognizeForVideo(video);
    processResult(gestureRecognitionResult);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

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

    जेस्चर आइडेंटिफ़ायर टास्क को बेहतर तरीके से चलाने के लिए, कोड का उदाहरण देखें.

    नतीजे मैनेज करें और दिखाएं

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

    इस टास्क के आउटपुट डेटा का एक उदाहरण यहां दिया गया है:

    नतीजे के तौर पर मिले GestureRecognizerResult में चार कॉम्पोनेंट होते हैं और हर कॉम्पोनेंट एक कलेक्शन होता है. इसमें हर एलिमेंट में, पहचाने गए एक हाथ से मिला नतीजा शामिल होता है.

    • हाथ का इस्तेमाल

      हाथ का इस्तेमाल यह बताता है कि पहचाने गए हाथ बाएं हाथ हैं या दाएं.

    • हाथ के जेस्चर

      पहचाने गए हाथों की पहचान किए गए हाथ के जेस्चर की कैटगरी.

    • लैंडमार्क

      यहां 21 हैंड लैंडमार्क हैं, जिनमें से हर एक में x, y, और z निर्देशांक हैं. x और y कोऑर्डिनेट को इमेज की चौड़ाई और ऊंचाई के हिसाब से [0.0, 1.0] नॉर्मलाइज़ किया जाता है. z निर्देशांक, लैंडमार्क की गहराई दिखाता है. इसमें, कलाई पर मौजूद गहराई का मतलब, शुरुआत की जगह होता है. वैल्यू जितनी छोटी होगी, लैंडमार्क कैमरे के उतना ही करीब होगा. z की तीव्रता x के बराबर तीव्रता का इस्तेमाल करती है.

    • विश्व भू-स्थल

      दुनिया के निर्देशांकों में भी इन 21 हाथ की मशहूर जगहों को दिखाया गया है. हर लैंडमार्क x, y, और z से मिलकर बना है. यह असल दुनिया के 3D निर्देशांक को मीटर में दिखाता है और इन निर्देशांकों को हाथ के ज्यामितीय केंद्र में रखा गया है.

    GestureRecognizerResult:
  Handedness:
    Categories #0:
      index        : 0
      score        : 0.98396
      categoryName : Left
  Gestures:
    Categories #0:
      score        : 0.76893
      categoryName : Thumb_Up
  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)

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

    'जेस्चर आइडेंटिफ़ायर' टास्क बनाने की प्रोसेस को बेहतर तरीके से लागू करने के लिए, कोड का उदाहरण देखें.