Интерактивная дорисовка пользовательских набросков

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

Подключение ml5.js и подготовка среды

Для работы с ml5.js достаточно подключить библиотеку через CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ml5/0.12.2/ml5.min.js"></script>

Модель SketchRNN требует графического холста, который удобно создавать с помощью p5.js. Основные функции p5.js — setup() для инициализации холста и draw() для отрисовки — обеспечивают интерактивное взаимодействие.

let model;
let userPath = [];
let isDrawing = false;

function setup() {
    createCanvas(800, 600);
    background(255);
    model = ml5.sketchRNN('cat', modelReady);  // загружается модель «cat»
}

function modelReady() {
    console.log("Модель готова к использованию");
}

Сбор пользовательских набросков

Набросок пользователя собирается в массив точек userPath, где каждая точка представлена объектом {x, y}. Для интерактивного ввода используется событие мыши:

function mousePressed() {
    isDrawing = true;
    userPath = [];
}

function mouseDragged() {
    if (isDrawing) {
        userPath.push({x: mouseX, y: mouseY});
        stroke(0);
        strokeWeight(3);
        noFill();
        if (userPath.length > 1) {
            line(userPath[userPath.length-2].x, userPath[userPath.length-2].y,
                 userPath[userPath.length-1].x, userPath[userPath.length-1].y);
        }
    }
}

function mouseReleased() {
    isDrawing = false;
    model.generate(userPath, gotSketch);
}

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

После завершения пользовательского наброска используется метод model.generate(). Он принимает массив точек и функцию обратного вызова:

function gotSketch(err, sketch) {
    if (err) {
        console.error(err);
        return;
    }
    drawGeneratedSketch(sketch);
}

SketchRNN возвращает объект с массивом действий (sketch.drawing), где каждое действие представляет собой смещение по осям dx, dy и команду пера (pen_down, pen_up, stop). Реализация дорисовки:

function drawGeneratedSketch(sketch) {
    let x = userPath[userPath.length - 1].x;
    let y = userPath[userPath.length - 1].y;

    stroke(255, 0, 0);
    strokeWeight(2);

    for (let i = 0; i < sketch.drawing.length; i++) {
        let step = sketch.drawing[i];
        if (step.pen === 'down') {
            line(x, y, x + step.dx, y + step.dy);
        }
        x += step.dx;
        y += step.dy;
        if (step.pen === 'stop') break;
    }
}

Настройка поведения модели

SketchRNN позволяет регулировать креативность генерации с помощью параметра temperature. Чем выше значение, тем менее предсказуемо и более художественно будет дополнение:

model.temperature = 0.5;  // умеренная креативность

Можно также изменить выбранную модель, чтобы получать различные типы объектов, например: 'cat', 'flower', 'face', 'pig', 'airplane'.

Визуальные улучшения

Для удобства можно добавлять слои визуализации:

  • Отображение следа руки пользователя другим цветом.
  • Постепенная анимация дорисовки, используя setTimeout или requestAnimationFrame, чтобы показывать каждую точку по шагам.
  • Прозрачность и смешивание цветов, чтобы отделять начальный набросок от генеративной части.
function animateSketch(sketch, x, y) {
    let i = 0;
    function step() {
        if (i >= sketch.drawing.length) return;
        let s = sketch.drawing[i];
        if (s.pen === 'down') {
            stroke(255, 0, 0, 150);
            line(x, y, x + s.dx, y + s.dy);
        }
        x += s.dx;
        y += s.dy;
        i++;
        requestAnimationFrame(step);
    }
    step();
}

Интерактивные возможности

Можно интегрировать ml5.js с кнопками и интерфейсными элементами для управления:

  • Очистка холста.
  • Смена модели на лету.
  • Регулировка температуры генерации.
  • Сохранение финального изображения через saveCanvas().

Особенности работы

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

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

Оглавление