Нейронная сеть, которая верстает сайты по картинке Статьи редакции

Прошёл почти год с того момента, как на GitHub опубликовали алгоритм pix2code. И вот ребята из FloydHub на его основе создали нейронную сеть для вёрстки страниц, которую уже можно запустить самому.

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

1. Нейронной сети передаётся картинка-исходник в формате JPEG
2. Алгоритм конвертирует элементы в HTML- и CSS-код
3. На выходе получается свёрстанная версия

Чтобы получить такой результат, разработчики скармливали алгоритму скриншоты и присваивали определённые HTML-теги, в итоге получился датасет, с помощью которого можно генерировать шаблонные сайты. Ниже будут примеры.

Пример датасета

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

Примеры:

  • 250 циклов работы алгоритма;
  • 350 циклов работы алгоритма;
  • 450 циклов работы алгоритма;
  • 550 циклов работы алгоритма.

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

Если вы вдруг фронтенд-инженер (я нет), поделитесь в комментариях: как вам код, сгенерированный алгоритмом?

Более техническое описание проекта доступно по ссылке, а ноутбук для запуска в Jupyter лежит тут.

0
192 комментария
Написать комментарий...
Евгений Курилов

Пиздец верстальщикам.

Ответить
Развернуть ветку
Denis Shiryaev
Автор

Пока в скетч не добавят кнопку "Сверстать под все платформы и залить на FTP" я думаю нет, но вопрос времени конечно же, пара лет еще и простенький лендинг можно будет самому нафигачить

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Denis Shiryaev
Автор

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

Ответить
Развернуть ветку
Artem Korsunov

Прямо из скриншота уже никому не нужно, всё собирается из шаблонов. Дизайнерам тоже скоро такой же конец, как и верстальщикам

Ответить
Развернуть ветку
Сергей Артеменко

а шаблоны кто рисовать будет)

Ответить
Развернуть ветку
color

Шаблоны имеется ввиду какой нибудь дефолтный material design, его уже рисовать не надо. Дизайнеры будут рисовать в итоге концепты и пример UI, дальше все роботы на основе как раз шаблонов будут строить, а люди дописывать скрипты.

Ответить
Развернуть ветку
Сергей Артеменко

Ни один робот не разберет че от него хочет маркетолог с гуманитарным образованием) и от бесконечных правок сюжет матрицы наступит очень скоро))

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Saveliy Dzvonkevych

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

Ответить
Развернуть ветку
Ицтерские Данелянды

Скорее будет так. Маркетолог будет работать с веб-дизайнером, задача которого будет грамотно расположить блоки в фотошопе. Уже дальше макет или верстка отдаётся фронтендеру на добавление интерактива. Если его нет, то сразу программистам.

Ответить
Развернуть ветку
Станислав Куликов

Так во всех конструкторах уже давно так. В том же самом Виксе, например.

Ответить
Развернуть ветку
Саша Грибоедов

с ума сойдешь на виксе делать сайт, а потом его обслуживать

Ответить
Развернуть ветку
Роман Романов

Я работаю над подобным : )

Ответить
Развернуть ветку
189 комментариев
Раскрывать всегда