ওয়েবের জন্য ইন্টারেক্টিভ ইমেজ সেগমেন্টেশন গাইড

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

কোডের উদাহরণ

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

সেটআপ

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

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

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

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

npm install --save @mediapipe/tasks-vision

আপনি যদি কন্টেন্ট ডেলিভারি নেটওয়ার্ক (CDN) পরিষেবার মাধ্যমে টাস্ক কোডটি ইম্পোর্ট করতে চান, তাহলে নিম্নলিখিত কোডটি যোগ করুন। আপনার HTML ফাইলে ট্যাগ:

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

মডেল

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

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

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

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

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

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

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

async function createSegmenter() {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
  );

  interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
    },
  });
}
createSegmenter();

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

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

বিকল্পের নাম	বর্ণনা	মান পরিসীমা	ডিফল্ট মান
`outputCategoryMask`	`True` তে সেট করা হলে, আউটপুটে একটি uint8 ইমেজ হিসেবে একটি সেগমেন্টেশন মাস্ক অন্তর্ভুক্ত থাকে, যেখানে প্রতিটি পিক্সেলের মান নির্দেশ করে যে পিক্সেলটি কাঙ্ক্ষিত এলাকায় অবস্থিত বস্তুটির অংশ কি না।	{ `True, False` }	`False`
`outputConfidenceMasks`	যদি `True` তে সেট করা হয়, তাহলে আউটপুটে একটি ফ্লোট ভ্যালু ইমেজ হিসেবে একটি সেগমেন্টেশন মাস্ক অন্তর্ভুক্ত থাকে, যেখানে প্রতিটি ফ্লোট ভ্যালু এই নিশ্চয়তা প্রকাশ করে যে পিক্সেলটি কাঙ্ক্ষিত এলাকায় অবস্থিত বস্তুর অংশ।	{ `True, False` }	`True`
`displayNamesLocale`	টাস্কের মডেলের মেটাডেটাতে প্রদত্ত ডিসপ্লে নামের জন্য ব্যবহৃত লেবেলের ভাষা নির্ধারণ করে (যদি তা উপলব্ধ থাকে)। ডিফল্ট হলো ইংরেজির জন্য `en` '। আপনি TensorFlow Lite Metadata Writer API ব্যবহার করে একটি কাস্টম মডেলের মেটাডেটাতে স্থানীয় লেবেল যোগ করতে পারেন।	স্থানীয় কোড	ইংরেজি

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

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

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

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

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

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

const image = document.getElementById("image") as HTMLImageElement;
interactiveSegmenter.segment(
  image,
  {
    keypoint: {
      x: event.offsetX / event.target.width,
      y: event.offsetY / event.target.height
    }
  },
  callback);