Нейронная сеть, которая верстает сайты по картинке Статьи редакции
Прошёл почти год с того момента, как на GitHub опубликовали алгоритм pix2code. И вот ребята из FloydHub на его основе создали нейронную сеть для вёрстки страниц, которую уже можно запустить самому.
Работа алгоритма делится на три этапа:
Чтобы получить такой результат, разработчики скармливали алгоритму скриншоты и присваивали определённые HTML-теги, в итоге получился датасет, с помощью которого можно генерировать шаблонные сайты. Ниже будут примеры.
Алгоритм учится предсказывать соответствующие HTML-теги, последовательно «изучая» изображение на входе. Когда алгоритм предсказывает следующий тег разметки, он получает скриншот и все «правильные» теги HTML-разметки для этого элемента.
Примеры:
Везде выше можно посмотреть пример исходного кода, сгенерированного нейронной сетью, а вот оригинальный сайт, скриншоты которого скармливали алгоритму.
Если вы вдруг фронтенд-инженер (я нет), поделитесь в комментариях: как вам код, сгенерированный алгоритмом?
У меня горит пукан, когда говорят, что верстальщикам конец. Я сам не верстальщик, но перед верстальщиками голову предклоняю. Хороших верстальщиков днем с огнем не сыщешь. Всё время попадаются какие-то мудаки, которые кроме лендосов ничего не делали. Как только дело касается что-то сложнее тупого вывода картинок, т.е. появляются формы таблицы и дропдауны, фильтрации, да ещё это всё надо посадить на реакт, то пиздец голову в жопу засовывают или делают месяцами.
Мне кажется верстальщикам может и правда конец, но front-end инженеры будут нужны еще очень долго и их всегда не хватает.
Уважаемый, вот я занимаю фронтендом, делаю большие приложения на JS. Поверь мне, я знаю всё про JS, но когда дело касается вёрстки, то я становлюсь беспомощным. Нет, я конечно могу кое-что сделать, но это будет не промышленный уровень, понимаешь о чем я?
У верстальщиков есть куча инструментов и знаний (всякие саасы препроцессеры, компараторы пиксельперфекта) (не только верстки, но и UX). Эффективность профессионального верстальщика в десятки раз выше чем эффективность человека, который делает вёрстку + JS и я не один такой. Всё зависит от времени и денег. Если у тебя есть время пилить вёрстку и JS - велкам. Но если всё поставлено на поток и требует высокого качества на выходе, то без проф верстальщика - никуда.
Ты можешь задрачивать верстку кнопки целый день и она потом никуда не интегрируется и будет бажной, или дать человеку, который сделает её за 30 минут и она будет работать везде.
Все именно так. Я не верстальщик (верстальщик это вообще матерное слово и такая позиция существует только в снг), но фронтендер с очень серьезным богажем скиллов по части UI/UX/интерактивности. И вот со мной в команде есть второй инженер (не считая джуна, который первую неделю работает), классический фронтендер. Вместе пилим серьезную аппу уже год.
В общем 99% всех стилей и 90% изначального кода в JSX реакта написано мною. У нас в быту постоянно ходят шутки что я css-nazi. Каждый раз когда он что-то где-то меняет (требования по изменениям логики, которые затрагивают JSX), заканчиваются "я там все визуально сломал, пофикси плз когда будет возможность". Он пытался писать стили несколько раз, каждый раз я с нуля их переписывал, ибо это даже словами не описать насколько огромная пропасть между "я у мамы классический программист" и "так бля подажжи ебана, тут глобальная переменная вставляется в миксин который юзается в другом миксине и все это юзается в глобальном компонентном css классе с BEM-неймингом и строгим соблюдением каскадности".
Ну и помимо всего этого еще есть сложные анимации (их их оптимизация), общая оптимизация рендеринга/картинок и подобных вещей, кастомная лабуда с SVG, всякие продвинутые css фишки и вагон других вещей, включая банальную css-магию, когда без модификации основной логики приложения можно делать всякие шикарные вещи используя 10-20 строчек css. А без знания как все это правильно готовить вместе (что требует огромного количества жопочасов практики и страданий), можно сделать какую-нибудь фуллскрин анимацию с использованием clip-path, поверх которой будут юзаться blend-modes и все это будет работать с 5 фпс на мощном компе (в то время как в умелых руках результат будет на 10/10).
Вроде vc.ru отказался от практики размещения резюме :)
Впрочем, на одном женском форуме был (и есть) специальный раздел "Хвасталки" - надо и здесь такое попросить завести :)
Можете в моем твиттере открыть ссылочку на codepen, мне уже давно незачем хвастаться на vc :) Как минимум потому-что тут в основном только представители СНГ компаний.
Вы продолжаете делать это :)
Красавец!
Ох как же ты круто сказанул.
Значит вы херовый фронтендер, извините за грубость, если беспомощны перед вёрсткой и перед препроцессорами.
Значит Вы не работали над сложными проектами, где требуется качество и скорость. Вот скажите мне, зачем верстальщику знать паттерны проектирования и прочие алгоритмы и приемы оптимизации кода да и вообще кучу языков программирования и шаблонизации? И в тоже время, зачем программисту знать баги CSS браузеров и как сверстать так, чтобы эффективно утилизировать GPU? Чувствует как эти 2 области ну совсем не коррелируют. Что в одном, что в другом случае нужно потратить тысячи часов чтобы стать экспертом. Если Вы всё это умеете, поздравляю, Вы - фулстек разработчик с уклонов во фронтенд.
"утилизировать Gpu"? Зачем верстальщикам его утилизировать? :)
Повторюсь, вы не фронтенд разработчик, если вы не разбираетесь в том, как правильно и эффективно верстать и создавать интерфейсы, которые бы работали быстро на разных устройствах. Если вы не понимаете базовые принципы: reflow, repaint и тд, то о чем можно говорить? Собеседование в любой нормальной IT компании вы не пройдёте как минимум. Мои слова подтвердят даже средние фронты, которые умеют делать приложения на реакте.
чувак ты просто ленивый. пиксельперфект никому не нужен. препроцессорами можно овладть за неделю. да и не в них дело. надо просто почитать как работает верстка и бразуер. из моей практики я 20% может верстаю, а потом 80% пишу для всего этого богатства JS
Можешь кинуть ссылки на свои интерфейсы или скриншот?
чисто такой профессии как верстальщик вроде уже давно нет