{"id":14270,"url":"\/distributions\/14270\/click?bit=1&hash=a51bb85a950ab21cdf691932d23b81e76bd428323f3fda8d1e62b0843a9e5699","title":"\u041b\u044b\u0436\u0438, \u043c\u0443\u0437\u044b\u043a\u0430 \u0438 \u0410\u043b\u044c\u0444\u0430-\u0411\u0430\u043d\u043a \u2014 \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0433\u043e\u0440\u0435","buttonText":"\u041d\u0430 \u043a\u0430\u043a\u043e\u0439?","imageUuid":"f84aced9-2f9d-5a50-9157-8e37d6ce1060"}
Будущее
Denis Shiryaev

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

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

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

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

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

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

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

Примеры:

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

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

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

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

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

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

Кекеке, а почему в результатах 550 циклов код абсолютно идентичный оригинальной верстке?

Ответить
Развернуть ветку
Вава Мики

Полез сравнить код оригинала и нейросети, поугарал от того, что он идентичен. Думал в камментах уже все вывели разработчиков на чистую воду, но нет, полезли проверять, похоже, единицы. Наглядный пример того, что людям через сми можно впарить что угодно..

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

Интересно ... но вполне понятно что это может быть и результатом долгой-долгой отладки на эталонном примере - вот они добились 100% совпадения и выставили это как результат.

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