CC BY
15УДК 004.032.26
ПОДХОДЫ К ПРОЕКТИРОВАНИЮ МОДУЛЯ WEB-ИНТЕРФЕЙСА ДЛЯ ПОДСИСТЕМЫ МАШИННОГО ОБУЧЕНИЯ
Роман Николаевич Абалуев
кандидат педагогических наук, доцент
abaluevrn@mgau.ru Владислав Александрович Шацкий
студент shatskiy2000@list.ru Наталья Викторовна Картечина кандидат сельскохозяйственных наук, доцент
kartechnatali@mail .т Мичуринский государственный аграрный университет
г. Мичуринск, Россия
Аннотация. В статье рассматриваются подходы к проектированию web-интерфейса для подсистемы машинного обучения.
Ключевые слова: искусственный интеллект, машинное обучение, нейросети, графический интерфейс, web-интерфейс.
Неотъемлемой частью современных web-сервисов, использующих технологии машинного обучения, является модуль графического web-интерфейса, обеспечивающий эффективное и удобное взаимодействие между пользователями и программным комплексом.
Пользовательский интерфейс представляет собой совокупность программных и аппаратных средств, обеспечивающих взаимодействие пользователя с компьютером. При создании современных программных продуктов уделяется большое внимание обеспечению комфортного и эффективного взаимодействие между человеком-оператором и компьютерной системой. Исследования в данной области были начаты с появлением средств вычислительной техники и связаны с такими базовыми понятиями как «человеко-машинное взаимодействие» - Human-computer interaction (HCI) и «человеко-машинный интерфейс - Human-machine interface (HMI)» [1].
Современные графические интерфейсы для компьютеров сделаны по принципу WIMP (англ. Windows, Icons, Menus, Pointers - Окна, Иконки, Меню, Указатели), который основан на взаимодействии физического устройства для управления положением курсора и показывает информацию в виде окон и иконок, а доступные команды размещаются в меню и могут быть использованы с помощью курсора устройства ввода.
Современные программные комплексы на основе искусственного интеллекта, которые могут распознавать изображения, как правило, используют платформу машинного обучения с открытым исходным кодом TensorFlow [2-4]. TensorFlow отличается высокой производительностью, благодаря эффективному распараллеливанию вычислений между процессором и видеокартой, а также тем что ядро библиотеки реализовано на C++ и использует cuDNN и Eigen.
Следует учитывать, что для обучения нейросетевых моделей требуются большие вычислительные мощности, поэтому при проектировании таких систем следует обратить внимание на оценку производительности аппаратной подсистемы [2, 3, 5].
Важным преимуществом TensorFlow является то, что пользователю не обязательно создавать и обучать модели самому. Иногда это вовсе невозможно из-за нехватки информации для обучения модели. TensorFlowHub представляет возможность импортировать и экспортировать готовые модели и информацию для обучения, а так же даёт площадку, на которой можно делится этим с другими пользователями, что открывает дополнительные возможности для сообщества разработчиков [4-8].
Проекты, созданные на платформе TensorFlow, как правило, для взаимодействия с языками программирования используют высокоуровневый API и специально разработанные для этого библиотеки. В настоящее время одной из самых известных таких библиотек является Keras.
Keras - это библиотека на языке программирования Python, которая реализует высокоуровневый API и может работать в связке с TensorFlow. Она была разработана для реализации «быстрого обучения», заключающегося в том что пользователи могут быстро и легко создавать нейронные сети.
Перечислим ключевые возможности библиотеки Keras:
- эффективное выполнение низкоуровневых тензорных операций на CPU, GPU или TPU;
- вычисление градиента произвольных дифференцируемых выражений;
- масштабирование вычислений;
- экспорт программ («графов») во внешние среды выполнения, такие как серверы, браузеры, мобильные и встроенные устройства.
Проектируемый модуль графического web-интерфейса содержит набор страниц, которые представляют собой web-сайт, состоящий из компонентов (поля ввода текста, кнопки, текст, рисунки и т.д.). Страницы предназначены для организации взаимодействие пользователя с информационной системой. В состав этого модуля входят следующий набор компонентов:
- набор форм для авторизации;
- набор форм для загрузки графических файлов для системы машинного обучения;
- набор форм для вывода результатов работы модуля обработки данных;
- набор форм для администрирования;
Модуль графического интерфейса взаимодействует с модулем обработки данных. Блоки этого модуля координируют остальные модули и реализует логику работы и вычисления всего комплекса.
Модуль обработки данных состоит из следующих основных компонентов:
- блок обработки API запросов;
- блок управления базой данных;
- блок взаимодействия с подсистемой машинного обучения;
- блок дополнительных инструментов.
В свою очередь блок управления базой данных состоит из самой базы данных MongoDB и инструментов взаимодействия с ней [6, 7].
На основе анализа особенностей эксплуатации проектируемого программного продукта, графический web-интерфейс должен отвечать следующим требованиям:
- понятность и доступность для пользователей с невысокими профессиональными компетенциями в области IT-технологий;
- web-интерфейс должен быть разработан с использованием фреймворка React;
- система должна иметь возможность обновлять свою функциональность;
- web-интерфейс должен работать на большинстве современных браузеров.
После анализа основных функций графических web-интерфейсов аналогичных систем и составления схемы использования компонентов интерфейса, было выполнено создание и описание макетов важнейших страниц графического web-интерфейса программного комплекса, а именно: стартовой страницы сайта, страницы аутентификации, набора страниц для взаимодействия с модулем обработки данных, панели администратора.
Далее рассмотрим основные элементы разработанного web-интерфейса. Первоначально пользователь должен пройти авторизацию. Для этого на странице авторизации (рисунок 1) необходимо ввести свои учетные данные.
1. поле ввода электронной почты;
2. поле ввода пароля;
3. кнопка Войти. Рисунок 1 - Макет страницы авторизации
После успешной авторизации система перенаправит пользователя на главную страницу и в верхней части окна сайта появится доступ к новым разделам (рисунок 2).
1) блок с названием или логотипом; 2) ссылка перехода на главную страницу; 3) ссылка перехода на страницу «Растения»; 4) ссылка перехода на страницу «Панель администратора»; 5) ссылка перехода на страницу «О нас»; 6) компонент аутентификации
Рисунок 2 - Макет верхней части окна сайта
Компонент аутентификации имеет два состояния. Когда пользователь не авторизован, то отображается кнопка для перехода на страницу аутентификации. После авторизации показывается ФИО пользователя и кнопка выхода из учётной записи.
Страница для взаимодействия с модулем распознавания машинного обучения обеспечивает возможность загрузки изображений для распознавания,
удаление из временного списка ошибочных результатов и сохранение изображения (рисунок 3).
1) кнопка «Загрузить изображение»; 3) блок с распознанным изображением; 3) кнопка «Удалить» 4) кнопка «Сохранить»
Рисунок 3 - Макет страницы для взаимодействия с модулем распознавания машинного обучения
Страница панели администратора содержит список управления пользователями, и прочие дополнительные возможности такие как: очистка кэша изобпажений. ттепезагпузка сепвепа и ттпосмотп статистики (писун о к 4).
•ио
12-з-
1) переключаемые вкладки; 2) кнопка «Очистить кэш изображения»; 3) кнопка «Перезапустить сервер»; 4) таблица со статистикой
Рисунок 4 - Макет страницы панели администратора
На основе спроектированных макетов был реализован web-интерфейс модуля распознавания. Реализация графического web-интерфейса
осуществлялась с помощью фреймворка React основанном на JavaScript. Для стилей использовалась библиотека Material-UI. В качестве среды разработки использовался Visual Studio Code. Метод реализации сайта представляет собой SPA (англ. Single Page Application - одностраничное web-приложение). Первоначально была выполнена вёрстка компонентов по макету, а затем была реализована логика работы web-приложения и взаимодействие с модулем обработки данных. Все запросы к серверу выполняются в фоне и сопровождаются оверлеем загрузки.
Реализация модуля графического web-интерфейса была выполнена на основе модульной системы, что позволит в дальнейшем добавлять новые возможности и расширять уже имеющиеся.
Список литературы:
1. Тидвелл, Д. Разработка пользовательских интерфейсов. М.: Питер, 2011. 474 с.
2. Рамсундар, Б. TensorFlow для глубокого обучения. СПб.: БХВ-Петербург, 2019 256 с.
3. Абалуев Р.Н. Методика оценки производительности систем управления базами данных автотранспортных предприятий // В сборнике: Инфокоммуникационные и интеллектуальные технологии на транспорте: материалы I международной научно-практической конференции: в 2 томах. Мичуринск. 2018. С. 171-174.
4. Использование возможностей языка R для реализации алгоритмов машинного обучения в среде MS SQL SERVER 2019 // А.А. Крумкаченко, Д.В. Косенков, В.В. Гавриков, Р.Н. Абалуев // Наука и Образование. 2020. Т. 3. № 2. С. 2.
5. Разработка и реализация специализированной нормативно-справочной базы данных (БД) «Посевная техника для пропашных и овощных культур» / Р.Н. Абалуев, Н.В. Картечина, А.А. Завражнов, В.Ю. Ланцев, А.В. Якушев,
В.И. Горшенин // Вестник Алтайского государственного аграрного университета. 2021. № 12 (206). С. 94-100.
6. Разработка диаграммы прецедентов web-сайта / Н.В. Картечина, Р.Н. Абалуев, В.А. Шацкий, А.М. Дорохова // Наука и Образование. 2021. Т. 4. № 1.
7. Means of communication for visually impaired people: fractalyphlotechnologies of data communication / A.A. Zavrazhnov, V.Yu. Lantsev, A.I. Zavrazhnov, S.V. Sharov // Prensa Medica Argentina. 2019. Т. 105. № 9. С. 634-643.
8. Biochemical value of berries of promising edible honeysuckle varieties for the production of functional food products / I. B. Kirina, L. V. Titova, E. I. Popova [et al.] // IOP Conference Series: Earth and Environmental Science, Michurinsk, 12 апреля 2021 года. Michurinsk, 2021. P. 012097. DOI 10.1088/17551315/845/1/012097.
UDC 004.032.26
APPROACHES TO DESIGNING A WEB INTERFACE MODULE FOR A
MACHINE LEARNING SUBSYSTEM
Roman N. Abaluev
Candidate of Pedagogical Sciences, Associate Professor
abaluevrn@mgau.ru Vladislav A. Shatskiy student shatskiy2000@list.ru Natalia V. Kartechina Candidate of Agricultural Sciences, Associate Professor
kartechnatali@mail .ru Michurinsk State Agrarian University Michurinsk, Russian Federation
Annotation. The article discusses approaches to designing a web interface for a machine learning subsystem.
Key words: artificial intelligence, machine learning, neural networks, graphical interface, web interface.
Статья поступила в редакцию 14.02.2022; одобрена после рецензирования 28.02.2022; принята к публикации 09.03.2022.
The article was submitted 14.02.2021; approved after reviewing 28.02.2022; accepted for publication 09.03.2022.
