ИИ-арт в браузере: стилизация картинки с помощью p5.js и ml5.js

В этой статье я покажу простой пример того, как использовать p5.js совместно с ml5.js для творческих экспериментов с искусственным интеллектом. Мы возьмём обычное изображение (фото птицы) и применим к нему алгоритм переноса стиля (Style Transfer) с помощью заранее обученной модели «Udnie». Благодаря этому к исходному фото будет добавлен уникальный художественный стиль. Если вы хотите быстро погрузиться в мир творческого ИИ, но не знаете, с чего начать, то эта статья для вас.

Ниже мы разберём структуру проекта, какие файлы понадобятся, как подключить модель, а также подробно рассмотрим код, который запускает весь процесс переноса стиля. Вы убедитесь, что освоить базовые инструменты искусственного интеллекта в JavaScript совсем несложно и может здорово расширить ваши творческие возможности.

Структура проекта

Чтобы вы понимали, как всё устроено, давайте взглянем на базовую структуру файлов:

  
    .
    ├── index.html     // Главный HTML-файл
    ├── script.js      // Основной JavaScript-код (p5 + ml5)
    └── bird.jpg       // Изображение, к которому будем применять стиль
  

Исходный код: https://github.com/huckfinndev/ai-art-p5-ml5

1. index.html – содержит минимальную HTML-разметку. Подключаем в нём:

• p5.js (через CDN)
• ml5.js (через CDN)
• Наш основной код из script.js.

2. script.js – здесь написана логика p5.js (функции setup(), draw() preload()), а также вызов методов ml5.js для загрузки и применения стиля.

bird.jpg – исходное изображение, которое мы стилизуем. Вы можете использовать любое другое изображение по своему выбору

Пошаговый разбор кода

Ниже я приведу ключевые моменты из script.js (и немного из index.html), чтобы разобрать, что именно происходит.

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

  
    <script src="https://cdn.jsdelivr.net/npm/p5@1.4.2/lib/p5.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/ml5@0.12.2/dist/ml5.min.js" defer></script>    
  

• p5.js — это библиотека, упрощающая работу с графикой на JavaScript. Она создаёт «холст», на котором мы рисуем и отображаем изображения.
• ml5.js — это высокоуровневая JS-библиотека для работы с машинным обучением в браузере. Она предоставляет удобные методы для использования предобученных моделей (в нашем случае — алгоритм Style Transfer).

2. Создание наброска с помощью p5.js

  
    function sketch(p) {
      let styleTransfer;
      let birdImage;
      let resultImg;
      let isTransferring = false;
  
      p.preload = function () {
          birdImage = p.loadImage('bird.jpg');
      };
  
      p.setup = function () {
          let canvas = p.createCanvas(320, 240);
          canvas.parent("p5-container");
  
          // Создаём элемент , в который поместим результат стилизации
          resultImg = p.createImg("", "Стилизованное изображение");
          resultImg.size(p.width, p.height);
          resultImg.parent("p5-container");
  
          // Загружаем модель Style Transfer
          const modelPath = 'https://cdn.jsdelivr.net/gh/ml5js/ml5-data-and-models@main/models/style-transfer/udnie/';
          styleTransfer = ml5.styleTransfer(modelPath, modelLoaded, modelError);
      };
      
      ...
  }
  

• Функция sketch(p) описывает наши функции preload(), setup(), draw() и т. д. — так работает «экземплярный» метод создания скетчей в p5.js.
• В preload() мы загружаем наше исходное изображение bird.jpg.
• В setup() создаём холст 320×240 пикселей и элемент img, куда будем выводить итог стилизованной картинки.
• modelPath указывает на модель «Udnie», которая лежит в репозитории ml5-data-and-models. Мы берём её напрямую с CDN.

Важно: Если вы хотите использовать модель локально (без подключения CDN), вы можете скачать её с GitHub и положить к себе в проект, а затем указать соответствующий локальный путь вместо ссылки на CDN.

