SketchCode: переход от идеи к HTML за 5 секунд

Эшвин Кумар ранее был соучредителем Sway Finance, стартапа при поддержке Y Combinator, который использовал машинное обучение для автоматизации бухгалтерского учета. В Insight он разработал модель, которая позволяет пользователям создавать рабочие HTML-сайты из нарисованных от руки каркасов, что значительно ускоряет процесс проектирования. Сейчас он специалист по глубокому обучению в Mythic.

Подайте заявку сейчас, чтобы присоединиться к следующей группе исследователей и инженеров, создающих передовые продукты прикладного искусственного интеллекта. Крайний срок для следующей стипендии Insight AI Fellowship (как в Кремниевой долине, так и в Нью-Йорке) - 26 марта.

Создание интуитивно понятного и интересного интерфейса для пользователей - важная цель для компаний всех размеров, и это процесс, основанный на быстрых циклах прототипирования, проектирования и пользовательского тестирования. У крупных корпораций, таких как Facebook, есть возможность выделять целые команды на процесс проектирования, который может занять несколько недель и вовлечь множество заинтересованных сторон; у малых предприятий таких ресурсов нет, и в результате их пользовательские интерфейсы могут пострадать.

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

Рабочий процесс проектирования сегодня

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

  • Менеджеры по продукту проводят исследования пользователей, чтобы составить список спецификаций.
  • Дизайнеры принимают эти требования и исследуют прототипы с низкой точностью, в конечном итоге создавая макеты с высокой точностью.
  • Инженеры воплощают эти проекты в коде и, наконец, отправляют продукт пользователям.

Продолжительность цикла разработки может быстро превратиться в узкое место, и такие компании, как Airbnb, начали использовать машинное обучение, чтобы сделать этот процесс более эффективным.

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

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

Фактически, приведенный выше пример представляет собой реальный веб-сайт, созданный на основе моей модели на изображении тестового набора! Вы можете ознакомиться с кодом на моей странице Github.

Вдохновляясь субтитрами к изображениям

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

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

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

Получение правильного набора данных

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

Я начал с набора данных с открытым исходным кодом из статьи pix2code, который состоит из 1750 снимков экрана синтетически сгенерированных веб-сайтов и их соответствующего исходного кода.

Это был отличный набор данных для начала с парой интересных моментов:

  • Каждый сгенерированный веб-сайт в наборе данных состоит из комбинации всего лишь нескольких простых элементов Bootstrap, таких как кнопки, текстовые поля и блоки div. Хотя это означает, что моя модель будет ограничена этими несколькими элементами в качестве своего словаря - элементов, из которых она может выбирать для создания веб-сайтов - подход должен легко обобщаться на более широкий словарь элементов.
  • Исходный код для каждого образца состоит из токенов предметно-ориентированного языка (DSL), которые авторы статьи создали для своей задачи. Каждый токен соответствует фрагменту HTML и CSS, а компилятор используется для перевода из DSL в рабочий HTML-код.

Как сделать изображения нарисованными от руки

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

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

  • Изменен радиус границы элементов на странице, чтобы изогнуть углы кнопок и div.
  • Отрегулирована толщина границ, чтобы имитировать нарисованные эскизы, и добавлены тени.
  • Изменен шрифт на рукописный

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

Использование архитектуры модели с субтитрами изображений

Теперь, когда у меня были готовы данные, я наконец смог ввести их в модель!

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

  • Модель компьютерного зрения, которая использует сверточную нейронную сеть (CNN) для извлечения функций изображения из исходных изображений.
  • Языковая модель, состоящая из Gated Recurrent Unit (GRU), который кодирует последовательности токенов исходного кода.
  • Модель декодера (также ГРУ), которая принимает выходные данные двух предыдущих шагов в качестве входных данных и предсказывает следующий токен в последовательности.

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

Во время вывода, когда модели ставится задача сгенерировать код с нуля, процесс немного отличается. Изображение по-прежнему обрабатывается через сеть CNN, но текстовый процесс заполняется только начальной последовательностью. На каждом этапе прогноз модели для следующего токена в последовательности добавляется к текущей входной последовательности и передается в модель как новая входная последовательность. Это повторяется до тех пор, пока модель не спрогнозирует токен ‹END› или пока процесс не достигнет предопределенного предела количества токенов на документ.

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

Оценка модели с помощью показателя BLEU

Я решил использовать BLEU score для оценки модели. Это общий показатель, используемый в задачах машинного перевода, который стремится измерить, насколько близко сгенерированный машиной текст похож на то, что создал бы человек при том же вводе.

По сути, BLEU сравнивает n-граммовые последовательности как сгенерированного текста, так и справочного текста, чтобы создать измененную форму точности. Он очень подходит для этого проекта, поскольку учитывает фактические элементы в сгенерированном HTML, а также их расположение по отношению друг к другу.

И самое лучшее - я действительно мог видеть баллы BLEU, изучая сгенерированные веб-сайты!

Идеальная оценка BLEU 1,0 будет иметь правильные элементы в правильных местах с учетом исходного изображения, в то время как более низкая оценка будет предсказывать неправильные элементы и / или помещать их в неправильные места относительно друг друга. Последняя модель смогла получить оценку BLEU 0,76 на тестовой выборке.

Бонус - индивидуальный стиль

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

Отделение стиля от процесса создания модели дает несколько больших преимуществ для использования модели:

  • Интерфейсный инженер, который хочет включить модель SketchCode в продукт своей компании, может использовать модель как есть и просто изменить один файл CSS в соответствии с руководством по стилю своей компании.
  • Встроенная масштабируемость - с одним исходным изображением результаты модели могут быть мгновенно скомпилированы в 5, 10 или 50 различных предопределенных стилей, поэтому пользователи могут визуализировать несколько версий того, как может выглядеть их веб-сайт, и перемещаться по этим веб-сайтам в браузер

Заключение и дальнейшие направления

Используя исследования в области создания подписей к изображениям, SketchCode может брать нарисованные от руки макеты веб-сайтов и преобразовывать их в рабочие веб-сайты HTML за несколько секунд.

Модель имеет некоторые ограничения, которые информируют о возможных следующих шагах:

  • Поскольку модель была обучена на словарном запасе всего из 16 элементов, она не может предсказывать токены за пределами того, что она видит в данных. Следующим шагом может быть создание дополнительных примеров веб-сайтов с использованием большего количества элементов, таких как изображения, раскрывающиеся меню и формы - Компоненты Bootstrap - отличное место для начала.
  • Существующие производственные веб-сайты сильно различаются. Отличный способ создать набор обучающих данных, более отражающий этот вариант, - это очистить реальные веб-сайты, захватив их код HTML / CSS, а также скриншоты содержимого сайта.
  • Рисунки также имеют множество вариаций, которые не удается уловить при помощи трюка с модификацией CSS. Отличным способом создания большего количества вариаций в данных рисованного эскиза может быть использование Generative Adversarial Network для создания реалистично выглядящих нарисованных изображений веб-сайтов.

Вы можете найти код, использованный для этого проекта, на моей странице GitHub здесь, и я с нетерпением жду дальнейшего развития проекта!

Хотите узнать о прикладном искусственном интеллекте у ведущих специалистов Кремниевой долины или Нью-Йорка? Узнайте больше о программе Искусственный интеллект.

Вы - компания, работающая в области искусственного интеллекта, и хотели бы принять участие в программе Insight AI Fellows Program? Не стесняйтесь связаться.

Спасибо Эммануэлю Амейсену, Бену Регнеру и Джереми Карновски.