MediaPipe Face Detector टास्क की मदद से, किसी इमेज या वीडियो में चेहरों की पहचान की जा सकती है. Google Analytics 4 पर माइग्रेट करने के लिए, इस टास्क की मदद से, फ़्रेम में चेहरों और चेहरों की पहचान की जा सकती है. यह टास्क, मशीन लर्निंग (एमएल) मॉडल, जो किसी एक इमेज या में से उसी को चुनने के लिए कहें. टास्क के बाद, चेहरे की जगह की जानकारी के साथ-साथ ये जानकारी भी मिलती है चेहरे के मुख्य पॉइंट: बाईं आंख, दाईं आंख, नाक का सिरा, मुंह, बाईं आंख का नुकसान, और दाईं आंख से जुड़ी समस्या.
ये निर्देश आपको वेब और 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 |
डेटा तैयार करें
फ़ेस डिटेक्टर, इमेज में मौजूद चेहरों का पता लगा सकता है. यह सुविधा होस्ट ब्राउज़र. यह टास्क, डेटा इनपुट की प्री-प्रोसेसिंग को भी मैनेज करता है. इसमें ये शामिल हैं साइज़ बदलना, रोटेशन, और वैल्यू नॉर्मलाइज़ेशन. वीडियो में चेहरों की पहचान करने के लिए, तो आप टाइमस्टैंप का उपयोग करके एक समय में एक फ़्रेम को तेज़ी से संसाधित करने के लिए API का उपयोग कर सकते हैं फ़्रेम की सेटिंग का इस्तेमाल करें.
टास्क को पूरा करें
फ़ेस डिटेक्टर, detect() (रनिंग मोड image के साथ) का इस्तेमाल करता है और
ट्रिगर करने के लिए detectForVideo() (रनिंग मोड video के साथ) तरीके
अनुमान. टास्क, डेटा को प्रोसेस करता है, चेहरों की पहचान करने की कोशिश करता है, और
फिर नतीजों की रिपोर्ट करता है.
फ़ेस डिटेक्टर 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)
नीचे दी गई इमेज, टास्क के आउटपुट का विज़ुअलाइज़ेशन दिखाती है:
बाउंडिंग बॉक्स के बिना इमेज के लिए, ओरिजनल इमेज देखें.
फ़ेस डिटेक्टर के उदाहरण वाले कोड से पता चलता है कि टास्क के नतीजे वापस मिले हैं, तो कोड का उदाहरण