ওয়েবের জন্য ইমেজ এম্বেডিং গাইড

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

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

কোডের উদাহরণ

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

সেটআপ

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

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

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

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

npm install @mediapipe/tasks-vision

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

<!-- You can replace jsDelivr with your preferred CDN -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

মডেল

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

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

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

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

একটি মডেল পাথ নির্দিষ্ট করুন

আপনি ` createFromModelPath() মেথডটি ব্যবহার করে ডিফল্ট অপশনসহ একটি টাস্ক তৈরি করতে পারেন:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
  const imageEmbedder = await ImageEmbedder.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_embedder/mobilenet_v3_small/float32/1/mobilenet_v3_small.tflite`
    },
  });

মডেল বাফার নির্দিষ্ট করুন

যদি আপনার মডেলটি ইতিমধ্যেই মেমরিতে লোড করা থাকে, তাহলে আপনি createFromModelBuffer() মেথডটি ব্যবহার করতে পারেন:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = ImageEmbedder.createFromModelBuffer(
    vision, 
    new Uint8Array(...)
);

কাস্টম বিকল্পগুলি নির্দিষ্ট করুন

MediaPipe Image Embedder টাস্কটি সেট আপ করার জন্য createFromOptions ফাংশনটি ব্যবহার করে। createFromOptions ফাংশনটি কনফিগারেশন অপশনগুলোর জন্য ভ্যালু গ্রহণ করে। কনফিগারেশন অপশন সম্পর্কে আরও তথ্যের জন্য, কনফিগারেশন অপশনস দেখুন।

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

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = await ImageEmbedder.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "model.tflite"
      },
      quantize: true
    });

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

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

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

IMAGE: একক ছবি ইনপুটের মোড।

ভিডিও: কোনো ভিডিওর ডিকোড করা ফ্রেম অথবা ক্যামেরা থেকে আসা ইনপুট ডেটার লাইভস্ট্রিমের মোড।		 { IMAGE, VIDEO } IMAGE
l2Normalize ফেরত আসা ফিচার ভেক্টরকে L2 নর্ম দিয়ে নর্মালাইজ করা হবে কিনা। এই অপশনটি শুধুমাত্র তখনই ব্যবহার করুন, যদি মডেলে আগে থেকেই কোনো নেটিভ L2_NORMALIZATION TFLite Op না থাকে। বেশিরভাগ ক্ষেত্রেই, এটি আগে থেকেই থাকে এবং তাই TFLite ইনফারেন্সের মাধ্যমেই L2 নর্মালাইজেশন সম্পন্ন হয়, এক্ষেত্রে এই অপশনটির কোনো প্রয়োজন হয় না। Boolean False
quantize ফেরত আসা এমবেডিংটি স্কেলার কোয়ান্টাইজেশনের মাধ্যমে বাইটে কোয়ান্টাইজ করা হবে কিনা। এমবেডিংগুলোকে অন্তর্নিহিতভাবে ইউনিট-নর্ম হিসেবে ধরে নেওয়া হয় এবং তাই যেকোনো ডাইমেনশনের মান [-1.0, 1.0] পরিসরের মধ্যে থাকবে বলে নিশ্চিত করা হয়। যদি এমনটা না হয়, তবে l2Normalize অপশনটি ব্যবহার করুন। Boolean False

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

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

Calls to the Image Embedder embed() and embedForVideo() methods run synchronously and block the user interface thread. If you want to extract feature vectors from video frames, each embedding will block the main thread. You can prevent this by implementing web workers to run the embed() and embedForVideo() methods on another thread.

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

ইমেজ এমবেডার ইনফারেন্স ট্রিগার করার জন্য embed() (রানিং মোড image হলে) এবং embedForVideo() (রানিং মোড video হলে) মেথডগুলো ব্যবহার করে। ইমেজ এমবেডার এপিআই ইনপুট ইমেজের জন্য এমবেডিং ভেক্টরগুলো রিটার্ন করবে।

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

ছবি 

const image = document.getElementById("image") as HTMLImageElement;
const imageEmbedderResult = imageEmbedder.embed(image);

ভিডিও 

  const video = document.getElementById("webcam");

  const startTimeMs = performance.now();
  const embedderResult = await imageEmbedder.embedForVideo(video, startTimeMs);

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

ইনফারেন্স চালানোর পর, ইমেজ এমবেডার টাস্কটি একটি ImageEmbedderResult অবজেক্ট রিটার্ন করে, যেটিতে ইনপুট ইমেজ বা ফ্রেমের এমবেডিং ভেক্টরগুলো থাকে।

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

ImageEmbedderResult:
  Embedding #0 (sole embedding head):
    float_embedding: {0.0, 0.0, ..., 0.0, 1.0, 0.0, 0.0, 2.0}
    head_index: 0

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

একটি বিরল প্রজাতির বিড়ালের মাঝারি আকারের ছবি।

আপনি ImageEmbedder.cosineSimilarity ফাংশনটি ব্যবহার করে দুটি এমবেডিংয়ের শব্দার্থগত সাদৃশ্য তুলনা করতে পারেন। একটি উদাহরণের জন্য নিম্নলিখিত কোডটি দেখুন। 

// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
  imageEmbedderResult.embeddings[0],
  otherEmbedderResult.embeddings[0]);

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