{"id":14276,"url":"\/distributions\/14276\/click?bit=1&hash=721b78297d313f451e61a17537482715c74771bae8c8ce438ed30c5ac3bb4196","title":"\u0418\u043d\u0432\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u0439 \u0442\u043e\u0432\u0430\u0440 \u0438\u043b\u0438 \u0443\u0441\u043b\u0443\u0433\u0443 \u0431\u0435\u0437 \u0431\u0438\u0440\u0436\u0438","buttonText":"","imageUuid":""}
Будущее
Denis Shiryaev

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

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

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

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

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

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

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

Примеры:

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

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

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

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

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

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

Какая-то очень притянутая за уши тема. Распознавание рисунка, а зачем вообще рисунок нужен? Сейчас тьма бесплатных удобных блочных drag and drop редакторов, обычно на бутстрапе, освоившему их несложный интерфейс такой "сайт" как в демо можно наверное меньше чем за минуту собрать.

Ответить
Развернуть ветку
Ilgar Dadashov

Ну так вся соль не в «дизайне», а в развитии нейросетей, показывают их обширные возможности развития в любом направлении.

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

Илгар, "Вчера смотрел женский футбол, там показывали интересные комбинации, но до гола дело так и не дошло".
Вот правда - сколько можно "показывать возможности" - в основном сводящиеся к сверке примера с базой данных образцов, может быть пора уже показать реальную работу нейросети?
 
Поиск текста в базе данных - базовая операция, доступная уже лет 50, и вот последние 5-7 лет стал доступен поиск паттерна пикселов в базе данных изображений - но почему это внезапно называется "нейросеть", я не понимаю. В проекте статьи пошли в другую сторону - картинка сравнивается с паттерном шаблонов (очевидно), после чего подбирается подходящая комбинация элементов кода ..
 
Почему это нейросеть, а не switch / case ?
С таким же успехом это можно назвать "прикидывание кхм, пальца к носу", на основе базы из миллионов носов.

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