Цветовые пространства: RGB, BGR, Grayscale, YCbCr

ONNX Runtime Web (ORT Web) представляет собой высокопроизводительную библиотеку для выполнения моделей, экспортированных в формате ONNX, прямо в браузере или в Node.js. Она обеспечивает совместимость с различными типами устройств и поддерживает аппаратное ускорение через WebAssembly (WASM) и WebGPU. Работа с ORT Web строится на загрузке модели, подготовке входных данных, выполнении инференса и обработке выходных результатов.

Установка и подключение

Для использования ONNX Runtime Web в браузере можно подключить библиотеку через CDN:

<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script>

В Node.js установка выполняется через npm:

npm install onnxruntime-web

Подключение в коде Node.js выглядит следующим образом:

const ort = require('onnxruntime-web');

Загрузка модели

Модель в формате ONNX загружается с помощью класса InferenceSession. Важно учитывать, что загрузка и компиляция модели могут занять время, поэтому используется асинхронный метод:

const session = await ort.InferenceSession.create('model.onnx');

При этом можно указывать предпочитаемый тип исполнения:

const session = await ort.InferenceSession.create('model.onnx', {
  executionProviders: ['wasm'], // или 'webgl', 'webgpu'
});

Подготовка входных данных

Входные данные модели должны быть представлены в виде OrtTensor. В JavaScript это обычно массивы Float32Array, Int32Array или другие типизированные массивы.

const inputTensor = new ort.Tensor('float32', inputData, [1, 3, 224, 224]);

Где [1, 3, 224, 224] — это форма тензора в формате [batch, channels, height, width].

Цветовые пространства

Для обработки изображений важно правильно конвертировать их в цветовое пространство, соответствующее модели. Наиболее распространенные форматы:

RGB

Особенности:

  • Каждому пикселю соответствует три канала: красный (R), зелёный (G) и синий (B).
  • Значения обычно нормализуются в диапазон [0, 1] или [0, 255].
  • Большинство современных моделей обучены на RGB-изображениях.

Преобразование изображения:

function imageToRGBTensor(image) {
  const [width, height] = [image.width, image.height];
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0, width, height);
  const imageData = ctx.getImageData(0, 0, width, height);
  const data = new Float32Array(width * height * 3);

  for (let i = 0; i < width * height; i++) {
    data[i * 3 + 0] = imageData.data[i * 4 + 0] / 255.0; // R
    data[i * 3 + 1] = imageData.data[i * 4 + 1] / 255.0; // G
    data[i * 3 + 2] = imageData.data[i * 4 + 2] / 255.0; // B
  }

  return new ort.Tensor('float32', data, [1, 3, height, width]);
}

BGR

Особенности:

  • Аналогично RGB, но порядок каналов обратный: синий (B), зелёный (G), красный (R).
  • Часто используется в моделях, конвертированных из OpenCV.

Конвертация RGB → BGR:

for (let i = 0; i < width * height; i++) {
  const tmp = data[i * 3 + 0];
  data[i * 3 + 0] = data[i * 3 + 2]; // B
  data[i * 3 + 2] = tmp;             // R
}

Grayscale

Особенности:

  • Одноканальное изображение, где каждый пиксель содержит только яркость.
  • Применяется в задачах распознавания, где цвет не имеет значения.

Преобразование RGB → Grayscale:

for (let i = 0; i < width * height; i++) {
  const r = data[i * 3 + 0];
  const g = data[i * 3 + 1];
  const b = data[i * 3 + 2];
  data[i] = 0.299 * r + 0.587 * g + 0.114 * b;
}

Тензор для модели будет иметь форму [1, 1, height, width].

YCbCr

Особенности:

  • Разделяет яркость (Y) и цветность (Cb, Cr).
  • Используется в видеообработке и JPEG-компрессии.
  • Y-канал важен для восприятия структуры, Cb и Cr для цвета.

Конвертация RGB → YCbCr:

for (let i = 0; i < width * height; i++) {
  const r = data[i * 3 + 0];
  const g = data[i * 3 + 1];
  const b = data[i * 3 + 2];
  
  const y  = 0.299 * r + 0.587 * g + 0.114 * b;
  const cb = -0.168736 * r - 0.331264 * g + 0.5 * b + 0.5;
  const cr = 0.5 * r - 0.418688 * g - 0.081312 * b + 0.5;

  data[i * 3 + 0] = y;
  data[i * 3 + 1] = cb;
  data[i * 3 + 2] = cr;
}

Выполнение инференса

После подготовки входного тензора выполняется инференс:

const feeds = { input: inputTensor };
const results = await session.run(feeds);

Результаты могут быть извлечены по имени выходного узла:

const output = results.output.data;

Оптимизация и ускорение

  • WebAssembly (WASM): обеспечивает кроссплатформенность, подходит для CPU-инференса.
  • WebGL / WebGPU: используют GPU браузера, ускоряя обработку больших тензоров и моделей с высокой вычислительной нагрузкой.
  • Пакетная обработка: выполнение нескольких изображений за один проход уменьшает накладные расходы.

Особенности работы с браузером

  • В браузере ограничения безопасности (CORS) могут потребовать загрузку модели с того же домена или использование прокси.
  • Canvas API и ImageData позволяют быстро извлекать данные пикселей.
  • Для больших моделей рекомендуется использовать потоковую загрузку или IndexedDB для кэширования.

Практические рекомендации по цветовому пространству

  • Подбирать цветовое пространство согласно обученной модели: RGB — стандарт, BGR — для моделей OpenCV, Grayscale — для задач распознавания текста или структур, YCbCr — для видеоанализа.
  • Нормализация и масштабирование каналов критичны: несоответствие диапазона входных данных снижает точность.
  • Проверка формы тензора: [batch, channels, height, width] или [batch, height, width, channels] в зависимости от модели.

Использование ONNX Runtime Web совместно с правильным выбором цветового пространства позволяет эффективно интегрировать сложные нейронные модели в веб-приложения, обеспечивая высокую производительность и точность инференса.

Оглавление