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

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

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

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

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

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

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

Примеры:

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

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

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

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

0
192 комментария
Написать комментарий...
Евгений Курилов

Пиздец верстальщикам.

Ответить
Развернуть ветку
Shustry
Ответить
Развернуть ветку
Denis Shiryaev
Автор

Пока в скетч не добавят кнопку "Сверстать под все платформы и залить на FTP" я думаю нет, но вопрос времени конечно же, пара лет еще и простенький лендинг можно будет самому нафигачить

Ответить
Развернуть ветку
61 комментарий
Агнец невинный

обратно на завод!

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

Вряд ли. Они могут и будут использовать разные инструменты (в том числе похожие) для своей работы и брать деньги за это.

Ответить
Развернуть ветку
Cg Bear

Как мне кажется, скоро (лет через 5-10) верстальщикам, да и вообще всей IT индустрии в целом, нужно будет переучиваться делать всё под VR\AR.

Ответить
Развернуть ветку
TRUNGPA1 .

Ну эт считай что паленый вискарь, что-то отдаленно похожее на сайт. Для верстки сайта администрации мухосранска конечно пойдет)

Ответить
Развернуть ветку
Ivan Kupalov

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

Ответить
Развернуть ветку
Alexander Matveev

Ховеры, адаптивность, динамика, кросс-браузерность, ... Верстка не должна только выглядеть, как верстка, она должна работать блять.

Ответить
Развернуть ветку
Gleb Kudryavtcev

Добавить сюда адаптивность и кроссбраузерность гораздо проще, чем вам кажется.

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

И чо и чо?

Вам никогда не приходилось тратить часы на простую базовую верстку с большим объёмом, на основне который ппц срочно надо делать mvp?

Ответить
Развернуть ветку
3 комментария
Vlad Spesyvets

Не заменит еще лет 5 технологии верстальщка. Но для оптимизации работы, самое то.

Ответить
Развернуть ветку
Vlad Mira
Ответить
Развернуть ветку
4 комментария
Aleksandr Pavlenko

readymag и неделя практики

Ответить
Развернуть ветку
Zi Super

У меня горит пукан, когда говорят, что верстальщикам конец. Я сам не верстальщик, но перед верстальщиками голову предклоняю. Хороших верстальщиков днем с огнем не сыщешь. Всё время попадаются какие-то мудаки, которые кроме лендосов ничего не делали. Как только дело касается что-то сложнее тупого вывода картинок, т.е. появляются формы таблицы и дропдауны, фильтрации, да ещё это всё надо посадить на реакт, то пиздец голову в жопу засовывают или делают месяцами.

Ответить
Развернуть ветку
Denis Shiryaev
Автор

Мне кажется верстальщикам может и правда конец, но front-end инженеры будут нужны еще очень долго и их всегда не хватает.

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

Хорошие, думающие верстальщики, быстро съебывают из верстальщиков, потому что хорошо думают. К тому же им не очень приятно работать среди мудаков.

Ответить
Развернуть ветку
Anton Matrosov

Подразумевается, что верстальщикам как отдельной профессии конец. Сейчас верстка входит в ожидаемый скиллсет фронтендера. В масштабных проектах один или несколько фронтендеров фокусируются преимущественно на стилях и атомарных компонентах, но при этом все равно они все это делают в рамках React'а.

Ответить
Развернуть ветку
3 комментария

Комментарий удален модератором

Развернуть ветку
9 комментариев

Комментарий удален модератором

Развернуть ветку
Андрей Иванов

На словах ты очередной "убийца верстальщиков", а на деле бесполезная хуйня

Ответить
Развернуть ветку
Слон Петрович

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

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

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

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

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

Ответить
Развернуть ветку
1 комментарий
Алексей Руденко

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

Ответить
Развернуть ветку
Sultan Zhumatayev

похоже сеть обрела разум и навык копипаста.
А что очень похожа на людей стала)

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

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

Ответить
Развернуть ветку
1 комментарий
Egor Gorobetz

Overfitting

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

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Alex Demin

И на весь экран попап-нэйтИв.
Наверстай, и пусть закрыть попробуют.

Ответить
Развернуть ветку
3 комментария
Егор Гумин

90% CSS с !important. Но если обучали на выборке с говнокод.ру, то получили то, чего хотели, здорово!

Ответить
Развернуть ветку
Владимир Миленко

Так код-то говно

Ответить
Развернуть ветку
Alex Demin

А может это код говна!

Ответить
Развернуть ветку
1 комментарий
Andrew

Она уже верстает лучше, чем 90% вестальщиков с фл ру

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

Шикарная вещь для прототипирования быстрого. Однозначно это ускорит работу специалистов, но 100% не заменит. Для меня это было бы удобнее использовать чем invision например или marvel. Намного нагляднее и интерактивнее при той же скорости

Ответить
Развернуть ветку
Глеб Горохов

