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

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

ये निर्देश आपको वेब और 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 -->
<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 poseLandmarker = await poseLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

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

इस टास्क में वेब और JavaScript के लिए ये कॉन्फ़िगरेशन विकल्प मौजूद हैं ऐप्लिकेशन:

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

अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है इमेज: सिंगल इमेज इनपुट का मोड.
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है वीडियो: किसी वीडियो के डिकोड किए गए फ़्रेम के लिए मोड या इनपुट डेटा की लाइव स्ट्रीम, जैसे कि कैमरे से ली गई हो.
{IMAGE, VIDEO} IMAGE
numPoses ज़्यादा से ज़्यादा पोज़ की संख्या जिनका पता लैंडमार्क पोज़ दें. Integer > 0 1
minPoseDetectionConfidence पोज़ की पहचान के लिए कम से कम कॉन्फ़िडेंस स्कोर यह होना चाहिए सफल माना जाता है. Float [0.0,1.0] 0.5
minPosePresenceConfidence पोज़ की मौजूदगी का कम से कम कॉन्फ़िडेंस स्कोर पोज़ लैंडमार्क की पहचान करने के लिए स्कोर किया जा सकता है. Float [0.0,1.0] 0.5
minTrackingConfidence पोज़ ट्रैकिंग के लिए कम से कम कॉन्फ़िडेंस स्कोर इन्हें सफल माना जाता है. Float [0.0,1.0] 0.5
outputSegmentationMasks क्या पोज़ लैंडमार्कर, पहचाने गए आइटम के लिए सेगमेंटेशन मास्क देता है पोज़. Boolean False

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

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

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

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

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

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

इमेज

const image = document.getElementById("image") as HTMLImageElement;
const poseLandmarkerResult = poseLandmarker.detect(image);

वीडियो

await poseLandmarker.setOptions({ runningMode: "VIDEO" });

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

  if (video.currentTime !== lastVideoTime) {
    const poseLandmarkerResult = poseLandmarker.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

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

पोज़ लैंडमार्कर टास्क को पूरी तरह से लागू करने के लिए, इसे देखें: कोड का उदाहरण.

नतीजों को हैंडल करना और दिखाना

पोज़ लैंडमार्कर, हर पहचान के लिए एक poseLandmarkerResult ऑब्जेक्ट दिखाता है दौड़ना. नतीजे में मिले ऑब्जेक्ट में, हर पोज़ लैंडमार्क के लिए निर्देशांक शामिल हैं.

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

PoseLandmarkerResult:
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : 0.129959
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
      visibility   : 0.999909
      presence     : 0.999958
    ... (33 landmarks per pose)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
      visibility   : 0.999976
      presence     : 0.999998
    ... (33 world landmarks per pose)
  SegmentationMasks:
    ... (pictured below)

आउटपुट में नॉर्मलाइज़ किए गए निर्देशांक (Landmarks) और दुनिया, दोनों शामिल होते हैं हर लैंडमार्क के लिए निर्देशांक (WorldLandmarks) डालें.

आउटपुट में नीचे दिए गए नॉर्मलाइज़ किए गए निर्देशांक शामिल हैं (Landmarks):

  • x और y: लैंडमार्क कोऑर्डिनेट को 0.0 और 1.0 के बीच इमेज की चौड़ाई (x) और ऊंचाई (y).

  • z: लैंडमार्क गहराई, कूल्हे के बीच के बिंदु पर गहराई के रूप में ऑरिजिन. वैल्यू जितनी कम होती है, लैंडमार्क, कैमरे के उतना ही करीब होता है. कॉन्टेंट बनाने z मैग्निट्यूड भी x के बराबर स्केल का इस्तेमाल करता है.

  • visibility: इमेज में लैंडमार्क के दिखने की संभावना.

आउटपुट में दुनिया के ये निर्देशांक शामिल हैं (WorldLandmarks):

  • x, y, और z: मीटर में, वास्तविक दुनिया के 3-डाइमेंशन वाले निर्देशांक, मूल रूप से कूल्हे के बीच का हिस्सा.

  • visibility: इमेज में लैंडमार्क के दिखने की संभावना.

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

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

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