Будущее Denis Shiryaev
97 542

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

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

В закладки

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

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

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

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

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

Примеры:

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

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

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

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

#инструменты #будущее #нейросетьдня

{ "author_name": "Denis Shiryaev", "author_type": "editor", "tags": ["\u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u044c\u0434\u043d\u044f","\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b","\u0431\u0443\u0434\u0443\u0449\u0435\u0435"], "comments": 192, "likes": 169, "favorites": 1, "is_advertisement": false, "subsite_label": "future", "id": 31732, "is_wide": true }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 31732, "author_id": 34154, "diff_limit": 1000, "urls": {"diff":"\/comments\/31732\/get","add":"\/comments\/31732\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/31732"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199118 }

192 комментария 192 комм.

Популярные

По порядку

Написать комментарий...
112

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

Ответить
20

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

Ответить

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

4

Ну тут прям из скриншота, быстрее в разы мне кажется — но в целом зависит от того, добавит это кто-то из крупных редакторов или нет

Ответить
10

Прямо из скриншота уже никому не нужно, всё собирается из шаблонов. Дизайнерам тоже скоро такой же конец, как и верстальщикам

Ответить
34

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

Ответить
2

Я это как раз понимаю, поэтому и написал "дизайнерам тоже скоро такой же конец, как и верстальщикам" :)

Ответить
4

"дизайнерам" (в кавычках), было бы вернее.

Ответить
4

а шаблоны кто рисовать будет)

Ответить
1

Шаблоны имеется ввиду какой нибудь дефолтный material design, его уже рисовать не надо. Дизайнеры будут рисовать в итоге концепты и пример UI, дальше все роботы на основе как раз шаблонов будут строить, а люди дописывать скрипты.

Ответить
66

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

Ответить
5

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

Ответить
1

Скорее будет так. Маркетолог будет работать с веб-дизайнером, задача которого будет грамотно расположить блоки в фотошопе. Уже дальше макет или верстка отдаётся фронтендеру на добавление интерактива. Если его нет, то сразу программистам.

Ответить
0

Так во всех конструкторах уже давно так. В том же самом Виксе, например.

Ответить
0

с ума сойдешь на виксе делать сайт, а потом его обслуживать

Ответить
0

Я работаю над подобным : )

Ответить
0

или верстать

Ответить
4

Вот тогда то все и вернуться в студию Артемия Лебедева за логотипами и дизайном.

Ответить
0

Нельзя с бюджетом 20 000 рублей и планиремой прибылью 40-50 000 рублей в месяц "вернуться" в то место где просят 1 млн. рублей за несколько картинок.
 
Если бы лого Лебедева позволяли, потратив 1 млн, заработать 3 млн. "по сравнению с обычным порошком", то их бы покупали и дороже. А так это просто отсечка по бедности.
 
Скажем, себестоимость спорт-каров самоделок (единичные экземпляры), держится все же в пределах $20-$30к, но с навешиванием производственной программы, подбора запчастей по принципу совместимости распространенности, налогов на всех уровнях, крэш-тестов, сертификации, плана по окупаемости имеем что имеем - $150 000 - $200 000, за в-общем те же л.с. и те же с. до 100 км/ч.

Ответить
2

Если дизайнерам конец придет, то подобные скрипты останутся без работы :)

Ответить
0

А шаблоны кто придумывает и делает? Хлебное дерево?

Ответить
0

Видимо, давно пора уже.

Ответить
19

2019

FTP

Ответить
12

2019

2018

Ответить
0

Какое оно, будущее?

Ответить
6

Однозначно с SFTP.

Ответить
1

Ксению Собчак выбрали.

Ответить
3

Нужно как-то срочно сворачивать на альтернативную ветку развития истории

Ответить
0

Свернули

Ответить
0

Не я виноват!

Ответить
0

Промазал веткой, как удалить?

Ответить
0

Docjer, ansible, k8s, балансировщик нагрузки и интеграцию с aws под лендинг :)P.S. Под некоторые вещи и ftp/sftp с головой

Ответить
–15

