راهنمای تقسیم‌بندی تصویر تعاملی برای وب

وظیفه MediaPipe Interactive Image Segmenter مکانی را در یک تصویر می گیرد، مرزهای یک شی را در آن مکان تخمین می زند، و تقسیم بندی شی را به عنوان داده تصویر برمی گرداند. این دستورالعمل‌ها به شما نشان می‌دهند که چگونه از Segmenter تصویر تعاملی برای Node و برنامه‌های وب استفاده کنید. برای اطلاعات بیشتر در مورد قابلیت‌ها، مدل‌ها و گزینه‌های پیکربندی این کار، به نمای کلی مراجعه کنید.

نمونه کد

کد مثال برای Segmenter تصویر تعاملی، اجرای کامل این کار را در جاوا اسکریپت برای مرجع شما فراهم می کند. این کد به شما کمک می کند تا این کار را آزمایش کنید و شروع به ساخت برنامه تقسیم بندی تصویر تعاملی خود کنید. می‌توانید کد نمونه Interactive Image Segmenter را فقط با استفاده از مرورگر وب خود مشاهده، اجرا و ویرایش کنید. همچنین می توانید کد این مثال را در GitHub مرور کنید.

برپایی

این بخش مراحل کلیدی را برای راه‌اندازی محیط توسعه و پروژه‌های کد مخصوصاً برای استفاده از بخش‌بندی تصویر تعاملی توضیح می‌دهد. برای اطلاعات کلی در مورد تنظیم محیط توسعه خود برای استفاده از وظایف MediaPipe، از جمله الزامات نسخه پلت فرم، به راهنمای راه اندازی وب مراجعه کنید.

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

کد تقسیم‌کننده تصویر تعاملی از طریق بسته MediaPipe @mediapipe/tasks-vision NPM در دسترس است. می‌توانید این کتابخانه‌ها را از پیوندهای ارائه شده در راهنمای راه‌اندازی پلتفرم پیدا و دانلود کنید.

با استفاده از دستور زیر می توانید بسته های مورد نیاز را با کد زیر برای مرحله محلی نصب کنید:

npm install --save @mediapipe/tasks-vision

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

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

مدل

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

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

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

کار را ایجاد کنید

از یکی از توابع Interactive Image Segmenter createFrom...() برای آماده کردن کار برای اجرای استنتاج استفاده کنید. از تابع createFromModelPath() با یک مسیر نسبی یا مطلق به فایل مدل آموزش دیده استفاده کنید. اگر مدل شما قبلاً در حافظه بارگذاری شده است، می توانید از متد createFromModelBuffer() استفاده کنید.

مثال کد زیر استفاده از تابع createFromOptions() برای تنظیم کار نشان می دهد. تابع createFromOptions به شما این امکان را می دهد که بخش تصویر تعاملی را با گزینه های پیکربندی سفارشی کنید. برای اطلاعات بیشتر در مورد گزینه های پیکربندی، گزینه های پیکربندی را ببینید.

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

async function createSegmenter() {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
  );

  interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
    },
  });
}
createSegmenter();

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

این کار دارای گزینه های پیکربندی زیر برای برنامه های کاربردی وب است:

نام گزینه	شرح	محدوده ارزش	مقدار پیش فرض
`outputCategoryMask`	اگر روی `True` تنظیم شود، خروجی شامل یک ماسک تقسیم بندی به عنوان یک تصویر uint8 است، که در آن هر مقدار پیکسل نشان می دهد که آیا پیکسل بخشی از شی واقع در ناحیه مورد نظر است یا خیر.	{ `True, False` }	`False`
`outputConfidenceMasks`	اگر روی `True` تنظیم شود، خروجی شامل یک ماسک تقسیم بندی به عنوان یک تصویر مقدار شناور است، که در آن هر مقدار شناور نشان دهنده اطمینان است که پیکسل بخشی از شی واقع در ناحیه مورد نظر است.	{ `True, False` }	`True`
`displayNamesLocale`	زبان برچسب‌ها را برای استفاده برای نام‌های نمایشی ارائه شده در فراداده مدل کار، در صورت وجود، تنظیم می‌کند. پیش فرض برای انگلیسی `en` است. با استفاده از TensorFlow Lite Metadata Writer API می‌توانید برچسب‌های محلی را به ابرداده یک مدل سفارشی اضافه کنید.	کد محلی	en

داده ها را آماده کنید

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

فراخوانی به segment() Interactive Image Segmenter و segmentForVideo() بصورت همزمان اجرا می شود و رشته رابط کاربری را مسدود می کند. اگر اشیاء را در فریم‌های ویدیویی از دوربین دستگاه قطعه‌بندی کنید، هر وظیفه تقسیم‌بندی رشته اصلی را مسدود می‌کند. شما می توانید با پیاده سازی وب کارگران برای اجرای segment() و segmentForVideo() در یک رشته دیگر از این امر جلوگیری کنید.

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

قطعه‌ساز تصویر تعاملی از متد segment() برای استنتاج استفاده می‌کند. قطعه‌ساز تصویر تعاملی، بخش‌های شناسایی‌شده را به‌عنوان داده‌های تصویری به یک تابع برگشتی که هنگام اجرای یک استنتاج برای کار تنظیم کرده‌اید، برمی‌گرداند.

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

const image = document.getElementById("image") as HTMLImageElement;
interactiveSegmenter.segment(
  image,
  {
    keypoint: {
      x: event.offsetX / event.target.width,
      y: event.offsetY / event.target.height
    }
  },
  callback);

برای اجرای کامل‌تر اجرای یک تکلیف Interactive Image Segmenter، به مثال کد مراجعه کنید.

کنترل و نمایش نتایج

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

بخش‌های زیر اطلاعات خروجی این کار را بیشتر توضیح می‌دهند:

ماسک دسته

تصاویر زیر تجسمی از خروجی کار را برای یک ماسک مقدار مقوله با ناحیه نقطه مورد علاقه نشان می دهد. هر پیکسل یک مقدار uint8 است که نشان می دهد آیا پیکسل بخشی از شی واقع در ناحیه مورد نظر است یا خیر. دایره سیاه و سفید روی تصویر دوم ناحیه مورد نظر انتخاب شده را نشان می دهد.

خروجی ماسک تصویر اصلی و دسته. تصویر منبع از مجموعه داده پاسکال VOC 2012 .

ماسک اعتماد به نفس

خروجی یک ماسک اطمینان حاوی مقادیر شناور بین [0, 1] برای هر کانال ورودی تصویر است. مقادیر بالاتر نشان دهنده اطمینان بیشتر است که پیکسل تصویر بخشی از شی واقع در ناحیه مورد نظر است.

کد مثال بخش تصویر تعاملی نشان می دهد که چگونه نتایج طبقه بندی برگشتی از کار را نمایش دهید، برای جزئیات به مثال کد مراجعه کنید.