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

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

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

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

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

टास्क बनाना

अनुमान लगाने के लिए टास्क को तैयार करने के लिए, Face Stylizer 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 ऑब्जेक्ट के तौर पर दिखाता है.

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

पेंसिल और मार्कर से स्केच किए गए स्टाइल में, किसी महिला का जनरेट किया गया क्लोज़-अप.

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

उस महिला की फ़ोटो जिसकी इमेज का इस्तेमाल पिछले आउटपुट को जनरेट करने के लिए किया गया था