Я сам не тестил, но сейчас выглядит пригодным только для "верстки" всякой шаблонной элементарной хрени. Хороший верстальщик в своей работе учитывает кучу важных вещей, о которых робот не догадается (по крайней мере, пока). Даже адаптив часто оказывается не такой простой задачей, т.к. требует особой структуры HTML-кода, а где-то и JS'а. Так что рано вы верстальщиков хороните, товарищи.

А дизайнеры, которые хотят делать код из своих макетов, пусть дизайнят сразу в WebFlow

Ответить
Развернуть ветку
Глеб Горохов

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

А вот если дизайн будет рисовать тоже нейросеть, то вероятность успеха выше — роботы думают одинаково (логично)

Ответить
Развернуть ветку
2 комментария
Артём Денница

Че за бред!
Нейронная сеть по скриншоту тоже сделала такой оригинальный комментарий в коде?
Сфоткали оригинальный сайт, дали ей картинку и она засобачила такой-же комментарий в код)) Как такое может быть)) Чет попахивает фейчиной)

Ответить
Развернуть ветку
Dmitriy Nester

Я не спец по верстке - но на в скидку исходники вообще кроме выравнивания ничем не отличаются, разве так может быть? Разве в верстке на один вид страницы должен быть один код?

Ответить
Развернуть ветку
1 комментарий
Yuriy Orlov

Основная проблема любой модели - это количество и качество разделённые данных. Вот если бы было пару миллионов размеченных по определённом шаблону страниц, то тогда верстальщик стало бы грустно. Пока такого датасета не существует - все будет хорошо только в "лабораторных" условиях.

Ответить
Развернуть ветку
Saveliy Dzvonkevych

Посмотрел код. Да, адаптивности нет, стили прикручиваются к айдишниками и очень суровый каскад "#container #homepage #latest article figure h2".

Но тем не менее, как для нейросети это колосальный успех, и я уверен, очень скоро мы по прощаемся с верстальщиками.

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

Скорее верстальщики поприветствуют новый удобный инструмент :)

Ответить
Развернуть ветку
Флейм

Задача обычно в том, чтобы сделать хороший UX, а не хороший дизайн. Для этого надо пробовать разные идеи уже на месте, доводя точность мелких деталей до идеала, чего робот не даст. И мышление дизайнеров обычно сильно далеко от нужд бизнеса и людей впринципе. Кроме того, UI должен быть поделён на логические вебкомпоненты внутри фреймворка, чтобы с ним можно было работать кодеру, и впоследствии долгосрочно дорабатывать проект. Но для какого-то быстрого прототипирования мб и хорошо, и дизайнеры смогут пощупать не в фотошопе свои творения, поняв реальные проблемы своих фантазий, и мб даже презы устраивать. Это будет развивать индустрию.

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

Задача - как это показывает например обновленный Vc.Ru -
1. Сделать
И потом разбираться с возможными проблемами. Потому что "хороший УХ" или хороший дизайн - это просто долго, дальше кодеры начинают "упрощать" - потому что у них так не верстается, дизайнер бесится переделывать, потому что реально некрасиво (не по канону), и начинается поиск точек соприкосновения - а фактически одна переделка за другой, а там уже и сроки, к которым надо было новый/переделанный сайт вывесить и чтобы он начал работать - остаются в глубоком прошлом :(

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

Какая разница, говно код или нет, полезная фича или нет. Это наглядно показыват тенденции. Не через год и не через два, но лет через 10 состязаться с подобного рода штуками будет уже крайне тяжело. Когда вводили автоматизацию на заводах, я тоже не думаю, что люди думали, что их скоро уволят... а в итоге массовые сокрашения тысячами... робот может делать этуже работу в 5 раз быстрее и дешевле...

Ответить
Развернуть ветку
Serge Arsentiev
робот может делать эту же работу в 5 раз быстрее и дешевле...

Видимо, Вы имели в виду производственную линию, все же. Перенастройка которой, в случае чего, стоит больших времени и денег, и во многих случаях в принципе невозможна - т.е. превращается в выброшенные деньги, которые ну просто никак не вернуть.
Единственный вариант, когда это получилось - - в публикации VC о молочном короле Александрове - который, цитирую:
https://vc.ru/16490-by-aleksandrov
"В Прибалтике в это время стояло шесть линий глазированных сырков. В Белоруссии — девять. Возникли какие-то проблемы, из-за которых и Прибалтика, и Белоруссия перестали ввозить сырки в Россию. В рынке образовалась громадная яма — пятнадцать линий. А каждая линия выпускает где-то по 80 тысяч сырков в день. То есть образовалась яма в миллион сырков каждый день, и мы эту яму быстренько наполнили. Скупили все линии Прибалтики и заказали у них еще линии."

Ответить
Развернуть ветку
4 комментария
Уоррен Баффет

Ну, пока ферма индусов верстает на порядки лучше.

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

Больше на фейк похоже, код почти 1в1 совпадает, кроме пробелов.

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

Комментарий удален модератором

Развернуть ветку
Виталя Шнайдерсон

И альты

Ответить
Развернуть ветку
Надежда Рябоштанова

ссылка read more в теге footer не в футере, например, а в подвале еще один <footer>

Ответить
Развернуть ветку
Dmitry Rodionov

Посмотрите оригинальный код и код сделанный "нейронной сетью"... Они идентичные, дальше думайте сами... Статья лжива, как оказывается.

Ответить
Развернуть ветку
Юрий Ключевский

"ноутбук для запуска в Jupyter лежит тут"

WTF? Что за формулировка?

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

Я тоже завис на этой фразе, но думал, может я терминов каких не знаю из новояза, и решил не переспрашивать.

Ответить
Развернуть ветку
2 комментария
Egor Gorobetz

```The Jupyter Notebook is an open-source web application that allows you to create and share documents that contain live code, equations, visualizations and narrative text. Uses include: data cleaning and transformation, numerical simulation, statistical modeling, data visualization, machine learning, and much more.``` http://jupyter.org/
В пайтоне используется, чтобы красиво показывать код другим людям, с визуализацией и пошаговой работой.

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

Комментарий удален модератором

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

Со прошедшим Старым Новым Годом, как классно Вы в 00:00 разместились :)
В моем детстве HTML не было, а юность началась с ... Hot Dog web editor :)
Ну и конечно Teleport Pro, WsFTP => CuteFTP, Reget :)

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