у меня опыт близкий к нулевому, на muse собрал сайт windeo.ru без смс и регистрации, тьфу без верстальщика

Ответить
30

Без обид, но сайт дерьмо.

Ответить
1

Без обид но он продает

Ответить
3

Вы полагаете что веб-приложения существуют только для мелких продаж? Сайт даже до говна не дотягивает, хотя лох не момент, вот и продает))

Ответить
0

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

Ответить
0

Ну некоторые и "качественное" бухло покупают в подвальных помещениях. Каждому свое, я же говорю не вымрет

Ответить
1

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

Ответить
2

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

Проще в каком смысле? С точке зрения знаний, то само их получение для работы, например, инженером или программистом для подавляющего большинства владельцев палаток курей просто не представляется возможным. Я некоторое время был ИП и знаю эту кухню, куча геморроя и бумаг, вся сложность обусловлена нашим законодательством. Палатки держат даже люди с образованием ПТУ, а с точки зрения нервов работа таксиста не менее спокойна. А работа шахтера или лесоруба в разы сложнее. Но я рассматриваю проще/сложнее сточки зрения способностей, а не трудозатрат. Программист сможет держать палатку курей, а вот наоборот никак. Если принять вашу логику то работать кассиром сложнее, чем разработать торговый автомат, ну в каком-то смысле так. Но чтобы потом было проще сначала надо учиться.

Ответить
–1

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

Ответить
1

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

Ответить
0

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

Ответить
0

Да, вы бы его с телефона сами открыли прежде чем в люди постить.

Ответить
0

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

Ответить
0

Ну вот когда до улучшений дорастет тогда и обратится к специалистам)

Ответить
16

доказательство, что профессия дизайнера ещё долго не умрёт)

Ответить
14

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

Ответить
14

Это нормально что у меня сайт выглядит так?

Ответить
4

Ох, блядь... мои глаза

Ответить
2

Сайт отстой как и любой код сгенеренный muse

Ответить
1

А теперь зайди на него с мобильного, и радуйся

Ответить
0

Разворачиваются комментарии и исчезают видео и кнопка внизу)) Сайт дерьмо)) Не пользуйся мьюсом

Ответить
3

И опцию под какую CMS )))

Ответить

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

3

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

Ответить
1

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
60

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

Ответить
4

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

Ответить
–2

И чо и чо?

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

Ответить
10

Нет, ведь для этого есть CSS/JS фреймворки а-ля Bootstrap.

И для особо жаждущих есть даже визуальные редакторы, в которых можно это получить — о Боже (!) ничего не кодя.

Ответить
1

для тебя, дружочек, сделали эдоби мус на русском

Ответить
0

К сожалению это невозможно применить ни для какого типа верстки

Ответить
2

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

Ответить
3

Да. Как лесник, которого заменила бензопила.

Ответить
5

* лесоруб

Ответить
0

А она сама чтоль пилит?

Ответить
2

Это была шутка

Ответить
0

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

Ответить
40

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

Ответить
9

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

Ответить
21

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

У верстальщиков есть куча инструментов и знаний (всякие саасы препроцессеры, компараторы пиксельперфекта) (не только верстки, но и UX). Эффективность профессионального верстальщика в десятки раз выше чем эффективность человека, который делает вёрстку + JS и я не один такой. Всё зависит от времени и денег. Если у тебя есть время пилить вёрстку и JS - велкам. Но если всё поставлено на поток и требует высокого качества на выходе, то без проф верстальщика - никуда.

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

Ответить
11

Все именно так. Я не верстальщик (верстальщик это вообще матерное слово и такая позиция существует только в снг), но фронтендер с очень серьезным богажем скиллов по части UI/UX/интерактивности. И вот со мной в команде есть второй инженер (не считая джуна, который первую неделю работает), классический фронтендер. Вместе пилим серьезную аппу уже год.

