{"id":14272,"url":"\/distributions\/14272\/click?bit=1&hash=9c431bca9c7cafdd4ed114bc7fb4d407f06f28aa165d6f80b9637d3a8581e5c2","title":"\u0421\u0431\u0435\u0440\u041a\u043e\u0442 \u2014 \u043f\u0435\u0440\u0432\u044b\u0439 \u0446\u0438\u0444\u0440\u043e\u0432\u043e\u0439 \u0438\u043d\u0444\u043b\u044e\u0435\u043d\u0441\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u0435\u0442\u0435\u043b \u0432 \u043a\u043e\u0441\u043c\u043e\u0441","buttonText":"","imageUuid":""}

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

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

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

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

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

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

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

Примеры:

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

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

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

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

0
192 комментария
Написать комментарий...
Zi Super

У меня горит пукан, когда говорят, что верстальщикам конец. Я сам не верстальщик, но перед верстальщиками голову предклоняю. Хороших верстальщиков днем с огнем не сыщешь. Всё время попадаются какие-то мудаки, которые кроме лендосов ничего не делали. Как только дело касается что-то сложнее тупого вывода картинок, т.е. появляются формы таблицы и дропдауны, фильтрации, да ещё это всё надо посадить на реакт, то пиздец голову в жопу засовывают или делают месяцами.

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

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

Развернуть ветку
Artem Pylypchuk

Предлагайте замену, может кто-то заинтересуется и начнет изучать, вместо React.

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

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

Развернуть ветку
Nikolay Talanov

Удачи вам серьезное приложение на ванилле написать, не сойдя с ума и сделав его поддерживаемым и расширяемым в условиях командной разработки (ибо для таких вещей изначально и создавали все эти либы и фрейморки). Юзать реакты для лендосов это уебанство само собой.

Ответить
Развернуть ветку
Коля Фёдоров

Он про фреимворк сказал, как мне показалось. А он достаточно мощен

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

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

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

И даже плюсик кто-то поставил) Просто js это натив. vanilla js - фреймворк. https://habrahabr.ru/post/150594/

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

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

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

Конечно, это старый прикол)

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

Тяжело когда не понимаешь что несёшь, да?)

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