Нейронную сеть обучили верстать сайты по картинке

Исследователи из FloydHub создали нейросеть-верстальщика с открытым исходным кодом.
Нейронная сеть + верстка логотипы

В мае 2017 года был представлен pix2code — инструмент, автоматически генерирующий пользовательские интерфейсы с помощью машинного обучения. На основе этого алгоритма разработчики из FloydHub решили создать собственную нейронную сеть, которая умеет верстать шаблоны сайтов с обыкновенных картинок.

Три главных шага

Работа натренированного алгоритма разделяется на три этапа:

  1. Загрузка изображения с желаемым дизайном:Иллюстрация: загрузка изображения в файл Jupiter notebook
  2. Автоматическая конвертация картинки в HTML-разметку:
  3. Выдача готового макета:Пример автоматически сгенерированного макета

Как проходит обучение?

Для достижения такого результата разработчики во время тренировки сопровождали все загружаемые в модель изображения набором соответствующих HTML-тегов. Алгоритм выявляет зависимости и учится предсказывать необходимые конструкции для разметки, последовательно анализируя поступающую информацию. На основе условных пар «картинка — набор тегов» формируется датасет, который и помогает сети в дальнейшем ориентироваться в новых входных данных.

Как показал эксперимент, для верстки простого шаблонного макета нейронной сети требуется порядка 550 итераций.

Вехи в автоматическом создании макета

В течение трех лет глубокое обучение изменит представление о фронтенд разработке. Оно увеличит скорость прототипирования и снизит входной барьер для создания программного обеспечения.

Эмиль Уолнер, создатель алгоритма-верстальщика

Подробно по всем этапам разработки самой сети можно пройтись в источнике. А если хочется опробовать новинку сразу в действии, на GitHub есть инструкция по запуску.

Источник: блог FloydHub

Ещё интересное для вас:
— Тест «Насколько хорошо вы разбираетесь в C#?»
— Блиц-тест «Настоящий ли ты фронтендер?»
— Меньше готовить, больше кодить: обзор питания с доставкой на дом.