पेश है LiteRT: यह, डिवाइस में मौजूद एआई के लिए Google की बेहतरीन परफ़ॉर्मेंस वाला रनटाइम है. इसे पहले TensorFlow Lite के नाम से जाना जाता था.

इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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`

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

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

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

हैंड लैंडमार्कर, 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)

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

हैंड लैंडमार्कर के उदाहरण कोड से, मैप में दिख रहे टास्क के नतीजे वापस मिले हैं, तो कोड का उदाहरण