1060

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

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

Работа алгоритма делится на 3 этапа:
1. Алгоритм получает JPEG-изображение дизайна страницы.

Нейронная сеть, которая верстает сайты по картинке Верстка, Сайт, Нейронные сети, Алгоритм, Гифка, Длиннопост

2. Алгоритм конвертирует элементы в HTML- и CSS-код.

Нейронная сеть, которая верстает сайты по картинке Верстка, Сайт, Нейронные сети, Алгоритм, Гифка, Длиннопост

3. Полученный результат

Нейронная сеть, которая верстает сайты по картинке Верстка, Сайт, Нейронные сети, Алгоритм, Гифка, Длиннопост

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


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

Примеры:
- 250 циклов работы алгоритма;

- 350 циклов работы алгоритма

- 450 циклов работы алгоритма;

- 550 циклов работы алгоритма.


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

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

Взято отсюда.

Дубликаты не найдены

+151
Меня, как айтишника, очень радует прогресс в технологиях и вот это всё. Но и, как верстальщика, пугает)
раскрыть ветку 83
+98
Думаю тебе, как верстальщику, гораздо больший вред нанесли соцсети, куда очень плотно перебрался малый бизнес. Многим теперь достаточно просто группы вк, безо всякого сайта.
раскрыть ветку 10
+6

На самом деле желающих иметь сайт всё равно ещё очень много, зачастую в фирме 1,5 человека работает и на тендерах и прочих не онлайн продажах, а сайт всё равно нужен как визитка компании. Да, многие через соц.сети продают, но это довольно небольшая ниша ширпотреба, а очень много фирм которые либо b2b, либо продают дорогие товары, им без сайта или хотя бы площадки на каком-нить агрегаторе никуда.
Впрочем у меня может быть деформация картины мира, из ЦА нашей компании. Но опыт подсказывает что любой зачуханный магазин мебели/дверей на окраине и то хочет себе онлайн магазин(то что он ему не нужен, не значит что он его не хочет и не купит).

раскрыть ветку 2
-72
Безо?
раскрыть ветку 6
ещё комментарии
+41

Интересная тема с этими сетями нейронными пошла. Они уже и фотошопят и порнуху снимают. Теперь вот сайты. Рано или поздно это приведет к созданию полностью автоматизированного интеллекта который сможет всем этим управлять и выдавать точные и качественные результаты. А учитывая неминуемую популярность - будет быстро обучаться. Как итог получим качественные и дешёвые ИТ продукты. С которыми не сможет конкурировать даже гениальный человек чисто физически (жрать, срать, спать - роботу не нужно).

ВЫВОД: Бросаем учебу и срочно устраиваемся в ЖЭК дворниками. Скоро эта вакансия станет дефицитом. Получается такой регресс человечества через прогресс машин.

раскрыть ветку 51
+40

Говоришь, прямо как после изобретения парового двигателя. Или как после появления электричества. И во времена индустриализации так же говорили. А еще после появления компьютеров.

раскрыть ветку 33
+3

Дворниками?

Т.е. их не заменят машины? )

раскрыть ветку 2
+1

нейросеть, к сожалению, так не работает. она работает на патернах, обучаясь уже на готовых предметах, что-то дать ей новое без примера, чего свет не видел, она не сможет ничего сделать/построить. Именно поэтому надо уходить в науку

раскрыть ветку 1
+1

Интересная тема с этими двигателями. Они уже и телеги толкают и и ткани шьют. Теперь вот автомобили. Рано или поздно это приведет к созданию полностью автоматизированного машины который сможет всем этим управлять и выдавать точные и качественные результаты. А учитывая неминуемую популярность - будет быстро улучшатся. Как итог получим качественные и дешёвые продукты. С которыми не сможет конкурировать даже сильнейший человек чисто физически (жрать, срать, спать - роботу не нужно).



ВЫВОД: Бросаем учебу и срочно устраиваемся в ЖЭК дворниками. Скоро эта вакансия станет дефицитом. Получается такой регресс человечества через прогресс машин.

Плохой вывод...

Иллюстрация к комментарию
0

Ну и бредятина.

0

Это всего лишь означает, что будет нужно меньше программистов, вот и все, никуда они не исчезнут. "Качественные и дешевые ИТ продукты" будут только те, которые шаблонные

0
Так, порнуха есть, ждём когда появится алгоритм генерирующий российский кинематограф. Запасаемся поп-корном.
раскрыть ветку 1
0

А чо, норм. Человек будет избавлен от необходимости писать тонны строк кода

раскрыть ветку 3
0
Либо усиленно изучать электронику и машиностроение.
раскрыть ветку 2
+2

Ты просто теряешь основную фишку, у тебя появился инструмент который позволит тебе делать работу быстрее, потому как эта история повторяется постоянно: сначала все сайты делали вручную, потом появились готовые CMS, но разработчики не осталась без работы.
Я вот планирую присмотреться и возможно возьму на вооружение, что бы оно за меня делало часть скучной работы, а нюансы прорабатывать буду я.

