Как автоматически преобразовать модели внешнего интерфейса в код с помощью глубокого обучения?

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

В этой статье мы научим нейронную сеть писать базовый код HTML и CSS на основе изображения прототипа дизайна. Вот краткий обзор процесса:

1) Расчетная схема, предоставленная для нейронной сети

2) Нейронная сеть преобразует изображение в HTML-код.

3) Рендеринг вывода

Мы построим нейронную сеть за три итерации.

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

Весь код находится на Github и FloydHub.

Модели построены на основе статьи pix2code Белтрамелли и учебника Джейсона Браунли по описанию изображений на естественном языке, а код написан на Python и Keras, платформе на основе Tensorflow.

Если вы новичок в глубоком обучении, рекомендуется сначала получить общее представление о Python, обратном распространении и сверточных нейронных сетях.

Кратко напомним нашу цель. Мы хотим построить нейронную сеть, которая генерирует код HTML/CSS, соответствующий скриншотам.

При обучении нейросети можно дать ей несколько скриншотов и соответствующий HTML-код.

В процессе обучения он один за другим предсказывает все совпадающие теги HTML. При прогнозировании следующей метки он получает снимок экрана вместе со всеми совпадающими метками в этой точке.

Этот Google Sheet содержит простой пример обучающих данных.

Создание модели, которая может предсказывать дословно, является наиболее распространенным способом, и именно его мы будем использовать в этом руководстве, хотя есть и другие.

Обратите внимание, что нейронная сеть получает один и тот же снимок экрана для каждого прогноза. То есть, если бы он предсказал 20 слов, он получил бы один и тот же шаблон 20 раз. На этом этапе не беспокойтесь о том, как работает нейронная сеть, а сосредоточьтесь на вводе и выводе нейронной сети.

Смотрим на предыдущую вкладку. Предположим, мы хотим обучить сеть предсказывать предложение «Я умею кодировать». Когда он получает «я», он может предсказывать «могу». В следующий раз он получит «Я могу» и предскажет «код». Каждый раз он получает все предыдущие слова и просто предсказывает следующее слово.

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

При использовании обученной модели в реальности ситуация аналогична обучению модели. Создавайте текст один за другим, каждый раз используя один и тот же снимок экрана. Разница в том, что теперь вместо прямого получения правильных тегов HTML он будет получать теги, которые он сгенерировал до сих пор, и переходить к прогнозированию следующего тега. Весь процесс прогнозирования начинается с «начальной метки» и заканчивается, когда прогнозируется «конечная метка» или достигается максимум.

Давайте начнем создавать версию Hello World. Мы передадим нейронной сети снимок экрана веб-страницы с надписью «Hello World!» и обучим ее генерировать соответствующую метку.

Сначала нейронная сеть сопоставляет шаблон со списком значений пикселей. Каждый пиксель имеет три канала RGB, и значение каждого канала находится в диапазоне от 0 до 255.

Для того, чтобы нейросеть понимала эти токены, я использовал одну горячую кодировку. Таким образом, предложение «Я умею программировать» можно сопоставить с:

Вышеуказанное изображение содержит начальные и конечные теги. Эти этикетки контролируют начало и окончание прогнозов нейронных сетей.

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

Предложения следуют той же логике, что и слова. Они также требуют одинаковой длины ввода, но здесь мы ограничиваем максимальную длину предложения, а не количество слов. Если предложение короче максимальной длины, оно заполняется пустыми словами, полностью состоящими из нулей.

Как видите, слова печатаются справа налево. Таким образом, каждое обучение заставит каждое слово менять свое положение, поэтому модель сможет запомнить порядок слов, а не положение каждого слова.

На приведенном ниже графике есть четыре прогноза, по одному для каждой строки. Слева изображение в каналах RGB: красный, зеленый и синий, а также слова, упомянутые ранее. Вне скобок предсказания делаются одно за другим, заканчиваясь красным квадратом.

В версии Hello World мы использовали три токена: «начало», «Hello World!» и «конец». Токеном может быть что угодно, это может быть символ, слово или предложение. Хотя использование токенов символов требует меньше словарного запаса, оно ограничивает нейронную сеть. Токены слов, как правило, имеют лучшую производительность.

