ওয়েবের জন্য মুখ সনাক্তকরণ নির্দেশিকা

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

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

কোডের উদাহরণ

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

সেটআপ

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

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

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

আপনি নিম্নলিখিত কমান্ড ব্যবহার করে 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 ফেস ডিটেক্টর টাস্কটির জন্য এমন একটি প্রশিক্ষিত মডেল প্রয়োজন যা এই টাস্কের সাথে সামঞ্জস্যপূর্ণ। ফেস ডিটেক্টরের জন্য উপলব্ধ প্রশিক্ষিত মডেলগুলো সম্পর্কে আরও তথ্যের জন্য, টাস্ক ওভারভিউ -এর মডেল বিভাগটি দেখুন।

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

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

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

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

বিকল্পের নাম	বর্ণনা	মান পরিসীমা	ডিফল্ট মান
`option_var_1_web_js`	টাস্কটির চলমান মোড নির্ধারণ করে। দুটি মোড রয়েছে: IMAGE: একক ছবি ইনপুটের মোড। ভিডিও: কোনো ভিডিওর ডিকোড করা ফ্রেম অথবা ক্যামেরা থেকে আসা ইনপুট ডেটার লাইভস্ট্রিমের মোড।	{ `IMAGE, VIDEO` }	`IMAGE`
`minDetectionConfidence`	মুখ শনাক্তকরণ সফল বলে বিবেচিত হওয়ার জন্য ন্যূনতম কনফিডেন্স স্কোর।	`Float [0,1]`	`0.5`
`minSuppressionThreshold`	মুখ শনাক্তকরণকে ওভারল্যাপড হিসেবে বিবেচনা করার জন্য সর্বনিম্ন নন-ম্যাক্সিমাম-সাপ্রেশন থ্রেশহোল্ড।	`Float [0,1]`	`0.3`

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

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

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

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

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

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

ছবি

const image = document.getElementById("image") as HTMLImageElement;
const faceDetectorResult = faceDetector.detect(image);

ভিডিও

await faceDetector.setOptions({ runningMode: "video" });

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

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

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

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

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

ফেস ডিটেক্টর প্রতিটি ডিটেকশন রানের জন্য একটি ফেস ডিটেক্টর রেজাল্ট অবজেক্ট তৈরি করে। এই রেজাল্ট অবজেক্টটিতে ইমেজ কোঅর্ডিনেট এবং ওয়ার্ল্ড কোঅর্ডিনেট উভয় ধরনের মুখমণ্ডল থাকে।

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

FaceDetectionResult:
  Detections:
    Detection #0:
      BoundingBox:
        origin_x: 126
        origin_y: 100
        width: 463
        height: 463
      Categories:
        Category #0:
          index: 0
          score: 0.9729152917861938
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.18298381567001343
          y: 0.2961040139198303
        NormalizedKeypoint #1:
          x: 0.3302789330482483
          y: 0.29289937019348145
        ... (6 keypoints for each face)
    Detection #1:
      BoundingBox:
        origin_x: 616
        origin_y: 193
        width: 430
        height: 430
      Categories:
        Category #0:
          index: 0
          score: 0.9251380562782288
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.6151331663131714
          y: 0.3713381886482239
        NormalizedKeypoint #1:
          x: 0.7460576295852661
          y: 0.38825345039367676
        ... (6 keypoints for each face)

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

দুটি শিশুর মুখের চারপাশে বাউন্ডিং বক্স।

বাউন্ডিং বক্স ছাড়া ছবিটির জন্য মূল ছবিটি দেখুন।

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