раскрыть ветку 1
0
Ну как бы, код там не айс + нужен специально обученный дизайнер иначе все пичаль
0

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


Когда вышел Bootstap все говорили, что верстка умерла, теперь можно сделать сайт за 30 минут адаптивный, но у где этот бутстрап? Никто им не пользуется, кроме как прототипов или каких-то очень простеньких структур сайта, так же и с этой технологией будет.

0
верстать больше не надо :) боюсь за качество кода на выходе...
0

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

Еще чуть и требования на джуна будут такие большие, что потянет лишь нынешний senior

0

Курс по ИИ тебе в помощь! Пока не поздно, так сказать ;) Не будешь верстать, будешь нейросети обучать!

0

PHP комманды туда пока AI не вставит, ровно как и на JS шаблоны для SAP не распилит, и поведение элементов не напишет...

раскрыть ветку 4
0

Это временно

раскрыть ветку 3
0

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

0

нуу, я тоже верстак, но никогда не парюсь по этому поводу и вот почему:
наклепать какую-нибудь хрень сможет и нейросеть и еще куча всего.

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

раскрыть ветку 4
+3

Пока не сможет.

+1

Это задача создателей прототипов.

Да и до этого дойдет быстро.

раскрыть ветку 2
0

А меня - нет. Обычный клипальщик говносайтов.

-4

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

раскрыть ветку 1
+2
Технологии шагают вперед, скоро взлетят.
+87

З (заказчик), В (верстающая нейросеть).


З - Долго ещё?

В - Осталось 20 циклов из 50.

З - Покажи, что уже готово.

В - Вот ссылка, остаётся только адаптив настроить.

З - Ага, вижу. Мы тут подумали, нужно изменить хэдер первого блока, также под него изменить хэдер второго блока, и измени основной цвет на светло-пурпурный.

В - ... Но ведь свёрстано уже 80% работы.

З - И пусть каждое воскресенье будет другой заголовок в баннере и Снежинки зимой пусть падают, а осенью - листики. А весной... ну сам придумай что-то такое, чтобы оживить сайт.

В - Я вообще-то только верстать умею.

З - что за бред? Нам тебя посоветовали, как хорошего специалиста. ТыЖПрограммист. 

раскрыть ветку 2
+24
Иллюстрация к комментарию
+12

Кажется так нейросеть нас и истребит

+10

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

раскрыть ветку 10
+1

Ну главное начать. И если инвесторы увидят потенциал- будут развивать или вы сразу хотели, чтоб эта сеть и сайты норм верстала и попутно лица актрис на порно лепила?

раскрыть ветку 9
+1

Потенциал для инвесторов заключается в наличии слова "нейросеть". Более дальновидные предприниматели написали бы "нейросеть на блокчейне".

+1

лет эдак 7-8 назад, под фотошоп был плагин (платный разумеется), который из PSD верстал. тоже что-то толп безработных верстальщиков из-за этого не видно.

раскрыть ветку 6
0

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

Для более серьезных проектов уже нужно писать структурированный, поддерживаемый и потенциальной расширяемый шаблон, с семантически названными классами, который машина с её .block-123 > block-123_inner не напишет. Ну и всякие анимации, привязка к бэку, интерактивность, адаптивность (!)...

+9

Шах и мат, погромисты!

Шучу.

раскрыть ветку 2
0

Шучу, не шучу.

раскрыть ветку 1
+1
Иллюстрация к комментарию
+15

Ну и что, делает небось статичные странички на div-ах. Кому они нужны?

раскрыть ветку 21
+39

Со временем все будет, текущий результат тоже важен, мб инвесторы найдутся.

+11

Да. Безо всякой адаптивности и с выстраиванием дивов в линию при помощи float: left.


Скорее всего, после определенных доработок зайдет всяким веб-дизайнерам, которые не умеют верстать и хотят быстро получить статичный прототип, чтобы посмотреть, как он будет выглядеть в браузере.

Ну, ещё после других доработок - в верстке имейлов. Там вообще своя атмосфера и свои костыли.


А для большинства это бесполезная игрушка, ибо в эпоху реактов, вуе и пр. SPA-штук разметка генерится из JS для каждого фреймворка своим шаблонизатором.

раскрыть ветку 3
0

Вот для этого огонь, то что нужно.

0

Ну, там есть возможность генерить с использованием Bootstrap, что может не слабо облегчить процесс дальнейшей работы.

раскрыть ветку 1
+4
Ну, теперь человеку, совершенно не шарящему в IT будет во много раз проще создать сайт-визиту. Другое дело, что с технической точки зрения сайт скорее всего будет ужасен, но кого это волнует, если с со своей основной задачей он справляется?
раскрыть ветку 10
+8

