{"id":14275,"url":"\/distributions\/14275\/click?bit=1&hash=bccbaeb320d3784aa2d1badbee38ca8d11406e8938daaca7e74be177682eb28b","title":"\u041d\u0430 \u0447\u0451\u043c \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u044b \u0430\u0432\u0442\u043e?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"f72066c6-8459-501b-aea6-770cd3ac60a6"}

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

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

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

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

Вот тогда то все и вернуться в студию Артемия Лебедева за логотипами и дизайном.

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

Нельзя с бюджетом 20 000 рублей и планиремой прибылью 40-50 000 рублей в месяц "вернуться" в то место где просят 1 млн. рублей за несколько картинок.
 
Если бы лого Лебедева позволяли, потратив 1 млн, заработать 3 млн. "по сравнению с обычным порошком", то их бы покупали и дороже. А так это просто отсечка по бедности.
 
Скажем, себестоимость спорт-каров самоделок (единичные экземпляры), держится все же в пределах $20-$30к, но с навешиванием производственной программы, подбора запчастей по принципу совместимости распространенности, налогов на всех уровнях, крэш-тестов, сертификации, плана по окупаемости имеем что имеем - $150 000 - $200 000, за в-общем те же л.с. и те же с. до 100 км/ч.

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