ওয়েবের জন্য অঙ্গভঙ্গি স্বীকৃতি নির্দেশিকা

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

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

কোডের উদাহরণ

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

সেটআপ

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

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

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

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

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

টাস্কটি তৈরি করুন

ইনফারেন্স চালানোর জন্য টাস্কটি প্রস্তুত করতে জেসচার রিকগনাইজারের createFrom...() ফাংশনগুলোর মধ্যে একটি ব্যবহার করুন। প্রশিক্ষিত মডেল ফাইলের রিলেটিভ বা অ্যাবসোলিউট পাথ সহ createFromModelPath() ফাংশনটি ব্যবহার করুন। যদি আপনার মডেলটি ইতিমধ্যেই মেমরিতে লোড করা থাকে, তাহলে আপনি createFromModelBuffer() মেথডটি ব্যবহার করতে পারেন।

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

নিম্নলিখিত কোডটি কাস্টম অপশন সহ টাস্কটি কীভাবে তৈরি এবং কনফিগার করতে হয় তা দেখায়:

// Create task for image file processing:
const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm "
);
const gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: "https://storage.googleapis.com/mediapipe-tasks/gesture_recognizer/gesture_recognizer.task"
  },
  numHands: 2
});

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

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

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

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

ভিডিও: কোনো ভিডিওর ডিকোড করা ফ্রেম অথবা ক্যামেরা থেকে আসা ইনপুট ডেটার লাইভস্ট্রিমের মোড।		 { IMAGE, VIDEO } IMAGE
num_hands GestureRecognizer এর মাধ্যমে সর্বাধিক সংখ্যক হাত শনাক্ত করা যায়। Any integer > 0 1
min_hand_detection_confidence পাম ডিটেকশন মডেলে হাত শনাক্তকরণ সফল বলে বিবেচিত হওয়ার জন্য ন্যূনতম কনফিডেন্স স্কোর। 0.0 - 1.0 0.5
min_hand_presence_confidence হ্যান্ড ল্যান্ডমার্ক ডিটেকশন মডেলে হাতের উপস্থিতি নির্ণয়ের সর্বনিম্ন কনফিডেন্স স্কোর। জেসচার রিকগনাইজারের ভিডিও মোড এবং লাইভ স্ট্রিম মোডে, যদি হ্যান্ড ল্যান্ডমার্ক মডেল থেকে প্রাপ্ত হাতের উপস্থিতি নির্ণয়ের কনফিডেন্স স্কোর এই থ্রেশহোল্ডের নিচে থাকে, তবে এটি পাম ডিটেকশন মডেলকে সক্রিয় করে। অন্যথায়, পরবর্তী ল্যান্ডমার্ক ডিটেকশনের জন্য হাতের অবস্থান নির্ধারণ করতে একটি লাইটওয়েট হ্যান্ড ট্র্যাকিং অ্যালগরিদম ব্যবহার করা হয়। 0.0 - 1.0 0.5
min_tracking_confidence হ্যান্ড ট্র্যাকিং সফল বলে বিবেচিত হওয়ার জন্য ন্যূনতম কনফিডেন্স স্কোর। এটি হলো বর্তমান ফ্রেম এবং শেষ ফ্রেমের হাতগুলোর মধ্যেকার বাউন্ডিং বক্স IoU থ্রেশহোল্ড। জেসচার রিকগনাইজারের ভিডিও মোড এবং স্ট্রিম মোডে, ট্র্যাকিং ব্যর্থ হলে জেসচার রিকগনাইজার হ্যান্ড ডিটেকশন চালু করে। অন্যথায়, হ্যান্ড ডিটেকশন এড়িয়ে যাওয়া হয়। 0.0 - 1.0 0.5
canned_gestures_classifier_options পূর্বনির্ধারিত অঙ্গভঙ্গি ক্লাসিফায়ারের আচরণ কনফিগার করার বিকল্পসমূহ। পূর্বনির্ধারিত অঙ্গভঙ্গিগুলো হলো ["None", "Closed_Fist", "Open_Palm", "Pointing_Up", "Thumb_Down", "Thumb_Up", "Victory", "ILoveYou"]
  • প্রদর্শিত নামের লোকেল: যদি থাকে, তবে TFLite মডেল মেটাডেটার মাধ্যমে নির্দিষ্ট করা প্রদর্শিত নামের জন্য ব্যবহৃত লোকেল।
  • সর্বোচ্চ ফলাফল: সর্বোচ্চ স্কোরপ্রাপ্ত শ্রেণিবিন্যাস ফলাফলের সর্বাধিক সংখ্যা যা ফেরত দেওয়া হবে। যদি < ০ হয়, তাহলে সমস্ত উপলব্ধ ফলাফল ফেরত দেওয়া হবে।
  • স্কোর থ্রেশহোল্ড: যে স্কোরের নিচে ফলাফল বাতিল করা হয়। এটি ০-তে সেট করা হলে, উপলব্ধ সমস্ত ফলাফল ফেরত দেওয়া হবে।
  • ক্যাটাগরি অনুমোদিত তালিকা: ক্যাটাগরির নামগুলোর অনুমোদিত তালিকা। যদি এটি খালি না থাকে, তবে যে ক্লাসিফিকেশন ফলাফলগুলোর ক্যাটাগরি এই সেটে নেই, সেগুলো ফিল্টার করে বাদ দেওয়া হবে। এটি বাতিল তালিকার (denylist) সাথে পারস্পরিকভাবে বর্জনীয়।
  • ক্যাটাগরি ডিনাইলিস্ট: ক্যাটাগরির নামগুলোর ডিনাইলিস্ট। যদি এটি খালি না থাকে, তবে যে ক্লাসিফিকেশন ফলাফলগুলোর ক্যাটাগরি এই সেটের অন্তর্ভুক্ত, সেগুলো ফিল্টার করে বাদ দেওয়া হবে। এটি অ্যালাওলিস্টের সাথে পারস্পরিকভাবে বর্জনীয়।
    • নাম প্রদর্শনের স্থান: any string
    • সর্বোচ্চ ফলাফল: any integer
    • স্কোরের সীমা: 0.0-1.0
    • ক্যাটাগরি অনুমোদিত তালিকা: vector of strings
    • ক্যাটাগরি ডিনাইলিস্ট: vector of strings
    • নাম প্রদর্শনের স্থান: "en"
    • সর্বোচ্চ ফলাফল: -1
    • স্কোরের ন্যূনতম সীমা: 0
    • ক্যাটাগরি অনুমোদিত তালিকা: খালি
    • ক্যাটাগরি ডিনাইলিস্ট: খালি
    custom_gestures_classifier_options কাস্টম জেসচার ক্লাসিফায়ারের আচরণ কনফিগার করার বিকল্পসমূহ।
  • প্রদর্শিত নামের লোকেল: যদি থাকে, তবে TFLite মডেল মেটাডেটার মাধ্যমে নির্দিষ্ট করা প্রদর্শিত নামের জন্য ব্যবহৃত লোকেল।
  • সর্বোচ্চ ফলাফল: সর্বোচ্চ স্কোরপ্রাপ্ত শ্রেণিবিন্যাস ফলাফলের সর্বাধিক সংখ্যা যা ফেরত দেওয়া হবে। যদি < ০ হয়, তাহলে সমস্ত উপলব্ধ ফলাফল ফেরত দেওয়া হবে।
  • স্কোর থ্রেশহোল্ড: যে স্কোরের নিচে ফলাফল বাতিল করা হয়। এটি ০-তে সেট করা হলে, উপলব্ধ সমস্ত ফলাফল ফেরত দেওয়া হবে।
  • ক্যাটাগরি অনুমোদিত তালিকা: ক্যাটাগরির নামগুলোর অনুমোদিত তালিকা। যদি এটি খালি না থাকে, তবে যে ক্লাসিফিকেশন ফলাফলগুলোর ক্যাটাগরি এই সেটে নেই, সেগুলো ফিল্টার করে বাদ দেওয়া হবে। এটি বাতিল তালিকার (denylist) সাথে পারস্পরিকভাবে বর্জনীয়।
  • ক্যাটাগরি ডিনাইলিস্ট: ক্যাটাগরির নামগুলোর ডিনাইলিস্ট। যদি এটি খালি না থাকে, তবে যে ক্লাসিফিকেশন ফলাফলগুলোর ক্যাটাগরি এই সেটের অন্তর্ভুক্ত, সেগুলো ফিল্টার করে বাদ দেওয়া হবে। এটি অ্যালাওলিস্টের সাথে পারস্পরিকভাবে বর্জনীয়।
    • নাম প্রদর্শনের স্থান: any string
    • সর্বোচ্চ ফলাফল: any integer
    • স্কোরের সীমা: 0.0-1.0
    • ক্যাটাগরি অনুমোদিত তালিকা: vector of strings
    • ক্যাটাগরি ডিনাইলিস্ট: vector of strings
    • নাম প্রদর্শনের স্থান: "en"
    • সর্বোচ্চ ফলাফল: -1
    • স্কোরের ন্যূনতম সীমা: 0
    • ক্যাটাগরি অনুমোদিত তালিকা: খালি
    • ক্যাটাগরি ডিনাইলিস্ট: খালি

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

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

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

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

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

    ছবি 

    const image = document.getElementById("image") as HTMLImageElement;
const gestureRecognitionResult = gestureRecognizer.recognize(image);

    ভিডিও 

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

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

  if (video.currentTime !== lastVideoTime) {
    const gestureRecognitionResult = gestureRecognizer.recognizeForVideo(video);
    processResult(gestureRecognitionResult);
    lastVideoTime = video.currentTime;
  }

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

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

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

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

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

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

    প্রাপ্ত GestureRecognizerResult টিতে চারটি উপাদান থাকে, এবং প্রতিটি উপাদান হলো একটি অ্যারে, যার প্রতিটি এলিমেন্টে একটিমাত্র শনাক্তকৃত হাতের ফলাফল থাকে।

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

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

    • অঙ্গভঙ্গি

      শনাক্তকৃত হাতগুলোর স্বীকৃত অঙ্গভঙ্গির শ্রেণিবিভাগ।

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

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

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

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

    GestureRecognizerResult:
  Handedness:
    Categories #0:
      index        : 0
      score        : 0.98396
      categoryName : Left
  Gestures:
    Categories #0:
      score        : 0.76893
      categoryName : Thumb_Up
  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)

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

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

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