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

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

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

Для работы с SketchRNN необходимо подключить библиотеку ml5.js через <script>:

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

После этого в коде JavaScript становится доступен объект ml5, через который создаются и управляются модели.

Создание экземпляра SketchRNN

Основной класс для работы — ml5.sketchRNN. Он принимает два параметра: имя модели или URL к предобученной модели и функцию обратного вызова, которая вызывается после загрузки.

let sketchRNN;

function setup() {
  // Загрузка модели "cat"
  sketchRNN = ml5.sketchRNN('cat', modelLoaded);
}

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

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

Поддерживаемые модели

ml5.js предоставляет ряд предобученных моделей SketchRNN, ориентированных на разные категории рисунков:

  • cat — кошки
  • dog — собаки
  • bird — птицы
  • chair — стулья
  • face — лица
  • car — автомобили

Каждая модель оптимизирована для генерации определённого типа эскизов и имеет свой словарь штрихов.

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

SketchRNN оперирует последовательностями штрихов, а не пикселями. Каждое движение пера описывается массивом [Δx, Δy, penDown, penUp, penEnd]. После загрузки модели можно создавать новый рисунок следующим образом:

let currentStroke = null;

function startDrawing() {
  sketchRNN.reset(); // Сброс состояния модели
  sketchRNN.generate((err, stroke) => {
    currentStroke = stroke;
    drawStroke(stroke);
  });
}

function drawStroke(stroke) {
  // stroke содержит dx, dy и состояния пера
  line(stroke.dx, stroke.dy, stroke.dx, stroke.dy); 
  if (!stroke.penEnd) {
    sketchRNN.generate(drawStroke);
  }
}

Важное свойство: sketchRNN.reset() очищает внутреннее состояние LSTM, что позволяет начинать генерацию с чистого листа.

Автодополнение эскиза

SketchRNN может дополнять существующие рисунки. Для этого последовательность штрихов передаётся в метод generate как входные данные.

let existingStrokes = [
  {dx: 0, dy: 0, penDown: true, penUp: false, penEnd: false},
  {dx: 10, dy: 5, penDown: true, penUp: false, penEnd: false},
];

sketchRNN.generate(existingStrokes, (err, newStroke) => {
  drawStroke(newStroke);
});

Модель продолжает рисунок, подстраиваясь под стиль уже нанесённых штрихов.

Управление стилем и случайностью

Метод generate поддерживает параметр temperature, который влияет на разнообразие создаваемых штрихов:

  • temperature = 0.1 — очень предсказуемые штрихи
  • temperature = 0.5 — умеренная вариативность
  • temperature = 1.0 — высокая случайность
sketchRNN.generate({temperature: 0.5}, (err, stroke) => {
  drawStroke(stroke);
});

Чем выше температура, тем менее повторяющейся и более творческой становится генерация.

Отслеживание состояния модели

SketchRNN использует LSTM для генерации последовательностей, поэтому можно управлять и наблюдать за внутренними состояниями модели:

  • sketchRNN.state — текущие скрытые состояния сети
  • sketchRNN.reset() — сброс состояния
  • sketchRNN.generate() — генерация следующего штриха

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

Использование пользовательских моделей

Помимо предобученных моделей, ml5.js позволяет загружать собственные модели SketchRNN:

sketchRNN = ml5.sketchRNN('path/to/custom/model.json', modelLoaded);

Формат модели должен соответствовать стандарту SketchRNN (JSON с LSTM-параметрами и словарём штрихов). После загрузки пользовательская модель работает точно так же, как встроенные модели.

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

  • Всегда использовать функцию обратного вызова modelLoaded для предотвращения ошибок при попытке генерации до окончания загрузки.
  • Для плавной анимации лучше генерировать штрихи по одному и визуализировать их постепенно.
  • Эксперименты с параметром temperature позволяют создавать уникальные стили рисунков.
  • Сброс состояния модели между разными рисунками предотвращает смешение стилей.

Эта структура работы с SketchRNN в ml5.js обеспечивает гибкость и удобство как для генерации новых рисунков, так и для создания интерактивных художественных приложений в браузере.

Оглавление