वेब के लिए चेहरे को बेहतर बनाने से जुड़ी गाइड

MediaPipe फ़ेस स्टाइलाइज़र टास्क की मदद से, किसी इमेज में दिखने वाले चेहरों को अलग-अलग स्टाइल में फ़िल्टर किया जा सकता है. इस टास्क का इस्तेमाल, अलग-अलग स्टाइल के वर्चुअल अवतार बनाने के लिए किया जा सकता है.

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

कोड का उदाहरण

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

सेटअप

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

JavaScript पैकेज

फ़ेस स्टाइलाइज़र कोड 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.js"
    crossorigin="anonymous"></script>
</head>

मॉडल

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

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

<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 facestylizer = await FaceStylizer.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "https://storage.googleapis.com/mediapipe-models/face_stylizer/blaze_face_stylizer/float32/latest/face_stylizer_color_sketch.task"
      },
    });

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

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

टास्क को पूरा करें

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

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

const image = document.getElementById("image") as HTMLImageElement;
const faceStylizerResult = faceStylizer.stylize(image);

नतीजों को हैंडल करना और दिखाना

फ़ेस स्टाइलर एक MPImage ऑब्जेक्ट दिखाता है, जो सबसे ज़्यादा स्टाइल के सुझाव देता है प्रमुख चेहरा शामिल किया गया है.

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

ऊपर दिया गया आउटपुट कलर स्केच लागू करके बनाया गया था मॉडल को नीचे दी गई इनपुट इमेज में जोड़ें: