{"id":14277,"url":"\/distributions\/14277\/click?bit=1&hash=17ce698c744183890278e5e72fb5473eaa8dd0a28fac1d357bd91d8537b18c22","title":"\u041e\u0446\u0438\u0444\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u0442\u0440\u044b \u0431\u0435\u043d\u0437\u0438\u043d\u0430 \u0438\u043b\u0438 \u0437\u043e\u043b\u043e\u0442\u044b\u0435 \u0443\u043a\u0440\u0430\u0448\u0435\u043d\u0438\u044f","buttonText":"\u041a\u0430\u043a?","imageUuid":"771ad34a-9f50-5b0b-bc84-204d36a20025"}

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

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