Папка с моделями: https://github.com/ml5js/ml5-data-and-models/tree/main/models/style-transfer

Замените этот код

  
    const modelPath = 'https://cdn.jsdelivr.net/gh/ml5js/ml5-data-and-models@main/models/style-transfer/udnie/';
    styleTransfer = ml5.styleTransfer(modelPath, modelLoaded, modelError);
  

На этот

  
    styleTransfer = ml5.styleTransfer('/models/style-transfer/udnie/', modelLoaded, modelError);
  

3. Загрузка и инициализация модели

  
    function modelLoaded() {
      console.log("Модель успешно загружена!");
      // Спустя 2 секунды запускаем перенос стиля
      setTimeout(() => {
          if (!isTransferring) {
              transferStyle();
          }
      }, 2000);
    }
    
    function modelError(err) {
        console.error("Ошибка при загрузке модели:", err);
    }
  

• modelLoaded() вызывается автоматически, когда модель Style Transfer полностью загружена.
• Небольшая задержка (2 секунды), прежде чем вызывать функцию transferStyle(). Это не обязательно, но даёт время удостовериться, что всё готово к работе.

4. Отрисовка исходного изображения и перенос стиля

  
    p.draw = function () {
      if (birdImage) {
          p.image(birdImage, 0, 0, p.width, p.height);
      }
    };
  
    function transferStyle() {
        if (!styleTransfer) {
            console.error("Ошибка: модель ещё не загружена.");
            return;
        }
        isTransferring = true;
    
        styleTransfer.transfer(p.canvas, function (err, result) {
            if (err) {
                console.error("Ошибка при обработке изображения:", err);
                isTransferring = false;
                return;
            }
            console.log("Перенос стиля завершён!");
            resultImg.attribute("src", result.src);
            isTransferring = false;
        });
    }
  

• p.draw() вызывается p5.js на каждом кадре анимации (здесь мы просто рисуем birdImage на холст).
• transferStyle() — это основной метод, который и делает всю «магию» переноса стиля. Он берёт текущее состояние холста (где нарисована птица) и подаёт его в модель Style Transfer.
• После успешного выполнения стилизации результат (result.src) автоматически превращается в base64-изображение, которым мы обновляем src у resultImg.

Как запустить проект локально

1. Склонируйте или скачайте файлы проекта. У вас должны быть:

• index.html
• script.js
• bird.jpg

2. Запустите локальный сервер. Просто открыть index.html двойным щелчком мыши не подойдёт, так как большинство браузеров блокируют обращения к файлам из локальной системы. Есть несколько способов:

Установить Node.js и использовать пакет http-server:

  
    npm install -g http-server
    http-server .    
  

Или, если у вас установлен Python 3, в терминале набрать:

  
    python -m http.server  
  

Затем перейдите в браузере по адресу http://localhost:8080 или http://localhost:8000 (в зависимости от выбранного способа) — и вы увидите вашу страницу.

3. Убедитесь, что все файлы лежат в одной директории и пути в коде совпадают с тем, что у вас реально есть (например, bird.jpg находится рядом с index.html).

Если всё сделано правильно, вы увидите страницу с исходным изображением и через пару секунд — стилизованную версию этого изображения.

Заключение

Таким образом, с помощью пары небольших библиотек (p5.js и ml5.js) и готовой предобученной модели «Udnie» мы можем быстро погрузиться в мир творческого искусственного интеллекта. Весь процесс сводится к загрузке изображения и вызову метода transfer(). Вы можете пойти дальше и поэкспериментировать с другими стилями, либо интегрировать стиль трансфер в более сложные проекты (например, генерировать собственные изображения и тут же менять им стили).

Если вам интересна тема Style Transfer подробнее, загляните в репозиторий ml5.js, где есть другие предобученные модели. А также не забывайте изучать документацию p5.js — её инструменты отлично подходят для визуальных экспериментов.

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