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

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

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

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

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

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

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

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

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


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

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

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

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

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


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

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

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

Web-технологии

458 постов5.8K подписчиков

Добавить пост

Правила сообщества

1. Не оскорблять других пользователей

2. Не пытаться продвигать свои услуги под видом тематических постов

3. Не заниматься рекламой

4. Никакой табличной верстки

5. Тег сообщества(не обязателен) pikaweb

Вы смотрите срез комментариев. Показать все
26
Автор поста оценил этот комментарий

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

раскрыть ветку (21)
41
Автор поста оценил этот комментарий

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

14
Автор поста оценил этот комментарий

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


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

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


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

раскрыть ветку (3)
Автор поста оценил этот комментарий

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

Автор поста оценил этот комментарий

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

раскрыть ветку (1)
2
Автор поста оценил этот комментарий

Так все равно код будет не юзабельный в плане дальнейшей натяжки

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

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

раскрыть ветку (8)
1
Автор поста оценил этот комментарий

Как и многое другое в этом мире.

Автор поста оценил этот комментарий

Это каким образом?

раскрыть ветку (6)
4
Автор поста оценил этот комментарий

Всегда немного разные истории. Ну, вот из последних. Фирма занимается каминами, печками и всем, что с этим связано. Находят подрядчика. Девочка, менеджер по продажем в сео-компании. Договаривается на переговорах по сео сделать им сайт за 40 тыс. В то время как их контора, от которой она приехала по сео, предлагает сайты от 80 и качество ниже среднего.


Решение. Вордпрес. Бесплатный шаблон. Допиливаем до нужного результата. В сайтах девочка ноль. Но по ютубам и howto из гугла кое как устанавливает темы. Тыкается с плагинами. В итоге зарывается с версткой. Простыми правками поломала отступы и стили всего сайта. Зовет на помощь мужа. Муж поглядел и тем же методом ситуацию только ухудшил.


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


Сайт сдали. Денюшку заработали. Осадочек остался. За второй такой заказ не возьмутся.


У меня только за январь-декабрь таких историй штук 6 наберется, т.к. обитаю в этой теме.

раскрыть ветку (3)
1
Автор поста оценил этот комментарий

40к за шаблонный сайт на вордпрессе?

где они клиентов находят?

раскрыть ветку (2)
4
Автор поста оценил этот комментарий

я кажется подробно написал где.

раскрыть ветку (1)
1
Автор поста оценил этот комментарий

тендеры?

Автор поста оценил этот комментарий

А про племянников глав. бухов и сайты за 15 тысяч я уже и вообще молчу.

2
Автор поста оценил этот комментарий

научу за 500р, хочу бухнуть)))

2
Автор поста оценил этот комментарий
Так конструкторов уже полно, для визиток и лендингов
6
Автор поста оценил этот комментарий

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

раскрыть ветку (1)
2
Автор поста оценил этот комментарий

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

Автор поста оценил этот комментарий

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

Автор поста оценил этот комментарий

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

1
Автор поста оценил этот комментарий

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

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

Вы смотрите срез комментариев. Чтобы написать комментарий, перейдите к общему списку