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

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

مثال کد

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

راه‌اندازی

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

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

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

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

npm install --save @mediapipe/tasks-vision

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

<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/

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

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

مثال کد زیر استفاده از تابع createFromOptions() را برای تنظیم وظیفه نشان می‌دهد. تابع createFromOptions به شما امکان می‌دهد تا Interactive Image Segmenter را با گزینه‌های پیکربندی سفارشی کنید. برای اطلاعات بیشتر در مورد گزینه‌های پیکربندی، به Configuration options مراجعه کنید.

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

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` برای انگلیسی است. می‌توانید با استفاده از API نویسنده فراداده TensorFlow Lite، برچسب‌های محلی را به فراداده یک مدل سفارشی اضافه کنید.	کد محلی	انگلیسی

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

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

فراخوانی متدهای segment() و segmentForVideo() در Interactive Image Segmenter به صورت همزمان اجرا می‌شوند و نخ رابط کاربری را مسدود می‌کنند. اگر اشیاء را در فریم‌های ویدیویی از دوربین دستگاه قطعه‌بندی کنید، هر وظیفه قطعه‌بندی، نخ اصلی را مسدود می‌کند. می‌توانید با پیاده‌سازی web workerها برای اجرای 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);