راهنمای تشخیص اشیاء برای وب، راهنمای تشخیص شی برای وب

وظیفه‌ی آشکارساز شیء MediaPipe به شما امکان می‌دهد وجود و مکان چندین کلاس از اشیاء را تشخیص دهید. این وظیفه داده‌های تصویر را دریافت کرده و فهرستی از نتایج تشخیص را ارائه می‌دهد که هر کدام نشان‌دهنده‌ی یک شیء شناسایی‌شده در تصویر هستند. می‌توانید مثال آشکارساز شیء را فقط با استفاده از مرورگر وب خود مشاهده، اجرا و ویرایش کنید.

برای اطلاعات بیشتر در مورد قابلیت‌ها، مدل‌ها و گزینه‌های پیکربندی این وظیفه، به نمای کلی مراجعه کنید.

راه‌اندازی

این بخش مراحل کلیدی برای راه‌اندازی محیط توسعه شما به طور خاص برای استفاده از Object Detector را شرح می‌دهد. برای اطلاعات کلی در مورد راه‌اندازی محیط توسعه وب و جاوا اسکریپت، از جمله الزامات نسخه پلتفرم، به راهنمای راه‌اندازی برای وب مراجعه کنید.

بسته‌های جاوا اسکریپت

کد Object Detector از طریق بسته NPM مدیاپایپ @mediapipe/tasks-vision در دسترس است. می‌توانید با دنبال کردن دستورالعمل‌های موجود در راهنمای راه‌اندازی پلتفرم، این کتابخانه‌ها را پیدا و دانلود کنید.

شما می‌توانید بسته‌های مورد نیاز را از طریق NPM با استفاده از دستور زیر نصب کنید:

npm install @mediapipe/tasks-vision

اگر می‌خواهید کد وظیفه را از طریق سرویس شبکه تحویل محتوا (CDN) وارد کنید، کد زیر را در تگ <head> در فایل HTML خود اضافه کنید:

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

مدل

وظیفه‌ی آشکارساز شیء MediaPipe به یک مدل آموزش‌دیده نیاز دارد که با این وظیفه سازگار باشد. برای اطلاعات بیشتر در مورد مدل‌های آموزش‌دیده‌ی موجود برای آشکارساز شیء، به نمای کلی وظیفه در بخش مدل‌ها مراجعه کنید.

یک مدل را انتخاب و دانلود کنید و سپس آن را در دایرکتوری پروژه خود ذخیره کنید:

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

وظیفه را ایجاد کنید

از یکی از توابع ObjectDetector.createFrom...() برای آماده‌سازی وظیفه جهت اجرای استنتاج‌ها استفاده کنید. از تابع createFromModelPath() با یک مسیر نسبی یا مطلق به فایل مدل آموزش‌دیده استفاده کنید. اگر مدل شما از قبل در حافظه بارگذاری شده است، می‌توانید از متد createFromModelBuffer() استفاده کنید. مثال کد زیر نحوه استفاده از تابع createFromOptions() را نشان می‌دهد که به شما امکان می‌دهد گزینه‌های پیکربندی بیشتری را تنظیم کنید. برای اطلاعات بیشتر در مورد گزینه‌های پیکربندی موجود، به بخش گزینه‌های پیکربندی مراجعه کنید.

کد زیر نحوه ساخت و پیکربندی این وظیفه را نشان می‌دهد:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
objectDetector = await ObjectDetector.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: `https://storage.googleapis.com/mediapipe-tasks/object_detector/efficientdet_lite0_uint8.tflite`
  },
  scoreThreshold: 0.5,
  runningMode: runningMode
});

برای پیاده‌سازی کامل‌تر ایجاد یک وظیفه‌ی آشکارساز شیء، به مثال کد مراجعه کنید.

گزینه‌های پیکربندی

این وظیفه گزینه‌های پیکربندی زیر را برای برنامه‌های وب دارد:

