Введение
Обзор предметной области 6
1.1 Инструмент pix2code 6
1.2 Инструмент AirBnB Sketching Interfaces 8
1.3 Инструмент FloydHub 9
1.4 Обзор средств разработки 10
2 Архитектура приложения 13
2.1 Функциональные требования к системе 13
2.2 Функциональные части приложения 13
2.3 Концепция работы приложения 15
3 Сервис распознавания компонентов 17
3.1 Методы для определения объектов 17
3.1.1 Region-based Convolutional Network (R-CNN) 17
3.1.2 Fast Region-based Convolutional Network (Fast R-CNN) 18
3.1.3 Faster Region-based Convolutional Network (Faster R-CNN) 19
3.1.4 Single-Shot Detector (SSD) 20
3.2 Выбор модели 21
3.3 Подготовка датасета 23
3.4 Конфигурация Object Detection Training Pipeline 27
3.5 Обучение модели 28
3.6 Результат работы модели 29
4 Реализация Sketch Service 32
4.1 Описание Sketch Web Service 32
4.2 Структура Sketch-файла 32
4.3 Интеграция с Object Detection Service 33
4.4 Сопоставление распознанных компонентов со слоями Sketch 34
4.5 Организация компонентов в иерархическую структуру 37
4.6 Получение атрибутов стилизации компонентов 41
4.7 Генерация JSON-объекта с иерархической структурой экрана 41
Заключение 43
Словарь терминов 45
Список использованных источников 46
Приложение
Процесс разработки мобильного приложения включает в себя два основных этапа: реализация пользовательского интерфейса мобильного приложения по макету, разработанному дизайнером, и реализация бизнес-логики приложения.
Реализация пользовательского интерфейса для мобильного приложения может занять значительное количество времени из-за следующих факторов:
• стилизация отдельных компонентов может потребовать установления большого количества атрибутов;
• взаимное расположение компонентов требует правильного определения внутренних и внешних отступов;
• необходимо поддерживать корректное отображение пользовательского интерфейса на всех платформах.
Однако, в большинстве случаев разработка пользовательского интерфейса производится по готовому дизайну. Автоматизация процесса разработки пользовательского интерфейса на основе дизайна значительно сократит время, потраченное на реализацию UI.
При разработке дизайна мобильного приложения в таких программах как Sketch, дизайнеры указывают большинство атрибутов компонентов, которые можно использовать при генерации кода. Однако, в этих программах большинство компонентов реализуются в виде векторной графики, из-за чего невозможно определить класс компонента. Дополнительную сложность для генерации исходного кода создает то, что все элементы имеют абсолютные координаты. Без информации о классе компонента и иерархической структуры их расположения невозможно сгенерировать код UI-части.
Целью данной работы является разработка инструмента для автоматической генерации структуры пользовательского интерфейса мобильного приложения по данным графического редактора Sketch.
Для достижения данной цели были поставлены следующие задачи:
• сформировать список классов распознаваемых компонентов и их атрибутов;
• реализовать модуль определения классов по заданному дизайну с применением методов машинного обучения;
• разработать модуль для извлечения атрибутов элементов дизайна по распознанным компонентам;
• реализовать генерацию структуры компонентов;
• реализовать API для подключения сторонних клиентских приложений.
В результате выполнения данной работы был разработан программный инструмент для автоматической генерации структуры пользовательского интерфейса мобильного приложения по данным графического редактора Sketch.
Для достижения поставленной цели были выполнены следующие задачи:
• сформирован список классов распознаваемых компонентов и их атрибутов;
• реализован модуль определения классов по заданному дизайну с применением методов машинного обучения;
• разработан модуль для извлечения атрибутов элементов дизайна по распознанным компонентам;
• реализована генерация структуры компонентов;
• реализован API для подключения сторонних клиентских приложений. Разработанное решение поможет реализовать генерацию кода
пользовательского интерфейса мобильного приложения, что может существенно уменьшить временные затраты на разработку
пользовательского интерфейса приложения. Также, оно может быть использовано в других задачах, например, для сбора статистики используемых компонентов в дизайне.
В дальнейшем в приложение может быть добавлена поддержка других программ для разработки дизайна: Photoshop, Figma и другие.
Также будет продолжена работа для увеличения точности распознавания классов компонентов, в частности будет реализован функционал для дообучения нейронной сети.
