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

1. Анализ текущей ситуации
2. Выбор алгоритма
3. Подготовка образцов
4. Модельное обучение
5. Оценка модели
6. Модель развертывания службы
7. Приложение модели
8. Мониторинг использования пользователей
9. Осадки — документация, API, сервис

фон приложения

imgcookПринимая визуальные наброски в форме Sketch, PSD, статических изображений и т. д. в качестве входных данных и генерируя поддерживаемый интерфейсный код с помощью интеллектуальной технологии одним щелчком мыши, генерация кода проекта эскиза / Photoshop требуетУстановить плагин, экспортируйте информацию описания JSON визуального проекта через подключаемый модуль imgcook в проекте дизайна (D2C Schema) и вставьте его в визуальный редактор imgcook, где вы можете отредактировать представление, логику и т. д., чтобы изменить описание JSON.

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

Как показано ниже, левая сторона — это визуальный набросок в Sketch, а правая — использование.Спецификации разработки ReactКод сгенерированной секции кнопок.

Сгенерируйте код «Спецификация разработки React» из «Экспорт данных» Sketch Visual Draft, на рисунке показан фрагмент кода части кнопки.

Сгенерированный код состоит из div, img, span и этих тегов, но в реальной разработке приложения есть такие проблемы:

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

Наше требование состоит в том, что если мы хотим использовать библиотеку компонентов, такую ​​как Ant Design, мы хотим, чтобы сгенерированный код выглядел так:

// Antd Mobile React 规范
import { Button } from "antd-mobile";

<div style={styles.ft}>
  <Button style={styles.col1}>进店抢红包</Button>
  <Button style={styles.col2}>加购物车</Button>
</div>

Для этого мы добавили в описание JSONsmartПоле, используемое для описания типа узла.

"smart": {
  "layerProtocol": {
    "component": {
      "type": "Button"
    }
  }
}

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

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

решение

правила генерации конвенций

Управляйте структурой сгенерированного кода, указав черновую спецификацию проекта, которая будет вмешиваться в сгенерированное описание JSON. Например в нашемПроект спецификации расширенного вмешательстваСпецификация именования слоев для компонентов в слое: явно помечайте компоненты, свойства компонентов и т. д. в слое.

#component:组件名?属性=值#
#component:Button?id=btn#

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

Научитесь определять компоненты

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

Здесь нужно сделать две вещи:

• Найдите информацию о компоненте: категория, местоположение, размер и т. д.
• Найдите свойство в компоненте, например, текст в кнопке «отправить».

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

Научитесь определять компоненты пользовательского интерфейса

Статус отрасли

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

• Use R-CNN to detect UI elements in a webpage?
• Is machine learning suitable for detecting screen elements?
• Any thoughts on a good way to detect UI elements in a webpage?
• How can I detect elements of GUI using opencv?
• How to recognize UI elements in image?

Обсуждаются два основных требования:

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

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

ReDraw

Набор скриншотов Android, метаданных графического интерфейса и аннотированных изображений компонентов графического интерфейса, включая RadioButton, ProgressBar, Switch, Button, CheckBox и т. д. 15 категорий, 14 382 изображения интерфейса пользовательского интерфейса и 191 300 компонентов графического интерфейса с метками,Набор данных был обработан, чтобы довести количество компонентов до 5000.. Подробное введение в этот набор данных можно найти по адресуThe ReDraw Dataset.

Это для обучения и оценкиПерерисовать бумагиНаборы данных для методов машинного обучения CNN и KNN, упомянутых в ,бумагаОпубликовано в IEEE Transactions on Software Engineering в 2018 году. В документе предлагается трехэтапный подход к переходу от пользовательского интерфейса к автоматизации кода:

1. Обнаружение

Сначала извлеките метаинформацию интерфейса пользовательского интерфейса, такую ​​как ограничительная рамка (положение, размер) из проекта проекта, или используйте технологию CV.

2. Классификация

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

3. Сборка

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

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

Rico

Самый большой на сегодняшний день набор данных мобильного пользовательского интерфейса, созданный для поддержки пяти категорий приложений, управляемых данными: поиск по дизайну, создание макета пользовательского интерфейса, создание кода пользовательского интерфейса, моделирование взаимодействия с пользователем и прогнозирование восприятия пользователем.Набор данных РикоСодержит 27 категорий, более 10 000 приложений и около 70 000 снимков экрана.

