১. শুরু করার আগে
মিডিয়াপাইপ সলিউশনস আপনাকে আপনার অ্যাপে মেশিন-লার্নিং (এমএল) সলিউশন প্রয়োগ করার সুযোগ দেয়। এটি এমন একটি ফ্রেমওয়ার্ক প্রদান করে যা আপনাকে আগে থেকে তৈরি প্রসেসিং পাইপলাইন কনফিগার করতে দেয়, যা ব্যবহারকারীদের কাছে তাৎক্ষণিক, আকর্ষণীয় এবং দরকারি আউটপুট পৌঁছে দেয়। এমনকি আপনি মডেল মেকার ব্যবহার করে ডিফল্ট মডেলগুলো আপডেট করার জন্য এই সলিউশনগুলো কাস্টমাইজও করতে পারেন।
অবজেক্ট ডিটেকশন হলো মিডিয়াপাইপ সলিউশনস-এর দেওয়া বিভিন্ন এমএল ভিশন টাস্কগুলোর মধ্যে একটি। মিডিয়াপাইপ টাস্কস অ্যান্ড্রয়েড, পাইথন এবং ওয়েবের জন্য উপলব্ধ।
এই কোডল্যাবে, আপনি ছবি এবং লাইভ ওয়েবক্যাম ভিডিওতে কুকুর শনাক্ত করার জন্য একটি ওয়েব অ্যাপে অবজেক্ট ডিটেকশন যুক্ত করবেন।
আপনি যা শিখবেন
- MediaPipe Tasks ব্যবহার করে একটি ওয়েব অ্যাপে কীভাবে অবজেক্ট ডিটেকশন টাস্ক অন্তর্ভুক্ত করা যায়।
আপনি যা তৈরি করবেন
- একটি ওয়েব অ্যাপ যা কুকুরের উপস্থিতি শনাক্ত করে। এছাড়াও আপনি MediaPipe Model Maker ব্যবহার করে আপনার পছন্দের শ্রেণীর বস্তু শনাক্ত করার জন্য একটি মডেল কাস্টমাইজ করতে পারেন।
আপনার যা যা লাগবে
- একটি কোডপেন অ্যাকাউন্ট
- ওয়েব ব্রাউজার সহ একটি ডিভাইস
- জাভাস্ক্রিপ্ট, সিএসএস এবং এইচটিএমএল সম্পর্কে প্রাথমিক জ্ঞান
২. প্রস্তুত হন
এই কোডল্যাবটি আপনার কোড কোডপেন -এ রান করে, যা একটি সামাজিক ডেভেলপমেন্ট পরিবেশ এবং যেখানে আপনি ব্রাউজারে কোড লিখতে ও বিল্ড করার সাথে সাথেই ফলাফল পরীক্ষা করতে পারেন।
সেট আপ করার জন্য, এই ধাপগুলো অনুসরণ করুন:
- আপনার CodePen অ্যাকাউন্টে এই CodePen- টিতে যান। আপনার নিজস্ব অবজেক্ট ডিটেক্টর তৈরি করার জন্য আপনি এই কোডটিকে প্রাথমিক ভিত্তি হিসেবে ব্যবহার করতে পারেন।
- CodePen-এর নিচের নেভিগেশন মেনুতে, স্টার্টার কোডের একটি কপি তৈরি করতে Fork-এ ক্লিক করুন।
- JS ট্যাবে, ক্লিক করুন
এক্সপান্ডার অ্যারোতে ক্লিক করে 'Maximize JavaScript editor' নির্বাচন করুন। এই কোডল্যাবের জন্য আপনি শুধুমাত্র JS ট্যাবেই কাজ সম্পাদনা করবেন, তাই আপনার HTML বা CSS ট্যাব দেখার প্রয়োজন নেই।
স্টার্টার অ্যাপটি পর্যালোচনা করুন
- প্রিভিউ প্যানে লক্ষ্য করুন, সেখানে কুকুরের দুটি ছবি এবং আপনার ওয়েবক্যাম চালু করার একটি অপশন রয়েছে। এই টিউটোরিয়ালে আপনি যে মডেলটি ব্যবহার করছেন, সেটি ঐ দুটি ছবিতে প্রদর্শিত তিনটি কুকুরের উপর প্রশিক্ষণ দেওয়া হয়েছে।
- JS ট্যাবে লক্ষ্য করুন, কোড জুড়ে বেশ কয়েকটি কমেন্ট রয়েছে। উদাহরণস্বরূপ, আপনি ১৫ নম্বর লাইনে নিম্নলিখিত কমেন্টটি খুঁজে পাবেন:
// Import the required package.
এই মন্তব্যগুলো নির্দেশ করে দেয় যে আপনাকে কোথায় কোডের অংশবিশেষ যোগ করতে হবে।
৩. MediaPipe tasks-vision প্যাকেজটি ইম্পোর্ট করুন এবং প্রয়োজনীয় ভেরিয়েবলগুলো যোগ করুন।
- JS ট্যাবে, MediaPipe
tasks-visionপ্যাকেজটি ইম্পোর্ট করুন:
// Import the required package.
import { ObjectDetector, FilesetResolver, Detection } from "https://cdn.skypack.dev/@mediapipe/tasks-vision@latest";
এই কোডটি প্যাকেজটি ইম্পোর্ট করার জন্য স্কাইপ্যাক কন্টেন্ট-ডেলিভারি নেটওয়ার্ক (CDN) ব্যবহার করে। কোডপেনের সাথে স্কাইপ্যাক কীভাবে ব্যবহার করতে হয় সে সম্পর্কে আরও তথ্যের জন্য, স্কাইপ্যাক + কোডপেন দেখুন।
আপনার প্রজেক্টে আপনি npm অথবা আপনার পছন্দের প্যাকেজ ম্যানেজার বা CDN-এর সাথে Node.js ব্যবহার করতে পারেন। আপনার যে প্রয়োজনীয় প্যাকেজগুলো ইনস্টল করতে হবে, সে সম্পর্কে আরও তথ্যের জন্য JavaScript packages দেখুন।
- অবজেক্ট ডিটেক্টর এবং রানিং মোডের জন্য ভেরিয়েবল ঘোষণা করুন:
// Create required variables.
let objectDetector = null;
let runningMode = "IMAGE";
runningMode ভেরিয়েবলটি একটি স্ট্রিং, যা ছবিতে বস্তু শনাক্ত করলে "IMAGE" মানে অথবা ভিডিওতে বস্তু শনাক্ত করলে "VIDEO" মানে সেট করা হয়।
৪. অবজেক্ট ডিটেক্টরটি প্রারম্ভিকীকরণ করুন।
- অবজেক্ট ডিটেক্টরটি ইনিশিয়ালাইজ করতে, JS ট্যাবে প্রাসঙ্গিক কমেন্টের পরে নিম্নলিখিত কোডটি যোগ করুন:
// Initialize the object detector.
async function initializeObjectDetector() {
const visionFilesetResolver = await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
objectDetector = await ObjectDetector.createFromOptions(visionFilesetResolver, {
baseOptions: {
modelAssetPath: "https://storage.googleapis.com/mediapipe-assets/dogs.tflite"
},
scoreThreshold: 0.3,
runningMode: runningMode
});
}
initializeObjectDetector();
FilesetResolver.forVisionTasks() মেথডটি টাস্কের জন্য WebAssembly (Wasm) বাইনারির অবস্থান নির্দিষ্ট করে।
ObjectDetector.createFromOptions() মেথডটি অবজেক্ট ডিটেক্টরকে ইনস্ট্যানশিয়েট করে। ডিটেকশনের জন্য ব্যবহৃত মডেলের একটি পাথ আপনাকে অবশ্যই প্রদান করতে হবে। এই ক্ষেত্রে, ডগ-ডিটেকশন মডেলটি ক্লাউড স্টোরেজে হোস্ট করা আছে।
scoreThreshold প্রপার্টিটির মান 0.3 এ সেট করা আছে। এর মানে হলো, মডেলটি ৩০% বা তার বেশি কনফিডেন্স লেভেলে শনাক্ত হওয়া যেকোনো অবজেক্টের জন্য ফলাফল প্রদান করে। আপনি আপনার অ্যাপের প্রয়োজন অনুযায়ী এই থ্রেশহোল্ডটি পরিবর্তন করতে পারেন।
ObjectDetector অবজেক্টটি ইনিশিয়ালাইজ করার সময় runningMode প্রপার্টিটি সেট করা হয়। পরবর্তীতে প্রয়োজন অনুযায়ী আপনি এটি এবং অন্যান্য অপশন পরিবর্তন করতে পারেন।
৫. ছবিগুলোর উপর পূর্বাভাস চালান।
- ইমেজের উপর প্রেডিকশন চালানোর জন্য,
handleClick()ফাংশনে যান এবং তারপর ফাংশনের বডিতে নিম্নলিখিত কোডটি যোগ করুন:
// Verify object detector is initialized and choose the correct running mode.
if (!objectDetector) {
alert("Object Detector still loading. Please try again");
return;
}
if (runningMode === "VIDEO") {
runningMode = "IMAGE";
await objectDetector.setOptions({ runningMode: runningMode });
}
এই কোডটি অবজেক্ট ডিটেক্টরটি ইনিশিয়ালাইজ করা হবে কিনা তা নির্ধারণ করে এবং ইমেজগুলোর জন্য রানিং মোড সেট করা আছে কিনা তা নিশ্চিত করে।
বস্তু সনাক্ত করুন
- ইমেজের মধ্যে অবজেক্ট শনাক্ত করতে,
handleClick()ফাংশনের বডিতে নিম্নলিখিত কোডটি যোগ করুন:
// Run object detection.
const detections = objectDetector.detect(event.target);
নিম্নলিখিত কোড স্নিপেটটিতে এই টাস্কের আউটপুট ডেটার একটি উদাহরণ অন্তর্ভুক্ত রয়েছে:
ObjectDetectionResult:
Detection #0:
Box: (x: 355, y: 133, w: 190, h: 206)
Categories:
index : 17
score : 0.73828
class name : aci
Detection #1:
Box: (x: 103, y: 15, w: 138, h: 369)
Categories:
index : 17
score : 0.73047
class name : tikka
পূর্বাভাস প্রক্রিয়া করুন এবং প্রদর্শন করুন
-
handleClick()ফাংশনের বডির শেষে,displayImageDetections()ফাংশনটি কল করুন:
// Call the displayImageDetections() function.
displayImageDetections(detections, event.target);
- অবজেক্ট-ডিটেকশনের ফলাফল প্রদর্শন করতে
displayImageDetections()ফাংশনের বডিতে নিম্নলিখিত কোডটি যোগ করুন:
// Display object detection results.
const ratio = resultElement.height / resultElement.naturalHeight;
for (const detection of result.detections) {
// Description text
const p = document.createElement("p");
p.setAttribute("class", "info");
p.innerText =
detection.categories[0].categoryName +
" - with " +
Math.round(parseFloat(detection.categories[0].score) * 100) +
"% confidence.";
// Positioned at the top-left of the bounding box.
// Height is that of the text.
// Width subtracts text padding in CSS so that it fits perfectly.
p.style =
"left: " +
detection.boundingBox.originX * ratio +
"px;" +
"top: " +
detection.boundingBox.originY * ratio +
"px; " +
"width: " +
(detection.boundingBox.width * ratio - 10) +
"px;";
const highlighter = document.createElement("div");
highlighter.setAttribute("class", "highlighter");
highlighter.style =
"left: " +
detection.boundingBox.originX * ratio +
"px;" +
"top: " +
detection.boundingBox.originY * ratio +
"px;" +
"width: " +
detection.boundingBox.width * ratio +
"px;" +
"height: " +
detection.boundingBox.height * ratio +
"px;";
resultElement.parentNode.appendChild(highlighter);
resultElement.parentNode.appendChild(p);
}
এই ফাংশনটি ছবিতে শনাক্ত করা বস্তুগুলোর উপর বাউন্ডিং বক্স প্রদর্শন করে। এটি পূর্বের যেকোনো হাইলাইটিং মুছে ফেলে এবং তারপর শনাক্ত করা প্রতিটি বস্তুকে হাইলাইট করার জন্য <p> ট্যাগ তৈরি ও প্রদর্শন করে।
অ্যাপটি পরীক্ষা করুন
আপনি যখন CodePen-এ আপনার কোডে কোনো পরিবর্তন করেন, তখন সেভ করার সাথে সাথে প্রিভিউ প্যানেলটি স্বয়ংক্রিয়ভাবে রিফ্রেশ হয়ে যায়। যদি অটোসেভ চালু থাকে, তাহলে আপনার অ্যাপটি সম্ভবত ইতিমধ্যেই রিফ্রেশ হয়ে গেছে, কিন্তু আরেকবার রিফ্রেশ করে নেওয়া ভালো।
অ্যাপটি পরীক্ষা করতে, এই ধাপগুলো অনুসরণ করুন:
- প্রিভিউ প্যানে, প্রেডিকশনগুলো দেখতে প্রতিটি ছবিতে ক্লিক করুন। একটি বাউন্ডিং বক্সের মধ্যে মডেলটির কনফিডেন্স লেভেলসহ কুকুরটির নাম দেখানো থাকে।
- যদি কোনো বাউন্ডিং বক্স না থাকে, তাহলে Chrome DevTools খুলুন এবং তারপর ত্রুটির জন্য কনসোল প্যানেলটি পরীক্ষা করুন অথবা আপনি কিছু বাদ দেননি তা নিশ্চিত করতে পূর্ববর্তী ধাপগুলো পর্যালোচনা করুন।
৬. একটি লাইভ ওয়েবক্যাম ভিডিওতে পূর্বাভাস চালান।
বস্তু সনাক্ত করুন
- লাইভ ওয়েবক্যাম ভিডিওতে বস্তু শনাক্ত করতে,
predictWebcam()ফাংশনে যান এবং তারপর ফাংশনের বডিতে নিম্নলিখিত কোডটি যোগ করুন:
// Run video object detection.
// If image mode is initialized, create a classifier with video runningMode.
if (runningMode === "IMAGE") {
runningMode = "VIDEO";
await objectDetector.setOptions({ runningMode: runningMode });
}
let nowInMs = performance.now();
// Detect objects with the detectForVideo() method.
const result = await objectDetector.detectForVideo(video, nowInMs);
displayVideoDetections(result.detections);
ভিডিওর জন্য অবজেক্ট ডিটেকশন একই পদ্ধতি ব্যবহার করে, আপনি স্ট্রিমিং ডেটা বা সম্পূর্ণ ভিডিওর উপর ইনফারেন্স চালান না কেন। detectForVideo() মেথডটি ফটোর জন্য ব্যবহৃত detect() মেথডের মতোই, তবে এতে বর্তমান ফ্রেমের সাথে যুক্ত টাইমস্ট্যাম্পের জন্য একটি অতিরিক্ত প্যারামিটার থাকে। ফাংশনটি লাইভ ডিটেকশন সম্পাদন করে, তাই আপনাকে টাইমস্ট্যাম্প হিসাবে বর্তমান সময় পাস করতে হবে।
পূর্বাভাস প্রক্রিয়া করুন এবং প্রদর্শন করুন
- ডিটেকশনের ফলাফল প্রসেস ও প্রদর্শন করতে,
displayVideoDetections()ফাংশনে যান এবং তারপর ফাংশনটির বডিতে নিম্নলিখিত কোডটি যোগ করুন:
// Display video object detection results.
for (let child of children) {
liveView.removeChild(child);
}
children.splice(0);
// Iterate through predictions and draw them to the live view.
for (const detection of result.detections) {
const p = document.createElement("p");
p.innerText =
detection.categories[0].categoryName +
" - with " +
Math.round(parseFloat(detection.categories[0].score) * 100) +
"% confidence.";
p.style =
"left: " +
(video.offsetWidth -
detection.boundingBox.width -
detection.boundingBox.originX) +
"px;" +
"top: " +
detection.boundingBox.originY +
"px; " +
"width: " +
(detection.boundingBox.width - 10) +
"px;";
const highlighter = document.createElement("div");
highlighter.setAttribute("class", "highlighter");
highlighter.style =
"left: " +
(video.offsetWidth -
detection.boundingBox.width -
detection.boundingBox.originX) +
"px;" +
"top: " +
detection.boundingBox.originY +
"px;" +
"width: " +
(detection.boundingBox.width - 10) +
"px;" +
"height: " +
detection.boundingBox.height +
"px;";
liveView.appendChild(highlighter);
liveView.appendChild(p);
// Store drawn objects in memory so that they're queued to delete at next call.
children.push(highlighter);
children.push(p);
}
}
এই কোডটি পূর্ববর্তী যেকোনো হাইলাইটিং মুছে ফেলে এবং তারপর শনাক্ত হওয়া প্রতিটি অবজেক্টকে হাইলাইট করার জন্য <p> ট্যাগ তৈরি ও প্রদর্শন করে।
অ্যাপটি পরীক্ষা করুন
জীবন্ত বস্তু শনাক্তকরণ পরীক্ষা করার জন্য, মডেলটি যে কুকুরগুলোর উপর প্রশিক্ষণ দেওয়া হয়েছিল, সেগুলোর মধ্যে একটির ছবি থাকলে সহায়ক হয়।
অ্যাপটি পরীক্ষা করতে, এই ধাপগুলো অনুসরণ করুন:
- কুকুরের ছবিগুলোর মধ্যে একটি আপনার ফোনে ডাউনলোড করুন।
- প্রিভিউ প্যানে, ‘Enable webcam’- এ ক্লিক করুন।
- যদি আপনার ব্রাউজার ওয়েবক্যাম ব্যবহারের অনুমতি চেয়ে কোনো ডায়ালগ বক্স দেখায়, তাহলে অনুমতি দিন।
- আপনার ফোনে থাকা কুকুরটির ছবিটি আপনার ওয়েবক্যামের সামনে ধরুন। একটি বাউন্ডিং বক্সে কুকুরটির নাম এবং মডেলের আত্মবিশ্বাসের স্তর দেখানো হবে।
- যদি কোনো বাউন্ডিং বক্স না থাকে, তাহলে Chrome DevTools খুলুন এবং তারপর ত্রুটির জন্য কনসোল প্যানেলটি পরীক্ষা করুন অথবা আপনি কিছু বাদ দেননি তা নিশ্চিত করতে পূর্ববর্তী ধাপগুলো পর্যালোচনা করুন।
৭. অভিনন্দন
অভিনন্দন! আপনি এমন একটি ওয়েব অ্যাপ তৈরি করেছেন যা ছবির মধ্যে থাকা বস্তু শনাক্ত করতে পারে। আরও জানতে, CodePen-এ অ্যাপটির সম্পূর্ণ সংস্করণটি দেখুন।