{"id":14274,"url":"\/distributions\/14274\/click?bit=1&hash=fadd1ae2f2e07e0dfe00a9cff0f1f56eecf48fb8ab0df0b0bfa4004b70b3f9e6","title":"\u0427\u0435\u043c \u043c\u0443\u0440\u0430\u0432\u044c\u0438\u043d\u044b\u0435 \u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430\u043c?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"6fbf3884-3bcf-55d2-978b-295966d75ee2"}

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

Прошёл почти год с того момента, как на 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 комментариев
Раскрывать всегда