2021ВКР750107ИСАКОВ

Сложность получаемого ансамбля моделей определяет параметр –

число внутренних узлов (глубина взаимодействия между предикторами).

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

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

Окончательная точность уже ранее оценивалась по данным новых пациентов

(25% от всех пациентов) в исследовании доцента кафедры БТС СПбГЭТУ

«ЛЭТИ» Пустозерова Е.А. и врачей из Института Эндокринологии НМИЦ

«Алмазова» [24].

2.3.3 Разработка пользовательского интерфейса

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

нашем случае интерфейс представляет собой графическую оболочку, набор

HTML шаблонов, CSS (каскадные таблицы стилей) правил и JavaScript

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

квизуальной части системы удаленного мониторинга. Среди них были:

•Знакомые, не требующие привыкания элементы интерфейса;

•Доступность масштабирования страницы для слабовидящих людей;

•Адаптация для людей с особенностями цветового зрения;

•Доступность веб-страницы в мобильной версии, ровно, как и в десктопной.

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

Адаптивный шаблон будет регулировать размер элементов, как при переходе

51

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

тег адаптивного окна просмотра к head: <meta name="viewport" content="width=device-width, initial-scale=1">. Для перехода в «режим» для слабовидящих необходимо комбинацией клавиш на клавиатуре увеличить масштаб просмотра страницы:

•Для увеличения на 10% зажать “ctrl +”

•Для уменьшения на 10% зажать “ctrl –“

•Для возврата к оригиналу – “ctrl 0”

Помимо сочетаний клавиш можно получить аналогичный результат через браузерное меню (см. рисунок 22).

Рисунок 22 – Меню браузера Google Chrome

Для доступа к элементам на сайте без мыши возможно последовательное переключение по элементам приложения путем нажатия Tab или сочетания

Tab + Shift. В таком случае, выбранный элемент будет выделен черным квадратом (см. рисунок 23). Для нажатия на выбранный элемент достаточно нажать Enter.

52

Рисунок 23 – Пример последовательного переключения элементов интерфейса

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

Рисунок 24 – Средства разработка Rendering в Google Chrome На выбор предлагается рендер страницы под:

•Затуманенное зрение;

•Протанопия;

•Дейтеранопия;

•Тританопия;

•Ахроматопсия.

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

53

Следовательно, не желательно использовать градиент в качестве изобразительного средства в элементах навигации.

Для повышения доступности веб-приложения необходимо учесть особенности работы скринридеров, таких как JAWS (Job Access With Speech)

и NVDA (Non Visual Desktop Access). Bootstrap предлагает использовать свойство «.sr-only» внутри тегов. Это визуально скроет элемент, оставив его в зоне видимости для скринридера. Помимо специализированных программ озвучивать элементы на мобильных устройствах могут и голосовые помощники: Siri, Google Assistant или Алиса. Для этого необходимо отдать соответствующее распоряжение голосом. Возможно, на некоторых устройствах потребуется предварительно дать разрешение на использование микрофона в браузере.

Хорошо продуманные значки и графика позволяют пользователю без дополнительных инструкций распознавать функции соответствующего компонента веб-приложения. Пирс классифицировал знаки по трем категориям: значки, указатели и символы (см. рисунок 25). Значок – это самый простой из этих типов представления, поскольку он состоит из шаблона линий,

которые физически напоминают то, что они "обозначают".

Рисунок 25 – Типы изображений значков

Фреймворк Bootstrap имеет готовый набор легко узнаваемых,

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

рисунок 26.

54

Рисунок 26 – Bootstrap значки

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

Например, восприятие становится легче по мере того, как изображение становится более схематичным [42]. Таки и в нашем случае тип представления значков выбран абстрактный.

2.4 Подготовка сопроводительного материала

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

Вкачестве сопроводительного материала планируется написать короткую инструкцию средствами Microsoft Word с использованием скриншотов и gif изображений для повышения наглядности материала. Как показало исследование нидерландских ученых, есть устойчивый положительный эффект (влияние на запоминание и фактическую производительность) от применения изображений в инструкциях к медицинским устройствам [43].

Создание скриншотов возможно стандартными средствами Windows –

«Набросок на фрагменте экрана» или «Ножницы». Создание gif изображений происходит путем обработки короткого видеоизображения, снятого средствами записи экрана, такими как Bandicam.

