Эта статья была впервые опубликована сколонна Джижи
Вне зависимости от того, большая это компания или маленькая, создание впечатления взаимодействия с пользователями является важной задачей, и этот процесс часто достигается за счет быстрых циклов между прототипированием, программированием и пользовательским тестированием. Для крупных компаний, таких как Facebook, у них достаточно выделенной пропускной способности для всей команды, чтобы спроектировать все процессы, упомянутые выше, что обычно занимает несколько недель; небольшие компании, из-за того, что у них нет таких ресурсов для поддержки, часто получают очень неоптимальный пользовательский интерфейс. Интерфейс.
В этой статье я расскажу, как алгоритмы глубокого обучения могут значительно упростить рабочие процессы проектирования, позволяя компаниям любого размера быстро создавать тестовые страницы.
В конце статьи указан адрес кода проекта.
Текущий рабочий процесс проектирования
Типичный рабочий процесс проектирования сегодня может выглядеть так:
-
После того, как менеджер по продукту проведет исследование пользователей, он перечисляет ряд требований.
-
Дизайнеры исследуют прототипы с низкой точностью и в конечном итоге создают макеты продукта с высокой точностью по мере необходимости.
-
Инженеры реализуют проекты в коде и в конечном итоге сообщают о продукте пользователям.
Этот длительный процесс разработки часто становится узким местом, ограничивающим предприятия, поэтому некоторые компании, такие как Airbnb, начали использовать машинное обучение, чтобы сделать процесс разработки более эффективным.
Но как именно эти компании применяют методы, внешнему миру неизвестно. Поэтому я решил изучить версию технологии автоматической веб-разработки с открытым исходным кодом, чтобы разработчики и дизайнеры могли извлечь из нее пользу.
В идеале моя модель должна была бы создать работающий веб-сайт в формате HTML в кратчайшие сроки на основе простого нарисованного от руки рисунка дизайна веб-сайта:
Фактически, приведенный выше пример — это веб-сайт, созданный моей моделью из тестовой фотографии. может быть в моемGitHubПроверьте код, который сгенерировал сайт.
Вдохновляйтесь описаниями изображений
Проблема, которую я хочу решить, может быть в широком смысле классифицирована как задача, называемая «синтезом программы», которая состоит в том, чтобы автоматически генерировать исходный код, который можно запустить. В то время как большинство программ синтезируют инструкции на естественном языке или код, сгенерированный в трассировках выполнения, моя модель также использует исходные изображения (схемы, нарисованные от руки).
Хорошо изученная область машинного обучения называется подписями к изображениям, которая изучает модель, которая сопоставляет изображения с текстом для создания текстовых подписей специально для того, что находится на исходном изображении.
После наблюдения и изучения недавно опубликованного метода под названием pix2codeбумагаиСвязанные проекты Эмиля ВаллнераПосле некоторого вдохновения я решил классифицировать свою задачу как описание изображения, то есть в качестве входного изображения взять нарисованную от руки схему веб-сайта, а соответствующий HTML-код эквивалентен выходному тексту изображения.
Получите правильный набор данных
Если бы мне нужно было описать этот метод с помощью изображений, моим идеальным набором обучающих данных были бы тысячи нарисованных от руки дизайнов веб-сайтов и соответствующий им HTML-код. Неудивительно, что такого датасета, который как раз удовлетворял бы требованиям, вообще не нашлось, поэтому мне пришлось самому создавать нужный для задачи датасет.
Сначала я использовал код из статьи pix2code.набор данных с открытым исходным кодом, который содержит 1750 скриншотов синтетически созданного веб-сайта и связанного с ним исходного кода.
Для начальных этапов моего проекта это хороший набор данных с несколькими интересными моментами:
- Каждый сгенерированный веб-сайт в наборе данных содержит комбинацию нескольких простых элементов начальной загрузки, таких как кнопки, текстовые поля, элементы div и т. д. Хотя это означало, что моя модель будет ограничена созданием всего нескольких элементов, этот подход можно легко обобщить и на более крупные элементы.
- Исходный код каждого образца содержит токены из DSL (Domain-Specific Language), созданного авторами статьи для соответствующей задачи. Каждый токен соответствует фрагменту сценария HTML и CSS, а компилятор используется для преобразования DSL в исполняемый код HTML.
Сделайте изображение похожим на эскиз дизайна
Чтобы пересмотреть набор данных, чтобы он лучше соответствовал моей задаче, мне нужно, чтобы изображения веб-сайта выглядели так, как будто они были нарисованы от руки. Я использовал некоторые инструменты, такие как OpenCV и библиотеку Python PIL, для изменения информации каждого изображения, такой как преобразование оттенков серого, обнаружение контуров и т. д.
В конце концов, я решил изменить таблицу стилей CSS исходного веб-сайта напрямую и проделал ряд операций:
- Измените граничное значение каждого элемента на веб-странице и превратите четыре угла кнопок и элементов div в изогнутые линии.
- Отрегулируйте толщину границы, чтобы имитировать нарисованную от руки схему, и добавьте тени.
- Измените шрифт на что-то похожее на нарисованное от руки.
- Последним шагом является улучшение изображения, например, добавление косых черт, сдвигов и поворотов к изображению, имитирующих разнообразный стиль настоящей ручной росписи.
Используйте изображение для описания архитектуры модели
Теперь, когда необходимые данные на месте, пришло время передать данные в модель!
Я принял архитектуру модели, примененную к части описания изображения, которая состоит из 3 основных частей:
- Модель компьютерного зрения, использующая сверточные нейронные сети для извлечения признаков изображения из исходных изображений.
- Языковая модель, содержащая GRU, способная кодировать последовательности токенов исходного кода.
- Модель кодировщика (также GRU), которая использует выходные данные двух предыдущих частей в качестве входных данных для прогнозирования следующего маркера в последовательности.
Чтобы иметь возможность обучать модель, я разделил исходный код на последовательности токенов. Каждый вход в модель представляет собой последовательность токенов с исходным изображением, соответствующим последовательности, помеченной как следующий токен в файле. Модель использует кросс-энтропийную функцию стоимости в качестве функции потерь, которая сравнивает следующий токен, предсказанный моделью, с фактическим следующим токеном.
На этапе вывода, когда модель генерирует код с нуля, процесс отличается. Изображения по-прежнему обрабатываются нейронной сетью CNN, но с начальной последовательностью обрабатывается только текст. Предсказание модели следующего токена в последовательности добавляется к текущей входной последовательности на каждом шаге и подается в модель как новая входная последовательность. Этот процесс повторяется до тех пор, пока модель не предскажет токен или пока не закончатся токены в каждом файле.
Оцените модель по шкале BLEU.
Решил оценить модель по шкале BLEU. Оценка BLEU — это обычная метрика, используемая в задачах машинного перевода для измерения того, насколько сгенерированный компьютером текст близок к тексту, сгенерированному человеком при одинаковых входных данных.
По сути, BLEU сравнивает последовательности N-грамм как сгенерированного текста, так и цитируемого текста, чтобы представить точность модели в улучшенной форме. Это хорошо работает для этого проекта, так как учитывает фактические элементы в сгенерированном HTML и отношения между ними.
Более того, я смог увидеть оценку BLEU, проверив сгенерированный веб-сайт.
Максимальный балл BLEU, равный 1,0, указывает на то, что модель способна генерировать правильные элементы веб-страницы из исходного изображения и что каждый элемент находится в правильном положении. Низкий балл BLEU означает, что модель неправильно генерирует элементы или размещает элементы не в том месте. Когда модель была окончательно оценена в наборе данных для оценки, было показано, что модель получила оценку BLEU 0,76. То есть построенная мной модель может корректно преобразовать 76% эскизов дизайна в HTML-код всего за несколько секунд.
Бонус - индивидуальный стиль сайта
Позже я понял, что это был дополнительный бонус. Поскольку модель генерирует только скелет веб-страницы (маркер файла), я могу добавить пользовательский слой CSS в процессе компиляции, и модель может мгновенно придать сгенерированному веб-сайту множество различных стилей.
Отделение стиля веб-сайта от процесса создания модели дает несколько больших преимуществ при использовании моделей:
- Разработчики внешнего интерфейса, которые хотят интегрировать мои макеты в продукты своей компании, могут использовать макеты, изменив один файл CSS, чтобы он соответствовал стилю дизайна компании.
- Встроенная масштабируемость. На основе одного исходного изображения выходные данные модели могут быть скомпилированы в 5, 10 или даже 50 различных предопределенных стилей, поэтому пользователи могут предварительно просмотреть эффект нескольких стилевых версий веб-сайта в браузере.
Заключение и перспективы на будущее
Используя методы исследования в области описания изображений, я построил модель глубокого обучения, способную за считанные секунды преобразовать нарисованный от руки дизайн веб-сайта в работающий HTML-сайт.
Конечно, у модели есть и некоторые ограничения, в дальнейшем возможно оптимизация из следующих аспектов:
- Поскольку модель была обучена только с 16 элементами, модель еще не может предсказать токены, которые она не видела. В будущем я буду обучать модель генерировать больше образцов веб-сайтов с большим количеством элементов, таких как изображения, раскрывающиеся списки и таблицы, начиная с ведущих элементов.
- Реальные веб-сайты имеют множество вариаций. В будущем я создам обучающие наборы данных, которые будут более гибкими к этим изменениям, будут полностью понимать реальные веб-сайты в действии, фиксировать их HTML/CSS-код и скриншоты содержимого веб-сайтов.
- Рисование от руки столь же разнообразно, и методы модификации CSS не могут быть полностью охвачены. Использование генеративных состязательных сетей для создания реалистичных изображений веб-сайтов позволяет вносить больше вариаций в данные нарисованных от руки эскизов.
См. мой репозиторий GitHub для всего кода этого проекта.
Ограниченная по времени скидка: выпуск 0806«Искусственный интеллект — от нуля до мастерства»(Первые 25 студентов могут получить купон на 200 иен)