1. قبل از شروع
MediaPipe Solutions به شما امکان می دهد راه حل های یادگیری ماشینی (ML) را در برنامه های خود اعمال کنید. این چارچوبی را فراهم می کند که به شما امکان می دهد خطوط لوله پردازش از پیش ساخته شده را پیکربندی کنید که خروجی فوری، جذاب و مفید را به کاربران ارائه می دهد. حتی می توانید این راه حل ها را با Model Maker سفارشی کنید تا مدل های پیش فرض را به روز کنید.
تشخیص اشیا یکی از چندین کار دید ML است که MediaPipe Solutions ارائه می دهد. MediaPipe Tasks برای اندروید، پایتون و وب در دسترس است.
در این کد لبه، شما تشخیص شی را به یک برنامه وب اضافه می کنید تا سگ ها را در تصاویر و یک ویدیوی وب کم زنده شناسایی کند.
چیزی که یاد خواهید گرفت
- نحوه ادغام یک کار تشخیص شی در یک برنامه وب با MediaPipe Tasks .
چیزی که خواهی ساخت
- یک اپلیکیشن وب که حضور سگ ها را تشخیص می دهد. همچنین می‌توانید با استفاده از MediaPipe Model Maker یک مدل را برای شناسایی کلاسی از اشیاء مورد نظر خود سفارشی کنید.
آنچه شما نیاز دارید
- یک حساب CodePen
- دستگاهی با مرورگر وب
- دانش اولیه جاوا اسکریپت، CSS و HTML
2. راه اندازی شوید
این کد لبه کد شما را در CodePen اجرا می‌کند، یک محیط توسعه اجتماعی که به شما امکان می‌دهد در مرورگر کد بنویسید و نتایج را در حین ساخت بررسی کنید.
برای راه اندازی، این مراحل را دنبال کنید:
- در حساب CodePen خود، به این CodePen بروید. شما از این کد به عنوان پایه شروع برای ایجاد آشکارساز شی خود استفاده می کنید.
- در پایین CodePen در منوی پیمایش، روی Fork کلیک کنید تا یک کپی از کد شروع ایجاد کنید.
- در زبانه JS ، روی
فلش توسعه دهنده و سپس Maximize JavaScript editor را انتخاب کنید. شما فقط کار را در برگه JS برای این کد لبه ویرایش می کنید، بنابراین نیازی به دیدن برگه های HTML یا CSS ندارید.
برنامه شروع را مرور کنید
- در قسمت پیش نمایش، توجه کنید که دو تصویر از سگ ها و گزینه ای برای اجرای وب کم شما وجود دارد. مدلی که در این آموزش استفاده می کنید بر روی سه سگ نمایش داده شده در دو تصویر آموزش داده شده است.
- در برگه JS ، توجه کنید که چندین نظر در سراسر کد وجود دارد. به عنوان مثال، می توانید نظر زیر را در خط 15 بیابید:
// Import the required package.
این نظرات نشان می دهد که کجا باید قطعه کد را درج کنید.
3. بسته MediaPipe tasks-vision را وارد کرده و متغیرهای مورد نیاز را اضافه کنید
- در برگه JS ، بسته MediaPipe
tasks-visionوارد کنید:
// Import the required package.
import { ObjectDetector, FilesetResolver, Detection } from "https://cdn.skypack.dev/@mediapipe/tasks-vision@latest";
این کد از شبکه تحویل محتوای Skypack (CDN) برای وارد کردن بسته استفاده می کند. برای اطلاعات بیشتر در مورد نحوه استفاده از Skypack با CodePen، به Skypack + CodePen مراجعه کنید.
در پروژه های خود می توانید از Node.js با npm یا مدیریت بسته یا CDN انتخابی خود استفاده کنید. برای اطلاعات بیشتر در مورد بسته مورد نیازی که باید نصب کنید، به بسته‌های جاوا اسکریپت مراجعه کنید.
- اعلان متغیرها برای آشکارساز شی و حالت در حال اجرا:
// 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٪ یا بیشتر برمی گرداند. می توانید این آستانه را مطابق با نیازهای برنامه خود تنظیم کنید.
ویژگی runningMode با مقداردهی اولیه شی ObjectDetector تنظیم می شود. بعداً می‌توانید این و سایر گزینه‌ها را در صورت نیاز تغییر دهید.
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 ببینید.