I/O থেকে আমাদের Google AI Edge ঘোষণা সম্পর্কে আরও জানুন

এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

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

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

কোড উদাহরণ

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

সেটআপ

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

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

ইমেজ এমবেডার কোড 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.js"
    crossorigin="anonymous"></script>
</head>

মডেল

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

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

<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 ইমেজ এমবেডার টাস্ক টাস্ক সেট আপ করতে 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`

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

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

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

টাস্ক চালান

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

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

ছবি

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]);

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