В общем 99% всех стилей и 90% изначального кода в JSX реакта написано мною. У нас в быту постоянно ходят шутки что я css-nazi. Каждый раз когда он что-то где-то меняет (требования по изменениям логики, которые затрагивают JSX), заканчиваются "я там все визуально сломал, пофикси плз когда будет возможность". Он пытался писать стили несколько раз, каждый раз я с нуля их переписывал, ибо это даже словами не описать насколько огромная пропасть между "я у мамы классический программист" и "так бля подажжи ебана, тут глобальная переменная вставляется в миксин который юзается в другом миксине и все это юзается в глобальном компонентном css классе с BEM-неймингом и строгим соблюдением каскадности".

Ну и помимо всего этого еще есть сложные анимации (их их оптимизация), общая оптимизация рендеринга/картинок и подобных вещей, кастомная лабуда с SVG, всякие продвинутые css фишки и вагон других вещей, включая банальную css-магию, когда без модификации основной логики приложения можно делать всякие шикарные вещи используя 10-20 строчек css. А без знания как все это правильно готовить вместе (что требует огромного количества жопочасов практики и страданий), можно сделать какую-нибудь фуллскрин анимацию с использованием clip-path, поверх которой будут юзаться blend-modes и все это будет работать с 5 фпс на мощном компе (в то время как в умелых руках результат будет на 10/10).

Ответить
3

Вроде vc.ru отказался от практики размещения резюме :)
Впрочем, на одном женском форуме был (и есть) специальный раздел "Хвасталки" - надо и здесь такое попросить завести :)

Ответить
1

Можете в моем твиттере открыть ссылочку на codepen, мне уже давно незачем хвастаться на vc :) Как минимум потому-что тут в основном только представители СНГ компаний.

Ответить
2

Вы продолжаете делать это :)

Ответить
0

Красавец!

Ответить
0

Ох как же ты круто сказанул.

Ответить
2

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

Ответить
1

Значит Вы не работали над сложными проектами, где требуется качество и скорость. Вот скажите мне, зачем верстальщику знать паттерны проектирования и прочие алгоритмы и приемы оптимизации кода да и вообще кучу языков программирования и шаблонизации? И в тоже время, зачем программисту знать баги CSS браузеров и как сверстать так, чтобы эффективно утилизировать GPU? Чувствует как эти 2 области ну совсем не коррелируют. Что в одном, что в другом случае нужно потратить тысячи часов чтобы стать экспертом. Если Вы всё это умеете, поздравляю, Вы - фулстек разработчик с уклонов во фронтенд.

Ответить
0

"утилизировать Gpu"? Зачем верстальщикам его утилизировать? :)

Повторюсь, вы не фронтенд разработчик, если вы не разбираетесь в том, как правильно и эффективно верстать и создавать интерфейсы, которые бы работали быстро на разных устройствах. Если вы не понимаете базовые принципы: reflow, repaint и тд, то о чем можно говорить? Собеседование в любой нормальной IT компании вы не пройдёте как минимум. Мои слова подтвердят даже средние фронты, которые умеют делать приложения на реакте.

Ответить
1

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

Ответить
0

Можешь кинуть ссылки на свои интерфейсы или скриншот?

Ответить
1

чисто такой профессии как верстальщик вроде уже давно нет

Ответить
8

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

Ответить
1

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

Ответить

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

1

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

Ответить

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

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

0

Предлагайте замену, может кто-то заинтересуется и начнет изучать, вместо React.

Ответить

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

10

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

Ответить
–2

Он про фреимворк сказал, как мне показалось. А он достаточно мощен

Ответить
1

vanilla js -- это просто js

Ответить
–1

И даже плюсик кто-то поставил) Просто js это натив. vanilla js - фреймворк. https://habrahabr.ru/post/150594/

Ответить
0

Вы-то сами прочитали свой пост и комментарии?

Ответить
0

Конечно, это старый прикол)

Ответить
4

Тяжело когда не понимаешь что несёшь, да?)

Ответить

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

24

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

Ответить
15

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

Ответить
6

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

Ответить
2

Татьяныч с вами не согласен.
"Если говорить о профессии дизайнера, то наиболее продвинутые дизайнеры уже сегодня занимаются скриптованием, а не в фотошопе сидят. А через пять лет вопрос будет полностью закрыт - дизайнер станет скорее программистом, чем богемным распиздяем. Хотя я не сильно ошибусь, предположив, что дизайнеры через пять лет будут богемными распиздяйскими программистами."

