ওয়েবের জন্য ফেস ল্যান্ডমার্ক সনাক্তকরণ গাইড, ওয়েবের জন্য ফেস ল্যান্ডমার্ক সনাক্তকরণ গাইড

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

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

কোডের উদাহরণ

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

সেটআপ

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

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

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

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

npm install @mediapipe/tasks-vision

আপনি যদি কন্টেন্ট ডেলিভারি নেটওয়ার্ক (CDN) সার্ভিসের মাধ্যমে টাস্ক কোড ইম্পোর্ট করতে চান, তাহলে আপনার HTML ফাইলের <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.mjs"
    crossorigin="anonymous"></script>
</head>

মডেল

MediaPipe Face Landmarker টাস্কটির জন্য এমন একটি প্রশিক্ষিত মডেল প্রয়োজন যা এই টাস্কের সাথে সামঞ্জস্যপূর্ণ। Face Landmarker-এর জন্য উপলব্ধ প্রশিক্ষিত মডেলগুলো সম্পর্কে আরও তথ্যের জন্য, টাস্ক ওভারভিউ-এর Models বিভাগটি দেখুন।

একটি মডেল নির্বাচন করে ডাউনলোড করুন এবং তারপর সেটি আপনার প্রজেক্ট ডিরেক্টরিতে সংরক্ষণ করুন:

<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 faceLandmarker = await faceLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

কনফিগারেশন বিকল্পগুলি

ওয়েব এবং জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনের জন্য এই টাস্কটিতে নিম্নলিখিত কনফিগারেশন অপশনগুলো রয়েছে:

বিকল্পের নাম	বর্ণনা	মান পরিসীমা	ডিফল্ট মান
`running_mode`	টাস্কটির চলমান মোড নির্ধারণ করে। দুটি মোড রয়েছে: IMAGE: একক ছবি ইনপুটের মোড। ভিডিও: কোনো ভিডিওর ডিকোড করা ফ্রেম অথবা ক্যামেরা থেকে আসা ইনপুট ডেটার লাইভস্ট্রিমের মোড।	{ `IMAGE, VIDEO` }	`IMAGE`
`numFaces`	`FaceLandmarker` দ্বারা সনাক্ত করা যেতে পারে এমন মুখের সর্বাধিক সংখ্যা। স্মুথিং শুধুমাত্র তখনই প্রয়োগ করা হয় যখন `num_faces` 1 সেট করা থাকে।	`Integer > 0`	`1`
`minFaceDetectionConfidence`	মুখ শনাক্তকরণ সফল বলে বিবেচিত হওয়ার জন্য ন্যূনতম কনফিডেন্স স্কোর।	`Float [0.0,1.0]`	`0.5`
`minFacePresenceConfidence`	ফেস ল্যান্ডমার্ক ডিটেকশনে মুখের উপস্থিতি স্কোরের সর্বনিম্ন কনফিডেন্স স্কোর।	`Float [0.0,1.0]`	`0.5`
`minTrackingConfidence`	ফেস ট্র্যাকিং সফল বলে বিবেচিত হওয়ার জন্য ন্যূনতম কনফিডেন্স স্কোর।	`Float [0.0,1.0]`	`0.5`
`outputFaceBlendshapes`	ফেস ল্যান্ডমার্কার ফেস ব্লেন্ডশেপ আউটপুট করে কিনা। ৩ডি ফেস মডেল রেন্ডার করার জন্য ফেস ব্লেন্ডশেপ ব্যবহার করা হয়।	`Boolean`	`False`
`outputFacialTransformationMatrixes`	FaceLandmarker ফেসিয়াল ট্রান্সফরমেশন ম্যাট্রিক্স আউটপুট করে কিনা। FaceLandmarker এই ম্যাট্রিক্স ব্যবহার করে একটি ক্যানোনিকাল ফেস মডেল থেকে শনাক্তকৃত মুখে ফেস ল্যান্ডমার্কগুলোকে রূপান্তর করে, যাতে ব্যবহারকারীরা শনাক্তকৃত ল্যান্ডমার্কগুলোতে বিভিন্ন ইফেক্ট প্রয়োগ করতে পারেন।	`Boolean`	`False`

ডেটা প্রস্তুত করুন

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

টাস্কটি চালান