Здесь мы делаем прогнозы:

• 10 epochs:start start start

• 100 epochs: start <HTML><center><H1>Hello World!</H1></center></HTML> <HTML><center><H1>Hello World!</H1></center></HTML>

• 300 epochs: start <HTML><center><H1>Hello World!</H1></center></HTML> end

• Первая версия была построена до сбора данных.В начале этого проекта я нашел способ получить старую архивную копию с веб-сайта Geocities, который содержит более 38 миллионов веб-сайтов. Однако в то время я был настолько очарован данными, что проигнорировал огромный объем работы, который потребуется, чтобы сократить 100 000 слов.

• Для обработки терабайтов данных требуется хорошее оборудование или много терпения.После нескольких проблем с моим Mac я наконец остановился на мощном удаленном сервере. Чтобы все работало гладко, я должен арендовать удаленный тестовый блок с 8-ядерным процессором и сетевым подключением 1GPS.

• Многое не имеет смысла, пока я не пойму ввод и вывод.Вход X — это снимок экрана и ранее предсказанная метка, а выход Y — следующая метка для предсказания. Когда я это понимаю, становится легче понять взаимосвязь между ними и легче строить разные архитектуры.

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

• Сеть изображения для кодирования на самом деле является моделью Image Caption.Но даже при том, что я понял это, я до сих пор игнорирую множество работ по подписи к изображению только потому, что не думаю, что они такие уж крутые. Когда я это узнал, я ускорил свое понимание проблемы.

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

Если вы новичок во Floydhub, я рекомендую ознакомиться с их 2-минутным руководством по установке и моим 5-минутным обзорным руководством.

Скопируйте репозиторий:

Войдите в систему и запустите инструмент командной строки FloydHub:

Запустите ноутбуки Jupyter на облачных графических процессорах FloydHub:

Все блокноты готовы в каталоге FloydHub. После запуска вы можете найти первую записную книжку здесь: floydhub/Helloworld/helloworld.ipynb.

Более подробные инструкции и инструкции по тегированию см. в моей предыдущей статье.

В этом выпуске мы автоматизируем многие шаги в Hello world. В этой главе основное внимание будет уделено тому, как создать масштабируемую реализацию и динамическую часть нейронной сети.

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

На изображении ниже показано, как компоненты фреймворка выглядят в развернутом виде.

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

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

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

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

Перед окончательной классификацией мы извлекаем признаки из слоев.

В итоге мы получили 1536 изображений размером 8×8 пикселей в виде карт признаков. Хотя эти функции трудно понять людям, нейронные сети могут извлекать местоположение объектов и элементов из этих функций.

В версии Hello World мы использовали однократное кодирование для представления меток. В этой версии мы будем использовать встраивание слов во входные данные и продолжим использовать однократное кодирование для представления выходных данных.

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

Размерность вектора слов равна 8, но размерность часто варьируется от 50 до 500 из-за размера словарного запаса.

8 чисел для каждого слова аналогичны весам в обычных нейронных сетях для отображения взаимосвязи между разными словами.

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

Мы запускаем вектор слов в LSTM, который возвращает набор функций меток. Эти объекты надписей затем отправляются на плотный слой TimeDistributed для запуска.

Пока обрабатываются векторы слов, происходит другая обработка. Функции изображения сначала выравниваются, и все значения преобразуются в список чисел. Затем мы применяем плотный слой поверх этого слоя для извлечения высокоуровневых функций, которые затем объединяются для маркировки объектов.

Это может быть немного сложно понять, поэтому давайте разберем процесс.

Сначала мы отправляем вектор слов на слой LSTM для запуска. Все предложения будут дополнены максимальной длиной в три токена, как показано на изображении ниже.

Чтобы смешать сигналы и найти шаблоны более высокого уровня, мы применим плотный слой TimeDistributed к объектам-меткам. Плотный слой TimeDistributed аналогичен обычному плотному слою, но с несколькими входами и выходами.

Тем временем мы подготовим изображения. Мы отсортировали все функции мини-изображения, а затем преобразовали их в набор списков. Информация не изменилась, изменилась только организация.

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

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

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

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

