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

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

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

कोड का उदाहरण

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

सेटअप

इस सेक्शन में, खास तौर पर फ़ेस लैंडमार्क का इस्तेमाल करने के लिए, डेवलपमेंट एनवायरमेंट सेट अप करने से जुड़े मुख्य चरणों के बारे में बताया गया है. अपना वेब और 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 Face Transcribeer टास्क के लिए, ऐसा ट्रेनिंग मॉडल होना ज़रूरी है जो इस टास्क के साथ काम कर सके. फ़ेस लैंडमार्क के लिए तैयार किए गए मॉडल के बारे में ज़्यादा जानकारी के लिए, टास्क की खास जानकारी मॉडल सेक्शन देखें.

कोई मॉडल चुनें और उसे डाउनलोड करें और फिर उसे अपनी प्रोजेक्ट डायरेक्ट्री में स्टोर करें:

<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 faceLandmarker = await faceLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

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

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

विकल्प का नाम	ब्यौरा	वैल्यू रेंज	डिफ़ॉल्ट मान
`running_mode`	टास्क के लिए, रनिंग मोड सेट करता है. इसके दो मोड हैं: इमेज: सिंगल इमेज इनपुट के लिए मोड. वीडियो: यह मोड, किसी वीडियो के डिकोड किए गए फ़्रेम या इनपुट डेटा की लाइवस्ट्रीम के दौरान होता है, जैसे कि कैमरे से.	{`IMAGE, VIDEO`}	`IMAGE`
`numFaces`	`FaceLandmarker` की मदद से, ज़्यादा से ज़्यादा कितने चेहरों का पता लगाया जा सकता है. स्मूदिंग सिर्फ़ तब लागू होती है, जब `num_faces` को 1 पर सेट किया गया हो.	`Integer > 0`	`1`
`minFaceDetectionConfidence`	चेहरे की पहचान करने के लिए सबसे कम कॉन्फ़िडेंस स्कोर, जिसे कामयाब माना जाता है.	`Float [0.0,1.0]`	`0.5`
`minFacePresenceConfidence`	फ़ेस लैंडमार्क की पहचान करने में, चेहरे की मौजूदगी का पता लगाने के लिए सबसे कम कॉन्फ़िडेंस स्कोर.	`Float [0.0,1.0]`	`0.5`
`minTrackingConfidence`	चेहरे को ट्रैक करने की सुविधा के लिए, सबसे कम कॉन्फ़िडेंस स्कोर की मदद से पुष्टि की जाती है.	`Float [0.0,1.0]`	`0.5`
`outputFaceBlendshapes`	फ़ेस लैंडमार्कर, ब्लेंड शेप को आउटपुट करता है या नहीं. चेहरे के ब्लेंडशेप का इस्तेमाल, 3D चेहरे के मॉडल को रेंडर करने के लिए किया जाता है.	`Boolean`	`False`
`outputFacialTransformationMatrixes`	FaceLandमार्कर, चेहरे के ट्रांसफ़ॉर्मेशन मैट्रिक्स को दिखाता है या नहीं. FaceLandमार्कर, चेहरे के लैंडमार्क को कैननिकल चेहरे के मॉडल से पहचाने गए चेहरे में बदलने के लिए, मैट्रिक्स का इस्तेमाल करता है. इससे उपयोगकर्ता, पहचाने गए लैंडमार्क पर इफ़ेक्ट लागू कर सकते हैं.	`Boolean`	`False`

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

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

टास्क चलाएं

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

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

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

Image

const image = document.getElementById("image") as HTMLImageElement;
const faceLandmarkerResult = faceLandmarker.detect(image);

वीडियो

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

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

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

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

फ़ेस लैंडमार्क टास्क को बेहतर तरीके से चलाने के लिए, कोड का उदाहरण देखें.

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

फ़ेस लैंडमार्कर हर बार चलाए जाने के लिए, नतीजे के तौर पर एक ऑब्जेक्ट दिखाता है. नतीजे के ऑब्जेक्ट में, पहचाने गए हर चेहरे के लिए एक फ़ेस मेश होता है. इसमें हर फ़ेस लैंडमार्क के लिए निर्देशांक होते हैं. इसके अलावा, नतीजे वाले ऑब्जेक्ट में ब्लेंडशेप भी हो सकते हैं, जो चेहरे के हाव-भाव को दिखाते हैं. साथ ही, चेहरे के ट्रांसफ़ॉर्मेशन मैट्रिक्स में भी बदलाव कर सकते हैं, ताकि पता लगाए गए लैंडमार्क पर फ़ेस इफ़ेक्ट लागू किए जा सकें.

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

FaceLandmarkerResult:
  face_landmarks:
    NormalizedLandmark #0:
      x: 0.5971359014511108
      y: 0.485361784696579
      z: -0.038440968841314316
    NormalizedLandmark #1:
      x: 0.3302789330482483
      y: 0.29289937019348145
      z: -0.09489090740680695
    ... (478 landmarks for each face)
  face_blendshapes:
    browDownLeft: 0.8296722769737244
    browDownRight: 0.8096957206726074
    browInnerUp: 0.00035583582939580083
    browOuterUpLeft: 0.00035752105759456754
    ... (52 blendshapes for each face)
  facial_transformation_matrixes:
    [9.99158978e-01, -1.23036895e-02, 3.91213447e-02, -3.70770246e-01]
    [1.66496094e-02,  9.93480563e-01, -1.12779640e-01, 2.27719707e+01]
    ...

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

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