Набор данных был обнародован на 30-м ежегодном симпозиуме ACM по программному обеспечению и технологиям пользовательского интерфейса в 2017 году (RICO: A Mobile App Dataset for Building Data-Driven Design Applications).

С тех пор было проведено несколько исследований и приложений, основанных на наборе данных Rico. Например:Learning Design Semantics for Mobile Apps, который представляет основанный на коде и видении подход к добавлению семантических аннотаций к элементам мобильного пользовательского интерфейса. 25 автоматически распознаются на основе скриншотов пользовательского интерфейса и иерархии представлений.
Классы компонентов пользовательского интерфейса, 197 концепций текстовых кнопок и 99 классов значков.

Сценарии применения

Вот несколько сценариев исследований и приложений, основанных на приведенных выше наборах данных.

Умная генерация кода

Machine Learning-Based Prototyping of Graphical User Interfaces for Mobile Apps | ReDraw Dataset

Интеллектуальное создание макетов

Neural Design Network: Graphic Layout Generation with Constraints | Rico Dataset

Прогнозирование восприятия пользователем

Modeling Mobile Interface Tappability Using Crowdsourcing and Deep Learning | Rico Dataset

Автоматизированное тестирование пользовательского интерфейса

A Deep Learning based Approach to Automated Android App Testing | Rico Dataset

определение проблемы

В вышеупомянутом приложении генерации кода Android на основе набора данных Redraw мы изучили схему его реализации.Для второго шага нам необходимо использовать крупномасштабный программный анализ хранилища и технологию автоматического динамического анализа для получения большого количества выборок компонентов в качестве обучающие образцы для алгоритма CNN Таким образом, получаются определенные типы компонентов, которые существуют в интерфейсе пользовательского интерфейса, такие как Progress Bar, Switch и т. д.

Для нашего сценария приложения imgcook основная проблема заключается в том, что нам нужно найти этот конкретный тип информации о компонентах в интерфейсе пользовательского интерфейса: категории и ограничивающие рамки, Мы можем определить эту проблему как проблему обнаружения цели, используя глубокое обучение для интерфейса пользовательского интерфейса. обнаружение объекта. ** Так какова наша цель?

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

Обнаружение объекта интерфейса пользовательского интерфейса

Базовые знания

машинное обучение

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

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

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

глубокое обучение

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

Разницу между глубоким обучением и традиционным машинным обучением можно увидеть здесь.Deep Learning vs. Machine Learning, есть зависимости данных, аппаратные зависимости, обработка функций, решение проблем, время выполнения и интерпретируемость.

Глубокое обучение предъявляет высокие требования к объему данных и оборудованию и требует много времени для выполнения.Основное различие между глубоким обучением и традиционными алгоритмами машинного обучения заключается в способе обработки признаков. Когда традиционное машинное обучение используется для решения реальных задач, функции, описывающие образцы, обычно должны разрабатываться экспертами-людьми, что называется «Разработкой функций», и качество функций оказывает решающее влияние на производительность обобщения. хорошие черты не легко. Глубокое обучение может автоматически генерировать хорошие функции, анализируя данные с помощью методов изучения функций.

Обнаружение цели

Машинное обучение имеет многоприменение,Например:

• компьютерное зрение(Computer Vision, CV) для таких приложений, как распознавание номерных знаков и лиц.
• Поиск информацииДля таких приложений, как поисковые системы, включая текстовый поиск и поиск изображений.
• маркетингПриложения для автоматизированного email-маркетинга и идентификации целевых групп и т. д.
• медицинский диагнозТакие приложения, как идентификация рака и обнаружение аномалий.
• обработка естественного языка(обработка естественного языка, NLP) Приложения, такие как анализ настроений и пометка фотографий.

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

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

Выбор алгоритма

Методы, используемые для обнаружения целей, обычно делятся на методы, основанные на машинном обучении (традиционные методы обнаружения целей) или методы, основанные на глубоком обучении (методы обнаружения целей с глубоким обучением). методы изменения:

Традиционные методы обнаружения объектов

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