Здесь мы используем комбинацию функций метки изображения, чтобы предсказать следующую метку.

В приведенном ниже примере мы используем три комбинации функций метки изображения для вывода следующей функции метки.

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

окончательный прогноз

Плотный слой объединяет 512 значений в следующей функции метки с 4 окончательными прогнозами, как традиционная нейронная сеть с прямой связью. Предположим, в нашем словарном запасе есть четыре слова: начало, привет, мир и конец.

Предсказание слова может быть [0,1, 0,1, 0,1, 0,7]. Функция активации softmax в плотном слое распределяется с вероятностью от 0 до 1, а сумма всех прогнозов равна 1. В этом случае он предсказывает, что 4-е слово будет следующей меткой. Затем преобразуйте однократное кодирование [0, 0, 0, 1] в значение карты, такое как «конец».

Вот оригинальный сайт для справки.

Для меня LSTM труднее понять, чем CNN. Когда я развернул все LSTM, их стало легче понять. Видео Fast.ai о RNN очень полезны. Кроме того, прежде чем пытаться понять, как работают функции, сосредоточьтесь на самих входных и выходных функциях. Гораздо проще создать словарный запас с нуля, чем сократить огромный словарный запас. Включая шрифты, размеры тегов div, шестнадцатеричные значения цветов, имена переменных и общие слова. Большинство библиотек создаются для разбора текстовых файлов, а не кода. В документации все разделено пробелами, а в коде нужно использовать кастомный парсинг. Функции можно извлечь с помощью модели, обученной в ImageNet. Это может показаться нелогичным, поскольку в ImageNet мало веб-изображений. Однако при этом потери на 30% выше по сравнению с моделью pix2code, обученной с нуля. Конечно, меня также интересует использование предварительно обученных моделей типа inception-resnet на основе скриншотов веб-страниц.

В нашем финальном выпуске мы будем использовать набор данных веб-сайтов Bootstrap, созданный в документе pix2code. Используя Twitter Bootstrap, мы можем комбинировать HTML и CSS и уменьшать размер нашего словаря.

Мы позаботимся о том, чтобы он мог генерировать теги для скриншотов, которых он раньше не видел, и углубимся в то, как он повышает осведомленность о скриншотах и ​​тегах.

Вместо обучения тегам Bootstrap мы будем использовать 17 упрощенных токенов и конвертировать эти токены в HTML и CSS. Этот набор данных включает 1500 тестовых скриншотов и 250 проверочных изображений. Каждый снимок экрана содержит в среднем 65 токенов, что в сумме дает 96925 обучающих выборок.

С некоторыми изменениями модели в документе pix2code модель может предсказывать веб-компоненты с точностью 97% (жадный поиск 4-ngram BLEU, подробнее об этом позже).

комплексный подход

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

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

Здесь можно использовать две основные модели: сверточная нейронная сеть (CNN) и рекуррентная нейронная сеть (RNN). Наиболее распространенной RNN является сеть Long Short Term Memory (LSTM), о которой я собираюсь рассказать.

В предыдущих статьях я рассмотрел множество отличных руководств по CNN, поэтому здесь я сосредоточусь только на LSTM.

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

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

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

Ниже представлена ​​упрощенная версия каждого временного шага в LSTM.

Чтобы понять эту логику, я рекомендую вам обратиться к отличному руководству Эндрю Траска и самостоятельно создать RNN с нуля.

Количество единиц в каждом слое LSTM определяет его объем памяти, а также размер каждого выходного объекта. Опять же, функция — это длинная строка чисел, используемая для передачи информации от слоя к слою.

Каждый модуль на уровне LSTM учится отслеживать разные аспекты грамматики. Ниже представлена ​​визуализация необработанной информации div для отслеживания одной единицы, упрощенные метки, которые мы использовали для обучения модели Bootstrap.

Каждая ячейка LSTM поддерживает состояние ячейки. Думайте о состоянии ячейки как о памяти, а веса и функции активации используются для изменения состояния различными способами. Это позволяет уровню LSTM точно настроить, какую информацию сохранять и отбрасывать для каждого входа.

