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

Прошёл почти год с того момента, как на 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

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

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

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

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

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

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

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

Верстальщеское лобби выкупает патенты на эти продукты, тем самым препятсвуя их развитию.

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

блять, где записаться в лобби? Надо пару идей продавить)

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

Это просто.

Достаточно во все свои проекты добавить в HTML следующий код:

<script language="javascript">
var i = 2;
while (i <= 10) {
document.write (i + "<br>");
i -= 2;
}
</script>
раскрыть ветку (3)
Автор поста оценил этот комментарий
А можете несведущему объяснить, что делает этот код
На мой взгляд тут бесконечный цикл с отступами
раскрыть ветку (2)
Автор поста оценил этот комментарий

Так и есть. Инфинит луп.

Может крашнуть браузер. Забавно же?

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

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

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

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

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

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