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

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

কোড উদাহরণ

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

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

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

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

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

runningMode = "IMAGE";

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

  imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
    },
    outputCategoryMask: true,
    outputConfidenceMasks: false
    runningMode: runningMode
  });
}
createImageSegmenter();

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

কনফিগারেশন অপশন

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

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

IMAGE: একক ইমেজ ইনপুট জন্য মোড.

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

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

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

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

টাস্ক চালান

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

নিম্নলিখিত কোডটি প্রদর্শন করে কিভাবে টাস্ক মডেলের সাথে প্রক্রিয়াকরণ চালানো যায়:

ছবি

const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);
  

Video

async function renderLoop(): void {
  const video = document.getElementById("video");
  let startTimeMs = performance.now();

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

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

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

হ্যান্ডেল এবং প্রদর্শন ফলাফল

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

নিম্নলিখিত বিভাগগুলি এই টাস্ক থেকে আউটপুট ডেটার উদাহরণ দেখায়:

ক্যাটাগরি আত্মবিশ্বাস

নিম্নলিখিত চিত্রগুলি একটি ক্যাটাগরি কনফিডেন্স মাস্কের জন্য টাস্ক আউটপুটের একটি ভিজ্যুয়ালাইজেশন দেখায়। কনফিডেন্স মাস্ক আউটপুটে [0, 1] এর মধ্যে ফ্লোট মান রয়েছে।

আসল ছবি এবং ক্যাটাগরি কনফিডেন্স মাস্ক আউটপুট। Pascal VOC 2012 ডেটাসেট থেকে উৎস চিত্র।

শ্রেণী মান

নিম্নলিখিত চিত্রগুলি একটি বিভাগ মান মাস্কের জন্য টাস্ক আউটপুটের একটি ভিজ্যুয়ালাইজেশন দেখায়। বিভাগ মাস্ক পরিসীমা হল [0, 255] এবং প্রতিটি পিক্সেল মান মডেল আউটপুট বিজয়ী বিভাগ সূচক প্রতিনিধিত্ব করে। মডেল চিনতে পারে এমন বিভাগগুলির মধ্যে বিজয়ী বিভাগের সূচকের সর্বোচ্চ স্কোর রয়েছে।

মূল ছবি এবং বিভাগ মাস্ক আউটপুট. Pascal VOC 2012 ডেটাসেট থেকে উৎস চিত্র।

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