{"id":14275,"url":"\/distributions\/14275\/click?bit=1&hash=bccbaeb320d3784aa2d1badbee38ca8d11406e8938daaca7e74be177682eb28b","title":"\u041d\u0430 \u0447\u0451\u043c \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u044b \u0430\u0432\u0442\u043e?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"f72066c6-8459-501b-aea6-770cd3ac60a6"}

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

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

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

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

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

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

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

Примеры:

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

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

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

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

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

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

Ответить
Развернуть ветку
Никита Никифоров

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

Ответить
Развернуть ветку
Выпил ли mojo?

Татьяныч с вами не согласен.
"Если говорить о профессии дизайнера, то наиболее продвинутые дизайнеры уже сегодня занимаются скриптованием, а не в фотошопе сидят. А через пять лет вопрос будет полностью закрыт - дизайнер станет скорее программистом, чем богемным распиздяем. Хотя я не сильно ошибусь, предположив, что дизайнеры через пять лет будут богемными распиздяйскими программистами."

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

Все ждут каких-то революционных изменений, а _практическая_ ежедневная работа меняется очень и очень медленно.
Вот вчера в мелком салоне сотовой связи манагеры обещали руководству послать какой-то фотоотчет. Ну а несколько лет назад - просто почту бы скинули. А еще несколько лет назад - может факсанули бы рукописное. А еще до этого - продавали бы не сотовые телефоны, а пейджеры - и просто написали бы отчет руками, а директор наутро проверил.
 
Дизайнер же, как сидел и сводил очередные "Скидки! Акция" с очередным стоковым фотоизборажением, так и делает это - последние 20-25 лет, минимум. Если контора побогаче - то делает это с фото со спец. фотосессии - если контора сетевая -то дизайнера нет, есть промо материалы присылаемые из головного офиса, и тот же банальный листочек А4 на стекло окна/двери, где также точно в Ворде напечатано: "Только сегодня - Акция на ... "

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

На сях ромб хуярить будут шоле?

Ответить
Развернуть ветку
Выпил ли mojo?

Пфф, как два байта.
=======
#include<stdio.h>

void main()
{
int n,i,j,k;
printf("enter number of rows");
scanf("%d",&n);
for(i=0;i<=n;i++)
{
for(j=0;j<=n-i;++j)
{printf(" "); }
for(k=0;k<=2*i;k++)
{ printf("*");}
printf("\n");
}

for(i=0;i<=n;i++)
{
for(j=n;j>=n-i;j--)
{printf(" ");}
for(k=2*(n-i);k>=0;k--)
{printf("*");}
printf("\n");
}}
=======

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