Скриншот-задание и выдача нейросети pix2code на собственном языке, который компилятор потом транслирует в код для нужной платформы (Android, iOS)
Новая программа pix2code (научная статья) призвана облегчить работу программистов, которые занимаются муторным делом — кодированием клиентского GUI.
Дизайнер обычно создаёт макеты интерфейса, а программист должен написать код для реализации этого дизайна. Такая работа отнимает драгоценное время, которое разработчик может потратить на более интересные и творческие задачи, то есть на реализацию настоящих функций и логики программы, а не GUI. Скоро генерацию кода можно будет переложить на плечи программы. Игрушечная демонстрация будущих возможностей машинного обучения — проект pix2code, который уже вышел на 1-е место в списке самых горячих репозиториев на GitHub, хотя автор ещё даже не выложил исходный код и наборы данных для обучения нейросети! Такой огромный интерес к этой теме.
Кодировать GUI скучно. Что ещё больше усугубляет ситуацию, это разные языки программирования на разных платформах. То есть нужно писать отдельный код для Android, отдельный для iOS, если программа должна работать нативно. Это отнимает ещё больше времени и заставляет выполнять однотипные, скучные задачи. Точнее, так было раньше. Программа pix2code генерирует код GUI для трёх основных платформ — Andriod, iOS и кроссплатформенный HTML/CSS — с точностью 77% (точность определяется на встроенном языке программы — сравнением сгенерированного кода с целевым/ожидаемым кодом для каждой платформы).
Автор программы Тони Белтрамелли (Tony Beltramelli) из датского стартапа UIzard Technologies называет это демонстрацией концепции. Он считает, что при масштабировании модель улучшит точность кодирования и потенциально способна избавить людей от необходимости вручную кодировать GUI.
Программа pix2code построена на свёрточных и рекуррентных нейронных сетях. Обучение на Nvidia Tesla K80 GPU заняло чуть менее пяти часов — за это время система оптимизировала параметров для одного набора данных. Так что если вы хотите обучить её для трёх платформ, потребуется около 15-ти часов.
Модель способна генерировать код, принимая на входе только значения пикселей из одного скриншота. Другими словами, для нейросети не требуется специальный конвейер для выделения признаков и предварительной обработки входных данных.
Генерацию компьютерного кода по скриншоту можно сравнить с генерацией текстового описания по фотографии. Соответственно, архитектура модели pix2code состоит из трёх частей: 1) модуль компьютерного зрения для распознавания картинки, представленных там объектов, их расположения, формы и цвета (кнопки, подписи, контейнеры элементов); 2) языковой модуль для понимания текста (в данном случае, языка программирования) и генерации синтаксически и семантически корректных примеров; 3) использование двух предыдущих моделей для генерации текстовых описаний (кода) для распознанных объектов (элементов GUI).
Автор обращает внимание, что нейросеть можно обучить на другом наборе данных — и тогда она начнёт генерировать код на других языках для других платформ. Сам автор не планирует это делать, потому что расценивает pix2code как своеобразную игрушку, которая демонстрирует часть технологий, над которыми работает его стартап. Однако любой желающий сможет форкнуть проект и создать реализацию для других языков/платформ.
В научной работе Тони Белтрамелли написал, что опубликует наборы данных для обучения нейросети в открытом доступе в репозитории на GitHub. Репозиторий уже создан. Там в разделе FAQ автор уточняет, что выложит наборы данных после публикации (или отказа в публикации) его статьи на конференции NIPS 2017. Уведомление от организаторов конференции должно прийти в начале сентября, так что наборы данных появятся в репозитории в то же время. Там будут скриншоты GUI, соответствующий код на языке программы и выдача компилятора для трёх основных платформ.
Относительно исходного кода программы — его автор публиковать не обещал, но учитывая ошеломительный интерес к его разработке он принял решение открыть и его тоже. Это будет сделано одновременно с публикацией наборов данных.
Научная статья опубликована 22 мая 2017 года на сайте препринтов arXiv.org (arXiv:1705.07962).
Комментарии (55)
Delics
30.05.2017 22:39+9Пусть такое техническое задание в код переведет:
(реальное «техническое задание» от одного заказчика)
ThunderCat
30.05.2017 23:37Дизайнер обычно создаёт макеты интерфейса
, вот дизайнер и слепит из такого «видения заказчика» скетч, а из него уже сгенерить вполне себе интерфейс. Понятно что с этой хрени и дизайнер мозг вывихнет без двухчасовой дополнительной беседы с заказчиком. А так — да, тема знакомая )
scg
30.05.2017 23:38+6Вы меня простите, но рисовать формы удобнее всего не в фотошопе, а в редакторе форм, что уже дает нам код просто так — безо всяких нейросетей. А во-вторых, на мой взгляд, самым тяжелым в программировании форм является не рисование элементов, а программирование обработки событий, взаимодействие элементов, представление данных в них, и загрузка-выгрузка этих данных.
ThunderCat
31.05.2017 00:00+1безусловно это просто аафигенно верный подход, вот только дизайнеры не всегда владеют редакторами форм, а программисты не всегда умеют создать нормальный интерфейс, я бы сказал что в подавляющем большинстве случаев дело обстоит подобным образом. И тут — бум! Из скетча прямо в редактор форм импортируется готовый код. Переделывать с макета в форму не надо, экономится время на муторную нудную работу — имхо чистый профит.
scg
31.05.2017 08:10+2GUI дизайнер не владеет редактором форм? В шею гнать такого дизайнера.
ThunderCat
31.05.2017 10:20ну почему сразу гуй, просто дизайнер, например админку сделать для сайта. Конечно пока оно наверняка кроме кнопок/галочек нифига не распознает, но тут уже дело техники, возможно же допилить что бы и градиенты стандартные определяло, и фотки от текста отличало, и блоки примерно вычисляло, кароче этакий верстальщик ин зе бокс. Мечтать же не вредно ))
Alex_ME
31.05.2017 16:02-1Одно дело раскидать контролы по форме в четко заданных позициях, как в каком-нибудь Windows Forms (с Delphi не знаком), но другое дело — сделать так, чтобы эту форму можно было ресайзить или (если мобильное или веб) — подходило под разные размеры\разрешения.
alex4321
31.05.2017 16:22+1align-ми и их windows form-ми аналогами они пользователься не смогут?
Alex_ME
31.05.2017 19:01Ну в WinForms максимально убогие anchor'ы, либо я что-то не знаю. В WPF все куда лучше, да, но там уже XAML писать, сложнее. Но опять-таки, это полностью проблему не решит, если надо прям совсем адаптивный интерфейс, где и блоки местами могут меняться, что-то скрывается, показывается и т.п.
AntonSor
31.05.2017 00:37Ну все, теперь ещё одна человеческая задача освоена искусственным интеллектом. Потом и за описание алгоритмической части примется.
AntonSor
31.05.2017 00:38+1И, как логическое завершение, нейросеть, которая пишет код другой нейросети.
GreatKoshak
31.05.2017 03:40+4Ну не нагнетайте Вы, блин, и так сыкатна!
UJIb9I4AnJIbIrUH
31.05.2017 17:13Следующий шаг — генератор кода видеоигры по геймплейному видео.
Goodkat
31.05.2017 17:28По геймплейному видео реальной игры — это клон по-быстрому сделать, чтобы бабла на хайпе срубить?
Следующий шаг — это создание кода и графики игры по текстовому описанию.
Типа такогоЗдраствуйте. Я, Кирилл. Хотел бы чтобы вы сделали игру, 3Д-экшон суть такова… Пользователь может играть лесными эльфами, охраной дворца и злодеем. И если пользователь играет эльфами то эльфы в лесу, домики деревяные набигают солдаты дворца и злодеи. Можно грабить корованы… И эльфу раз лесные то сделать так что там густой лес… А движок можно поставить так что вдали деревья картинкой, когда подходиш они преобразовываются в 3-хмерные деревья[1]. Можно покупать и т.п. возможности как в Daggerfall. И враги 3-хмерные тоже, и труп тоже 3д. Можно прыгать и т.п. Если играть за охрану дворца то надо слушаться командира, и защищать дворец от злого (имя я не придумал) и шпионов, партизанов эльфов, и ходит на набеги на когото из этих (эльфов, злого...). Ну а если за злого… то значит шпионы или партизаны эльфов иногда нападают, пользователь сам себе командир может делать что сам захочет прикажет своим войскам с ним самим напасть на дворец и пойдет в атаку. Всего в игре 4 зоны. Т.е. карта и на ней есть 4 зоны, 1 — зона людей (нейтрал), 2- зона императора (где дворец), 3-зона эльфов, 4 — зона злого… (в горах, там есть старый форт...)
Так же чтобы в игре могли не только убить но и отрубить руку и если пользователя не вылечат то он умрет, так же выколоть глаз но пользователь может не умереть а просто пол экрана не видеть, или достать или купить протез, если ногу тоже либо умреш либо будеш ползать либо на коляске котаться, или самое хорошее… поставить протез. Сохранятся можно...
Darth_Biomech
01.06.2017 16:17Такая «нейросеть» это уже полноценный разумный ИИ, поскольку требуется креативная интерпретация.
Here_and_Now
31.05.2017 17:54Уже 12 дней новости
https://futurism.com/googles-new-ai-is-better-at-creating-ai-than-the-companys-engineers/
v_m_smith
31.05.2017 07:59+4Год спустя: Нейросеть генерирует веб-сервис по BRD
Еще год спустя: Нейросеть генерирует транзакции по сигналам нейроинтерфейса
Еще год спустя: Нейросеть печатает эмбриона по генам партнеровscg
31.05.2017 08:14+1Или так:
Нейросеть генерирует сайт с запрещенным контентом.
Нейросеть обходит блокировки РосКомНадзора.
Нейросеть ворует фильм за день до премьеры, взламывает DRM и выкладывает его на торренты.
А сажать то и некого :)iliabvf
31.05.2017 09:30Ну не будьте таким наивным, нейросеть это всего лишь набор файлов запущенных на каком-то сервере, какого-то человека…
Am0ralist
31.05.2017 11:17+2ОК
[fixed] распределенная нейросеть, распространяющаяся по компьютерам пользователей с помощью вирусов собственного написания [/fixed]iliabvf
31.05.2017 13:57Даже распространяющаяся по компьютерам бот-сеть или тот же банальный вирус всегда принадлежит создатели и распростанителям. Тоже самое можно сказать и о роботах, биологических вирусах, наномашинах…
IvanTamerlan
31.05.2017 16:19Разработчику может принадлежать только первая итерация его ИИ. Если она будет в процессе пересоздавать себя 100500 раз, основываясь на множестве внешних данных, в том числе слияние ИИ от разных разработчиков, жить в распределенной сети (типа торрента/блокчейна), то итоговый результат уже отличаться от первоначального. Кто будет владельцем сего рапределенного чуда?
А про биологические вирусы… В вечной мерзлоте нашли доисторический вирус, который появился раньше человека. Вопрос: кому он принадлежит? Ваше утверждение — «всегда принадлежит создател[?] и распространителям»
Я, надеюсь, мы будем обсуждать в качестве правовладельцев только людей?
Vjatcheslav3345
31.05.2017 12:46Техзадание на печать младенца от партнёров выглядело так..
Техзадание...
leorush
31.05.2017 09:23+1Правительство заменили нейросетью :D
ElectroGuard
31.05.2017 09:36+1Это был бы настоящий прорыв! :)
Konachan700
31.05.2017 10:20+1Это был бы фейл. Вон, MS своего бота не успел запустить, как его тут же научили расизму, матам и прочим прелестям суровой жизни. Нужен специально обученный человек без недостатков, чтобы учить нейросеть, но где его взять, если все люди имеют своих тараканов в голове?
justK
31.05.2017 12:04+2[зануда]
Если мой склероз меня не подводит, его там не научили, а просто заставили повторять фразы через штатный функционал
[/зануда]
yarric
31.05.2017 10:59Главное с критерием результативности работы не промахнуться, а то соптимизирует половину человеков куда-нибудь.
ElectroGuard
31.05.2017 11:03antstar
31.05.2017 10:20+2Был (да и есть) такой язык UML. Суть его в том, что надо рисовать диаграммы классов, деятельности, отношений и проч, и проч, т.е описать продукт в картинках. После успешного «рисования» оно может генерить код на желаемом языке, и вроде как это сильно облегчает жизнь Проблема в том, что для того, чтобы разобраться в сгенерированном коде, надо столько же времени, сколько ушло-бы на написание кода с нуля.
В статье описано научное исследование — и это нормально. На практике при достаточно сложном проекте будет та же история, что и в UML. И пр этом не забываем про оптимизацию, которую все равно придется делать.Kaiser
31.05.2017 17:33А вот и нет. Да, есть проблема, что не всегда генерируется то, что на картинке. Есть вероятность, что сгенерированный код не соберется. Но нет оснований полагать, что LSTM выдаст сложный код.
Лапшу из кода генераторы получают из-за эвристик. Алгоритм разбирает входные данные по кирпичикам и переводит их в код. Это повышает сложность генерируемого кода. Здесь же генератор по дескриптору изображения (выход CNN) делает код как это было обучающей выборке. То есть, похожий на человеческий.
Если дать картинку совершенно непохожую ни на что из обучающей выборки, то скорее все сломается и получится бред, а не код. Но я не вижу сценария, чтобы код получился «нечитаемой лапшой».
vlad1988_1
31.05.2017 12:13А распознает ли нейросеть скрытые элементы GUI, ведь иногда логотип копании в программе является и ссылкой на сайт компании, а иногода и не является… Иногда пасхальные яйца скрыты в GUI...
iVoene
31.05.2017 16:19А еще она угадает то о чем не было сообщено, но что подразумевается, и что является значением по умолчанию в вашем узком кругу.
А также предугадает какой цвет захочет заказчик завтра основываясь по текущему скриншоту.vlad1988_1
31.05.2017 17:27Боюсь в том и различие между человеком и ИИ (расшифровать по контексту), что я не поставл тег сарказм, но все его поняли.
edogs
31.05.2017 17:49Бесценная вещь для того что бы
стырить дизайнвосстановить верстку если исходники были утеряны.
Но если исходники живы, то непонятно зачем это.
Никто не делает дизайн в один слой в фотошопе, тем более такой простой.
Диз делается по любому в чем-нибудь типа axure, откуда он однозначно может транслироваться куда надо.
TheOleg
01.06.2017 05:16Что-то мне кажется, что помимо дефолтных кнопочек бутстрапа он и не сверстает ничего. И то придётся переделывать так, что проще бы было самому с нуля написать.
ElectroGuard
Берем Delphi, и получаем 100% точность из макета (формы) для основных платформ. Если Унигуй — то и для веба.
ThunderCat
давайте не путать распознавание с интерпретацией. Ключевое слово — скриншот.
AllexIn
Точно. Берем программиста и получаем 100% точность.
Вы о чем вообще?
ElectroGuard
Зачем программист, что бы расставить кнопки на макете? Дизайнер вполне справится. Зачем это распознавать вообще? А Делфи из формы для всех платформ сама код сделает. Нативный.
kogemrka
Действительно, придумали хрень какую-то. Не понимаю я этих ресёрчеров, они что, про современные технологии не в курсе?
Зачем распознавать печатный текст? Можно просто посадить человека за текстовой редактор и заставить его перепечатать.
Зачем нейросетками раскрашивать ч/б изображения? Можно просто выдать художнику фотошоп.
Зачем разрабатывать автономные автомобили? GPS-навигатор в телефоне и так прекрасно сообщит, куда ехать.
Распознаванием рукописного текста тем более заниматься бесмысленно — того и гляди, придёт какой-нибудь комментатор на гиктаймс и покажет каляку, которые и человек-то не распознает — а это, как известно, окончательный аргумент о ненужности и неактуальности исследовательской работы.
ElectroGuard
Всё это понятно и круто. Но смысл всего этого? Дизайнеру всё равно нужно рисовать макет. Хоть распознавать его позже хоть нет. В случае Delphi сразу получаем готовый 100% код под все платформы.
Djaler
В вашем мире дизайнер делает макет в конструкторе форм Делфи? И да, 2017 год на дворе, какой Делфи, ну ё-моё.
GlukKazan
Я один раз засадил за Delphi не то чтобы дизайнеров, а кадровиков. Сидели и рисовали под себя формочки, как им нравилось. Без всякого кода конечно. Показал как раскидывать компоненты и сохранять. Потом я брал текстовые dfm-ки, перегонял их в свой DSL и прикручивал к работающей системе. Всё это с минимумом трудозатрат. Формочки были совершенно вырвиглазные, на мой взгляд, но кадровикам нравились до писка.
ElectroGuard
О чём, собственно, и речь. Порог входа около нуля. На выходе получаем (по дизайну) готовое решение. Без распознавания и прочего. Нет — я не спорю, что с точки зрения науки чувак делает реально крутые вещи. Но с точки зрения изготовления ПО — это просто промежуточные, излишние, звенья.
И что не так с Делфи в 2017-м году? Отличное мульти-платформенное средство. Активно развивает нативный код под все платформы. Под веб отличные библиотеки пишут.
Что бы не повторяться, вот что (в качестве интерфейса) может получатся на выходе Делфи:
Delphi + UniGUI + WebGL
Пусть нейронка это распознает )
Pakos
5й, 7й или более новый. Некоторый софт переписать стоит столько ресурсов что за это никто не берётся. И чем крупнее предприятие, тем больше разрыв между необходимыми тратами и наличными ресурсами.
kogemrka
Я понял, вас видимо смутило, что результаты этой исследовательской работы автор этой исследовательской работы использует в продукте, который пытается продавать.
Но штука в том, что нужность продукта и нужность исследования — это два совершенно перпендикулярных друг другу вопроса.
LoadRunner
Delics
Поддержу выступление выше.
От статьи есть впечатление, что автор не слышал про QT (ну или Delphi).