• Структура обнаружения объектов Виолы-Джонса на основе функции Хаара
• Масштабно-инвариантное преобразование признаков (SIFT)
• Гистограмма ориентированных градиентов (HOG) Особенности

Метод обнаружения целей глубокого обучения

Для методов, основанных на глубоком обучении, который обеспечивает сквозное обнаружение объектов без определения функций, обычно основанных на сверточных нейронных сетях (CNN). Методы обнаружения целей, основанные на глубоком обучении, можно разделить наОдноступенчатые и двухступенчатые, иАлгоритм RefineDet наследует преимущества этих двух типов методов.

One-stage

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

• Серия SSD (Single Shot MultiBox Detector)
• Серия YOLO (You Only Look Once) (YOLOv1, YOLOv2, YOLOv3)
• RetinaNet

Two-stage

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

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

• R-CNN, быстрый R-CNN, более быстрый R-CNN

Другое (RefineDet)

RefineDet (Single-Shot Refinement Neural Network for Object Detection) — усовершенствование, основанное на алгоритме SSD. Унаследует преимущества обоих подходов (например, одноэтапный подход к проектированию, двухэтапный подход к проектированию) и преодолевает их недостатки.

Сравнение методов обнаружения объектов

Традиционные методы против глубокого обучения

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

Исследования алгоритмов обнаружения целей в основном основаны на глубоком обучении. Традиционные алгоритмы обнаружения целей используются редко. Методы обнаружения целей с глубоким обучением больше подходят для инженерии. Конкретные сравнения следующие:

One-stage VS Two-stage

Преимущества и недостатки алгоритмов

Я не буду здесь расписывать принцип работы каждого алгоритма, а сразу рассмотрю преимущества и недостатки.

Суммировать

Из-за относительно высоких требований к точности обнаружения элементов интерфейса пользовательского интерфейса в конечном итоге был выбран алгоритм Faster RCNN.

выбор кадра

фреймворк машинного обучения

Вот несколько фреймворков машинного обучения, кратко перечисленных: Scikit Learn, TensorFlow, Pytorch, Keras.

Scikit Learn — это универсальная платформа машинного обучения, которая внутренне реализует различные алгоритмы классификации, регрессии и кластеризации (включая методы опорных векторов, случайные леса, повышение градиента, k-средних и т. д.), а также включает уменьшение размерности данных, выбор модели и данные. pre-processing Processing и другие библиотеки инструментов, простые в установке и использовании, с большим количеством примеров и очень подробными учебными пособиями и документацией.

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

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

Платформа обнаружения объектов

Платформу обнаружения целей можно понимать как библиотеку, которая объединяет алгоритмы обнаружения целей.Например, структура алгоритмов глубокого обучения TensorFlow не является средой обнаружения целей, но предоставляет API для обнаружения целей: API обнаружения объектов.

Основными системами обнаружения целей являются:Detectron,maskrcnn-benchmark,mmdetection,Detectron2. В настоящее время наиболее широко используется
Платформа обнаружения целей Detectron2 была открыта Facebook AI Research 10 октября 2019 года. Мы также используем Detectron2 для идентификации компонентов интерфейса пользовательского интерфейса, и позже мы будем использовать пример кода.

Вы можете обратиться к:Как оценить платформу обнаружения целей Detectron2, исходный код которой был открыт FAIR 10 октября 2019 г.?

Фронтенд-фреймворк для машинного обучения Pipcook

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

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

Pipcook — это конвейерная платформа, которая инкапсулирует инженерные связи машинного обучения для сбора данных, доступа к данным, обработки данных, настройки модели, обучения модели, развертывания службы модели и онлайн-обучения для разработчиков интерфейса.

Принцип и использование Pipcook можно посмотреть по адресу:

• Pipcook Github | Docs
• pipcook — универсальная алгоритмическая структура, которая позволяет интерфейсу использовать интеллектуальные функции.
• Как создать высокоуровневый интерфейс машинного обучения на основе tfjs-node

Базовые приготовления

Когда среда и модели готовы, основная часть машинного обучения — это сбор и обработка наборов данных. Есть два источника наших образцов:

• Изображение пользовательского интерфейса приложения Ali. В настоящее время существует 25 647 изображений интерфейса мобильного пользовательского интерфейса, а 10 категорий отмечены вручную, в общей сложности 49 120 компонентов.
• Изображения генерируются автоматически кодом. Поддерживает создание образцов для 10 категорий и автоматически маркирует изображения при создании изображений.

Определение типа компонента

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

• Ручная маркировка требует, чтобы компоненты были маркированы в соответствии с четко определенными характеристиками.
• Автогенерация требует написания кода стиля на основе четко определенных характеристик.

Например, определение строки состояния строки состояния мобильного телефона:

Например, определение вкладки Tab Bar:

Образец пользовательского интерфейса системного приложения Ali

В отделе Alibaba есть много приложений и продуктов. Визуальные проекты этого бизнеса управляются платформой. Мы можем получить эти визуальные проекты в качестве источника образца. В настоящее время выбран только макет Sketch, поскольку трудно экспортировать изображение размером со страницу из PSD-файла.

собирать образцы

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

1. Загрузите файл эскиза

Загрузка файлов Sketch с внутренней платформы Alibaba — это первый шаг, и сценарий каждого последующего шага начинается с серийного номера, например 1-download-sketch.ts. Так как существует множество примеров сценариев обработки, понятные имена легче понять.

/**
 * 【用途】下载 Sketch 文件
 * 【命令】ts-node 1-download-sketch.ts
 */

2. Используйте Sketchtool для пакетного экспорта в виде изображений

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

# 【用途】使用 sketchtool 导出 Sketch 中的 Artboards 保存为 1x 的 png 图片
# 【命令】sh 2-export-image-from-sketch.sh $inputDir $outputDir

for file in $1"/*"
do
  sketchtool export artboards $file --output=$2 --formats='png' --scales=1.0
done

предварительная обработка образца

Вы знаете проект дизайна от дизайнера, Taobao Live 4.0_v1, Taobao Live 4.0_v2, Taobao Live 4.0_v3..., изменения в каждой дополнительной версии могут быть не слишком большими, и страницы в каждом файле Sketch могут также включать: Страница сведений Первая версия, вторая версия страницы сведений и окончательная версия страницы сведений, после экспорта изображений будет много повторяющихся изображений.

Кроме того, есть некоторые нестандартные проекты дизайна, такие как рисование ICON на чертежной доске, а также интерактивные проекты, визуальные проекты на стороне ПК и т. д. - это не то, что нам нужно. Поэтому необходимо провести некоторую обработку.

3. Фильтр по размеру

Разделите изображения на мобильные и ПК и удалите недопустимые изображения в соответствии с размером.

# 【用途】将图片按尺寸分类剔除
# 【命令】python3 3-classify-by-size.py $inputDir $outputDir

# 删除尺寸不规范的图片，width_list 中是数量大于 100 的尺寸
if width not in width_list: 
    print('move {}'.format(img_name))
    move_file(img_dir, other_img_dir, img_name)
# 删除 高度小于 30 的图片
elif height < 30: 
    print('move {}'.format(img_name))
    move_file(img_dir, other_img_dir, img_name)
# 按尺寸归档
else: 
    width_dir = os.path.join(img_dir, str(width))
    if not os.path.exists(width_dir):
        print('mkdir:{}'.format(width))
        os.mkdir(width_dir)
        print('move {}'.format(img_name))
        move_file(img_dir, width_dir, img_name)

4. Дедупликация изображений

Если вы сами напишете логику дедупликации изображений, то сможете сделать сравнение сходства картинок. Поленитесь здесь и используйте готовый инструмент обнаружения схожести изображений напрямуюduplicate Photos Fixer Pro. Вот краткое описание метода использования, показанного в красной рамке, который поддерживает настройку условий обнаружения и подобия.

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

5. Переименование изображения

Здесь я в основном хочу рассказать о том, как делать управление выборкой, потому что набор данных будет постепенно обогащаться, и версий набора данных может быть много. Дружественными именами легко управлять, например, generator-mobile-sample-10cate-20200101-1.png, что указывает на то, что это первый мобильный образец, автоматически сгенерированный 01.01.2020. Этот набор наборов данных содержит 10 категорий.

Образец аннотации

6. Полуавтоматическая маркировка

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

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

7. Маркировка вручную