55

Оформление сопроводительного материала необходимо осуществить в соответствии с требованиями ЕСПД (Единая система программной документации) ГОСТ 19.001-77, ГОСТ 19.401-78 и ГОСТ 19.105.-78 [44].

2.5 Выводы

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

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

гибкость в адаптации к рабочим задачам и компактность кода программы. В

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

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

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

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

56

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

57

3 ПРАКТИЧЕСКАЯ РЕАЛИЗАЦИЯ РАЗРАБОТКИ ВЕБ-

ПРИЛОЖЕНИЯ ДЛЯ УДАЛЕННОГО МОНИТОРИНГА И ЭКСПЕРИМЕНТАЛЬНАЯ АПРОБАЦИЯ

3.1 Процедура регистрации и авторизации

Для доступа к системе удаленного мониторинга пользователю необходимо пройти процесс регистрации на сайте (см. рисунок 27). Среди персональных данных прежде всего необходимо ввести рост и вес. На их основе программа рассчитает индекс массы тела и запишет в базу данных напротив регистрационных данных – логина, ФИО, почты и пароля. Для обмена электронными письмами с врачом необходимо выбрать лечащего врача из списка. На данный момент доступны следующие специалисты:

Попова П.В., Ткачук А.С., Болотько Я.А., Дронова А.В., Васюкова Е.А. и др.

Рисунок 27 – Экранные формы окон авторизации (слева) и регистрации пользователя (справа)

58

Для реализации пользовательских сессий потребовалось импортировать следующие библиотеки и модули: flask-login для авторизации пользователя и ведения пользовательских сессий и werkzeug.security для создания хэша паролей. Работу с формами осуществили посредством библиотеки flask-wtf,

сочетающую методы Flask приложения с конструкциями WTForm. Валидация заполненных или пропущенных полей выполнена на основе модуля wtforms.validators. Некоторые операции с базой данных выполнены с использованием набора инструментов SQLAlchemy, в то время как другие на встроенном программном интерфейсе sqlite3.

Затем необходимо было создать класс User, унаследовавший UserMixin

и базовый класс любой SQLAlchemy модели – db.Model. Примесь UserMixin

предоставляет нам в использование такие методы как: is_authenticated ( ), is_active ( ), get_id ( ) и другие для работы с библиотекой flask-login. Примесью называют частный случай наследования методов класса. Каждая графа обладает рядом характеристик, как общих для всех полей – формат данных,

так и особых: метка главного ключа, уникальность. Как можно видеть из кода ниже, только id имеет числовой тип данных и метку главного ключа, прочие записи сохраняются в текстовом формате. Поля username и password,

соответствующие логину и паролю пользователя, самые короткие – пятнадцать символов, в то время как ФИО и email ограничены восьмьюдесятью символами:

app = Flask(__name__) db = SQLAlchemy(app)

class User(UserMixin, db.Model):

id = db.Column(db.Integer, primary_key=True) username = db.Column(db.String(15), unique=True) fio = db.Column(db.String(80))

email = db.Column(db.String(80), unique=True) password = db.Column(db.String(15))

Экземпляр класса User использовался нами при внесении в основную базу данных информации, извлеченной GET запросом из заполненной

59

пользователем Flask WTF формы. В момент внесения пользовательской записи в базу данный с использованием хэш функций алгоритма sha256

формируется эквивалентный паролю хэш-код:

hash_ = generate_password_hash(form.password.data, 'sha256')

form = RegisterForm()

new_user = User(username=form.username.data,

fio=form.username1.data

email=form.email.data, password=hash_)

db.session.add(new_user)

Впоследствии этот уникальный хэш будет хранится в таблице users

нашей БД и сверяться с заново сгенерированным хэшем пароля, введенного пользователем при авторизации (см. рисунок 28). В случае совпадения двух хэшей создастся новая пользовательская сессия, человеку присваивается индивидуальный параметр session_id (соответствующий числу в графе id

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

Рисунок 28 – Таблица user внутри базы данных приложения

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

наличие запрещенных символов, корректность почты, незаполненные обязательные поля и т.д. (см. рисунки 29, 30). Для описания каждого из них использовались классы (LoginForm и RegisterForm), унаследовавшие методы и свойства базового класса FlaskForms.

60