Ответить
8

Все ждут каких-то революционных изменений, а _практическая_ ежедневная работа меняется очень и очень медленно.
Вот вчера в мелком салоне сотовой связи манагеры обещали руководству послать какой-то фотоотчет. Ну а несколько лет назад - просто почту бы скинули. А еще несколько лет назад - может факсанули бы рукописное. А еще до этого - продавали бы не сотовые телефоны, а пейджеры - и просто написали бы отчет руками, а директор наутро проверил.
 
Дизайнер же, как сидел и сводил очередные "Скидки! Акция" с очередным стоковым фотоизборажением, так и делает это - последние 20-25 лет, минимум. Если контора побогаче - то делает это с фото со спец. фотосессии - если контора сетевая -то дизайнера нет, есть промо материалы присылаемые из головного офиса, и тот же банальный листочек А4 на стекло окна/двери, где также точно в Ворде напечатано: "Только сегодня - Акция на ... "

Ответить
3

На сях ромб хуярить будут шоле?

Ответить
0

Пфф, как два байта.
=======
#include<stdio.h>

void main()
{
int n,i,j,k;
printf("enter number of rows");
scanf("%d",&n);
for(i=0;i<=n;i++)
{
for(j=0;j<=n-i;++j)
{printf(" "); }
for(k=0;k<=2*i;k++)
{ printf("*");}
printf("\n");
}

for(i=0;i<=n;i++)
{
for(j=n;j>=n-i;j--)
{printf(" ");}
for(k=2*(n-i);k>=0;k--)
{printf("*");}
printf("\n");
}}
=======

Ответить
0

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

Ответить
1

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

Ответить
0

Для прототипов думаю самое то

Ответить
1

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

Ответить
2

Илгар, "Вчера смотрел женский футбол, там показывали интересные комбинации, но до гола дело так и не дошло".
Вот правда - сколько можно "показывать возможности" - в основном сводящиеся к сверке примера с базой данных образцов, может быть пора уже показать реальную работу нейросети?
 
Поиск текста в базе данных - базовая операция, доступная уже лет 50, и вот последние 5-7 лет стал доступен поиск паттерна пикселов в базе данных изображений - но почему это внезапно называется "нейросеть", я не понимаю. В проекте статьи пошли в другую сторону - картинка сравнивается с паттерном шаблонов (очевидно), после чего подбирается подходящая комбинация элементов кода ..
 
Почему это нейросеть, а не switch / case ?
С таким же успехом это можно назвать "прикидывание кхм, пальца к носу", на основе базы из миллионов носов.

Ответить
11

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

Ответить
9

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

Ответить
6

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

Ответить
0

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

Ответить

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

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

7

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

Ответить

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

8

От дедлайна до дедлайна отмотал за мердж в мастер ветку.

Ответить

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

11

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

Ответить
4

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

Ответить
6

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

Ответить
25

Тогда недурно

Ответить
8

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

Ответить
7

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

Ответить
5

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

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

Ответить
3

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

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

Ответить
3

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

Ответить
0

Ну их надо уметь грамотно ставить на место.

Ответить
6

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

Ответить
0

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

Ответить
1

нет конечно, так не может быть. Есть adobe muse, типо верстает, так там классы .class182398123_!231231 такие... но никак не такие логичные как ту... это фейк

Ответить
6

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

Ответить
3

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

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

Ответить
10

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

Ответить
5

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

Ответить
2

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

Ответить
4

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

Ответить
1

робот может делать эту же работу в 5 раз быстрее и дешевле...

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

Ответить
1

