Изменение размера изображений без потерь качества

ONNX Runtime Web (ORT Web) предоставляет высокопроизводительную платформу для выполнения моделей машинного обучения непосредственно в браузере на JavaScript. Одним из практических применений является обработка изображений, включая изменение их размера без потери качества, что критически важно для задач компьютерного зрения, генеративного моделирования и веб-приложений с высокими требованиями к визуальной точности.

Подготовка среды

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

import * as ort from 'onnxruntime-web';

Браузерная среда автоматически выбирает оптимальный движок выполнения (WebAssembly, WebGL), что позволяет использовать аппаратное ускорение при поддержке векторных операций.

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

Изменение размера изображений часто реализуется с помощью нейронных сетей, таких как Super-Resolution (SR). ONNX модели для этой задачи доступны в формате .onnx. Их загрузка выглядит следующим образом:

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

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

  • Поддержка различных движков выполнения: wasm, webgl.
  • Возможность предварительной инициализации сессии для ускорения последующих инференсов.
  • Управление параметрами памяти и потоков для оптимизации производительности.

Подготовка изображения для модели

Модель ONNX принимает входные данные в виде тензоров. Изображение необходимо конвертировать в тензор с нужными размерами и нормализацией:

function imageToTensor(imageElement, width, height) {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(imageElement, 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;
    data[i * 3 + 1] = imageData.data[i * 4 + 1] / 255.0;
    data[i * 3 + 2] = imageData.data[i * 4 + 2] / 255.0;
  }

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

Ключевые моменты:

  • Приведение пикселей к диапазону [0,1] или нормализация в соответствии с требованиями модели.
  • Использование формата [N, C, H, W] — стандарт ONNX для изображений.
  • Минимизация промежуточных копий данных для повышения производительности.

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

После подготовки входного тензора можно выполнить предсказание модели:

const inputTensor = imageToTensor(imageElement, 224, 224);
const feeds = { input: inputTensor };
const results = await session.run(feeds);
const outputTensor = results.output;

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

  • session.run возвращает объект с ключами, соответствующими выходным узлам модели.
  • Выходной тензор содержит данные в формате [1, 3, H_out, W_out], готовые к конвертации обратно в изображение.

Конвертация тензора обратно в изображение

Для отображения результата в браузере необходимо преобразовать тензор в объект ImageData:

function tensorToImageData(tensor, width, height) {
  const data = tensor.data;
  const imageData = new ImageData(width, height);
  for (let i = 0; i < width * height; i++) {
    imageData.data[i * 4 + 0] = Math.min(255, Math.max(0, data[i * 3 + 0] * 255));
    imageData.data[i * 4 + 1] = Math.min(255, Math.max(0, data[i * 3 + 1] * 255));
    imageData.data[i * 4 + 2] = Math.min(255, Math.max(0, data[i * 3 + 2] * 255));
    imageData.data[i * 4 + 3] = 255;
  }
  return imageData;
}

Советы:

  • Применение функции Math.min и Math.max предотвращает артефакты переполнения.
  • Для высококачественного вывода рекомендуется использовать canvas с масштабированием imageSmoothingEnabled = true.

Оптимизация производительности

  1. Использование WebGL движка: обеспечивает аппаратное ускорение, особенно для больших изображений.
  2. Батчинг: обработка нескольких изображений одновременно уменьшает накладные расходы на вызовы модели.
  3. Предварительная загрузка модели: уменьшает задержку при первом инференсе.
  4. Пул тензоров: повторное использование выделенной памяти для входных и выходных тензоров снижает нагрузку на сборщик мусора.

Поддержка различных форматов изображений

Модели ONNX часто требуют строго определённых каналов (RGB, BGR) и порядка данных. Для универсальности:

  • Использовать конвертацию между RGBA и RGB.
  • Проверять требования конкретной модели по нормализации.
  • Применять функции ресайза с сохранением пропорций, чтобы минимизировать искажения.

Применение масштабирования без потерь качества

  • Суперрезолюция: модели SRGAN, EDSR или FSRCNN способны увеличивать изображение в 2–4 раза без заметного размытия.
  • Интерполяция с сохранением деталей: сочетание алгоритмов модели и canvas API позволяет минимизировать потерю текстур.
  • Многоступенчатое масштабирование: увеличение в несколько этапов улучшает визуальное качество по сравнению с одномоментным масштабированием.

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

Оглавление