Нейронная сеть, которая верстает сайты по картинке Статьи редакции
Прошёл почти год с того момента, как на GitHub опубликовали алгоритм pix2code. И вот ребята из FloydHub на его основе создали нейронную сеть для вёрстки страниц, которую уже можно запустить самому.
Работа алгоритма делится на три этапа:
Чтобы получить такой результат, разработчики скармливали алгоритму скриншоты и присваивали определённые HTML-теги, в итоге получился датасет, с помощью которого можно генерировать шаблонные сайты. Ниже будут примеры.
Алгоритм учится предсказывать соответствующие HTML-теги, последовательно «изучая» изображение на входе. Когда алгоритм предсказывает следующий тег разметки, он получает скриншот и все «правильные» теги HTML-разметки для этого элемента.
Примеры:
Везде выше можно посмотреть пример исходного кода, сгенерированного нейронной сетью, а вот оригинальный сайт, скриншоты которого скармливали алгоритму.
Если вы вдруг фронтенд-инженер (я нет), поделитесь в комментариях: как вам код, сгенерированный алгоритмом?
Я сам не тестил, но сейчас выглядит пригодным только для "верстки" всякой шаблонной элементарной хрени. Хороший верстальщик в своей работе учитывает кучу важных вещей, о которых робот не догадается (по крайней мере, пока). Даже адаптив часто оказывается не такой простой задачей, т.к. требует особой структуры HTML-кода, а где-то и JS'а. Так что рано вы верстальщиков хороните, товарищи.
А дизайнеры, которые хотят делать код из своих макетов, пусть дизайнят сразу в WebFlow
Ну и бывают такие дизайнеры... которые правил и принципов верстки не понимают в принципе, от того рисуют как хотят. Ладно одно разрешение, но в трех разных адаптивах у них может быть 3 разных структуры, элементы меняют свой порядок и положение только так. Такого робот точно не осилит.
А вот если дизайн будет рисовать тоже нейросеть, то вероятность успеха выше — роботы думают одинаково (логично)
классика дезигна - я дезигнер, я так вижу. А то что вы там не можете полупрозрачность последнего символа в попапе внутри попапа со скроллом сделать и округлить края буквы О в центре слов - ваши проблемы
Ну их надо уметь грамотно ставить на место.