{"id":14277,"url":"\/distributions\/14277\/click?bit=1&hash=17ce698c744183890278e5e72fb5473eaa8dd0a28fac1d357bd91d8537b18c22","title":"\u041e\u0446\u0438\u0444\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u0442\u0440\u044b \u0431\u0435\u043d\u0437\u0438\u043d\u0430 \u0438\u043b\u0438 \u0437\u043e\u043b\u043e\u0442\u044b\u0435 \u0443\u043a\u0440\u0430\u0448\u0435\u043d\u0438\u044f","buttonText":"\u041a\u0430\u043a?","imageUuid":"771ad34a-9f50-5b0b-bc84-204d36a20025"}

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

Прошёл почти год с того момента, как на 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 тысяч сырков в день. То есть образовалась яма в миллион сырков каждый день, и мы эту яму быстренько наполнили. Скупили все линии Прибалтики и заказали у них еще линии."

Ответить
Развернуть ветку
Евгений Сатонин

Нет, не производственную линию. Это как пример. Я в целом о тенденциях. Это всего лишь первые пробы. Уже сейчас верстальшики автоматизировали огромный паст своей работы, которую еще 3-5 лет назад делали руками. (Точнее для них это сделали программисты, слушая потребности верстальщиков). Лет через 10, теже программисты упростят работу дизайнерам. Верстка уйдет как класс, как этап разработки. Тот же muse от adobe, уже сильно облегчил работу мне, как дизайнеру. 70-80% типовых страниц я могу запустить в продакшн без участия верстальшика. Пускай там код говно, но для теста этого хватает выше крыши. Представьте, настанет время, когда нейронная сеть научится анализировать информацию из интернета сама. Скармливаешь ей например дизайн страницы, указываешь цели для этой задачи , а она ищет сайты, где подобный дизайн уже реализован, подключается к базам гугл аналитикс, анализирует поведенчиский фактор для этих страниц, находит наилучшие варианты для заданной вами цели, и "собирает" вам идиальную с технической точки зрения страницу, отвечающую вашим целям и максимальго подходящим дизайном. Вам останется только... ничего.

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

Это все волшебно, но Вы про заводы и рабочих ведь говорили. Прошу продолжить на эту тему - например про автопром - и учесть что стоимость той самой "замены" рабочих на роботизированную линию - предусматривает серьезную производственную программу, ну скажем хотя бы 500 000 автомобилей за несколько лет. Далее, для такой линии требуется поступление либо производство полного цикла, либо гарантия поступления всех компонентов с минимальными допусками (погрешностями в размерах), краски/лаки строго определенного качества, и так далее. Хотите поменять какую-то деталь в сборке? Перенастраивайте робота :) Пришла партия, допустим, дверей, с небольшим отклонением? Робот ее не возьмет :)
 
Разница между заводом с роботизированными линиями, и заводом с полуручной сборкой - миллиард (и больше) долларов.
 
Т.е. это вопрос не принципиальный или модернисткий, а чисто экономический - надо делать 20-30 000 авто в год - делаем полуручную сборку, есть четкое понимание что завод будет 5 лет гнать одну модель на "жадные" рынки, ставим роботизированную линию - она 100% окупится.

Что там и как будет подспорьем в нажатии на кнопочки и возюканьем мышкой - это другой разговор.

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