Храни господь верстальщиков

Ответить
Развернуть ветку
Максим Мостовой

Отдельной должности "верстальщик" не встречал уже не помню сколько лет

Ответить
Развернуть ветку
Sasha Tanya

круто

Ответить
Развернуть ветку
Dmitry Yaremenko

Пока такой же громкий хайповый заголовок как и в случае с pix2code. Распознаются уже известные сети элементы и из них составляется лейаут. Еслиесть набор готовых компонент то это расставить их по простому лейауту можно с минимальными знаниями хтмл кода (а примеров со сложным лейаутом я там не увидел).

Ответить
Развернуть ветку
Pavel Redych

еще один thegrid

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

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

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

Говорят сториборды для иОС тоже делать сетки обучают. Мне видится что эта задача попроще, чем HTML.

Ответить
Развернуть ветку
Anton Boyko

Такое чувство, что работа верстальщика заключается только в единоразовой верстке страницы по макету. А дальнейшую поддержку проекта тоже нейросеть будет делать? Да она уволится после второго цикла, когда наломает все, что было создано изначально и уже было натянуто на какой-то движок.

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

Этот проект делает сайты лучше:
https://site-bot.ru

Ответить
Развернуть ветку
Anton Zhitarev

что это за поебень?

Ответить
Развернуть ветку
1 комментарий
Слон Петрович

Мда

Ответить
Развернуть ветку
Alexey Ermolaev

как это развидеть?

Ответить
Развернуть ветку
1 комментарий
Anton Boyko

@делаем адаптивные сайты
@у самих сайт со смартфона не работает

Ответить
Развернуть ветку
1 комментарий

Комментарий удален модератором

Развернуть ветку
Denis Shiryaev
Автор
нет адаптивности, например

Не все сразу, пару лет и будет, я уверен

Ответить
Развернуть ветку
Vasily Chilikin

В IE 6 в подвале блоки будут не в строчку, а так да, нормальный макет с фиксированными размерами блоков, ничего сложного.

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

ie6.... но зачем?????

Ответить
Развернуть ветку
1 комментарий

Комментарий удален модератором

Развернуть ветку
Michael Kechinov
Ответить
Развернуть ветку
Никита Крайнев

Psdtoweb.de похожий сервис только здесь текст картинками идёт ,и все с position:absolute)

Ответить
Развернуть ветку
Тоха Никитченко

В самый раз для прототипирования

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

Когда он начнёт всё верстать на Bootstrap, я забью на вёрстку (:

Ответить
Развернуть ветку
Владимир Быков

Код жеский, не семантичный ни разу

Ответить
Развернуть ветку
Еремей Бричкинд

Татьянычу пиздец?

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

Если даже допустить, что это сделала нейросейть... Код стремный достаточно, все жестко прибито флоатами и привяазно к размеру блока. Вообще, я не думаю, что верстальщики вымрут как класс, скорее это будет новый инструмент для рутинных работ. Сам вот давно думаю, чтобы натраваить сетку на какие-то рутинные операции в программировании.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Булат Ринчино

Хороший дизайнер решает задачу бизнеса, верстальщики все равно останутся

Ответить
Развернуть ветку
Илья Казначеев

Сразу же вспомнился этот рассказ. Будущее наступает.
https://habrahabr.ru/post/202460/

Ответить
Развернуть ветку
Olya Limonova

у меня такой вопрос: есть смысл учиться на верстальщика?

Ответить
Развернуть ветку
Anton Romanov

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

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

Комментарий удален модератором

Развернуть ветку
Настя Власенкова

Пишу из 2024. Все ещё работаем. Нейросети огонь

Ответить
Развернуть ветку
Alexey Ermolaev

Скоро за пару эпох обучения сеть научится писать говнокод на пхп

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