Если вам было интересно, как пометить новые точки данных в ваших приложениях для реагирования, будь то текст, изображения или аудио, LabelStudio поможет вам. LabelStudio — это инструмент для маркировки с открытым исходным кодом, который может быть очень полезным в вашем наборе инструментов для создания высококачественных приложений машинного обучения с использованием React.
В этом уроке я покажу вам, насколько легко вы можете интегрировать LabelStudio в свое приложение React, хотя я предполагаю, что вы, по крайней мере, знакомы с миром React и написанием кода JSX.
Чтобы представить ситуацию в перспективе, приложение, которое я создавал, было решением OCR, где вы могли извлекать текстовые значения из форм любого шаблона. Представьте, что на изображении ниже вам нужно извлечь название и название компании. Самый первый шаг любой такой задачи – определение ограничивающих рамок этих полей в шаблоне. Здесь на помощь приходит LabelStudio, где я могу добавлять новые шаблоны в свое приложение на ходу.
Итак, обо всем по порядку, давайте установим LabelStudio Frontend (поскольку нас интересует только интеграция с React). Документация по лейбл Studio удобна, но я обнаружил, что документация к библиотеке переднего плана все еще нуждается в ускорении.
npm install @heartexlabs/label-studio
Давайте напишем компонент, сохраняя Name и Business Name в качестве имен меток.
Теперь, чтобы разбить этот компонент, есть в основном 3 шага:
- Импорт и создание нового экземпляра LabelStudio.
- Настройка пользовательского интерфейса с помощью конфигурации. Здесь мы укажем имена меток, отображаемые панели и изображение, которое будет помечено в задаче. Вы можете настроить студию этикеток, чтобы аннотировать несколько изображений одно за другим. Здесь для простоты я настраиваю лейбл-студию для аннотирования только одного изображения
- Определение 3 основных обратных вызовов:
а. onLabelStudioLoad: Что происходит при запуске LabelStudio?
б. Аннотация onSubmit: Что происходит, когда вы нажимаете «Отправить» после добавления ярлыка?
c. onUpdateAnnotation: Что происходит, когда вы нажимаете «Обновить», если вы изменили метки после отправки?
«LS»в каждом из этих обратных вызовов относится к самому экземпляру LabelStudio. Так что не паникуйте, как я, когда вы не видели, где это было определено :p
Самое приятное в конфигурации то, что это строка. Вы можете поиграть с приложением и создать буквально любую конфигурацию на основе пользовательского ввода. Например, определите настраиваемый компонент, чтобы пользователь мог вводить различные метки перед задачей маркировки. См. пример ниже:
В LabelStudio есть много вещей, которые можно опробовать, и я надеюсь, что это даст вашим приложениям машинного обучения дополнительные преимущества. Надеюсь, вы нашли это полезным, и если да, не стесняйтесь связаться со мной в LinkedIn. В настоящее время я ищу сотрудничество в проектах ML. Я считаю, что протянуть руку помощи — лучший способ научиться