Нет, не производственную линию. Это как пример. Я в целом о тенденциях. Это всего лишь первые пробы. Уже сейчас верстальшики автоматизировали огромный паст своей работы, которую еще 3-5 лет назад делали руками. (Точнее для них это сделали программисты, слушая потребности верстальщиков). Лет через 10, теже программисты упростят работу дизайнерам. Верстка уйдет как класс, как этап разработки. Тот же muse от adobe, уже сильно облегчил работу мне, как дизайнеру. 70-80% типовых страниц я могу запустить в продакшн без участия верстальшика. Пускай там код говно, но для теста этого хватает выше крыши. Представьте, настанет время, когда нейронная сеть научится анализировать информацию из интернета сама. Скармливаешь ей например дизайн страницы, указываешь цели для этой задачи , а она ищет сайты, где подобный дизайн уже реализован, подключается к базам гугл аналитикс, анализирует поведенчиский фактор для этих страниц, находит наилучшие варианты для заданной вами цели, и "собирает" вам идиальную с технической точки зрения страницу, отвечающую вашим целям и максимальго подходящим дизайном. Вам останется только... ничего.

Ответить
1

Это все волшебно, но Вы про заводы и рабочих ведь говорили. Прошу продолжить на эту тему - например про автопром - и учесть что стоимость той самой "замены" рабочих на роботизированную линию - предусматривает серьезную производственную программу, ну скажем хотя бы 500 000 автомобилей за несколько лет. Далее, для такой линии требуется поступление либо производство полного цикла, либо гарантия поступления всех компонентов с минимальными допусками (погрешностями в размерах), краски/лаки строго определенного качества, и так далее. Хотите поменять какую-то деталь в сборке? Перенастраивайте робота :) Пришла партия, допустим, дверей, с небольшим отклонением? Робот ее не возьмет :)
 
Разница между заводом с роботизированными линиями, и заводом с полуручной сборкой - миллиард (и больше) долларов.
 
Т.е. это вопрос не принципиальный или модернисткий, а чисто экономический - надо делать 20-30 000 авто в год - делаем полуручную сборку, есть четкое понимание что завод будет 5 лет гнать одну модель на "жадные" рынки, ставим роботизированную линию - она 100% окупится.

Что там и как будет подспорьем в нажатии на кнопочки и возюканьем мышкой - это другой разговор.

Ответить
1

Видимо, Вы не слышали о гибких производственных системах
https://youtu.be/2qc0-yTXBts

Ответить
0

а) нет, не слышал
б) данная система собирает ролики (их?) 3-х разных модификаций - для удобства они обозначены разными цветами движущейся части.
в) чтобы перенастроить эту линию, например, на сборку 5-ти прямоугольных деталей в одну (скажем, из Лего), придется все равно ее перестраивать полностью ... тогда как, добавление или удаление ролика из номенклатуры - да, наверное сделать проше.
То есть, не убедили :)

Ответить
3

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

Ответить
3

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

Ответить

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

2

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

Ответить
2

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

Ответить
1

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

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

Ответить
1

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

Ответить
0

Фраза из оригинала:

"All the code is prepared on Github and FloydHub in Jupyter notebooks. All the FloydHub notebooks are inside the floydhub directory and the local equivalents are under local."

В общем действительно ноутбуки. Только имеют ввиду они под этим - виртуальные машины.

Они предоставляют свои вычислительные мощности для работы нейросети. И на GitHub лежит код. А "ноутбуки" на сервисе FloydHub.

Ответить
0

Честно, в первый раз слышу, чтобы виртуалки называли именно ноутбуками. Обычно же вроде VM, да? Благодарю за пояснения.

Ответить
1

```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/
В пайтоне используется, чтобы красиво показывать код другим людям, с визуализацией и пошаговой работой.

Ответить

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

1

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

Ответить
1

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

Ответить
1

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

Ответить
1

круто

Ответить
1

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

Ответить
1

еще один thegrid

Ответить
1

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

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

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

Ответить
1

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

Ответить
–17

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

Ответить
3

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

Ответить
0

бот делает адаптивные одностраничные сайты бесплатно.

Ответить
0

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

Ответить
0

по примерам которые сделала нейронка

Ответить
0

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

Ответить
0

это бот. там 3d графика и речь. специфика такая.
а сайты адаптивные, да.
и сайт работает со смартфона. просто пишет что нужно зайти с ПК. так что всё адаптивно.

Ответить

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

1

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

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

Ответить