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

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

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

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

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

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

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

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

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


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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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