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

MediaPipe-এর Hand Landmarker টাস্কটি আপনাকে একটি ছবিতে হাতের ল্যান্ডমার্কগুলো শনাক্ত করতে সাহায্য করে। এই নির্দেশাবলীতে দেখানো হয়েছে কীভাবে ওয়েব এবং জাভাস্ক্রিপ্ট অ্যাপের জন্য Hand Landmarker ব্যবহার করতে হয়।

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

কোডের উদাহরণ

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

সেটআপ

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

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

হ্যান্ড ল্যান্ডমার্কার কোডটি মিডিয়াপাইপ @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 Hand Landmarker টাস্কটির জন্য এমন একটি প্রশিক্ষিত মডেল প্রয়োজন যা এই টাস্কের সাথে সামঞ্জস্যপূর্ণ। Hand 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 handLandmarker = await HandLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "hand_landmarker.task"
      },
      numHands: 2
    });

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

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

বিকল্পের নাম বর্ণনা মান পরিসীমা ডিফল্ট মান
runningMode টাস্কটির চলমান মোড নির্ধারণ করে। দুটি মোড রয়েছে:

IMAGE: একক ছবি ইনপুটের মোড।

ভিডিও: কোনো ভিডিওর ডিকোড করা ফ্রেম অথবা ক্যামেরা থেকে আসা ইনপুট ডেটার লাইভস্ট্রিমের মোড।		 { IMAGE, VIDEO } IMAGE
numHands হ্যান্ড ল্যান্ডমার্ক ডিটেক্টর দ্বারা শনাক্ত করা হাতের সর্বাধিক সংখ্যা। Any integer > 0 1
minHandDetectionConfidence পাম ডিটেকশন মডেলে হাত শনাক্তকরণ সফল বলে বিবেচিত হওয়ার জন্য ন্যূনতম কনফিডেন্স স্কোর। 0.0 - 1.0 0.5
minHandPresenceConfidence হ্যান্ড ল্যান্ডমার্ক ডিটেকশন মডেলে হাতের উপস্থিতি নির্ণয়ের জন্য সর্বনিম্ন কনফিডেন্স স্কোর। ভিডিও মোড এবং লাইভ স্ট্রিম মোডে, যদি হ্যান্ড ল্যান্ডমার্ক মডেল থেকে প্রাপ্ত হাতের উপস্থিতি নির্ণয়ের কনফিডেন্স স্কোর এই থ্রেশহোল্ডের নিচে থাকে, তাহলে হ্যান্ড ল্যান্ডমার্কার পাম ডিটেকশন মডেলটিকে সক্রিয় করে। অন্যথায়, একটি লাইটওয়েট হ্যান্ড ট্র্যাকিং অ্যালগরিদম পরবর্তী ল্যান্ডমার্ক ডিটেকশনের জন্য হাত(গুলো)র অবস্থান নির্ধারণ করে। 0.0 - 1.0 0.5
minTrackingConfidence হ্যান্ড ট্র্যাকিং সফল বলে বিবেচিত হওয়ার জন্য ন্যূনতম কনফিডেন্স স্কোর। এটি হলো বর্তমান ফ্রেম এবং শেষ ফ্রেমের হাতগুলোর মধ্যেকার বাউন্ডিং বক্স IoU থ্রেশহোল্ড। হ্যান্ড ল্যান্ডমার্কারের ভিডিও মোড এবং স্ট্রিম মোডে, ট্র্যাকিং ব্যর্থ হলে হ্যান্ড ল্যান্ডমার্কার হ্যান্ড ডিটেকশন চালু করে। অন্যথায়, এটি হ্যান্ড ডিটেকশন এড়িয়ে যায়। 0.0 - 1.0 0.5

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

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

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

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

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

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

ছবি 

const image = document.getElementById("image") as HTMLImageElement;
const handLandmarkerResult = handLandmarker.detect(image);

ভিডিও 

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

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

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

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

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

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

হ্যান্ড ল্যান্ডমার্কার প্রতিটি ডিটেকশন রানের জন্য একটি হ্যান্ড ল্যান্ডমার্কার রেজাল্ট অবজেক্ট তৈরি করে। এই রেজাল্ট অবজেক্টটিতে ডিটেক্ট করা হাতগুলোর ইমেজ কোঅর্ডিনেটে থাকা ল্যান্ডমার্ক, ওয়ার্ল্ড কোঅর্ডিনেটে থাকা হ্যান্ড ল্যান্ডমার্ক এবং হ্যান্ডেডনেস (বাম/ডান হাত) অন্তর্ভুক্ত থাকে।

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

HandLandmarkerResult আউটপুটে তিনটি অংশ থাকে। প্রতিটি অংশ একটি অ্যারে, যেখানে প্রতিটি উপাদানে একটিমাত্র শনাক্তকৃত হাতের জন্য নিম্নলিখিত ফলাফলগুলো থাকে:

  • হাতের ব্যবহার

    হ্যান্ডেডনেস বলতে বোঝায় শনাক্তকৃত হাতগুলো বাম হাত নাকি ডান হাত।

  • ল্যান্ডমার্ক

    হাতের ২১টি ল্যান্ডমার্ক রয়েছে, যার প্রতিটি x , y এবং z স্থানাঙ্ক দ্বারা গঠিত। x এবং y স্থানাঙ্ককে যথাক্রমে ছবির প্রস্থ এবং উচ্চতা দ্বারা [0.0, 1.0] পরিসরে স্বাভাবিক করা হয়। z স্থানাঙ্কটি ল্যান্ডমার্কের গভীরতা নির্দেশ করে, যেখানে কব্জির গভীরতা হলো মূলবিন্দু। এর মান যত ছোট হয়, ল্যান্ডমার্কটি ক্যামেরার তত কাছে থাকে। z এর মান নির্ণয়ের জন্য ব্যবহৃত স্কেলটি প্রায় x স্কেলের মতোই।

  • বিশ্বের ল্যান্ডমার্ক

    হাতের ২১টি ল্যান্ডমার্ক বিশ্ব স্থানাঙ্কেও উপস্থাপন করা হয়েছে। প্রতিটি ল্যান্ডমার্ক x , y , এবং z দ্বারা গঠিত, যা হাতের জ্যামিতিক কেন্দ্রকে মূলবিন্দু ধরে মিটারে বাস্তব জগতের ত্রিমাত্রিক স্থানাঙ্ককে প্রতিনিধিত্ব করে। 

HandLandmarkerResult:
  Handedness:
    Categories #0:
      index        : 0
      score        : 0.98396
      categoryName : Left
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : -3.41E-7
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
    ... (21 landmarks for a hand)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
    ... (21 world landmarks for a hand)

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

হাতের কঙ্কাল কাঠামোটি ম্যাপ করা সহ থাম্বস আপ ভঙ্গির একটি হাত।

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