использоватьlabelImgИнструмент помечается вручную и устанавливается в соответствии с инструкциями по установке, приведенными в ссылке.Вот краткое введение в использование.

// 下载 labelImg
git clone https://github.com/tzutalin/labelImg.git

// 进入 labelImg
cd labelImg-master

// 之后按照 github 中的提示安装环境

// 执行一下命令就会打开可视化界面
python3 labelImg.py

Интерфейс визуализации выглядит следующим образом, он поддерживает два формата сохранения аннотаций, Pascal VOC и Yolo.

Я не буду говорить, как использовать интерфейс. Вот несколько горячих клавиш для повышения эффективности маркировки. Кроме того, выберите «Вид»> «Режим автосохранения» для автоматического сохранения.

w 新建立一个矩形框

d 下个图片

a 上个图片

del/fn + del  删除选中的矩形框，我的电脑需要 fn + del

Ctrl/Command++ 放大

Ctrl/Command-- 缩小

↑→↓← 移动矩形框

Puppeteer автоматически генерирует образцы

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

Случайно сгенерированные страницы

Напишите страницу и случайным образом выберите некоторые компоненты для отображения. Запустите службу локально, откройте страницу, например.http://127.0.0.1:3333/#/generator, пример страницы выглядит следующим образом:

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

Образец создания скриншота Puppeteer

