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

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

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

कोड का उदाहरण

Pose Landmarker के उदाहरण कोड में, इस टास्क को JavaScript में पूरी तरह से लागू करने का तरीका बताया गया है. इस कोड की मदद से, इस टास्क को टेस्ट किया जा सकता है. साथ ही, पोज़ लैंडमार्कर ऐप्लिकेशन बनाना शुरू किया जा सकता है. सिर्फ़ वेब ब्राउज़र का इस्तेमाल करके, पोज़ लैंडमार्कर उदाहरण को देखा, चलाया, और बदला जा सकता है.

सेटअप

इस सेक्शन में, डेवलपमेंट एनवायरमेंट सेट अप करने का तरीका बताया गया है. इससे खास तौर पर, Pose Landmarker का इस्तेमाल किया जा सकेगा. वेब और JavaScript डेवलपमेंट एनवायरमेंट सेट अप करने के बारे में सामान्य जानकारी के लिए, वेब के लिए सेटअप गाइड देखें. इसमें प्लैटफ़ॉर्म के वर्शन से जुड़ी ज़रूरी शर्तें भी शामिल हैं.

JavaScript पैकेज

Pose Landmarker का कोड, 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.mjs"
    crossorigin="anonymous"></script>
</head>

मॉडल

MediaPipe Pose Landmarker टास्क के लिए, ट्रेनिंग दिया गया ऐसा मॉडल ज़रूरी है जो इस टास्क के साथ काम करता हो. 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: यह मोड, एक इमेज वाले इनपुट के लिए होता है.

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

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

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

टास्क को रन करना

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

Pose Landmarker 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();
  });
}

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

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

Pose Landmarker, हर बार ऑब्जेक्ट का पता लगाने पर एक 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: इमेज में लैंडमार्क दिखने की संभावना.

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

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

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

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

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