Для разработчиков: Desktop приложение

Desktop приложение проекта Lacmus

Введение

Клиентская часть lacmus состоит из 2 модулей:

• UI клиент - кросс платформенное dotnet core приложение построенное с использованием avalonia UI и reactive UI.
• Локальный сервер - представляет собой docker образ с небольшим python rest-api веб сервисом на flask. Данный сервер производит обработку изображений с помощью нейронной сети и отдает клиенту ответ о результатах работы нейронной сети. Данный сервер поднимается локально в docker контейнере.

Общая архитектурная схема

Оригинальная схема доступна по ссылке.

Desktop UI client

Клиент отображает пользовательский интерфейс, осуществляет управление всеми другими компонентами программы c внешними модулями (docker-ml-server). Клиент построен на MVVM паттерне и имеет 3 компоненты: Model, View, ViewModel.

Исходный код клиента находится в репозитории lacmus-app. Основная ветка разработки - dev.

Полезные ссылки

Подробнее о MVVM паттерне можно почитать тут

• https://habr.com/ru/post/338518/ - MVVM часть 1
• https://habr.com/ru/post/339538/ - MVVM часть 2
• https://habr.com/ru/post/445098/ - reactiveUI - DynamicData
• https://habr.com/ru/post/303650/ - reactiveUI - часть 1
• https://habr.com/ru/post/303898/ - reactiveUI - часть 2
• https://habr.com/ru/post/305350/ - reactiveUI - часть 3

Другие ссылки

• https://github.com/AvaloniaUI/Avalonia - официальный репозиторий
• https://avaloniaui.net/docs/ - официальная документация avalonia UI
• https://reactiveui.net/docs/ - официальная документация reactiveUI
• https://docs.microsoft.com/ru-ru/dotnet/framework/wpf/ - официальная документация WPF

Интересные проекты (можно смотреть как примеры)

• http://wieslawsoltes.github.io/Core2D/
• https://github.com/zkSNACKs/WalletWasabi
• https://github.com/VitalElement/AvalonStudio
• https://github.com/RolandPheasant/DynamicData.Snippets - примеры ReactiveUI
• https://github.com/CreateLab/MessageBox.Avalonia

View

View представлена XAML кодом с описанием интерфейса: https://github.com/lacmus-foundation/lacmus-app/tree/master/Views

• MainWindow.xaml - основное окно программы

Интерфейс состоит из следующих блоков. Также приведены используемые контролы и ссылки на avalonia UI документацию, ссылки на соответствующие строки кода:

• Главное меню программы
  • StackPanel
  • Grid
  • Menu
• Туллбар
  • StackPanel
  • Grid
  • ToolTip
  • Button
• Окно просмотра фотографий (ViewPort)
  • Grid
  • ScrollViewer
  • paz:ZoomBorder - кастомный контрол
  • Canvas
  • ContextMenu
  • Polygon - ссылка на MSDN
• Карусель фотографий (Боковая панель со списком фотографий и их миниатюрами)
  • Grid
  • ListBox
  • Canvas
  • StackPanel
  • CheckBox
• Строка состояния
  • Grid
  • TextBlock

Полезные ссылки

• https://github.com/AvaloniaUI/Avalonia - официальный репозиторий
• https://avaloniaui.net/docs/ - официальная документация avalonia UI
• https://docs.microsoft.com/ru-ru/dotnet/framework/wpf/ - официальная документация WPF

View-Model

View-Model представлена cs кодом. View-Model спроектирована с использованием ReactiveUI фреймворка, вместо стандартного INotifyPrepertyChange интерфейса: https://github.com/lacmus-foundation/lacmus-app/tree/master/ViewModels

• MainWindowViewModel.cs - главная VM программы

Полезные ссылки

• https://github.com/AvaloniaUI/Avalonia - официальный репозиторий
• https://avaloniaui.net/docs/ - официальная документация avalonia UI
• https://reactiveui.net/docs/ - официальная документация reactiveUI

Model

Model представлена cs кодом: https://github.com/lacmus-foundation/lacmus-app/tree/master/Models

• Docker.cs - Docker агент - осуществляет управление Docker контейнерами.

Полезные ссылки

• https://github.com/AvaloniaUI/Avalonia - официальный репозиторий
• https://avaloniaui.net/docs/ - официальная документация avalonia UI
• https://reactiveui.net/docs/ - официальная документация reactiveUI

Local ML Server

Сервер представляет собой docker образ с небольшим python rest-api веб сервисом на flask. Сервер разворачивается в docker контейнере и слушает 5000 порт.

Исходный код доступен в файле inference.py:

• https://github.com/lacmus-foundation/lacmus/blob/master/inference.py

Официальный docker repository доступен тут:

• https://hub.docker.com/repository/docker/gosha20777/test

Описание Rest API

Сервер использует один POST запрос

/image

REQUEST
{
	"data": image byte array (base64)
}

RESPONSE
{
	"objects"[
		{
			"score": string, (float)
			"xmin": string,  (int)
			"ymin": string,  (int)
			"xmax": string,  (int)
			"ymax": string,  (int)
		},
		...
	]
}