Эта статья воспроизводится с разрешения AI New Media Qubit (идентификатор публичной учетной записи: qbitai). Пожалуйста, свяжитесь с источником для перепечатки.
Насколько сложно написать веб-страницу? В большинстве компаний эта работа делится на три этапа:
После того, как менеджер продукта завершит задачу исследования пользователей, он перечисляет ряд технических требований;
Дизайнеры разрабатывают прототипы с низкой точностью в соответствии с этими требованиями и постепенно модифицируют их, чтобы получить прототипы с высокой точностью и чертежи дизайна пользовательского интерфейса;
Инженеры реализуют эти чертежи в виде кода, который в конечном итоге становится продуктом, который используют пользователи.
С таким количеством ссылок небольшая проблема в любом месте удлинит цикл разработки. Поэтому многие компании, например Airbnb, начали использовать машинное обучение для повышения эффективности этого процесса.
△ Внутренние инструменты искусственного интеллекта Airbnb: от рисунков до кодов за один шаг
Выглядит здорово, но Airbnb еще не раскрыла подробности сквозного обучения этой модели и того, какой вклад в модель вносят созданные вручную элементы изображения. Это собственный патент компании на решение с закрытым исходным кодом, и его нельзя разглашать.
К счастью, программист по имени Эшвин Кумар создал версию с открытым исходным кодом, чтобы облегчить работу разработчика/дизайнера.
Следующее переведено из его блога:
В идеале этот мокап быстро сгенерирует полезный веб-сайт HTML на основе простого нарисованного от руки прототипа дизайна веб-сайта:
△ Модель SketchCode использует нарисованные вручную каркасы для создания HTML-сайтов.
Фактически приведенный выше пример — это реальный веб-сайт, сгенерированный на тестовом наборе с использованием обученной модели, код доступен по адресу: https://github.com/ashnkumar/sketch-code.
Получите вдохновение от аннотации к изображению
Проблема, которую предстоит решить, теперь относится к более широкой задаче, называемой синтезом программ, автоматической генерацией рабочего исходного кода. Хотя многие исследования синтеза программ генерируют код с помощью спецификаций на естественном языке или методов трассировки выполнения, в текущей задаче я буду в полной мере использовать исходное изображение, то есть нарисованный от руки каркас, предоставленный для работы.
Существует очень горячая область исследований в области машинного обучения, называемая субтитрами к изображениям, целью которой является создание модели, соединяющей изображения и текст вместе, особенно для создания описаний содержимого исходных изображений.
△ Модель аннотации изображения генерирует текстовое описание исходного изображения.
Вдохновленный документом pix2code и другим связанным проектом, применяющим этот подход, я решил реализовать свою задачу с точки зрения аннотации изображения, взяв нарисованный каркас веб-сайта в качестве входного изображения и соответствующий ему HTML-код в качестве его вывода.
Примечание. Два справочных элемента, упомянутых в предыдущем абзаце,
документ pix2code: https://arxiv.org/abs/1705.07962 учебник floydhub: https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning/?source=techstories.org
Получите правильный набор данных
После определения метода аннотирования изображения идеальный набор данных для обучения будет содержать тысячи пар нарисованных вручную каркасов и соответствующих выходных кодов HTML. Однако в настоящее время нет подходящего набора данных, который мне нужен, поэтому мне пришлось создать набор данных для этой задачи.
Сначала я попробовал набор данных с открытым исходным кодом, предоставленный документом pix2code, который состоит из 1750 скриншотов синтетически сгенерированных веб-сайтов и соответствующих им исходных кодов.
△ Сгенерированные изображения веб-сайта и исходный код в наборе данных pix2code
Это хороший набор данных с несколькими интересными моментами:
Каждый сгенерированный веб-сайт в этом наборе данных содержит несколько простых вспомогательных элементов, таких как кнопки, текстовые поля и объекты DIV. Хотя это означает, что модель ограничена этими несколькими элементами в качестве выходных данных, эти элементы можно изменить и расширить, выбрав генеративную сеть. Этот подход должен легко обобщаться на более крупные словари элементов.
Исходный код для каждого образца состоит из токенов на предметно-ориентированном языке (DSL), которые авторы документа создали для этой задачи. Каждый токен соответствует фрагменту HTML и CSS, и добавляется компилятор для преобразования DSL в исполняемый HTML-код.
Раскрашивайте изображения веб-сайтов в рисунки от руки
Чтобы изменить набор данных задачи, я хочу, чтобы изображения веб-сайта выглядели так, как будто они были нарисованы от руки. Я попытался внести изменения в каждое изображение, включая преобразование в оттенки серого и обнаружение контуров, используя такие инструменты, как библиотека OpenCV и библиотека PIL в Python.
В конце концов, я решил напрямую изменить таблицу стилей CSS исходного сайта, выполнив следующие действия:
Измените радиус границы элементов на странице, чтобы сгладить края кнопок и DIV-объектов;
Отрегулируйте толщину границ и добавьте тени, чтобы имитировать нарисованные эскизы;
Измените исходный шрифт на шрифт, похожий на рукописный;
В окончательный процесс реализации был добавлен дополнительный шаг, дополненный наклоном, перемещением и вращением для имитации изменений в фактическом эскизе.
Аннотируйте архитектуру модели изображениями
Теперь, когда я обработал набор данных, пришло время построить модель.
Я использовал архитектуру модели, используемую в аннотации изображений, которая состоит из трех основных частей:
Модель компьютерного зрения, использующая сверточные нейронные сети (CNN) для извлечения признаков изображения из исходных изображений;
Языковая модель, содержащая закрытую единицу GRU, которая кодирует последовательность токенов исходного кода;
Модель декодера, также принадлежащая подразделению GRU, принимает выходные данные двух предыдущих шагов в качестве входных данных и предсказывает следующий маркер в последовательности.
△ Обучите модель, используя последовательность токенов в качестве входных данных.
Чтобы обучить модель, я разделил исходный код на последовательность токенов. На вход модели подается одна частичная последовательность и ее исходное изображение, метка которого является следующей лексемой в тексте. Модель использует функцию кросс-энтропии в качестве функции потерь для сравнения следующего предсказанного токена модели с фактическим следующим токеном.
Этот вывод работает несколько иначе, когда модель генерирует код с нуля. Изображения по-прежнему обрабатываются через сеть CNN, но обработка текста начинается только с одной инициирующей последовательности. На каждом шаге следующий спрогнозированный токен, выводимый последовательностью пары моделей, добавляется к текущей входной последовательности и отправляется в модель как новая входная последовательность; это повторяется до тех пор, пока спрогнозированный токен модели не будет равен , или пока не будет задано предопределенное значение процесса. достигнуто количество токенов в каждом тексте.
После того как модель сгенерирует набор токенов прогнозирования, компилятор преобразует токены DSL в HTML-код, который можно запустить в любом браузере.
Оцените модель по шкале BLEU.
Я решил использовать оценку BLEU для оценки модели. Это метрика, обычно используемая в задачах машинного перевода для измерения того, насколько близко сгенерированный машиной текст может быть создан людьми при одинаковых входных данных.
По сути, BLEU сравнивает последовательности N-грамм сгенерированного текста и справочного текста, чтобы создать исправленную и точную версию. Это прекрасно работает для этого проекта, потому что влияет на фактические элементы в сгенерированном HTML-коде и на то, как они соотносятся друг с другом.
Лучше всего то, что я также могу сравнить текущую фактическую оценку BLEU, проверив сгенерированный веб-сайт.
△ Следите за оценкой BLEU
Оценка BLEU, равная 1,0, указывает на то, что модель может разместить соответствующие элементы в правильном положении с учетом исходного изображения, в то время как более низкая оценка BLEU указывает на то, что модель предсказала неправильные элементы или разместила их в относительно неподходящих местах. Оценка BLEU нашей окончательной модели в оценочном наборе данных составляет 0,76.
Бонус: индивидуальный стиль веб-страницы
Позже мне также пришло в голову, что, поскольку модель генерирует только фрейм текущей страницы, то есть токен текста, я могу добавить пользовательский слой CSS в процессе компиляции и мгновенно получить другой стиль сгенерированного веб-сайта. .
△ Ручной рисунок создает различные стили веб-страниц.
Разделение двух процессов настройки стиля и создания модели дает много преимуществ при работе с моделями:
Если вы хотите применить модель SketchCode к продуктам вашей компании, фронтенд-инженеры могут использовать модель напрямую, просто измените файл CSS, чтобы он соответствовал стилю веб-дизайна компании;
Встроенная расширяемость модели означает, что из одного исходного изображения модель может быть быстро скомпилирована во множество различных предопределенных стилей, поэтому пользователи могут представить множество возможных стилей веб-сайта и просматривать эти сгенерированные страницы в браузере.
Резюме и перспективы
Вдохновленная исследованиями в области аннотирования изображений, модель SketchCode способна за считанные секунды преобразовывать нарисованные от руки каркасы веб-сайтов в пригодные для использования веб-сайты HTML.
Однако с этой моделью все еще есть некоторые проблемы, которые также являются моим возможным направлением будущей работы:
Поскольку эта модель была обучена только с 16 элементами, она не может предсказать токены вне этих данных. Следующим направлением может быть использование большего количества элементов для создания большего количества образцов веб-сайтов, включая изображения веб-сайтов, раскрывающиеся меню и формы, обратитесь к компоненту запуска (https://getbootstrap.com/docs/4.0/components/buttons/), получить идеи
В реальном создании веб-сайтов существует множество вариаций. Создание обучающего набора, который лучше отражает это изменение, — хороший способ улучшить производительность генерации, которую можно улучшить, получив больше кода HTML/CSS веб-сайта и скриншотов контента;
Есть также много изменений в нарисованных от руки рисунках, которые не могут быть зафиксированы с помощью методов модификации CSS. Хороший способ решить эту проблему — использовать генеративно-состязательную сеть (GAN) для создания более реалистичных нарисованных изображений веб-сайтов.
Связанный адрес
Код: https://github.com/ashnkumar/sketch-code
Оригинал: https://blog.insightdatascience.com/automated-front-end-development-using-deep-learning-3169dd086e82
End