ফেস ল্যান্ডমার্কার ইনফারেন্স ট্রিগার করার জন্য detect() ( IMAGE রানিং মোডে) এবং detectForVideo() ( VIDEO রানিং মোডে) মেথডগুলো ব্যবহার করে। টাস্কটি ডেটা প্রসেস করে, মুখমণ্ডলকে ল্যান্ডমার্ক করার চেষ্টা করে এবং তারপর ফলাফল রিপোর্ট করে।

Face Landmarker-এর detect() এবং detectForVideo() মেথডগুলোর কল সিনক্রোনাসভাবে চলে এবং ইউজার ইন্টারফেস থ্রেডকে ব্লক করে। আপনি যদি কোনো ডিভাইসের ক্যামেরা থেকে ভিডিও ফ্রেমে মুখমণ্ডল শনাক্ত করেন, তবে প্রতিটি শনাক্তকরণ মেইন থ্রেডকে ব্লক করে। আপনি ওয়েব ওয়ার্কার প্রয়োগ করে detect() এবং detectForVideo() মেথডগুলোকে অন্য একটি থ্রেডে চালানোর মাধ্যমে এটি প্রতিরোধ করতে পারেন।

নিম্নলিখিত কোডটি টাস্ক মডেল ব্যবহার করে প্রসেসিং সম্পাদনের পদ্ধতি প্রদর্শন করে:

ছবি

const image = document.getElementById("image") as HTMLImageElement;
const faceLandmarkerResult = faceLandmarker.detect(image);

ভিডিও

await faceLandmarker.setOptions({ runningMode: "VIDEO" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const faceLandmarkerResult = faceLandmarker.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

ফেস ল্যান্ডমার্কার টাস্ক চালানোর আরও পূর্ণাঙ্গ বাস্তবায়নের জন্য উদাহরণটি দেখুন।

ফলাফল পরিচালনা এবং প্রদর্শন করুন

ফেস ল্যান্ডমার্কার প্রতিটি ডিটেকশন রানের জন্য একটি রেজাল্ট অবজেক্ট রিটার্ন করে। এই রেজাল্ট অবজেক্টে প্রতিটি ডিটেক্ট করা মুখের জন্য একটি ফেস মেশ থাকে, সাথে প্রতিটি ফেস ল্যান্ডমার্কের স্থানাঙ্কও দেওয়া থাকে। ঐচ্ছিকভাবে, রেজাল্ট অবজেক্টে ব্লেন্ডশেপও থাকতে পারে, যা মুখের অভিব্যক্তি নির্দেশ করে, এবং ডিটেক্ট করা ল্যান্ডমার্কগুলিতে ফেস এফেক্ট প্রয়োগ করার জন্য একটি ফেসিয়াল ট্রান্সফরমেশন ম্যাট্রিক্সও থাকে।

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

FaceLandmarkerResult:
  face_landmarks:
    NormalizedLandmark #0:
      x: 0.5971359014511108
      y: 0.485361784696579
      z: -0.038440968841314316
    NormalizedLandmark #1:
      x: 0.3302789330482483
      y: 0.29289937019348145
      z: -0.09489090740680695
    ... (478 landmarks for each face)
  face_blendshapes:
    browDownLeft: 0.8296722769737244
    browDownRight: 0.8096957206726074
    browInnerUp: 0.00035583582939580083
    browOuterUpLeft: 0.00035752105759456754
    ... (52 blendshapes for each face)
  facial_transformation_matrixes:
    [9.99158978e-01, -1.23036895e-02, 3.91213447e-02, -3.70770246e-01]
    [1.66496094e-02,  9.93480563e-01, -1.12779640e-01, 2.27719707e+01]
    ...

নিম্নলিখিত চিত্রটিতে টাস্কের আউটপুটের একটি ভিজ্যুয়ালাইজেশন দেখানো হয়েছে:

একজন মানুষের মুখের আকৃতি ও মাত্রা বোঝানোর জন্য তার মুখের বিভিন্ন অঞ্চল জ্যামিতিকভাবে চিহ্নিত করা হয়েছে।

ফেস ল্যান্ডমার্কার উদাহরণ কোডটি দেখায় কিভাবে টাস্ক থেকে প্রাপ্ত ফলাফল প্রদর্শন করতে হয়, উদাহরণটি দেখুন।