Ересь
BIN
lab2/img/almost-here.png
Normal file
|
After Width: | Height: | Size: 115 KiB |
|
Before Width: | Height: | Size: 668 KiB After Width: | Height: | Size: 801 KiB |
|
Before Width: | Height: | Size: 578 KiB After Width: | Height: | Size: 800 KiB |
BIN
lab2/img/project-page-with-images.png
Normal file
|
After Width: | Height: | Size: 118 KiB |
|
Before Width: | Height: | Size: 805 KiB After Width: | Height: | Size: 777 KiB |
|
Before Width: | Height: | Size: 806 KiB After Width: | Height: | Size: 786 KiB |
|
Before Width: | Height: | Size: 960 KiB After Width: | Height: | Size: 929 KiB |
155
lab2/report.tex
@@ -215,55 +215,8 @@
|
|||||||
|
|
||||||
В данной лабораторной будут использованы части 10, 12, 14, 15, 17.
|
В данной лабораторной будут использованы части 10, 12, 14, 15, 17.
|
||||||
|
|
||||||
\newpage
|
\newpage
|
||||||
\section{Описание программы Label Studio}
|
\section{Тип пользователя и уровень подготовки}
|
||||||
|
|
||||||
Label Studio --- это многофункциональная платформа для разметки данных, поддерживающая широкий спектр типов данных: изображения, текст, аудио, видео, табличные данные и т.\,д. Инструмент применяется для подготовки обучающих датасетов в проектах машинного обучения, автоматизации бизнес-процессов, анализа данных и других задач, требующих структурированной разметки.
|
|
||||||
|
|
||||||
Интерфейс Label Studio можно условно разделить на несколько ключевых областей:
|
|
||||||
|
|
||||||
\begin{itemize}
|
|
||||||
\item \textbf{Левая панель (панель задач)} --- содержит список элементов данных, которые необходимо разметить: изображения, тексты или другие объекты. Здесь отображаются статусы задач (не размечено, в процессе, размечено), доступен выбор конкретного элемента для работы, а также возможны фильтрация и поиск по задачам.
|
|
||||||
|
|
||||||
\item \textbf{Центральная область разметки (workspace)} --- основная область, в которой происходит взаимодействие с данными. В зависимости от типа данных она может включать:
|
|
||||||
\begin{itemize}
|
|
||||||
\item просмотр изображений с инструментами выделения областей (bounding boxes, polygons, keypoints);
|
|
||||||
\item текстовый редактор для аннотации фрагментов текста;
|
|
||||||
\item аудиоплеер с временной шкалой и инструментами выделения сегментов;
|
|
||||||
\item видеоплеер с возможностью разметки покадрово;
|
|
||||||
\item интерфейс просмотра и редактирования табличных данных.
|
|
||||||
\end{itemize}
|
|
||||||
Эта область динамически изменяется в зависимости от выбранного шаблона разметки (Labeling Config).
|
|
||||||
|
|
||||||
\item \textbf{Правая панель (панель инструментов и свойств)} --- отображает доступные категории разметки (labels), их параметры и структуру. В зависимости от конфигурации проекта здесь могут размещаться:
|
|
||||||
\begin{itemize}
|
|
||||||
\item список меток, тегов, классов объектов;
|
|
||||||
\item параметры выбранного объекта разметки (цвет, класс, дополнительные атрибуты);
|
|
||||||
\item настройки ввода данных (например, формы для ввода тегов, числовых значений или текстовых описаний).
|
|
||||||
\end{itemize}
|
|
||||||
Эта панель позволяет изменять атрибуты аннотаций и добавлять связанные метаданные.
|
|
||||||
|
|
||||||
\item \textbf{Верхняя панель управления} --- включает элементы управления проектом и текущей задачей:
|
|
||||||
\begin{itemize}
|
|
||||||
\item навигация между задачами (следующая/предыдущая);
|
|
||||||
\item кнопки сохранения и отправки разметки;
|
|
||||||
\item режимы просмотра и переключение инструментов;
|
|
||||||
\item действия отмены и повторения (undo/redo);
|
|
||||||
\item доступ к настройкам проекта и шаблона разметки.
|
|
||||||
\end{itemize}
|
|
||||||
|
|
||||||
\item \textbf{Нижняя панель} --- может содержать дополнительные элементы в зависимости от типа разметки:
|
|
||||||
\begin{itemize}
|
|
||||||
\item временные шкалы для аудио/видео;
|
|
||||||
\item вспомогательные панели навигации (например, миниатюры кадров);
|
|
||||||
\item статистические данные о текущей задаче.
|
|
||||||
\end{itemize}
|
|
||||||
\end{itemize}
|
|
||||||
|
|
||||||
Label Studio предоставляет гибкую систему настройки интерфейса через XML-подобную конфигурацию (Labeling Config), что позволяет адаптировать рабочую среду под конкретные виды задач и сложные наборы данных. Платформа поддерживает одновременную работу нескольких человек, сравнение разметки, контроль качества и интеграцию с внешними моделями машинного обучения для создания предварительной разметки.
|
|
||||||
|
|
||||||
|
|
||||||
\subsection{Тип пользователя и уровень подготовки}
|
|
||||||
|
|
||||||
В рамках данной работы рассматривается \textbf{пользователь-новичок}:
|
В рамках данной работы рассматривается \textbf{пользователь-новичок}:
|
||||||
|
|
||||||
@@ -274,27 +227,16 @@
|
|||||||
\end{itemize}
|
\end{itemize}
|
||||||
|
|
||||||
|
|
||||||
\subsection{Задание для пользователя}
|
\section{Задание для пользователя}
|
||||||
|
|
||||||
Задание для пользователя формулируется следующим образом:
|
Задание для пользователя формулируется следующим образом:
|
||||||
|
|
||||||
\begin{quote}
|
\begin{quote}
|
||||||
«На фотографиях городских улиц выделить светофоры (пешеходные и автомобильные) с помощью прямоугольных оболочек (bounding boxes). Оболочки задаются координатами в пространстве устройства (в пикселях) и ориентированы параллельно осям изображения. Количество оболочек на одном изображении не ограничено. Прямоугольные оболочки могут пересекаться и быть вложенными друг в друга. Результаты разметки выгрузить в формате JSON».
|
«На фотографиях городских улиц выделить автомобильные светофоры с помощью прямоугольных оболочек (bounding boxes). Оболочки задаются координатами в пространстве устройства (в пикселях) и ориентированы параллельно осям изображения. Количество оболочек на одном изображении не ограничено. Прямоугольные оболочки могут пересекаться и быть вложенными друг в друга. Результаты разметки выгрузить в формате JSON».
|
||||||
\end{quote}
|
\end{quote}
|
||||||
|
|
||||||
Результатом выполнения задания считается наличие в Label Studio проекта, содержащего размеченные изображения со светофорами, где на каждом изображении объекты выделены корректными ограничивающими прямоугольниками, а также наличие JSON файла с разметкой.
|
Результатом выполнения задания считается наличие JSON файла с координатами оболочек.
|
||||||
|
|
||||||
|
|
||||||
% \subsection{Условия использования}
|
|
||||||
|
|
||||||
% В терминах ГОСТ Р ИСО 9241-11 условия использования включают пользователей, задачи, оборудование (аппаратные средства и программные средства), физическую и социальную среду. Пользователя и задачу мы уже определили, остальные условия следующие:
|
|
||||||
|
|
||||||
% \begin{itemize}
|
|
||||||
% \item \textbf{Аппаратные средства:} настольный компьютер с мышью и клавиатурой, подключённый к интернету; дисплей с разрешением 1920 на 1080 пикселей;
|
|
||||||
% \item \textbf{Программные средства:} приложение Label Studio;
|
|
||||||
% \item \textbf{Физическая среда:} стандартное офисное рабочее место, компьютерное кресло, стол;
|
|
||||||
% \item \textbf{Социальная среда:} индивидуальная работа.
|
|
||||||
% \end{itemize}
|
|
||||||
|
|
||||||
\newpage
|
\newpage
|
||||||
\section{Сценарий выполнения задания в Label Studio}
|
\section{Сценарий выполнения задания в Label Studio}
|
||||||
@@ -338,7 +280,7 @@
|
|||||||
|
|
||||||
\subsection*{Шаг 1. Открыть Label Studio и зарегистрироваться}
|
\subsection*{Шаг 1. Открыть Label Studio и зарегистрироваться}
|
||||||
|
|
||||||
После открытия Label Studio перед пользователем появляется страница для входа в систему (см. Рис.~\ref{login}).
|
После открытия Label Studio перед пользователем-новичком появляется страница для входа в систему (см. Рис.~\ref{login}).
|
||||||
|
|
||||||
\begin{figure}[h!]
|
\begin{figure}[h!]
|
||||||
\centering
|
\centering
|
||||||
@@ -348,7 +290,8 @@
|
|||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
\newpage
|
\newpage
|
||||||
Для того, чтобы зарегистрироваться, пользователь должен нажать на кнопку "Sign up" ("Зарегистрироваться"), после чего откроется страница для регистрации (см. Рис.~\ref{signup}).
|
У меня как у пользователя-новичка ещё нету аккаунта в системе, а кнопки для анонимной работы не наблюдается, поэтому придётся зарегистрироваться.
|
||||||
|
Для того, чтобы зарегистрироваться, пользователь-новичок нажимает на кнопку "Sign up" ("Зарегистрироваться"), после чего откроется страница для регистрации (см. Рис.~\ref{signup}).
|
||||||
|
|
||||||
\begin{figure}[h!]
|
\begin{figure}[h!]
|
||||||
\centering
|
\centering
|
||||||
@@ -357,7 +300,7 @@
|
|||||||
\label{signup}
|
\label{signup}
|
||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
Далее нужно ввести адрес электронной почты и пароль, после чего нажать на кнопку "Create account" ("Создать аккаунт"). После чего появляется стартовая страница (см. Рис.~\ref{first-screen}).
|
Далее пользователь-новичёк вводит адрес электронной почты и пароль, после чего нажимает на кнопку "Create account" ("Создать аккаунт"). Это вполне привычная процедура, присущая большинству современных сервисов. После чего появляется стартовая страница (см. Рис.~\ref{first-screen}).
|
||||||
|
|
||||||
\begin{figure}[h!]
|
\begin{figure}[h!]
|
||||||
\centering
|
\centering
|
||||||
@@ -370,7 +313,7 @@
|
|||||||
|
|
||||||
\subsection*{Шаг 2. Создать новый проект и указать его название}
|
\subsection*{Шаг 2. Создать новый проект и указать его название}
|
||||||
|
|
||||||
После успешной регистрации, пользователь попадает на стартовую страницу (см. Рис.~\ref{first-screen}). Для того, чтобы создать новый проект, достаточно нажать на кнопку "Create project" ("Создать проект"). После чего откроется страница для создания проекта (см. Рис.~\ref{create-project}).
|
После успешной регистрации, перед пользователем автоматически открывается стартовая страница (см. Рис.~\ref{first-screen}) с большой синей кнопкой "Create project" ("Создать проект"). Я, как пользователь-новичёк, догадался, что чтобы начать разметку нужно создать проект в системе. Для этого я нажал на кнопку "Create project" ("Создать проект"). После чего открылась страница для создания проекта (см. Рис.~\ref{create-project}).
|
||||||
|
|
||||||
\begin{figure}[h!]
|
\begin{figure}[h!]
|
||||||
\centering
|
\centering
|
||||||
@@ -379,7 +322,7 @@
|
|||||||
\label{create-project}
|
\label{create-project}
|
||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
На этой странице указываем название проекта в поле "Project name" ("Название проекта") и нажимаем на кнопку "Save" ("Сохранить"). После чего пользователь попадает на страницу проекта (см. Рис.~\ref{project-page}).
|
На этой странице я указал название проекта в поле "Project name" ("Название проекта") и нажал на кнопку "Save" ("Сохранить"). После чего я автоматически попал на страницу проекта (см. Рис.~\ref{project-page}). Несмотря на то, что весь интерфейс системы представлен на английском, название проекта удалось указать на русском языке.
|
||||||
|
|
||||||
\begin{figure}[h!]
|
\begin{figure}[h!]
|
||||||
\centering
|
\centering
|
||||||
@@ -393,7 +336,7 @@
|
|||||||
\newpage
|
\newpage
|
||||||
\subsection*{Шаг 3. Загрузить исходные изображения со светофорами}
|
\subsection*{Шаг 3. Загрузить исходные изображения со светофорами}
|
||||||
|
|
||||||
После того, как проект создан, пользователь попадает на страницу проекта (см. Рис.~\ref{project-page}). Для того, чтобы загрузить исходные изображения со светофорами, достаточно нажать на кнопку "Import" ("Импортировать"). После чего откроется страница для загрузки файлов (см. Рис.~\ref{upload-files}).
|
После создания проекта автоматически открылась страница проекта (см. Рис.~\ref{project-page}). Название проекта отображается в верхней части страницы. По центру экрана отображается надпись <<Import data to get your project started>>, что означает <<Импортируйте данные, чтобы начать проект>>. Я, как пользователь-новичёк, догадался, что на этом этапе можно загрузить исходные изображения. На экране также видно две больших кнопки <<Connect Cloud Storage>> (<<Подключить облачное хранилище>>) и <<Import>> (<<Импортировать>>). Мои файлы с изображениями хранятся в папке на моём компьютере, а значит работа с облачным хранилищем мне не подойдёт. Поэтому далее я нажал на кнопку <<Import>> (<<Импортировать>>). После чего открылась страница для загрузки файлов (см. Рис.~\ref{upload-files}).
|
||||||
|
|
||||||
\begin{figure}[h!]
|
\begin{figure}[h!]
|
||||||
\centering
|
\centering
|
||||||
@@ -402,7 +345,7 @@
|
|||||||
\label{upload-files}
|
\label{upload-files}
|
||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
На этой странице пользователь может выбрать файлы для загрузки. Для этого нужно нажать на кнопку "Upload files" ("Загрузить файлы") и выбрать файлы с изображениями. Все загруженные файлы будут отображены списком, справа от них указывается их размер и прогресс загрузки. После завершения загрузки появится зелёная полоска (см. Рис.~\ref{upload-files-success}).
|
По центру открывшейся страницы видна надпись <<Dgag \& drop files here or click to browse>>, что означает <<Перетащите файлы сюда или нажмите для выбора файлов>>. Далее я просто открыл папку со своими изображениями в соседнем окне Windows, выделил нужные файлы и перетащил мышкой на надпись <<Dgag \& drop files here or click to browse>>. Это привычная для современного пользователя техника. Выбранные файлы отобразились списком на экране, справа от каждого файла появилась полоска загрузки. После завершения загрузки полоска стала зелёной (см. Рис.~\ref{upload-files-success}).
|
||||||
|
|
||||||
\begin{figure}[h!]
|
\begin{figure}[h!]
|
||||||
\centering
|
\centering
|
||||||
@@ -411,7 +354,8 @@
|
|||||||
\label{upload-files-success}
|
\label{upload-files-success}
|
||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
Чтобы добавить файлы в проект, пользователю нужно нажать на кнопку "Import" ("Импортировать"). После чего файлы будут добавлены в проект и отображены на странице проекта (см. Рис.~\ref{project-page}).
|
\newpage
|
||||||
|
В правом верхнем углу этой страницы видно две кнопки <<Cancel>> (<<Отмена>>) и <<Import>> (<<Импортировать>>). Отменять загрузку я не планировал, поэтому нажал на кнопку <<Import>> (<<Импортировать>>). После этого автоматически открылась страница проекта, но теперь на ней отображается список из 4-х элементов, которые судя по всему, являются моими загруженными файлами (см. Рис.~\ref{project-page}). Хотелось бы увидеть миниатюры изображений, чтобы было понятно, что за файлы загружены, но пока видны только названия файлов и их идентификаторы.
|
||||||
|
|
||||||
\begin{figure}[h!]
|
\begin{figure}[h!]
|
||||||
\centering
|
\centering
|
||||||
@@ -420,44 +364,48 @@
|
|||||||
\label{project-page-with-files}
|
\label{project-page-with-files}
|
||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
Понравился прогресс-бар загрузки и зелёная полоска успешного завершения. Сразу видно, какие форматы поддерживаются. Не понравилось, что нельзя удалить отдельный файл из списка --- только сбросить всё и начать заново.
|
Понравился прогресс-бар загрузки и зелёная полоска успешного завершения, понятно, что файлы загружаются и понятно, когда они полностью загружены. Сразу видно, какие форматы поддерживаются. Не понравилось, что нельзя удалить отдельный файл из списка --- только сбросить всё и начать заново.
|
||||||
|
|
||||||
\newpage
|
\newpage
|
||||||
\subsection*{Шаг 4. Открыть настройки проекта и выбрать тип разметки}
|
\subsection*{Шаг 4. Открыть настройки проекта и выбрать тип разметки}
|
||||||
|
|
||||||
После того, как файлы загружены, пользователь попадает на страницу проекта (см. Рис.~\ref{project-page-with-files}). Для того, чтобы открыть настройки проекта, достаточно нажать на кнопку "Settings" ("Настройки") в правом верхнем углу страницы. После чего откроется страница настроек проекта (см. Рис.~\ref{project-settings}). В меню настроек нужно выбрать пункт "Labeling Interface" ("Интерфейс разметки").
|
После того, как файлы загружены, автоматически открывается страница проекта (см. Рис.~\ref{project-page-with-files}). Теперь я, как пользователь-новичёк, попробовал нажать на первый элемент из списка на экране, чтобы приступить к разметке. Я ожидал, что откроется страница с моей картинкой, но вместо этого появилось окошко с заголовком <<You're almost there>> (см. Рис.~\ref{almost-here}) и подписью <<Before you can annotate the data, set up labeling configuration>>, что означает <<Перед тем, как начать разметку данных, настройте конфигурацию разметки>>. Хоть я и первый раз работал в этой программе, но у меня есть понимание того, что существуют разные типы разметки для разных задач машинного обучения, и скорее всего именно тип разметки и нужно указать, потому что система никак не могла его угадать. На этом же окошке есть две кнопки <<Cancel>> (<<Отмена>>) и <<Go to setup>> (<<Настроить>>). Я нажал на кнопку <<Go to setup>> (<<Настроить>>), после чего открылась страница с настройками разметки (см. Рис.~\ref{templates-page}).
|
||||||
|
|
||||||
\begin{figure}[h!]
|
\begin{figure}[h!]
|
||||||
\centering
|
\centering
|
||||||
\includegraphics[width=1\linewidth]{img/project-settings.png}
|
\includegraphics[width=1\linewidth]{img/almost-here.png}
|
||||||
\caption{Страница настроек проекта}
|
\caption{Вместо моей картинки появилось окошко с заголовком <<You're almost there>>.}
|
||||||
\label{project-settings}
|
\label{almost-here}
|
||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
Чтобы выбрать тип разметки, нужно нажать на кнопку <<Browse Templates>> ("Выбрать шаблоны"), после чего откроется страница с шаблонами разметки (см. Рис.~\ref{templates-page}), на которой сразу виден нужный шаблон "Object Detection with Bounding Boxes" ("Обнаружение объектов с ограничивающими прямоугольниками").
|
|
||||||
|
Открывшаяся страница сначала немного меня смутила (см. Рис.~\ref{templates-page}), потому что на ней отображается очень много элементов с разными картинками, но не с теми, которые я самостоятельно загружал. Однако я достаточно быстро смог соориентироваться и понять, что эти изображения действительно не мои, а являются лишь иллюстрациями к разным типам разметки. Например, первая картинка, на которой изображены, судя по всему, ноги спортсменов, иллюстрирует тип разметки для задач семантической сегментации изображений с помощью полигонов. В этом также можно убедиться, если прочитать надпись под этой картинкой: <<Semantic segmentation with Polygons>>. В меню слева можно увидеть разные категории для разных типов разметки: <<Computer Vision>> (<<Компьютерное зрение>>), <<Natural Language Processing>> (<<Обработка естественного языка>>), <<Audio/Speech Processing>> (<<Обработка аудио/голоса>>) и так далее.
|
||||||
|
|
||||||
|
Хоть я и являюсь пользователем-новичком, однако у меня есть понимание, что моя задача с разметкой изображений, относится к области задач компьютерного зрения, именно эта категория выбрана в меню слева, а значит в этом меню я могу ничего не менять. Осталось найти разметку ограничивающими прямоугольниками, на английском она называется <<Object Detection with Bounding Boxes>> (<<Обнаружение объектов с ограничивающими прямоугольниками>>), именно такому типу разметки соответствует третья карточка в списке с изображением биологических клеток (см. Рис.~\ref{templates-page}). Именно на эту карточку я и нажал, на рисунке~\ref{templates-page} видно, что она выделена синей рамкой.
|
||||||
|
|
||||||
\begin{figure}[h!]
|
\begin{figure}[h!]
|
||||||
\centering
|
\centering
|
||||||
\includegraphics[width=1\linewidth]{img/templates-page.png}
|
\includegraphics[width=1\linewidth]{img/templates-page.png}
|
||||||
\caption{Страница с шаблонами разметки}
|
\caption{Страница с типами разметки}
|
||||||
\label{templates-page}
|
\label{templates-page}
|
||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
\newpage
|
Нужный шаблон нашёлся сразу на первой странице. Однако страница с выбором типов разметки сильно нагружена, представлено большое число различных типов для различных задач машинного обучения. Это может запутать пользователя-новичка.
|
||||||
Чтобы выбрать шаблон, нужно нажать на него левой кнопкой мыши, после чего откроется страница с настройками шаблона (см. Рис.~\ref{template-settings}).
|
|
||||||
|
\subsection*{Шаг 5. В конфигурации разметки указать единственный класс — «Светофор»}
|
||||||
|
|
||||||
|
После выбора типа разметки автоматически открывается страница с настройками типа разметки (см. Рис.~\ref{template-settings}). На ней снова отображается не то изображение, которое я загружал ранее, что путает пользователя-новичка. Однако, после более внимательного ознакомления со страницей, я понял, что это снова лишь иллюстрация того, как будет выглядеть разметка. Над картинкой с самолётами выведена надпись <<UI Preview>> (<<Предварительный просмотр>>).
|
||||||
|
|
||||||
|
Также в левой части экрана есть раздел <<Labels>> (<<Классы>>), в котором виден список классов. После выбора типа разметки, система автоматически, судя по всему в качестве иллюстрации, добавила два класса <<Airplane>> (<<Самолёт>>) и <<Car>> (<<Машина>>). Хоть я и являюсь пользователем новичком, но знаю, что разметка ограничивающими прямоугольниками подразумевает присвоение какого-либо класса каждому такому прямоугольнику. В задаче, которую я перед собой поставил, меня интересует только один класс прямоугольников - <<Светофоры>>. А значит мне нужно каким-то образом удалить созданные автоматически классы <<Airplane>> (<<Самолёт>>) и <<Car>> (<<Машина>>) и добавить свой класс - <<Светофор>>.
|
||||||
|
|
||||||
\begin{figure}[h!]
|
\begin{figure}[h!]
|
||||||
\centering
|
\centering
|
||||||
\includegraphics[width=1\linewidth]{img/template-settings.png}
|
\includegraphics[width=1\linewidth]{img/template-settings.png}
|
||||||
\caption{Страница с настройками шаблона}
|
\caption{Страница с настройками типа разметки}
|
||||||
\label{template-settings}
|
\label{template-settings}
|
||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
Нужный шаблон нашёлся сразу на первой странице. Это удобно. Однако на странице настроек шаблона в качестве примера всегда отображается изображение самолёта, независимо от того, какие классы указывает пользователь. Это может запутать пользователя-новичка, который ожидает увидеть изоображение, которое он сам загружал на предыдущих шагах.
|
Чтобы удалить ненужные классы я попробовал навести мышку на название класса <<Car>> (<<Машина>>). Рядом с ним появилась красная иконка с мусорной корзиной (см. Рис.~\ref{template-settings-labels}). Я нажал на неё и класс <<Car>> (<<Машина>>) удалился. Я проделал аналогичную операцию с классом <<Airplane>> (<<Самолёт>>).
|
||||||
|
|
||||||
\subsection*{Шаг 5. В конфигурации разметки указать единственный класс — «Светофор»}
|
|
||||||
|
|
||||||
На странице с настройками шаблона можно увидеть раздел <<Labels>> ("Классы"). Программа автоматически добавила два класса для машин и самолётов, однако нам они не нужны. Поэтому их нужно удалить. Для этого достаточно навести мышь на ненужный класс и нажать на иконку мусорной корзины (см. Рис.~\ref{template-settings-labels}).
|
|
||||||
|
|
||||||
\begin{figure}[h!]
|
\begin{figure}[h!]
|
||||||
\centering
|
\centering
|
||||||
@@ -466,7 +414,8 @@
|
|||||||
\label{template-settings-labels}
|
\label{template-settings-labels}
|
||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
После удаления ненужных классов, можно добавить класс светофор. Для этого достаточно ввести слово <<Светофор>> в поле <<Add label names>> и нажать на кнопку <<Add>> ("Добавить"). После чего класс будет добавлен в список классов (см. Рис.~\ref{template-settings-labels-added}).
|
\newpage
|
||||||
|
Автоматически созданные классы удалены, осталось добавить свой класс - <<Светофор>>. Для этого я ввёл слово <<Светофор>> в поле <<Add label names>> и нажал на кнопку <<Add>> (<<Добавить>>). Ожидаемо класс <<Светофор>> появился в разделе <<Labels>> (<<Классы>>) (см. Рис.~\ref{template-settings-labels-added}).
|
||||||
|
|
||||||
\begin{figure}[h!]
|
\begin{figure}[h!]
|
||||||
\centering
|
\centering
|
||||||
@@ -475,29 +424,28 @@
|
|||||||
\label{template-settings-labels-added}
|
\label{template-settings-labels-added}
|
||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
Осталось только сохранить шаблон, нажав на кнопку <<Save>> ("Сохранить"). Рядом с кнопкой сохранения появится зелёная надпись <<Saved!>> ("Сохранено!") (см. Рис.~\ref{template-settings-labels-saved}), в подтверждение того, что шаблон был сохранен успешно.
|
Теперь я разобрался с классами, сходу не ясно, что делать дальше. Однако, если присмотреться, то внизу по центру страницы расположена крупная кнопка <<Save>> ("Сохранить"). Я ещё помню, что всё это время мы настраивали тип разметки, вероятно эта кнопка отвечает за сохранение тех настроек, что я сделал. До этого я выбирал тип разметки с ограничивающими прямоугольниками и указывал нужный мне класс <<Светофор>>. Нажимаю на кнопку <<Save>> (<<Сохранить>>). Рядом с кнопкой сохранения появилась зелёная надпись <<Saved!>> ("Сохранено!") (см. Рис.~\ref{template-settings-labels-saved}), в подтверждение того, что настройки разметки были сохранены успешно, а затем автоматически открылась основная страница проекта (см. Рис.~\ref{project-page-with-images}).
|
||||||
|
|
||||||
\begin{figure}[h!]
|
\begin{figure}[h!]
|
||||||
\centering
|
\centering
|
||||||
\includegraphics[width=0.3\linewidth]{img/template-settings-labels-saved.png}
|
\includegraphics[width=0.3\linewidth]{img/template-settings-labels-saved.png}
|
||||||
\caption{Кнопка сохранения шаблона}
|
\caption{Рядом с кнопкой сохранения появилась зелёная надпись <<Saved!>> ("Сохранено!") в подтверждение того, что настройки были сохранены успешно}
|
||||||
\label{template-settings-labels-saved}
|
\label{template-settings-labels-saved}
|
||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
Добавление и удаление классов интуитивно понятно. Понравилась зелёная надпись <<Saved!>> --- сразу видно, что изменения сохранены.
|
|
||||||
|
|
||||||
\subsection*{Шаг 6. Перейти к первому изображению и изучить инструменты разметки}
|
\subsection*{Шаг 6. Перейти к первому изображению и изучить инструменты разметки}
|
||||||
|
|
||||||
После загрузки файлов и сохранения шаблона, можно приступить к разметке. Для этого достаточно нажать на первое изображение в списке файлов проекта (см. Рис.~\ref{project-page-with-files1}).
|
Снова автоматически открылась уже знакомая основная страница проекта со списком (см. Рис.~\ref{project-page-with-images}). Но теперь у каждого элемента списка отображается миниатюрная версия с изображениями, которые я сам загружал. Снова попробую наконец приступить к разметке, нажимаю левой кнопкой мыши на одну из своих картинок.
|
||||||
|
|
||||||
\begin{figure}[h!]
|
\begin{figure}[h!]
|
||||||
\centering
|
\centering
|
||||||
\includegraphics[width=1\linewidth]{img/project-page-with-files.png}
|
\includegraphics[width=1\linewidth]{img/project-page-with-images.png}
|
||||||
\caption{Список файлов на странице проекта}
|
\caption{Список файлов на странице проекта}
|
||||||
\label{project-page-with-files1}
|
\label{project-page-with-images}
|
||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
После нажатия открывается страница разметки, соответствующая выбранному шаблону (см. Рис.~\ref{labeling-page}).
|
После нажатия открывается страница разметки (см. Рис.~\ref{labeling-page}).
|
||||||
|
|
||||||
\begin{figure}[h!]
|
\begin{figure}[h!]
|
||||||
\centering
|
\centering
|
||||||
@@ -515,30 +463,28 @@
|
|||||||
\label{labeling-page-tools}
|
\label{labeling-page-tools}
|
||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
В правом нижнем углу расположена кнопка <<Submit>> ("Сохранить"), с помощью которой можно сохранить разметку.
|
В правом нижнем углу расположена кнопка <<Submit>> ("Сохранить").
|
||||||
|
|
||||||
Понравились всплывающие подсказки при наведении на инструменты. Интерфейс не перегружен, всё необходимое под рукой. Не хватает кнопки отмены для сброса разметки без сохранения.
|
Понравились всплывающие подсказки при наведении на инструменты. Интерфейс не перегружен, всё необходимое под рукой. Не хватает кнопки отмены для сброса разметки без сохранения.
|
||||||
|
|
||||||
\newpage
|
\newpage
|
||||||
\subsection*{Шаг 7. Для каждого изображения выделить объекты «Светофор» с помощью ограничивающих прямоугольников}
|
\subsection*{Шаг 7. Для каждого изображения выделить объекты «Светофор» с помощью ограничивающих прямоугольников}
|
||||||
|
|
||||||
Для того, чтобы выделить объекты «Светофор» с помощью ограничивающих прямоугольников, достаточно нажать на слово <<Светофор>>, а затем нарисовать прямоугольник в нужном месте изображения (см. Рис.~\ref{labeling-page-object}).
|
Теперь я как пользователь-новичёк пробую нарисовать ограничивающий прямоугольник вокруг светофора на моём изображении. Как видно на рисунке~\ref{labeling-page-object}, вокруг светофора появляется нужный мне ограничивающий прямоугольник.
|
||||||
|
|
||||||
\begin{figure}[h!]
|
\begin{figure}[h!]
|
||||||
\centering
|
\centering
|
||||||
\includegraphics[width=0.5\linewidth]{img/labeling-page-object.png}
|
\includegraphics[width=1\linewidth]{img/labeling-page-object.png}
|
||||||
\caption{Выделение одного из пешеходных светофоров с помощью ограничивающего прямоугольника}
|
\caption{Выделение светофора с помощью ограничивающего прямоугольника}
|
||||||
\label{labeling-page-object}
|
\label{labeling-page-object}
|
||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
|
|
||||||
Как уже было сказано ранее, на панели слева выводится список загруженных изображений. С его помощью можно переключаться между ними. Остальные изображения размечаются аналогичным образом.
|
Как я уже заметил на предыдущем шаге, на панели слева выводится список загруженных изображений. С его помощью можно переключаться между ними. Остальные изображения размечаются аналогичным образом.
|
||||||
|
|
||||||
Рисование прямоугольников работает плавно. Границы прямоугольника видны сразу в процессе рисования.
|
|
||||||
|
|
||||||
\subsection*{Шаг 8. Сохранить результаты для всех изображений}
|
\subsection*{Шаг 8. Сохранить результаты для всех изображений}
|
||||||
|
|
||||||
После того, как все изображения размечены, нажимаем на кнопку <<Submit>> ("Сохранить"). После чего автоматически открывается страница со списком изображений. Слева у каждого изображения появляется галочка, которая подтверждает, что изображение размечено.
|
После того, как все изображения размечены, я нажал на кнопку <<Submit>> ("Сохранить"), она выделена синим цветом и его предназначение интуитивно ясно. После этого автоматически открылась страница со списком изображений. Слева у каждого изображения появилась галочка, которая подтверждает, что изображение размечено.
|
||||||
|
|
||||||
\begin{figure}[h!]
|
\begin{figure}[h!]
|
||||||
\centering
|
\centering
|
||||||
@@ -547,11 +493,10 @@
|
|||||||
\label{labeling-page-submit}
|
\label{labeling-page-submit}
|
||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
Галочки у размеченных изображений --- удобный индикатор прогресса. После перезапуска браузера все данные сохранились.
|
\newpage
|
||||||
|
|
||||||
\subsection*{Шаг 9. Выгрузить результаты разметки в формате JSON}
|
\subsection*{Шаг 9. Выгрузить результаты разметки в формате JSON}
|
||||||
|
|
||||||
Чтобы выгрузить результаты разметки, нажмём на кнопку <<Export>> ("Экспорт") в правом верхнем углу страницы. После этого открывается окно с выбором формата выгрузки. Выбираем JSON и нажимаем на кнопку <<Export>> ("Экспорт") (см. Рис.~\ref{labeling-page-export}). В открывшемся окне проводника можно выбрать папку для сохранения файла.
|
Теперь мне нужно выгрузить результаты моей работы в формате JSON. Для этого я нажал на кнопку <<Export>> ("Экспорт") в правом верхнем углу страницы. После этого открылось окно с выбором формата выгрузки. В списке есть нужный мне JSON, именно его я и выбрал, а затем нажал на кнопку <<Export>> ("Экспорт") (см. Рис.~\ref{labeling-page-export}). В открывшемся окне проводника выбрал папку для сохранения файла.
|
||||||
|
|
||||||
\begin{figure}[h!]
|
\begin{figure}[h!]
|
||||||
\centering
|
\centering
|
||||||
|
|||||||