पेश है Google AI Edge Portal: बड़े पैमाने पर एज एआई का बेंचमार्क. निजी झलक के दौरान ऐक्सेस का अनुरोध करने के लिए, साइन-अप करें.

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

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

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

कोड का उदाहरण

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

सेटअप

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

JavaScript पैकेज

MediaPipe @mediapipe/tasks-vision NPM पैकेज के ज़रिए, Face Detector कोड उपलब्ध है. इन लाइब्रेरी को ढूंढने और डाउनलोड करने के लिए, प्लैटफ़ॉर्म की सेटअप गाइड में दिए गए निर्देशों का पालन करें.

ज़रूरी पैकेज को 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.mjs"
    crossorigin="anonymous"></script>
</head>

मॉडल

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

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

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

टास्क बनाना

इनफ़रेंस चलाने के लिए टास्क तैयार करने के लिए, Face Detector 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, VIDEO`}	`IMAGE`
`minDetectionConfidence`	चेहरे का पता लगाने की सुविधा के लिए, कम से कम कॉन्फ़िडेंस स्कोर.	`Float [0,1]`	`0.5`
`minSuppressionThreshold`	चेहरे का पता लगाने के लिए, नॉन-मैक्सिमम-सप्रेशन थ्रेशोल्ड की कम से कम वैल्यू, ताकि यह माना जा सके कि चेहरे एक-दूसरे पर ओवरलैप हो रहे हैं.	`Float [0,1]`	`0.3`

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

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

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

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

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

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

इमेज

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)

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

दो बच्चों के चेहरों के चारों ओर बाउंडिंग बॉक्स

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

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