сейчас 50% сайтов, как минимум, делаются людьми совершенно в этом не шарящих.

раскрыть ветку 8
+1
Так конструкторов уже полно, для визиток и лендингов
+3

я глянул код. Увидев 20 тегов footer вдоль всего макета код изучать перестал) Хотя само направление исследования мне кажется интересным.

раскрыть ветку 1
+1

Футер можно (нужно) использовать внутри секций и как глобальную нижнюю часть сайта, так же как и хидер

0

Тому же, кому и аля  ucoz или wix

0

Ну и ничего. Раньше вообще ничего не было, а теперь есть статичные странички на div-ах.

0

Мое скромное мнение: многое эти алгоритмы не смогут покрыть. В верстке есть множество нюансов, которые обсуждаются с заказчиком, даже если макет уже готов. Работа некоторых блоков, их расположение на странице, взаимодействие с ними пользователя и так далее. В любом случае это позволит лишь упростить, но не заменить верстальщиков. Как максимум - нужно будет регулировать множество настроек для достижения нужного результата, создавать объемные инструкции для ИИ.

"А знаешь как называется самая точная инструкция в мире? Код."©

+2

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

+1

Объясните как это запустить. Остановился на том, что выполнил установку всяких штук из пункта FloydHub. А что дальше?

0

Представляю шок заказчика сайта, когда он вдруг узнает, что для создания сайта ИсскуственномуИнтелекту требуется ТЗ в трёх томах, и что правки вносить не рекомендуется )

0

Так, глядишь, скоро и картинку делать не надо будет - просто накидал элементов на рабочую область и на выходе HTML. И чтоб не только для бутстрапа работала. Вот это новинка будет! Хотя погоди-ка...

0

В MS Word с древних времен есть возможность сохранить документ в html, чем некоторые активно пользовались для наполнения сайтов.

0

Пора основывать движение луддитов-программистов

0
Прошу сильно не кидаться тапками, я не специалист, но есть же уже давно всякие онлайн сервисы для создания сайтов аля натягай в рабочую область готовых модулей, напихай в них текста и картинок и будет тебе сайт. В чем принципиальное различие с этой нейросетью? И как в картинке объяснить ей требуемый функционал?
раскрыть ветку 1
+1

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

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

0

про 3д модели не слышно еще ?
научились нейросети ассеты делать ?

раскрыть ветку 1
0

Поищи на гитхабе

0

Всё это конечно замечательно и местами даже применимо (и нереально круто, да), но нужно понимать одну вещь: то что нынче называют "ИИ" отличается от того самого сильного ИИ примерно так же как скейтборд от ховерборда из "Назад в будущее". Идея понятна, есть даже поделки похожие на магнитиках, но на самом деле пропасть и ни разу не понятно как это сделать.

0

А у неё есть кнопочка "сделать охуенно"?

-1

"Жесть он крут"

-1

Так ведь подставить человека очень легко. Несведущие люди легко поверят увиденому с телефона.

-1

Это не то репо - https://github.com/emilwallner/Screenshot-to-code-in-Keras ? Функционал идентичен

-1

Программисты сами под собой пилят сук

раскрыть ветку 3
+27

Хватит называть верстальщиков программистами. Пичот. Это как назвать токаря инженером. Или продавца в пятёрочке брокером.

раскрыть ветку 1
+7

Зачёт!)))Про брокера и продавца в пятерочке, никогда ни слышал такого сравнения.

-2

Сначала под всеми остальными. Они будут в самом конце.

-4

Скоро говнокодеры-верстальщики будут не нужны

раскрыть ветку 4
+10

Они и сейчас не нужны. Хорошие верстальщики всегда востребованы.

раскрыть ветку 3
-3

Даже через 1000 лет будут нужны? Не смешите.

раскрыть ветку 2
-4

Насколько все плохо для верстальщиков? Есть ещё время на освоение языков программирования или прям земля под ногами горит?))

раскрыть ветку 5
+1

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

раскрыть ветку 1
0

Допилить этот код после ИИ та ещё затея, вряд-ли его будут юзать, для заготовок никто не отменял всякие Webpack и тд

0

Это вообще не плохо для верстальщиков. Это охуенный проект, который умеет делать прикольно и всё. До серьёзных проектов в вёрстке ему не дотянуть ещё оооочень долго. Как минимум пока не научат читать и анализировать psd и прочие многослойные форматы.

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

-1

Они могут умереть от смеха увидев этот код

-1

Иди в бэкенд, делов-то

-5

а адаптивность то хромает

-13

Семантика нарушена. Очередная пое?бень.

Больше похоже на рекламу одного сервиса...

-18
О, с 4 пда решили плюсиков поднабраться. Лови от меня.
раскрыть ветку 1
+3

Только вот 4пда не первыми перевели данную новость.

ещё комментарии
Похожие посты