راهنمای جاسازی تصویر برای وب

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

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

مثال کد

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

راه‌اندازی

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

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

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

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

npm install @mediapipe/tasks-vision

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

<!-- You can replace jsDelivr with your preferred CDN -->
<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/

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

مسیر مدل را مشخص کنید

شما می‌توانید با استفاده از متد createFromModelPath() یک وظیفه (task) با گزینه‌های پیش‌فرض ایجاد کنید:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
  const imageEmbedder = await ImageEmbedder.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_embedder/mobilenet_v3_small/float32/1/mobilenet_v3_small.tflite`
    },
  });

بافر مدل را مشخص کنید

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

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = ImageEmbedder.createFromModelBuffer(
    vision, 
    new Uint8Array(...)
);

گزینه‌های سفارشی را مشخص کنید

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

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

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = await ImageEmbedder.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "model.tflite"
      },
      quantize: true
    });

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

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

نام گزینه توضیحات محدوده ارزش مقدار پیش‌فرض
running_mode حالت اجرا را برای وظیفه تنظیم می‌کند. دو حالت وجود دارد:

تصویر: حالت ورودی‌های تک تصویر.

ویدئو: حالتی برای فریم‌های رمزگشایی‌شده‌ی یک ویدئو یا روی پخش زنده‌ی داده‌های ورودی، مثلاً از یک دوربین.		 { IMAGE, VIDEO } IMAGE
l2Normalize اینکه آیا بردار ویژگی برگشتی با نرم L2 نرمال‌سازی شود یا خیر. فقط در صورتی از این گزینه استفاده کنید که مدل از قبل شامل L2_NORMALIZATION TFLite Op بومی نباشد. در بیشتر موارد، این مورد از قبل وجود دارد و نرمال‌سازی L2 از طریق استنتاج TFLite و بدون نیاز به این گزینه انجام می‌شود. Boolean False
quantize اینکه آیا جاسازی برگشتی باید از طریق کوانتیزاسیون اسکالر به بایت‌ها کوانتیزه شود یا خیر. جاسازی‌ها به طور ضمنی به عنوان هنجار واحد فرض می‌شوند و بنابراین تضمین می‌شود که هر بُعد مقداری در [-1.0, 1.0] داشته باشد. اگر اینگونه نیست، از گزینه l2Normalize استفاده کنید. Boolean False

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

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

فراخوانی متدهای embed() و embedForVideo() در Image Embedder به صورت همزمان اجرا می‌شوند و نخ رابط کاربری را مسدود می‌کنند. اگر می‌خواهید بردارهای ویژگی را از فریم‌های ویدیویی استخراج کنید، هر جاسازی، نخ اصلی را مسدود می‌کند. می‌توانید با پیاده‌سازی web workerها برای اجرای متدهای embed() و embedForVideo() در نخ دیگر، از این امر جلوگیری کنید.

اجرای وظیفه

ابزار جاسازی تصویر از متدهای embed() (با حالت اجرای image ) و embedForVideo() (با حالت اجرای video ) برای ایجاد استنتاج استفاده می‌کند. API مربوط به جاسازی تصویر، بردارهای جاسازی را برای تصویر ورودی برمی‌گرداند.

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

تصویر 

const image = document.getElementById("image") as HTMLImageElement;
const imageEmbedderResult = imageEmbedder.embed(image);

ویدئو 

  const video = document.getElementById("webcam");

  const startTimeMs = performance.now();
  const embedderResult = await imageEmbedder.embedForVideo(video, startTimeMs);

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

پس از اجرای استنتاج، وظیفه‌ی Image Embedder یک شیء ImageEmbedderResult را برمی‌گرداند که شامل بردارهای جاسازی برای تصویر یا فریم ورودی است.

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

ImageEmbedderResult:
  Embedding #0 (sole embedding head):
    float_embedding: {0.0, 0.0, ..., 0.0, 1.0, 0.0, 0.0, 2.0}
    head_index: 0

این نتیجه با قرار دادن تصویر زیر به دست آمده است:

عکس متوسط ​​از یک گربه عجیب و غریب

شما می‌توانید شباهت معنایی دو جاسازی را با استفاده از تابع ImageEmbedder.cosineSimilarity مقایسه کنید. برای مثال به کد زیر مراجعه کنید. 

// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
  imageEmbedderResult.embeddings[0],
  otherEmbedderResult.embeddings[0]);

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