1. আপনি শুরু করার আগে
MediaPipe সলিউশন আপনাকে আপনার অ্যাপে মেশিন-লার্নিং (ML) সমাধান প্রয়োগ করতে দেয়। এটি একটি কাঠামো প্রদান করে যা আপনাকে পূর্বনির্মাণ প্রক্রিয়াকরণ পাইপলাইনগুলি কনফিগার করতে দেয় যা ব্যবহারকারীদের কাছে অবিলম্বে, আকর্ষক এবং দরকারী আউটপুট সরবরাহ করে। এমনকি আপনি ডিফল্ট মডেল আপডেট করতে মডেল মেকারের সাথে এই সমাধানগুলি কাস্টমাইজ করতে পারেন।
অবজেক্ট ডিটেকশন হল মিডিয়াপাইপ সলিউশন অফার করে এমন কয়েকটি এমএল ভিশন টাস্কের মধ্যে একটি। মিডিয়াপাইপ টাস্ক অ্যান্ড্রয়েড, পাইথন এবং ওয়েবের জন্য উপলব্ধ।
এই কোডল্যাবে, আপনি ছবি এবং একটি লাইভ ওয়েবক্যাম ভিডিওতে কুকুর সনাক্ত করতে একটি ওয়েব অ্যাপে অবজেক্ট ডিটেকশন যোগ করুন।
আপনি কি শিখবেন
- মিডিয়াপাইপ টাস্কগুলির সাথে একটি ওয়েব অ্যাপে একটি অবজেক্ট ডিটেকশন টাস্ক কীভাবে অন্তর্ভুক্ত করবেন।
আপনি কি নির্মাণ করবেন
- একটি ওয়েব অ্যাপ যা কুকুরের উপস্থিতি শনাক্ত করে। এছাড়াও আপনি MediaPipe Model Maker-এর মাধ্যমে আপনার পছন্দের বস্তুর একটি শ্রেণি সনাক্ত করতে একটি মডেল কাস্টমাইজ করতে পারেন।
আপনি কি প্রয়োজন হবে
- একটি কোডপেন অ্যাকাউন্ট
- একটি ওয়েব ব্রাউজার সহ একটি ডিভাইস
- জাভাস্ক্রিপ্ট, সিএসএস এবং এইচটিএমএল এর প্রাথমিক জ্ঞান
2. সেট আপ করুন
এই কোডল্যাবটি কোডপেনে আপনার কোড চালায়, একটি সামাজিক উন্নয়ন পরিবেশ যা আপনাকে ব্রাউজারে কোড লিখতে দেয় এবং আপনি তৈরি করার সাথে সাথে ফলাফলগুলি পরীক্ষা করতে দেয়।
সেট আপ করতে, এই পদক্ষেপগুলি অনুসরণ করুন:
- আপনার CodePen অ্যাকাউন্টে, এই CodePen- এ নেভিগেট করুন। আপনি আপনার নিজের অবজেক্ট ডিটেক্টর তৈরি করতে একটি প্রারম্ভিক বেস হিসাবে এই কোড ব্যবহার করুন.
- নেভিগেশন মেনুতে CodePen-এর নীচে, স্টার্টার কোডের একটি অনুলিপি তৈরি করতে Fork-এ ক্লিক করুন।
- JS ট্যাবে, ক্লিক করুন
প্রসারিত তীর এবং তারপরে জাভাস্ক্রিপ্ট সম্পাদক ম্যাক্সিমাইজ নির্বাচন করুন। আপনি শুধুমাত্র এই কোডল্যাবের জন্য JS ট্যাবে কাজ সম্পাদনা করেন, তাই আপনাকে HTML বা CSS ট্যাব দেখতে হবে না।
স্টার্টার অ্যাপটি পর্যালোচনা করুন
- পূর্বরূপ ফলকে, লক্ষ্য করুন যে কুকুরের দুটি ছবি এবং আপনার ওয়েবক্যাম চালানোর একটি বিকল্প রয়েছে৷ আপনি এই টিউটোরিয়ালে যে মডেলটি ব্যবহার করেন তা দুটি ছবিতে প্রদর্শিত তিনটি কুকুরের উপর প্রশিক্ষিত ছিল।
- JS ট্যাবে , লক্ষ্য করুন যে কোড জুড়ে বেশ কয়েকটি মন্তব্য রয়েছে। উদাহরণস্বরূপ, আপনি লাইন 15 এ নিম্নলিখিত মন্তব্য পেতে পারেন:
// Import the required package.
এই মন্তব্যগুলি নির্দেশ করে যেখানে আপনাকে কোড স্নিপেট সন্নিবেশ করতে হবে৷
3. MediaPipe টাস্ক-ভিশন প্যাকেজ আমদানি করুন এবং প্রয়োজনীয় ভেরিয়েবল যোগ করুন
- 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 প্যাকেজগুলি দেখুন।
- অবজেক্ট ডিটেক্টর এবং চলমান মোডের জন্য ভেরিয়েবল ঘোষণা করুন:
// Create required variables.
let objectDetector = null;
let runningMode = "IMAGE";
runningMode ভেরিয়েবল হল একটি স্ট্রিং যা একটি "IMAGE" মানতে সেট করা হয় যখন আপনি চিত্রগুলিতে অবজেক্টগুলি সনাক্ত করেন বা যখন আপনি ভিডিওতে বস্তুগুলি সনাক্ত করেন তখন একটি "VIDEO" মান।
4. অবজেক্ট ডিটেক্টর শুরু করুন
- অবজেক্ট ডিটেক্টর শুরু করতে, 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 মান সেট করা হয়েছে। এর মানে হল যে মডেলটি 30% বা তার বেশি আত্মবিশ্বাসের স্তরের সাথে সনাক্ত করা যেকোনো বস্তুর জন্য ফলাফল প্রদান করে। আপনার অ্যাপের প্রয়োজন অনুসারে আপনি এই থ্রেশহোল্ড সামঞ্জস্য করতে পারেন।
ObjectDetector অবজেক্টের প্রারম্ভিকতার উপর runningMode বৈশিষ্ট্য সেট করা হয়। আপনি পরে প্রয়োজন অনুযায়ী এটি এবং অন্যান্য বিকল্প পরিবর্তন করতে পারেন।
5. চিত্রগুলিতে ভবিষ্যদ্বাণী চালান৷
- ইমেজে ভবিষ্যদ্বাণী চালানোর জন্য,
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 খুলুন এবং তারপরে ত্রুটিগুলির জন্য কনসোল প্যানেলটি পরীক্ষা করুন বা আপনি কিছু মিস করেননি তা নিশ্চিত করতে পূর্ববর্তী পদক্ষেপগুলি পর্যালোচনা করুন৷
6. একটি লাইভ ওয়েবক্যাম ভিডিওতে ভবিষ্যদ্বাণী চালান
বস্তু সনাক্ত করুন
- একটি লাইভ ওয়েবক্যাম ভিডিওতে বস্তু সনাক্ত করতে,
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> ট্যাগ তৈরি করে এবং প্রদর্শন করে।
অ্যাপটি পরীক্ষা করুন
লাইভ অবজেক্ট সনাক্তকরণ পরীক্ষা করার জন্য, এটি কুকুরগুলির একটির একটি চিত্র থাকতে সাহায্য করে যার উপর মডেলটি প্রশিক্ষিত হয়েছিল।
অ্যাপটি পরীক্ষা করতে, এই পদক্ষেপগুলি অনুসরণ করুন:
- আপনার ফোনে কুকুরের ফটোগুলির একটি ডাউনলোড করুন।
- পূর্বরূপ ফলকে, ওয়েবক্যাম সক্ষম করুন ক্লিক করুন।
- যদি আপনার ব্রাউজার একটি ডায়ালগ উপস্থাপন করে যা আপনাকে ওয়েবক্যামে অ্যাক্সেস দিতে বলে, অনুমতি দিন।
- আপনার ওয়েবক্যামের সামনে আপনার ফোনে কুকুরের ছবি ধরে রাখুন। একটি বাউন্ডিং বক্স কুকুরের নাম এবং মডেলের আত্মবিশ্বাসের স্তর দেখায়।
- যদি একটি বাউন্ডিং বক্স না থাকে, Chrome DevTools খুলুন এবং তারপরে ত্রুটিগুলির জন্য কনসোল প্যানেলটি পরীক্ষা করুন বা আপনি কিছু মিস করেননি তা নিশ্চিত করতে পূর্ববর্তী পদক্ষেপগুলি পর্যালোচনা করুন৷
7. অভিনন্দন
অভিনন্দন! আপনি একটি ওয়েব অ্যাপ তৈরি করেছেন যেটি ছবিতে বস্তু সনাক্ত করে। আরও জানতে, CodePen-এ অ্যাপটির একটি সম্পূর্ণ সংস্করণ দেখুন।