ওয়েবের জন্য অবজেক্ট ডিটেকশন গাইড, ওয়েবের জন্য অবজেক্ট ডিটেকশন গাইড

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

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

সেটআপ

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

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

অবজেক্ট ডিটেক্টর কোডটি 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/

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

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

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

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
objectDetector = await ObjectDetector.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: `https://storage.googleapis.com/mediapipe-tasks/object_detector/efficientdet_lite0_uint8.tflite`
  },
  scoreThreshold: 0.5,
  runningMode: runningMode
});

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

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

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

বিকল্পের নাম	বর্ণনা	মান পরিসীমা	ডিফল্ট মান
`runningMode`	টাস্কটির চলমান মোড নির্ধারণ করে। দুটি মোড রয়েছে: IMAGE: একক ছবি ইনপুটের মোড। ভিডিও: কোনো ভিডিওর ডিকোড করা ফ্রেম অথবা ক্যামেরা থেকে আসা ইনপুট ডেটার লাইভস্ট্রিমের মোড।	{ `IMAGE, VIDEO` }	`IMAGE`
`displayNamesLocale`	টাস্কের মডেলের মেটাডেটাতে প্রদত্ত ডিসপ্লে নামের জন্য ব্যবহৃত লেবেলের ভাষা নির্ধারণ করে (যদি তা উপলব্ধ থাকে)। ডিফল্ট হলো ইংরেজির জন্য `en` '। আপনি TensorFlow Lite Metadata Writer API ব্যবহার করে একটি কাস্টম মডেলের মেটাডেটাতে স্থানীয় লেবেল যোগ করতে পারেন।	স্থানীয় কোড	ইংরেজি
`maxResults`	ফেরত দেওয়ার জন্য সর্বোচ্চ স্কোরপ্রাপ্ত ডিটেকশন ফলাফলের ঐচ্ছিক সংখ্যা নির্ধারণ করে।	যেকোনো ধনাত্মক সংখ্যা	-১ (সকল ফলাফল ফেরত দেওয়া হয়)
`scoreThreshold`	এটি প্রেডিকশন স্কোরের থ্রেশহোল্ড নির্ধারণ করে, যা মডেল মেটাডেটাতে দেওয়া থ্রেশহোল্ডকে (যদি থাকে) বাতিল করে দেয়। এই মানের নিচের ফলাফলগুলো বাতিল করা হয়।	যেকোনো ভাসমান বস্তু	সেট করা হয়নি
`categoryAllowlist`	অনুমোদিত ক্যাটাগরি নামের ঐচ্ছিক তালিকা নির্ধারণ করে। তালিকাটি খালি না থাকলে, যে সকল ডিটেকশন ফলাফলের ক্যাটাগরি নাম এই সেটে নেই, সেগুলোকে ফিল্টার করে বাদ দেওয়া হবে। সদৃশ বা অজানা ক্যাটাগরি নাম উপেক্ষা করা হয়। এই অপশনটি `categoryDenylist` সাথে ব্যবহার করা যায় না এবং উভয়ই ব্যবহার করলে একটি ত্রুটি দেখা দেয়।	যেকোনো স্ট্রিং	সেট করা হয়নি
`categoryDenylist`	যেসব ক্যাটাগরির নাম অনুমোদিত নয়, তার ঐচ্ছিক তালিকা নির্ধারণ করে। তালিকাটি খালি না থাকলে, যে ডিটেকশন রেজাল্টগুলোর ক্যাটাগরির নাম এই সেটে রয়েছে, সেগুলো ফিল্টার করে বাদ দেওয়া হবে। ডুপ্লিকেট বা অজানা ক্যাটাগরির নাম উপেক্ষা করা হয়। এই অপশনটি `categoryAllowlist` এর সাথে ব্যবহার করা যায় না এবং উভয়ই ব্যবহার করলে একটি এরর দেখা দেয়।	যেকোনো স্ট্রিং	সেট করা হয়নি

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

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

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

অবজেক্ট ডিটেক্টরটি একক ছবির উপর কাজ করার জন্য detect() এবং ভিডিও ফ্রেমে অবজেক্ট শনাক্ত করার জন্য detectForVideo() ব্যবহার করে। এই টাস্কটি ডেটা প্রসেস করে, অবজেক্ট শনাক্ত করার চেষ্টা করে এবং তারপর ফলাফল রিপোর্ট করে।

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

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

ছবি

const image = document.getElementById("image") as HTMLImageElement;
const detections = objectDetector.detect(image);

ভিডিও

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

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

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

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

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

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

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

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

ObjectDetectorResult:
 Detection #0:
  Box: (x: 355, y: 133, w: 190, h: 206)
  Categories:
   index       : 17
   score       : 0.73828
   class name  : dog
 Detection #1:
  Box: (x: 103, y: 15, w: 138, h: 369)
  Categories:
   index       : 17
   score       : 0.73047
   class name  : dog

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

দুটি কুকুর যাদের বাউন্ডিং বক্সের মাধ্যমে হাইলাইট করা হয়েছে

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