{"id":14284,"url":"\/distributions\/14284\/click?bit=1&hash=82a231c769d1e10ea56c30ae286f090fbb4a445600cfa9e05037db7a74b1dda9","title":"\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0444\u0438\u043d\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u0430\u043d\u0446\u044b \u0441 \u0441\u043e\u0431\u0430\u043a\u0430\u043c\u0438","buttonText":"","imageUuid":""}
Будущее
Denis Shiryaev

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

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

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

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

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

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

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

Примеры:

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

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

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

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

#инструменты #будущее #нейросетьдня

3 показа
158K открытий
0
192 комментария
Написать комментарий...
Показать всё . Вы видите только часть дискуссии
 Артём Денница

Че за бред!
Нейронная сеть по скриншоту тоже сделала такой оригинальный комментарий в коде?
Сфоткали оригинальный сайт, дали ей картинку и она засобачила такой-же комментарий в код)) Как такое может быть)) Чет попахивает фейчиной)

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

Я не спец по верстке - но на в скидку исходники вообще кроме выравнивания ничем не отличаются, разве так может быть? Разве в верстке на один вид страницы должен быть один код?

Ответить
Развернуть ветку
Артём Денница

нет конечно, так не может быть. Есть adobe muse, типо верстает, так там классы .class182398123_!231231 такие... но никак не такие логичные как ту... это фейк

Ответить
Развернуть ветку
Показать 192 комментария . Вы видите только часть дискуссии
Написать комментарий...
189 комментариев
Раскрывать всегда