نام گزینه	توضیحات	محدوده ارزش	مقدار پیش‌فرض
`runningMode`	حالت اجرا را برای وظیفه تنظیم می‌کند. دو حالت وجود دارد: تصویر: حالت ورودی‌های تک تصویر. ویدئو: حالتی برای فریم‌های رمزگشایی‌شده‌ی یک ویدئو یا روی پخش زنده‌ی داده‌های ورودی، مثلاً از یک دوربین.	{ `IMAGE, VIDEO` }	`IMAGE`
`displayNamesLocale`	زبان برچسب‌ها را برای نمایش نام‌های ارائه شده در فراداده مدل وظیفه، در صورت وجود، تنظیم می‌کند. پیش‌فرض `en` برای انگلیسی است. می‌توانید با استفاده از API نویسنده فراداده TensorFlow Lite، برچسب‌های محلی را به فراداده یک مدل سفارشی اضافه کنید.	کد محلی	انگلیسی
`maxResults`	حداکثر تعداد نتایج تشخیص با بالاترین امتیاز را که باید برگردانده شوند، تنظیم می‌کند.	هر عدد مثبت	-1 (تمام نتایج برگردانده می‌شوند)
`scoreThreshold`	Sets the prediction score threshold that overrides the one provided in the model metadata (if any). Results below this value are rejected.	هر شناوری	تنظیم نشده
`categoryAllowlist`	لیست اختیاری نام‌های مجاز دسته‌بندی را تنظیم می‌کند. اگر خالی نباشد، نتایج تشخیصی که نام دسته‌بندی آنها در این مجموعه نباشد، فیلتر می‌شوند. نام‌های تکراری یا ناشناخته‌ی دسته‌بندی نادیده گرفته می‌شوند. این گزینه با `categoryDenylist` ناسازگار است و استفاده از هر دو منجر به خطا می‌شود.	هر رشته‌ای	تنظیم نشده
`categoryDenylist`	لیست اختیاری نام‌های دسته‌بندی که مجاز نیستند را تنظیم می‌کند. اگر خالی نباشد، نتایج تشخیصی که نام دسته‌بندی آنها در این مجموعه باشد، فیلتر می‌شوند. نام‌های دسته‌بندی تکراری یا ناشناخته نادیده گرفته می‌شوند. این گزینه با `categoryAllowlist` ناسازگار است و استفاده از هر دو منجر به خطا می‌شود.	هر رشته‌ای	تنظیم نشده

آماده‌سازی داده‌ها

ابزار تشخیص اشیا می‌تواند اشیا را در تصاویر با هر فرمتی که توسط مرورگر میزبان پشتیبانی می‌شود، تشخیص دهد. این وظیفه همچنین پیش‌پردازش داده‌های ورودی، از جمله تغییر اندازه، چرخش و نرمال‌سازی مقادیر را انجام می‌دهد. برای تشخیص اشیا در ویدیوها، می‌توانید از API برای پردازش سریع یک فریم در هر زمان استفاده کنید و با استفاده از مهر زمانی فریم، زمان وقوع حرکات در ویدیو را تعیین کنید.

اجرای وظیفه

تابع تشخیص اشیا (Object Detector) از detect() برای کار روی تصاویر تکی و detectForVideo() برای تشخیص اشیا در فریم‌های ویدیویی استفاده می‌کند. این تابع داده‌ها را پردازش می‌کند، سعی در تشخیص اشیا دارد و سپس نتایج را گزارش می‌دهد.

فراخوانی متدهای detect() و detectForVideo() به صورت همزمان اجرا می‌شوند و نخ رابط کاربری را مسدود می‌کنند. اگر اشیاء را در فریم‌های ویدیویی از دوربین دستگاه تشخیص دهید، هر طبقه‌بندی نخ اصلی را مسدود می‌کند. می‌توانید با پیاده‌سازی web workerها برای اجرای تشخیص روی نخ دیگر، از این امر جلوگیری کنید.

کد زیر نحوه اجرای پردازش با مدل وظیفه را نشان می‌دهد:

تصویر

const image = document.getElementById("image") as HTMLImageElement;
const detections = objectDetector.detect(image);

ویدئو

await objectDetector.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const detections = detector.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

برای پیاده‌سازی کامل‌تر اجرای یک وظیفه‌ی آشکارساز شیء، به مثال کد مراجعه کنید.

مدیریت و نمایش نتایج

آشکارساز شیء برای هر اجرای تشخیص، یک شیء نتایج تشخیص تولید می‌کند. شیء نتایج شامل فهرستی از تشخیص‌ها است که در آن هر تشخیص شامل یک کادر مرزی و اطلاعات دسته‌بندی در مورد شیء تشخیص داده شده، از جمله نام شیء و نمره اطمینان است.

در زیر نمونه‌ای از داده‌های خروجی این وظیفه نشان داده شده است:

ObjectDetectorResult:
 Detection #0:
  Box: (x: 355, y: 133, w: 190, h: 206)
  Categories:
   index       : 17
   score       : 0.73828
   class name  : dog
 Detection #1:
  Box: (x: 103, y: 15, w: 138, h: 369)
  Categories:
   index       : 17
   score       : 0.73047
   class name  : dog

تصویر زیر، خروجی این وظیفه را به صورت بصری نشان می‌دهد:

دو سگ که با کادرهای محدودکننده مشخص شده‌اند

کد نمونه‌ی آشکارساز شیء نحوه‌ی نمایش نتایج تشخیص برگردانده شده از وظیفه را نشان می‌دهد، برای جزئیات بیشتر به مثال کد مراجعه کنید.