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

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

مثال کد

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

راه‌اندازی

این بخش مراحل کلیدی برای تنظیم محیط توسعه و پروژه‌های کدنویسی شما را به طور خاص برای استفاده از 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 به شما امکان می‌دهد تا بخش‌بندی تصویر را با گزینه‌های پیکربندی سفارشی کنید. برای اطلاعات بیشتر در مورد پیکربندی وظیفه، به گزینه‌های پیکربندی مراجعه کنید.

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

runningMode = "IMAGE";

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

  imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
    },
    outputCategoryMask: true,
    outputConfidenceMasks: false
    runningMode: runningMode
  });
}
createImageSegmenter();

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

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

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

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

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

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

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

اجرای وظیفه

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

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

تصویر 

const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);

ویدئو 

async function renderLoop(): void {
  const video = document.getElementById("video");
  let startTimeMs = performance.now();

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

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

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

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

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

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

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

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

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

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

مقدار دسته بندی

تصاویر زیر تجسمی از خروجی وظیفه برای یک ماسک مقدار دسته را نشان می‌دهند. محدوده ماسک دسته [0, 255] است و هر مقدار پیکسل نشان دهنده شاخص دسته برنده خروجی مدل است. شاخص دسته برنده بالاترین امتیاز را در بین دسته‌هایی که مدل می‌تواند تشخیص دهد، دارد.

دو دختر سوار بر اسب و یک دختر در کنار اسب راه می‌رودماسک تصویری که شکل دختران و اسب را از تصویر قبلی مشخص می‌کند. شکل هر سه دختر و اسب به طور دقیق ماسک شده‌اند.

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

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