SketchRNN: генерация векторных рисунков

SketchRNN — это модель машинного обучения для генерации и дополнения векторных рисунков, разработанная командой Magenta на базе TensorFlow и интегрированная в библиотеку ml5.js. В отличие от растровой графики, векторные изображения описываются серией команд для рисования линий, что позволяет модели создавать гладкие, масштабируемые рисунки.

Основные концепции

Векторное представление рисунка SketchRNN работает с последовательностями штрихов, где каждый штрих задается в виде вектора (Δx, Δy, p1, p2, p3):

  • Δx и Δy — смещение по осям от предыдущей точки.
  • p1 — флаг продолжения линии.
  • p2 — флаг конца текущего штриха.
  • p3 — флаг окончания рисунка.

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

Рекуррентные нейронные сети (RNN) Модель построена на основе LSTM (Long Short-Term Memory), что позволяет ей учитывать контекст предыдущих штрихов при генерации следующих. Это ключевой элемент для сохранения формы и структуры рисунка на протяжении всей последовательности.

Инициализация SketchRNN в ml5.js

Для работы с моделью SketchRNN необходимо загрузить предварительно обученную модель. В ml5.js это выполняется с помощью:

let model;
model = ml5.sketchRNN('cat', modelReady);

function modelReady() {
  console.log('Модель загружена и готова к генерации рисунков');
}
  • 'cat' — название набора данных модели. Ml5.js предоставляет модели для различных категорий, включая животных, предметы и транспорт.
  • modelReady — функция обратного вызова, которая вызывается после успешной загрузки модели.

Генерация рисунка

Процесс генерации происходит по шагам. Для каждого шага модель предсказывает следующий штрих на основе текущего состояния рисунка. Основные методы:

1. Начало нового рисунка

model.reset();
let start = model.generate(); // возвращает первый штрих

Метод reset() очищает внутреннее состояние модели, позволяя начинать рисунок с нуля.

2. Генерация следующего штриха

let nextStroke = model.generate(currentStroke);
  • currentStroke — текущий штрих, используемый как вход модели.
  • Возвращаемый объект содержит координаты и флаги для рисования на холсте.

3. Проверка завершения рисунка

Каждый штрих содержит флаг p3. Когда p3 = 1, модель завершила рисунок, и дальнейшая генерация не требуется.

Интеграция с HTML5 Canvas

Для визуализации векторных рисунков обычно используется Canvas. Пример:

let x = width / 2;
let y = height / 2;

function drawStroke(stroke) {
  strokeWeight(2);
  stroke(0);
  line(x, y, x + stroke.dx, y + stroke.dy);
  x += stroke.dx;
  y += stroke.dy;
}

Где stroke.dx и stroke.dy — смещения, а функция line() рисует линию на холсте. Последовательный вызов этой функции по мере генерации штрихов формирует полный рисунок.

Дообучение модели (fine-tuning)

SketchRNN позволяет адаптировать предварительно обученные модели под новые стили или наборы данных. Основные шаги:

  1. Подготовка набора векторных рисунков в формате .ndjson, где каждая запись описывает последовательность штрихов.
  2. Использование функции обучения модели через TensorFlow.js или Magenta Studio для генерации нового веса модели.
  3. Загрузка дообученной модели в ml5.js:
model = ml5.sketchRNN('path/to/custom/model', modelReady);

Это позволяет создавать уникальные генеративные модели под конкретные задачи.

Комбинация SketchRNN с интерактивными элементами

Модель хорошо сочетается с интерактивными приложениями, например:

  • Дополнение рисунка пользователя: пользователь рисует несколько штрихов, а SketchRNN автоматически завершает рисунок в стиле выбранной модели.
  • Генерация анимации: последовательная генерация штрихов позволяет создавать плавные анимации, где рисунок постепенно формируется на экране.
  • Стилизация и случайные вариации: изменяя начальное состояние генерации или используя случайные семена (seed), можно получать разнообразные вариации одного объекта.

Практические советы

  • Размер холста и масштабирование: модели обучены на определённом диапазоне координат (обычно [-128, 128]). Необходимо корректировать масштаб для отображения на Canvas.
  • Контроль случайности: метод model.generate(currentStroke, temperature) позволяет управлять «творческим потенциалом» модели. Значение temperature в диапазоне 0.1–1.0 влияет на вариативность штрихов.
  • Оптимизация производительности: генерация больших рисунков шаг за шагом может быть ресурсоёмкой; рекомендуется использовать requestAnimationFrame для плавной отрисовки на веб-странице.

Примеры доступных моделей в ml5.js

  • Животные: 'cat', 'dog', 'bird'
  • Предметы: 'bus', 'car', 'chair'
  • Разное: 'flower', 'house', 'face'

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

Оглавление