25Научные междисциплинарные исследования
УДК 004
Шляпников Валерий Михайлович Shlyapnikov Valeriy Mihailovich
Студент Student
Ярославский Государственный Университет им. П.Г. Демидова
P.G. Demidov Yaroslavl State University
РАЗРАБОТКА ПРОТОТИПА СИСТЕМЫ АННОТИРОВАНИЯ ИЗОБРАЖЕНИЙ ДЛЯ МОДЕЛЕЙ КОМПЬЮТЕРНОГО ЗРЕНИЯ
DEVELOPMENT OF A PROTOTYPE OF AN IMAGE ANNOTATION SYSTEM FOR COMPUTER VISION MODELS
Аннотация, в работе рассмотрена задача разработки прототипа веб-приложения для аннотирования изображений, формирующих наборы данных для обучения моделей компьютерного зрения. Рассмотрен стек технологий, которые были использованы для реализации приложения. Описана архитектура приложения, структура данных, разработка пользовательского интерфейса.
Annotation: the paper considers the problem of developing a prototype of a web application for annotating images that form datasets for training computer vision models. The stack of technologies that were used to implement the application is considered. The application architecture, data structure, and user interface development are described.
Ключевые слова, веб-разработка, javascript, python, vue.js, flask, компьютерное зрение, аннотация изображений.
Key words: web development, javascript, python, vue.js, flask, computer vision, image annotation.
Введение
Модели и алгоритмы компьютерного зрения позволяют обрабатывать и анализировать изображения и видеозаписи. Развитие технологий машинного обучения поспособствовало улучшению качества работы моделей компьютерного зрения и широкому их внедрению в различные сферы жизни -маркетинг, промышленность, безопасность и многие другие.
VIII Международная научно-практическая конференция Одним из самых важных этапов при разработке таких моделей является
подготовка тренировочных данных, на которых алгоритмы компьютерного
зрения будут обучаться. Как правило, данные представляют собой набор
аннотированных (размеченных) изображений - фотографий или кадров из
видеозаписей с отмеченными на них объектами или областями. Объекты (метки,
ярлыки) отмечаются человеком с помощью специальных приложений.
Реализация прототипа такого приложения будет рассмотрена в данной статье.
Постановка задачи Рассмотрим некоторые ключевые аспекты функциональности приложения, необходимые для реализации аннотирования изображений.
возможность загружать и отображать изображения из файловой системы; возможность отмечать объекты на изображениях с помощью боксов, полигонов, точек;
возможность отмечать выделенные объекты метками (определенными классами объектов);
возможность работы приложения на разных платформах.
Обзор существующих решений Как правило, компании-разработчики решений компьютерного зрения имеют свои средства и команду для аннотирования изображений. Часть из них доступна бесплатно или по подписке. Рассмотрим самые популярные из них:
VOTT (Visual Object Taggling Tools) - кроссплатформенный инструмент от компании Microsoft, отвечает поставленным требованиям, но содержит ограничение - необходимость содержать данные на серверах сервиса Azure. Кроме того, нет возможности пометить изображения целиком - можно лишь помечать отдельные объекты. Таким образом, он не подходит для создания набора данных под решения задач классификации;
CVAT (Computer Vision Annotation Tool) - бесплатный инструмент от Intel. Отвечает поставленным требованиям, но имеет ряд недостатков - сложный пользовательский интерфейс, гарантированно корректно работает только в браузерах Google Chrome;
Научные междисциплинарные исследования DataTurks - бесплатный, также отвечает поставленным требованиям, но
разработчиками уже не поддерживается;
Яндекс.Толока - сервис от Яндекса, предоставляет услуги по разметке, но
не сам инструмент.
Ввиду отсутствия всех необходимых функций у open-source инструментов
и высокой стоимости коммерческих приложений было решено разработать
собственное приложение, отвечающее всем необходимым требованиям.
Архитектура приложения Для решения поставленной задачи было разработано приложение с классической архитектурой frontend-backend (клиент-сервер), схема которой представлена на рис.1. Архитектура состоит из следующих компонентов:
Frontend-часть или клиент. Отвечает за взаимодействие с пользователем, ввод и вывод данных, отправку запросов на сервер.
Backend-часть или сервер. Реализует всю необходимую бизнес-логику, обеспечивает взаимодействие с базой данных (database) и файловой системой (file system), принимает запросы от клиента, обрабатывает их и возвращает корректные ответы с помощью API.
API - часть серверного приложения, которая является промежуточным звеном между клиентом и сервером, предоставляет клиенту в ответ на запросы данные от сервера в необходимом формате.
База данных, хранит информацию, с которой работает сервер. Файловая система, хранит изображения и разметку.
/ Frcnterd А
J
/ \
f АР
\ )
Backend
Database
File System
Рис. 1 Архитектура приложения
VIII Международная научно-практическая конференция
Структура данных
Хранение данных в приложении реализовано посредством использования базы данных и файловой системы. В качестве системы управления базой данных была использована PostgreSQL. Базы данных были использованы для управления пользователями, схема данных в базе представлена на рис. 2.
30ГЬ
¡с1
пате
Погьзоватегь
1одр|
раззшогй
г~ го(е_й
J
Рис. 2 Схема базы данных для управления пользователями
Файловая система была использована для хранения категорий, папок изображений и самих изображений с разметкой. Категория представляет собой директорию со служебным файлом с мета-данными metajson и папками изображний внутри. Папка изображений представляет собой набор изображений с соответстующим им файлами разметки. Схема хранения представлена на рис. 3.
Рис. 3 Структура категорий и папок в файловой системе
Научные междисциплинарные исследования Реализация бэкенда приложения Для реализации серверной части приложения был выбран язык программирования Python и фреймворк для разработки веб-приложений Flask. Такой выбор был сделан ввиду ряда причин:
Большая часть решений для компьютерного зрения реализована на языке программирования Python. Написание приложения в том же стеке позволит в дальнейшем реализовать более тесное взаимодействие при подготовке данных для таких моделей и добавить новый функций (например, авторазметка изображений).
Наличие готовых инструментов в Python и Flask для веб-разработки. Использование Flask обеспечивает большую гибкость в разработке серверной части приложения и API.
Наличие в Python и Flask встроенных средств для взаимодействия с базой данных и файловой системой.
В серверном приложении были реализованы следующие маршруты: /api/signin - маршрут, реализующий авторизацию в приложении; /api/users - маршрут, реализующий работу с пользователями (создание, удаление, редактирование);
/api/categories - маршрут, реализующий работу с категориями изображений;
/api/folders - маршрут, реализующий работу с папками изображений; /api/images - маршрут, отвечающий за работу с изображениями (получение, сохранение, удаление) и сохранение или изменение на них разметки.
Контроллеры для этих маршрутов [1, c.26] реализуют их обработку, для хранения данных используя файловую систему и базу данных.
Реализация фронтенда приложения Для реализации клиентской части приложения был выбран стандартные стек для веб-приложения - язык программирования Javascript, язык разметки HTML и каскадные таблицы стилей CSS, а также компонентный javascript-фреймворк Vue.js. Составные части клиентского приложения:
VIII Международная научно-практическая конференция Маршрутизатор. Определяет URL и сопоставляет ему определенный компонент [2, с. 159];
Компонент. Обособленная часть интерфейса, которая имеет свое состояние и методы работы с ним. Глобальное состояние приложения и данные для работы получает из хранилища Vuex.
Хранилище состояния приложения Vuex. Реализует хранение состояния всего приложения, методы доступа к ним и их обновление, а также отвечает за отправку запросов к API.
Пример такой структуры для компонента разметки представлен на рис.4.
LR.
http:WI oeal h os : : 4 20 0/m a rkup/i пп a - e '
Routeг
-Оэмпо-ент paüOT=.i ■; разметкой
АР
Рис. 4. Пример обработки URL для разметки изображения
Реализация разметки изображений Разметка изображений реализована с помощью элемента HTML5 - Canvas. Этот элемент предназначен для создания графики с помощью Javascript.
Изображению сопоставляется слой canvas, на котором пользователь с помощью различных инструментов может создавать элементы графики - линии, прямоугольники, окружности, произвольные полигоны. Координаты полученных фигур сохраняются вместе с названиями меток в формате JSON. Пример сохранения произвольного полигона:
"points": [ {
"x": 1250.7603305785121, "y": 324.8439921377563
},
Научные междисциплинарные исследования
"closed": true, "label": "line"
}
Пользовательский интерфейс приложения Пользовательский интерфейс приложения реализован с помощью библиотеки Bootstrap. Он предоставляет универсальные компоненты интерфейса, которые одинаково работают и корректно отображаются во всех браузерах. Примеры интерфейса приложения представлены на рис. 5 и 6.
framel.jpg | (not marked) | 3 objects " "УГ Щл • ||Ц—
r / /
I i
f I Ш'Г
к *
ж
: v
ГшН 1 \
Г • V •
\
' 1 i m
Рис. 5 Экран редактирования разметки изображения
,-в . с ïW'-
.T. ' v';V,4 rs
Рис. 6 Экран выбора категорий и папок с фото
VIII Международная научно-практическая конференция
Заключение
В результате работы было разработано кроссплатформенное и кроссбраузерное приложение для аннотирования изображений. Приложение позволяет размечать объекты на изображениях с помощью инструментов (бокс, полигон, круг) и меток (labels). Из таких изображений в дальнейшем можно составлять наборы данных для тренировки на них моделей компьютерного зрения. В дальнейшем приложение можно расширить и добавить множество функций - аналитика и статистика, авторазметка с помощью компьютерного зрения, улучшение интерфейса и т.д.
Библиографический список:
1. Гринберг М. Разработка веб-приложений с использованием Flask на языке Python / пер. с анг А.Н. Киселева // ДМК Пресс. М, 2016. С. 26-28
Хэнчетт Э., Линстоун Б. Vue.js в действии. // Питер. Спб, 2019. С. 159-179.