определить случайные страницы (http://127.0.0.1:3333/#/generator), заскриптуйте его с помощью Puppeteer, чтобы автоматически открыть страницу, сохранить снимок экрана и получить категорию компонента и ограничивающую рамку. Основная логика следующая:

const pptr = require('puppeteer')
// 存放 COCO 格式的样本数据
const mdObj = {};
const browser = await pptr.launch()；
const page = await browser.newPage();
await page.goto(`http://127.0.0.1:3333/#/generator/${Date.now()}`)
await page.evaluate(() => {
  const container: HTMLElement | null = document.querySelector('.container')；
  const elements = document.querySelectorAll('.element');
  const msg: any = {bbox: []};
  // 获取页面中所有带 .element 选择器的元素
  elements.forEach((element) => {
    const classList = Array.from(element.classList).join(',')
    if (classList.match('element-')) {
      // 获取类别
      const type = classList.split('element-')[1].split(',')[0];
      // 计算边界框并保存至 msg
      pushBbox(element, type);
    }
  });
});
// 保存 COCO 格式样本数据
logToFile(mdObj);
// 保存 UI截图
await page.screenshot({path: 'xxx.png'});
// 关闭浏览器
await browser.close();

Образец оценки

В примерах пользовательского интерфейса приложений на базе Ali количество и богатство компонентов несбалансированы, и количество каждого компонента может быть сбалансировано путем автоматического создания образцов. Как оценить качество образцов для автоматически сгенерированных образцов? Логику автоматической генерации целевых компонентов можно перечислить до 10 000 видов, и нет смысла автоматически генерировать 20 000 таких компонентов.

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

обучение модели

Detectron 2

Используйте платформу Facebook для обнаружения целей с открытым исходным кодом Detectron 2, укажите Faster R-CNN через merge_from_file.

from detectron2.data import MetadataCatalog
from detectron2.evaluation import PascalVOCDetectionEvaluator

from detectron2.engine import DefaultTrainer,hooks
from detectron2.config import get_cfg

cfg = get_cfg()

cfg.merge_from_file("./lib/detectron2/configs/COCO-Detection/faster_rcnn_R_50_C4_3x.yaml")
cfg.DATASETS.TRAIN = ("train_dataset",)
cfg.DATASETS.TEST = ('val_dataset',)   # no metrics implemented for this dataset
cfg.DATALOADER.NUM_WORKERS = 4  # 多开几个worker 同时给GPU喂数据防止GPU闲置 
cfg.MODEL.WEIGHTS = "detectron2://ImageNetPretrained/MSRA/R-50.pkl"  # initialize from model zoo
cfg.SOLVER.IMS_PER_BATCH = 4
cfg.SOLVER.BASE_LR = 0.000025
cfg.SOLVER.NUM_GPUS = 2
cfg.SOLVER.MAX_ITER = 100000    # 300 iterations seems good enough, but you can certainly train longer
cfg.MODEL.ROI_HEADS.BATCH_SIZE_PER_IMAGE = 128   # faster, and good enough for this toy dataset
cfg.MODEL.ROI_HEADS.NUM_CLASSES = 29  # only has one class (ballon)

# 训练集
register_coco_instances("train_dataset", {}, "data/train.json", "data/img")
# 测试集
register_coco_instances("val_dataset", {}, "data/val.json", "data/img")

import os
os.makedirs(cfg.OUTPUT_DIR, exist_ok=True)

class Trainer(DefaultTrainer):
    @classmethod
    def build_evaluator(cls, cfg, dataset_name, output_folder=None):
         ### 按需求重写
    
    @classmethod
    def test_with_TTA(cls, cfg, model):
        ### 按需求重写
    
trainer = Trainer(cfg)
trainer.resume_or_load(resume=True)
trainer.train()

Результатом обучения модели Detectron 2 является файл модели в формате .pth. Как выглядит этот файл модели в формате .pth Вы можете прочитать этоУглубленный анализ файла модели .pth, сохраненного в Pytorch.

Pipcook

Pipcook уже упаковал для нас код для сбора данных, доступа к данным, обучения модели и оценки модели, и нам не нужно писать сценарии Python для этих инженерных ссылок. В настоящее время ссылка обнаружения цели в Pipcook использует алгоритм Faster RCNN в Detectron 2. Вы можете перейти кPipcook PluginsПосмотрите на реализацию, чтобы понять.

Ниже приведен пример кода для обнаружения объектов с помощью Pipcook.

const {DataCollect, DataAccess, ModelLoad, ModelTrain, ModelEvaluate, PipcookRunner} = require('@pipcook/pipcook-core');

const imageCocoDataCollect = require('@pipcook/pipcook-plugins-image-coco-data-collect').default;
const imageDetectronAccess = require('@pipcook/pipcook-plugins-detection-detectron-data-access').default;
const detectronModelLoad = require('@pipcook/pipcook-plugins-detection-detectron-model-load').default;
const detectronModelTrain = require('@pipcook/pipcook-plugins-detection-detectron-model-train').default;
const detectronModelEvaluate = require('@pipcook/pipcook-plugins-detection-detectron-model-evaluate').default;

async function startPipeline() {
   // collect detection data
   const dataCollect = DataCollect(imageCocoDataCollect, {
    url: 'http://ai-sample.oss-cn-hangzhou.aliyuncs.com/image_classification/datasets/autoLayoutGroupRecognition.zip',
    testSplit: 0.1,
    annotationFileName: 'annotation.json'
  });
  const dataAccess = DataAccess(imageDetectronAccess);
  const modelLoad = ModelLoad(detectronModelLoad, {
    device: 'cpu'
  });
  const modelTrain = ModelTrain(detectronModelTrain);
  const modelEvaluate = ModelEvaluate(detectronModelEvaluate);

  const runner = new PipcookRunner( {
    predictServer: true
  });
  runner.run([dataCollect, dataAccess, modelLoad, modelTrain, modelEvaluate])
}
startPipeline();

Оценка модели

Метрики оценки

Я обнаружил, что статья слишком длинная, вот учебный ресурс, я настоятельно рекомендую этот видеокурсКлассические алгоритмы и приложения машинного обучения Python3 [MOOC], если у вас нет времени читать его, просто посмотрите на заметки, написанные другими.Глава 10Оценивайте результаты классификации, используя точность и подробный отзыв.

Ах, позвольте мне объяснить вкратце.

Показатель точности можно понимать как показатель точности.Например, если предсказано 100 кнопок, 80 из них предсказаны правильно, а показатель точности составляет 80/100.
Скорость отзыва можно понимать как скорость отзыва, например, на самом деле кнопок 60, 40 успешно предсказаны, а скорость отзыва составляет 40/60.

Показателями оценки эффективности обнаружения цели являются mAP и FPS.MAP вычисляет среднюю точность всех категорий.Однако, поскольку результат обнаружения цели имеет ограничивающую рамку в дополнение к категории, то, как оценить точность прогнозирования этой ограничивающей рамки, включает IoU .(Пересечение над объединением) Концепция пересечения над объединением используется для представления пересечения предсказанной ограничивающей рамки и реальной ограничивающей рамки.

Этот результат можно увидеть в следующих результатах оценки.Когда IoU=0,50:0,95, то есть когда коэффициент пересечения прогнозируемой ограничивающей рамки и реальной ограничивающей рамки находится в диапазоне от 0,5 до 0,95, предсказание ограничивающей рамки верно. скорость АР составляет 0,772.

 Average Precision  (AP) @[ IoU=0.50:0.95 | area=   all | maxDets=100 ] = 0.772
 Average Precision  (AP) @[ IoU=0.50      | area=   all | maxDets=100 ] = 0.951
 Average Precision  (AP) @[ IoU=0.75      | area=   all | maxDets=100 ] = 0.915

Оценочный код

Код оценки выглядит следующим образом:

from pycocotools.cocoeval import COCOeval
from pycocotools.coco import COCO

annType = 'bbox'
# 测试集 ground truth
gt_path = '/Users/chang/coco-test-sample/data.json'
# 测试集 预测结果
dt_path = '/Users/chang/coco-test-sample/predict.json'

gt = COCO(gt_path)
gt.loadCats(gt.getCatIds())

dt = COCO(dt_path)
imgIds=sorted(gt.getImgIds())
cocoEval = COCOeval(gt,dt,annType)

for cat in gt.loadCats(gt.getCatIds()):
    cocoEval.params.imgIds  = imgIds
    cocoEval.params.catIds = [cat['id']]
    print '------------------------------  ' cat['name'] '  ---------------------------------'
    cocoEval.evaluate()
    cocoEval.accumulate()
    cocoEval.summarize()

результат оценки

В настоящее время для обучения используется комбинация пользовательского интерфейса на основе Ali и автоматически генерируемых образцов, а mAP в основном составляет около 75%.

------------------------------   searchbar   ---------------------------------
Running per image evaluation...
Evaluate annotation type *bbox*
DONE (t=2.60s).
Accumulating evaluation results...
DONE (t=0.89s).
 Average Precision  (AP) @[ IoU=0.50:0.95 | area=   all | maxDets=100 ] = 0.772
 Average Precision  (AP) @[ IoU=0.50      | area=   all | maxDets=100 ] = 0.951
 Average Precision  (AP) @[ IoU=0.75      | area=   all | maxDets=100 ] = 0.915
 Average Precision  (AP) @[ IoU=0.50:0.95 | area= small | maxDets=100 ] = -1.000
 Average Precision  (AP) @[ IoU=0.50:0.95 | area=medium | maxDets=100 ] = 0.795
 Average Precision  (AP) @[ IoU=0.50:0.95 | area= large | maxDets=100 ] = 0.756
 Average Recall     (AR) @[ IoU=0.50:0.95 | area=   all | maxDets=  1 ] = 0.816
 Average Recall     (AR) @[ IoU=0.50:0.95 | area=   all | maxDets= 10 ] = 0.830
 Average Recall     (AR) @[ IoU=0.50:0.95 | area=   all | maxDets=100 ] = 0.830
 Average Recall     (AR) @[ IoU=0.50:0.95 | area= small | maxDets=100 ] = -1.000
 Average Recall     (AR) @[ IoU=0.50:0.95 | area=medium | maxDets=100 ] = 0.838
 Average Recall     (AR) @[ IoU=0.50:0.95 | area= large | maxDets=100 ] = 0.823

Мы используем пользовательский интерфейс, отличный от Alibaba, для просмотра результатов прогнозирования, и мы можем увидеть некоторые ситуации, которые легко идентифицировать неправильно.

Развертывание службы модели

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

from detectron2.config import get_cfg
from detectron2.engine.defaults import DefaultPredictor

with open('label.json') as f:
    mp = json.load(f)

cfg = get_cfg()
cfg.merge_from_file("./config/faster_rcnn_R_50_C4_3x.yaml")
cfg.MODEL.WEIGHTS = "./output/model_final.pth"  # initialize from model zoo
cfg.MODEL.ROI_HEADS.NUM_CLASSES = len(mp)  # only has one class (ballon)
cfg.MODEL.DEVICE='cpu'

model = DefaultPredictor(cfg)

def predict(image):
    im2 = cv2.imread(image)
	out = model(x)
    data = {'status': 200}
    data['content'] = trans_data(out)

# EAS python sdk
import spark

num_io_threads = 8
endpoint = '' # '127.0.0.1:8080'

spark.default_properties().put('rpc.keepalive', '60000')
context = spark.Context(num_io_threads)
queued = context.queued_service(endpoint)

while True:
    receive_data = srv.read()
    try:
        msg = json.loads(receive_data.decode())
        ret = predict(msg["image"])
        srv.write(json.dumps(ret).encode())
    except Exception as e:
        srv.error(500, str(e))

После развертывания модели вы можете получить ссылку доступа и вызвать ее напрямую, например.example.com/API/predict…предсказывать.

Применение модели

После развертывания модели мы можем вызвать ее в нашем приложении, чтобы получить результаты прогнозирования (категории компонентов и ограничивающие рамки в визуальном черновике), сравнить их с деревом JSON, экспортированным из визуального черновика, и получить данные с информацией о компонентах ( компоненты схемы D2C).smart.layerProtocol.componentполей) описания JSON (окончательный JSON после обработки какDSLкод генерации ввода).

