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

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

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

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

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

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

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

Примеры:

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

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

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

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

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

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

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

Мне кажется верстальщикам может и правда конец, но front-end инженеры будут нужны еще очень долго и их всегда не хватает.

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

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

У верстальщиков есть куча инструментов и знаний (всякие саасы препроцессеры, компараторы пиксельперфекта) (не только верстки, но и UX). Эффективность профессионального верстальщика в десятки раз выше чем эффективность человека, который делает вёрстку + JS и я не один такой. Всё зависит от времени и денег. Если у тебя есть время пилить вёрстку и JS - велкам. Но если всё поставлено на поток и требует высокого качества на выходе, то без проф верстальщика - никуда.

Ты можешь задрачивать верстку кнопки целый день и она потом никуда не интегрируется и будет бажной, или дать человеку, который сделает её за 30 минут и она будет работать везде.

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

Все именно так. Я не верстальщик (верстальщик это вообще матерное слово и такая позиция существует только в снг), но фронтендер с очень серьезным богажем скиллов по части UI/UX/интерактивности. И вот со мной в команде есть второй инженер (не считая джуна, который первую неделю работает), классический фронтендер. Вместе пилим серьезную аппу уже год.

В общем 99% всех стилей и 90% изначального кода в JSX реакта написано мною. У нас в быту постоянно ходят шутки что я css-nazi. Каждый раз когда он что-то где-то меняет (требования по изменениям логики, которые затрагивают JSX), заканчиваются "я там все визуально сломал, пофикси плз когда будет возможность". Он пытался писать стили несколько раз, каждый раз я с нуля их переписывал, ибо это даже словами не описать насколько огромная пропасть между "я у мамы классический программист" и "так бля подажжи ебана, тут глобальная переменная вставляется в миксин который юзается в другом миксине и все это юзается в глобальном компонентном css классе с BEM-неймингом и строгим соблюдением каскадности".

Ну и помимо всего этого еще есть сложные анимации (их их оптимизация), общая оптимизация рендеринга/картинок и подобных вещей, кастомная лабуда с SVG, всякие продвинутые css фишки и вагон других вещей, включая банальную css-магию, когда без модификации основной логики приложения можно делать всякие шикарные вещи используя 10-20 строчек css. А без знания как все это правильно готовить вместе (что требует огромного количества жопочасов практики и страданий), можно сделать какую-нибудь фуллскрин анимацию с использованием clip-path, поверх которой будут юзаться blend-modes и все это будет работать с 5 фпс на мощном компе (в то время как в умелых руках результат будет на 10/10).

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

Вроде vc.ru отказался от практики размещения резюме :)
Впрочем, на одном женском форуме был (и есть) специальный раздел "Хвасталки" - надо и здесь такое попросить завести :)

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

Можете в моем твиттере открыть ссылочку на codepen, мне уже давно незачем хвастаться на vc :) Как минимум потому-что тут в основном только представители СНГ компаний.

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

Вы продолжаете делать это :)

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