ওয়েবের জন্য ফেস স্টাইলাইজেশন গাইড

MediaPipe ফেস স্টাইলাইজার টাস্ক আপনাকে একটি চিত্রের মুখগুলিতে মুখের স্টাইলাইজেশন প্রয়োগ করতে দেয়। আপনি বিভিন্ন শৈলীতে ভার্চুয়াল অবতার তৈরি করতে এই কাজটি ব্যবহার করতে পারেন।

এই নির্দেশাবলীতে বর্ণিত কোড নমুনা GitHub এ উপলব্ধ। এই কাজের ক্ষমতা, মডেল এবং কনফিগারেশন বিকল্প সম্পর্কে আরও তথ্যের জন্য, ওভারভিউ দেখুন।

কোড উদাহরণ

ফেস স্টাইলাইজারের উদাহরণ কোডটি আপনার রেফারেন্সের জন্য জাভাস্ক্রিপ্টে এই টাস্কটির সম্পূর্ণ বাস্তবায়ন প্রদান করে। এই কোডটি আপনাকে এই কাজটি পরীক্ষা করতে এবং আপনার নিজের মুখের স্টাইলাইজেশন অ্যাপ তৈরি করতে শুরু করতে সহায়তা করে। আপনি শুধুমাত্র আপনার ওয়েব ব্রাউজার ব্যবহার করে ফেস স্টাইলাইজার উদাহরণ কোড দেখতে, চালাতে এবং সম্পাদনা করতে পারেন।

সেটআপ

এই বিভাগে বিশেষভাবে ফেস স্টাইলাইজার ব্যবহার করার জন্য আপনার বিকাশের পরিবেশ সেট আপ করার জন্য মূল পদক্ষেপগুলি বর্ণনা করে। প্ল্যাটফর্ম সংস্করণের প্রয়োজনীয়তা সহ আপনার ওয়েব এবং জাভাস্ক্রিপ্ট ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করার বিষয়ে সাধারণ তথ্যের জন্য, ওয়েবের জন্য সেটআপ গাইড দেখুন।

জাভাস্ক্রিপ্ট প্যাকেজ

ফেস স্টাইলাইজার কোড MediaPipe @mediapipe/tasks-vision NPM প্যাকেজের মাধ্যমে উপলব্ধ। আপনি প্ল্যাটফর্ম সেটআপ গাইডের নির্দেশাবলী অনুসরণ করে এই লাইব্রেরিগুলি খুঁজে পেতে এবং ডাউনলোড করতে পারেন৷

আপনি নিম্নলিখিত কমান্ড ব্যবহার করে NPM এর মাধ্যমে প্রয়োজনীয় প্যাকেজগুলি ইনস্টল করতে পারেন:

npm install @mediapipe/tasks-vision

আপনি যদি একটি সামগ্রী বিতরণ নেটওয়ার্ক (CDN) পরিষেবার সাথে টাস্ক কোড আমদানি করতে চান, তাহলে আপনার HTML ফাইলের <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 অবজেক্ট ফেরত দেয়।

নিম্নলিখিত এই টাস্ক থেকে আউটপুট ডেটার একটি উদাহরণ দেখায়:

উপরের আউটপুটটি নিম্নলিখিত ইনপুট ছবিতে কালার স্কেচ মডেল প্রয়োগ করে তৈরি করা হয়েছে: