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

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

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

कोड का उदाहरण

पोज़ लैंडमार्कर के लिए दिए गए उदाहरण के कोड में, इस टास्क को 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 -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

मॉडल

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

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

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

टास्क बनाना

अनुमान लगाने के लिए टास्क तैयार करने के लिए, Pose Landmarker 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: एक इमेज इनपुट के लिए मोड.

वीडियो: यह मोड, वीडियो के डिकोड किए गए फ़्रेम या कैमरे जैसे इनपुट डेटा की लाइव स्ट्रीम के लिए होता है.
{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

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

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

टास्क चलाना

पोज़ लैंडमार्कर, अनुमान ट्रिगर करने के लिए 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: इमेज की चौड़ाई (x) और ऊंचाई (y) के हिसाब से, लैंडमार्क के निर्देशांक को 0.0 से 1.0 के बीच नॉर्मलाइज़ किया गया है.

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

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

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

  • x, y, और z: असल ज़िंदगी के 3-डाइमेंशनल निर्देशांक, मीटर में. इनमें कूल्हों के बीच के बिंदु को ऑरिजिन माना जाता है.

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

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

ध्यान में बैठी एक महिला. उसके पोज़ को वायरफ़्रेम से हाइलाइट किया गया है, जो उसके अंगों और धड़ की पोज़िशन दिखाता है

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

पिछली इमेज का सेगमेंटेशन मास्क, जिसमें महिला के आकार की जानकारी दी गई है

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