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

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

কোড উদাহরণ

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

সেটআপ

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

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

ইন্টারেক্টিভ ইমেজ সেগমেন্টার কোড 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.js"
    crossorigin="anonymous"></script>
</head>

মডেল

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

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

<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 ব্যবহার করে একটি কাস্টম মডেলের মেটাডেটাতে স্থানীয় লেবেল যোগ করতে পারেন স্থানীয় কোড en

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

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

ইন্টারেক্টিভ ইমেজ সেগমেন্টার 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);