वेब के लिए, चेहरे की पहचान करने वाली गाइड

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

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

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

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

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

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

विकल्प का नाम	ब्यौरा	वैल्यू रेंज	डिफ़ॉल्ट मान
`option_var_1_web_js`	टास्क के लिए, रनिंग मोड सेट करता है. इसके दो मोड हैं: इमेज: सिंगल इमेज इनपुट के लिए मोड. वीडियो: यह मोड, किसी वीडियो के डिकोड किए गए फ़्रेम या इनपुट डेटा की लाइवस्ट्रीम के दौरान होता है, जैसे कि कैमरे से.	{`IMAGE, VIDEO`}	`IMAGE`
`minDetectionConfidence`	चेहरे की पहचान के लिए ज़रूरी सबसे कम कॉन्फ़िडेंस स्कोर. इस स्कोर को बेहतर माना जाता है.	`Float [0,1]`	`0.5`
`minSuppressionThreshold`	चेहरे की पहचान के लिए, नॉन-ज़्यादा से ज़्यादा सप्रेशन की सीमा, ताकि उसे ओवरलैप माना जा सके.	`Float [0,1]`	`0.3`

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

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

टास्क चलाएं

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

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

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

Image

const image = document.getElementById("image") as HTMLImageElement;
const faceDetectorResult = faceDetector.detect(image);

वीडियो

await faceDetector.setOptions({ runningMode: "video" });

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

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

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

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

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

चेहरा पहचान करने वाला हर एक डिटेक्शन चलाए जाने के लिए, चेहरे की पहचान करने वाला नतीजा ऑब्जेक्ट जनरेट करता है. नतीजे वाले ऑब्जेक्ट में, इमेज के निर्देशांकों में चेहरे और दुनिया के निर्देशांक में चेहरे मौजूद होते हैं.

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

FaceDetectionResult:
  Detections:
    Detection #0:
      BoundingBox:
        origin_x: 126
        origin_y: 100
        width: 463
        height: 463
      Categories:
        Category #0:
          index: 0
          score: 0.9729152917861938
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.18298381567001343
          y: 0.2961040139198303
        NormalizedKeypoint #1:
          x: 0.3302789330482483
          y: 0.29289937019348145
        ... (6 keypoints for each face)
    Detection #1:
      BoundingBox:
        origin_x: 616
        origin_y: 193
        width: 430
        height: 430
      Categories:
        Category #0:
          index: 0
          score: 0.9251380562782288
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.6151331663131714
          y: 0.3713381886482239
        NormalizedKeypoint #1:
          x: 0.7460576295852661
          y: 0.38825345039367676
        ... (6 keypoints for each face)

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

बिना बाउंडिंग बॉक्स वाली इमेज के लिए, ओरिजनल इमेज देखें.

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