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

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

কোডের উদাহরণ

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

সেটআপ

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

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

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

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

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

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

ইনফারেন্স চালানোর জন্য টাস্কটি প্রস্তুত করতে ইমেজ সেগমেন্টারের 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();

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

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

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

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

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

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

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

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

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

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

ছবি

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

ভিডিও

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

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

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

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

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

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

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

বিভাগের আত্মবিশ্বাস

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

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

মূল চিত্র এবং ক্যাটাগরি কনফিডেন্স মাস্ক আউটপুট। উৎস চিত্রটি প্যাসকেল ভিওসি ২০১২ ডেটাসেট থেকে নেওয়া।

বিভাগের মান

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

দুটি মেয়ে ঘোড়ায় চড়ে আছে এবং একটি মেয়ে ঘোড়াটির পাশে হেঁটে যাচ্ছে।পূর্ববর্তী ছবি থেকে মেয়েদের এবং ঘোড়াটির আকৃতিকে রূপরেখা দেওয়া ইমেজ মাস্ক। তিনটি মেয়ে এবং ঘোড়াটির আকৃতি নির্ভুলভাবে মাস্ক করা হয়েছে।

মূল ছবি এবং ক্যাটাগরি মাস্ক আউটপুট। উৎস ছবিটি প্যাসকেল ভিওসি ২০১২ ডেটাসেট থেকে নেওয়া।

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