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

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

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

कोड का उदाहरण

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

सेटअप

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

JavaScript पैकेज

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

इस निर्देश का इस्तेमाल करके, 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 ऑब्जेक्ट दिखाया जाता है.

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

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