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

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

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

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

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

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

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

Примеры:

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

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

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

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

0
192 комментария
Написать комментарий...
Евгений Сатонин

Какая разница, говно код или нет, полезная фича или нет. Это наглядно показыват тенденции. Не через год и не через два, но лет через 10 состязаться с подобного рода штуками будет уже крайне тяжело. Когда вводили автоматизацию на заводах, я тоже не думаю, что люди думали, что их скоро уволят... а в итоге массовые сокрашения тысячами... робот может делать этуже работу в 5 раз быстрее и дешевле...

Ответить
Развернуть ветку
Serge Arsentiev
робот может делать эту же работу в 5 раз быстрее и дешевле...

Видимо, Вы имели в виду производственную линию, все же. Перенастройка которой, в случае чего, стоит больших времени и денег, и во многих случаях в принципе невозможна - т.е. превращается в выброшенные деньги, которые ну просто никак не вернуть.
Единственный вариант, когда это получилось - - в публикации VC о молочном короле Александрове - который, цитирую:
https://vc.ru/16490-by-aleksandrov
"В Прибалтике в это время стояло шесть линий глазированных сырков. В Белоруссии — девять. Возникли какие-то проблемы, из-за которых и Прибалтика, и Белоруссия перестали ввозить сырки в Россию. В рынке образовалась громадная яма — пятнадцать линий. А каждая линия выпускает где-то по 80 тысяч сырков в день. То есть образовалась яма в миллион сырков каждый день, и мы эту яму быстренько наполнили. Скупили все линии Прибалтики и заказали у них еще линии."

Ответить
Развернуть ветку
Никита Бобровский

Видимо, Вы не слышали о гибких производственных системах
https://youtu.be/2qc0-yTXBts

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

а) нет, не слышал
б) данная система собирает ролики (их?) 3-х разных модификаций - для удобства они обозначены разными цветами движущейся части.
в) чтобы перенастроить эту линию, например, на сборку 5-ти прямоугольных деталей в одну (скажем, из Лего), придется все равно ее перестраивать полностью ... тогда как, добавление или удаление ролика из номенклатуры - да, наверное сделать проше.
То есть, не убедили :)

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