В дополнение к каждому входу, передающему выходные функции, слои LSTM также передают состояния ячеек, где каждая ячейка соответствует значению. Чтобы понять, как взаимодействуют компоненты в LSTM, я рекомендую учебник Колаха, реализацию Numpy Джаясири, а также лекции и статьи Карфея.

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

Я использую меру BLEU, передовую практику для моделей машинного перевода и субтитров к изображениям. Он делит предложение на четыре грамма в соответствии с последовательностью от 1 до 4 слов. «кошка» в предсказании ниже должна быть «кодом».

Чтобы получить окончательный результат, вам нужно умножить все числа на 25%, (4/5)*0,25 + (2/4)*0,25 + (1/3)*0,25 + (0/2)*0,25 = 0,2. + 0,125 + 0,083 + 0 = 0,408. Результат суммы умножается на штраф за длину приговора. Поскольку длины предложений в нашем примере правильные, результатом суммирования является непосредственно окончательный результат.

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

Ссылки на некоторые выходные образцы:

• Создать веб-сайт 1 – исходный 1

https://emilwallner.github.io/bootstrap/pred_1/

• Создать веб-сайт 2 - исходный 2

https://emilwallner.github.io/bootstrap/real_2/

• Создать веб-сайт 3 - исходный 3

https://emilwallner.github.io/bootstrap/pred_3/

Создать веб-сайт 4 - оригинальный 4

• https://emilwallner.github.io/bootstrap/pred_4/

Создать веб-сайт 5 - оригинальный 5

• https://emilwallner.github.io/bootstrap/pred_5/

• Поймите слабые стороны разных моделей вместо того, чтобы тестировать случайные модели.Вначале я использовал случайные модели, такие как пакетная нормализация и двунаправленные сети, и пытался реализовать механизм внимания. Затем, посмотрев на тестовые данные, я понял, что это не точно предсказывает цвет и положение, и я понял, что у CNN есть слабость. Это заставило меня использовать больший шаг вместо максимального объединения. После этого потери при проверке изменились с 0,12 до 0,02, а показатель BLEU улучшился с 85% до 97%.

• Используйте только предварительно обученные модели, если они актуальны.Учитывая, что данный набор данных невелик, я думаю, что предварительно обученная модель изображения улучшит производительность. Из моих экспериментов сквозная модель медленнее обучается и требует больше памяти, но на 30% точнее.

• При запуске модели на удаленном сервере необходимо скорректировать расписание.На моем Mac он читает файлы в алфавитном порядке. Но на удаленном сервере он расположен случайным образом. Это создает несоответствие между снимками экрана и кодом. Хотя он все еще сходится, данные проверки на 50% хуже, чем моя коррекция.

• Убедитесь, что вы понимаете функции библиотеки. Включите пробелы для пустых токенов в словарь.Когда я не добавлял пробелы, ни один из пустых токенов не был включен в прогноз. Это также то, что я заметил после нескольких просмотров вывода, и модель никогда не предсказывала ни одного токена. После быстрой проверки я обнаружил, что этого нет даже в словаре. Также словарный запас тренируется и тестируется в том же порядке.

• Поэкспериментируйте с более легкими моделями.Использование GRU вместо LSTM снижает количество циклов в эпоху на 30% без особого влияния на производительность.

Фронтенд-разработка — идеальная область для применения глубокого обучения. Потому что генерировать данные легко, а современные алгоритмы глубокого обучения могут отображать большую часть логики.

Одной из самых интересных областей является применение механизмов внимания к LSTM. Это не только повышает точность, но также позволяет нам визуально видеть, на чем фокусируется CNN при создании меток.

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

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

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

• запустить все модели

• попробуйте разные гиперпараметры

• Протестируйте другую архитектуру CNN

• Добавьте двунаправленную модель LSTM

• Реализуйте модель с различными наборами данных

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

• Данные от эскизов до прикладных моделей. Автоматически преобразовывайте скриншоты приложений или веб-страниц в эскизы и используйте GAN для создания различных типов эскизов.

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

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

• Предоставьте нейронной сети простой HTML-компонент и научите его анимировать с помощью CSS.

Оригинальная ссылка:

https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning/