Загрузка модели стиля и изображения контента

ml5.js представляет собой высокоуровневую библиотеку для работы с машинным обучением в JavaScript, построенную поверх TensorFlow.js. Одной из ключевых возможностей является стилевое перенесение (style transfer), позволяющее применять художественный стиль одной картинки к содержимому другой. Для выполнения такой задачи необходимо корректно загрузить модель стиля и изображение контента.

Подключение библиотеки

Для работы с ml5.js требуется подключение скрипта в HTML-документе:

<script src="https://cdn.jsdelivr.net/npm/ml5@latest/dist/ml5.min.js"></script>

Это обеспечивает доступ ко всем функциям библиотеки, включая ml5.styleTransfer.

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

Модель стиля — это предобученная нейронная сеть, которая содержит параметры для переноса визуального стиля на изображение. ml5.js позволяет использовать как локальные модели, так и модели, размещённые в сети. Для загрузки используется следующий подход:

let styleModel;

function preload() {
  // Путь к модели может быть локальным или URL
  styleModel = ml5.styleTransfer('models/starry-night/', modelLoaded);
}

function modelLoaded() {
  console.log('Модель стиля успешно загружена');
}

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

  • ml5.styleTransfer принимает путь к директории модели, где находятся файлы model.json и веса нейросети.
  • Асинхронная загрузка: модель не готова к использованию до вызова функции обратного вызова modelLoaded.
  • Поддерживаются несколько предобученных моделей, например starry-night, mosaic и другие, что позволяет экспериментировать с различными визуальными эффектами.

Загрузка изображения контента

Изображение контента — это основное изображение, на которое будет наложен стиль. В ml5.js изображение может быть:

  • Элементом HTML <img>
  • Элементом <canvas>
  • Видеопотоком <video>

Пример загрузки изображения:

let contentImage;

function preload() {
  contentImage = loadImage('images/content.jpg');
}

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

Применение модели к изображению

После загрузки модели и изображения, можно выполнить перенос стиля. Основной метод — styleModel.transfer, который принимает изображение и функцию обратного вызова:

function applyStyle() {
  styleModel.transfer(contentImage, function(err, result) {
    if (err) {
      console.error(err);
      return;
    }
    // Результат в формате изображения
    image(result.src, 0, 0, width, height);
  });
}

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

  • result.src возвращает данные изображения в виде URL.
  • Можно использовать createImg(result.src) для динамического создания элемента <img> с применённым стилем.
  • Процесс переноса стиля может занимать несколько секунд в зависимости от размера изображения и мощности устройства.

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

  • Размер изображения напрямую влияет на скорость: уменьшение исходного изображения ускоряет обработку.
  • Для динамического контента (видео) рекомендуется предварительно масштабировать кадры.
  • Для работы в браузере следует использовать асинхронные вызовы и избегать блокирующих операций, чтобы интерфейс оставался отзывчивым.

Интеграция с p5.js

ml5.js тесно интегрируется с p5.js, что позволяет легко комбинировать графические элементы с переносом стиля:

function setup() {
  createCanvas(640, 480);
  contentImage = loadImage('images/content.jpg', () => {
    styleModel = ml5.styleTransfer('models/mosaic/', () => {
      styleModel.transfer(contentImage, (err, result) => {
        image(result.src, 0, 0);
      });
    });
  });
}

Такой подход гарантирует, что загрузка модели и изображения выполнена последовательно, предотвращая ошибки при попытке использовать ещё не готовый объект.

Преимущества использования ml5.js для стилевого переноса

  • Высокий уровень абстракции: минимальный код для запуска сложных моделей.
  • Поддержка широкого спектра форматов изображений и видео.
  • Простая интеграция с веб-технологиями и p5.js для визуализации.
  • Возможность использовать собственные модели, экспортированные из TensorFlow.js.

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

Оглавление