const detectUrl = 'http://example.com/api/predict/detect';
const res = await request(detectUrl, {
    method: 'post',
    dataType: 'json',
    timeout: 1000 * 10,
    content: JSON.stringify({
        image: image,
    }),
});
const json = res.content;

Для развертывания и вызова модельных сервисов вы можете перейти кДокументация для ПАИПроверять.

перспективы на будущее

Поскольку выбран алгоритм глубокого обучения, требуется большое количество выборок обучающей выборки, поэтому количество и качество выборок являются актуальными проблемами, требующими решения.

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

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

приложение

Формат данных

Используются две спецификации формата для управления наборами данных в области обнаружения объектов: MS COCO и Pascal VOC.

МС КОКО

Используйте формат COCO для управления наборами данных, есть папка img для хранения изображений и файл json для хранения целевой информации.Вся примерная информация находится в файле data.json, которым трудно управлять при большом объеме данных.

.
├── data.json
└── img
    ├── demoplus-20200216-1.png
    └── demoplus-20200216-2.png

изображения хранят данные изображения, аннотации хранят данные аннотации, категории хранят данные классификации, изображение, аннотация и категория образца связаны с image_id и category_id.

{
    "images":[
        {
            "file_name":"demoplus-20200216-1.png",
            "url":"img/demoplus-20200216-1.png",
            "width":750,
            "height":2562,
            "id":1
        },
        {
            "file_name":"demoplus-20200216-2.png",
            "url":"img/demoplus-20200216-2.png",
            "width":750,
            "height":1334,
            "id":2
        }
    ],
    "annotations":[
        {
            "id":1,
            "image_id":2,
            "category_id":8,
            "category_name":"navbar",
            "bbox":[
                0,
                1,
                750,
                90
            ],
            "area":67500,
            "iscrowd":0
        }
    ],
    "categories":[
        {
            "id":8,
            "supercategory":"navbar",
            "name":"navbar"
        }
    ]
}

Pascal VOC

Набор данных в формате VOC имеет две папки: Annotations используется для хранения данных аннотаций (XML-файл), а JPEGImages используется для хранения данных изображений.

.
├── Annotations
│   ├── demoplus-20200216-1.xml
│   └── demoplus-20200216-2.xml
└── JPEGImages
    ├── demoplus-20200216-1.png
    └── demoplus-20200216-2.png

Пример содержимого файла XML:

<annotation>
  <folder>PASCAL VOC</folder> 
  <filename>demo.jpg</filename> //文件名
  <source> //图像来源
    <database>MOBILE-SAMPLE-GENERATOR</database>
    <annotation>MOBILE-SAMPLE-GENERATOR</annotation>
    <image>ANTD-MOBILE</image>
  </source>
  <size> //图像尺寸（长宽以及通道数）
    <width>832</width>
    <height>832</height>
    <depth>3</depth>
  </size>
  <object> // 目标信息：类别和边界框
    <name>navbar</name>
    <bndbox>
      <xmin>0</xmin>
      <ymin>0</ymin>
      <xmax>812</xmax>
      <ymax>45</ymax>
    </bndbox>
  </object>
<annotation>