Перевод дизайна экрана в разметку HTML/CSS — трудоемкая задача для веб-разработчиков, которая следует четким правилам, но требует большой точности. Кажется, это хорошее приложение для машинного обучения в будущем.
Статья
обсудили статью 2017 года с некоторыми идеями по созданию разметки из пиксельных изображений. В этом посте я попытаюсь использовать машинное обучение в качестве первого шага к этой цели, пытаясь классифицировать дизайн экрана. В двух примерах я обучаю нейронную сеть различать темные и яркие рисунки и отделять экраны с одним столбцом от экранов с двумя.
Увеличение данных
Для обучения мне нужно много изображений дизайнов экранов с содержанием, соответствующим потребностям задач классификации. Поэтому я решил сгенерировать данные с помощью некоторых сценариев Python, используя библиотеку Beautiful Soup для анализа HTML и создания частей разметки, а также библиотеку cssutils для анализа файлов CSS. Все дизайны создаются с помощью Bootstrap (https://getbootstrap.com/) и сочетают в себе случайно выбранные изображения и слепой текст с некоторыми цветами и базовой разметкой. Система сетки Bootstrap использовалась для создания макетов с разным количеством столбцов.
Инструмент командной строки wkhtmltoimage (https://wkhtmltopdf.org/) использовался для преобразования HTML-файлов в PNG-файлы. Разрешение экрана было установлено на 1200px на 1200px. Файлы можно загрузить с https://www.floydhub.com/mosch/datasets/pix2html.
Один набор изображений состоит из 540 изображений — половина из них на светлом фоне, а другая половина — на темном.
Второй набор содержит 450 изображений — половина из них с одним столбцом, а остальные — с двумя.
Обучение классификаторов
Обучение проводилось с помощью Jupyter Notebooks на Floydhub (https://www.floydhub.com). Нейронные сети были построены и оптимизированы с помощью Keras (https://keras.io/).
Found 450 images belonging to 2 classes. Found 90 images belonging to 2 classes.
Для обучения и тестирования данные были разделены на обучающий и тестовый наборы данных, а размер каждого изображения изменен до 300x300 пикселей для экономии времени вычислений. Использовался размер партии 10 штук.
Модель состоит из нескольких слоев «2D-Convolutional» и «MaxPooling», за которыми следуют слой «Dense» и блок «Sigmoid» в конце для прогнозирования вероятностей для бинарной классификации.
Определить цвет фона
Я использовал первый набор данных, чтобы проверить, может ли обученная модель научиться распознавать темные и яркие рисунки.
Обучение и тестирование для некоторых эпох показали, что примерно после 15 шагов модель идеально определяла цвет фона. Давайте посмотрим на обучающие кривые для точности классификатора и функции потерь.
Определить количество столбцов в макетах
Используя второй набор данных сгенерированных изображений, я попытался классифицировать по количеству столбцов из необработанных пикселей.
Спустя всего 3 эпохи модель проделала хорошую работу. Таким образом, две задачи казались простыми для модели машинного обучения. В будущем должна быть возможность попробовать более сложные задачи.
