Предобработка изображений перед подачей в модель

Загрузка и представление изображений

В библиотеке ml5.js работа с изображениями начинается с загрузки исходных данных. Изображения могут поступать из локальных файлов, HTML-элементов <img> или с веб-камеры. Для корректной работы моделей важно, чтобы изображение было приведено к формату, ожидаемому моделью. Основной объект для работы — это HTMLImageElement, HTMLVideoElement или p5.Image. Использование p5.js совместно с ml5.js позволяет упростить манипуляции с изображениями.

Пример создания объекта изображения с использованием p5.js:

let img;

function preload() {
  img = loadImage('image.jpg');
}

function setup() {
  createCanvas(400, 400);
  image(img, 0, 0, width, height);
}

В этом коде изображение загружается заранее с помощью функции preload(), что гарантирует его готовность к обработке до начала работы модели.

Масштабирование изображений

Модели машинного обучения обычно требуют фиксированного размера входного изображения. ml5.js автоматически масштабирует изображения через p5.js, но явное управление размером позволяет избежать искажений.

  • resize(width, height) — изменение размеров изображения без потери структуры.
  • Сохранение пропорций осуществляется с помощью расчета соотношения сторон:
let targetWidth = 224;
let targetHeight = 224;
img.resize(targetWidth, targetHeight);

Ключевой момент: при изменении размера изображения важно сохранять основные объекты внутри кадра, чтобы модель получала релевантные данные.

Нормализация пикселей

Многие модели ожидают входные данные в диапазоне [0,1] или [-1,1]. В ml5.js это можно сделать через tf.tensor при необходимости, хотя часто встроенные функции моделей уже выполняют нормализацию автоматически.

Пример ручной нормализации:

let imgTensor = tf.browser.fromPixels(img.canvas);
let normalized = imgTensor.div(tf.scalar(255));
  • tf.browser.fromPixels конвертирует изображение в тензор TensorFlow.
  • Деление на 255 переводит значения пикселей из диапазона 0–255 в 0–1.

Преобразование в градации серого

Иногда модели обучены на одном канале (черно-белые изображения). Преобразование цветного изображения в градации серого помогает уменьшить размер входных данных и ускорить обучение.

img.loadPixels();
for (let i = 0; i < img.pixels.length; i += 4) {
  let avg = (img.pixels[i] + img.pixels[i + 1] + img.pixels[i + 2]) / 3;
  img.pixels[i] = avg;
  img.pixels[i + 1] = avg;
  img.pixels[i + 2] = avg;
}
img.updatePixels();
  • loadPixels() и updatePixels() позволяют напрямую изменять массив пикселей изображения.
  • Среднее арифметическое RGB-компонент используется для получения оттенка серого.

Аугментация данных

Для повышения устойчивости модели к вариациям изображений используют аугментацию данных: повороты, отражения, сдвиги, шум. В ml5.js встроенной функции аугментации нет, но её легко реализовать через p5.js или Canvas API.

Примеры аугментации:

  • Поворот изображения
push();
translate(width/2, height/2);
rotate(PI/4);
image(img, -img.width/2, -img.height/2);
pop();
  • Отражение по горизонтали
push();
scale(-1, 1);
image(img, -width, 0);
pop();
  • Добавление шума
img.loadPixels();
for (let i = 0; i < img.pixels.length; i += 4) {
  img.pixels[i] += random(-10, 10);     // R
  img.pixels[i+1] += random(-10, 10);   // G
  img.pixels[i+2] += random(-10, 10);   // B
}
img.updatePixels();

Эти методы позволяют значительно увеличить разнообразие обучающих данных без необходимости сбора дополнительных изображений.

Форматирование данных для модели

После предобработки изображения нужно убедиться, что оно соответствует формату входа модели:

  • Размер: ширина × высота × количество каналов (например, 224×224×3).
  • Тип данных: Float32Array или тензор TensorFlow.
  • Диапазон значений: обычно 0–1 или -1–1.

Пример подготовки изображения к подаче в модель ml5.js с использованием imageClassifier:

const classifier = ml5.imageClassifier('MobileNet', modelReady);

function modelReady() {
  classifier.classify(img, (error, results) => {
    if (error) {
      console.error(error);
    } else {
      console.log(results);
    }
  });
}
  • Встроенный классификатор MobileNet автоматически выполнит необходимые преобразования, но при обучении своей модели все шаги предобработки нужно выполнять вручную.

Резюме ключевых этапов предобработки

  1. Загрузка изображения через HTML-элемент или p5.js.
  2. Масштабирование и кадрирование для соответствия размеру входа модели.
  3. Нормализация значений пикселей для корректной работы нейронной сети.
  4. Опциональное преобразование в градации серого при необходимости.
  5. Аугментация данных для повышения устойчивости модели.
  6. Форматирование данных в виде тензоров с правильными размерами и типом данных.

Эти этапы предобработки обеспечивают, что модель получит корректные и стандартизированные данные, что напрямую влияет на точность и стабильность работы нейросетевых решений на основе ml5.js.

Оглавление