{"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?

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

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

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

Ответить
Развернуть ветку
Выпил ли 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 комментариев
Раскрывать всегда