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

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 फ़ंक्शन की मदद से, कॉन्फ़िगरेशन विकल्पों के साथ जेस्चर आइडेंटिफ़ायर. कॉन्फ़िगरेशन के बारे में ज़्यादा जानकारी पाने के लिए विकल्पों के लिए, कॉन्फ़िगरेशन के विकल्प देखें.

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

// 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 पर सेट किया जाता है, तो सभी उपलब्ध नतीजे दिखाए जाएंगे.
  • कैटगरी की अनुमति वाली सूची: अनुमति वाली कैटगरी के नामों की अनुमति. खाली न होने पर, क्लासिफ़िकेशन के ऐसे नतीजे जिनकी कैटगरी इस सेट में नहीं है उन्हें फ़िल्टर करके बाहर कर दिया जाएगा. ब्लॉकलिस्ट के साथ म्यूचुअली एक्सक्लूसिव.
  • कैटगरी की ब्लॉकलिस्ट: कैटगरी के नामों की ब्लॉकलिस्ट. खाली न होने पर, क्लासिफ़िकेशन के ऐसे नतीजे जिनकी कैटगरी इस सेट में है उन्हें फ़िल्टर करके बाहर कर दिया जाएगा. जिन लोगों या संगठनों को अनुमति मिली है उनकी सूची में इन्हें एक-दूसरे के लिए ही शामिल किया जा सकता है.
    		•
    • डिसप्ले नेम की स्थान-भाषा: any string
    • ज़्यादा से ज़्यादा नतीजे: any integer
    • स्कोर थ्रेशोल्ड: 0.0-1.0
    • अनुमति वाली कैटगरी: vector of strings
    • कैटगरी की ब्लॉकलिस्ट: vector of strings
    • डिसप्ले नेम की स्थान-भाषा: "en"
    • ज़्यादा से ज़्यादा नतीजे: -1
    • स्कोर थ्रेशोल्ड: 0
    • अनुमति वाली कैटगरी: खाली है
    • कैटगरी की ब्लॉकलिस्ट: खाली है
    custom_gestures_classifier_options कस्टम जेस्चर की कैटगरी तय करने वाले व्यवहार को कॉन्फ़िगर करने के विकल्प.
  • डिसप्ले नेम की स्थान-भाषा: अगर कोई स्थान TFLite मॉडल मेटाडेटा के ज़रिए दिया गया है, तो डिसप्ले नेम के लिए इस्तेमाल की जाने वाली स्थान-भाषा.
  • सबसे ज़्यादा नतीजे: दिए जाने वाले, सबसे ज़्यादा स्कोर वाले क्लासिफ़िकेशन नतीजे की ज़्यादा से ज़्यादा संख्या. यदि < कोई समस्या नहीं है, तो सभी उपलब्ध नतीजे दिखाए जाएंगे.
  • स्कोर थ्रेशोल्ड: वह स्कोर जिसके नीचे वाले नतीजे अस्वीकार कर दिए जाते हैं. अगर इस नीति को 0 पर सेट किया जाता है, तो सभी उपलब्ध नतीजे दिखाए जाएंगे.
  • कैटगरी की अनुमति वाली सूची: अनुमति वाली कैटगरी के नामों की अनुमति. खाली न होने पर, क्लासिफ़िकेशन के ऐसे नतीजे जिनकी कैटगरी इस सेट में नहीं है उन्हें फ़िल्टर करके बाहर कर दिया जाएगा. ब्लॉकलिस्ट के साथ म्यूचुअली एक्सक्लूसिव.
  • कैटगरी की ब्लॉकलिस्ट: कैटगरी के नामों की ब्लॉकलिस्ट. खाली न होने पर, क्लासिफ़िकेशन के ऐसे नतीजे जिनकी कैटगरी इस सेट में है उन्हें फ़िल्टर करके बाहर कर दिया जाएगा. जिन लोगों या संगठनों को अनुमति मिली है उनकी सूची में इन्हें एक-दूसरे के लिए ही शामिल किया जा सकता है.
    		•
    • डिसप्ले नेम की स्थान-भाषा: any string
    • ज़्यादा से ज़्यादा नतीजे: any integer
    • स्कोर थ्रेशोल्ड: 0.0-1.0
    • अनुमति वाली कैटगरी: vector of strings
    • कैटगरी की ब्लॉकलिस्ट: vector of strings
    • डिसप्ले नेम की स्थान-भाषा: "en"
    • ज़्यादा से ज़्यादा नतीजे: -1
    • स्कोर थ्रेशोल्ड: 0
    • अनुमति वाली कैटगरी: खाली है
    • कैटगरी की ब्लॉकलिस्ट: खाली है

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

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

    टास्क को पूरा करें

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

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

    इमेज

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

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

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