1 подписчик

Как мы разрабатывали веб-приложение для создания аранжировок.

14 декабря 202214 дек 2022

5 мин

В этой статье мы расскажем о процессе разработки приложения MuseIT.

MuseIT - это веб-приложение, развернутое на Yandex.Cloud, предназначенное для создания аккомпанемента к мелодии, а также аранжировок. Приложение будет полезно для музыкантов и всех интересующихся музыкой.

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

Архитектура приложения

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

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

Web-интерфейс в свою очередь тоже состоит из двух микросервисов. Основной и midi редактор. Midi редактор взаимодействует с основным сервисом, как компонент.

Back-end сервер

Серверная часть приложения разделена на два микросервиса основной сервис и API для генерации аккомпанемента.

Основной сервис разработан на основе архитектурного стиля REST с использованием языка java и фреймворка spring boot. Он занимается обработкой и распределением всех запросов от клиента.

Сервис генерирующие аккомпанементы написан на python с использованием фреймворка Flask. Он представляет из себя API к алгоритмам генерирующим аккомпанементы.

Взаимодействие между сервисами происходит с помощью POST запроса с телом в формате JSON. Основной сервис отправляет сообщение которое содержит в себе файл в виде байт и стиль генератора в виде строки.

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

User Interface

Web-интерфейс разработан с помощью языка javascript с использованием фреймворка react и менеджера зависимостей webpack. При разработке была реализована микро-фронтенд архитектура с помощью плагина Module Federation для webpack. Принцип работы состоит в том, что есть основной фронтенд получатель содержащий в себе домашнюю страницу и есть фронтенд источник с midi редактором, который был взят из open source проекта расположенного в репозитории по ссылке https://github.com/ryohey/signal . С помощью настроек в webpack фронтенд источник экспортирует компонент с midi редактором, а фронтенд получатель импортирует этот компонент.

MLOps

Деплой всего приложения был осуществлен на yandex cloud, используя docker-контейнеры и docker-compose.

Поскольку приложение состоит из самостоятельных объектов, каждый из них был обернут в собственный docker-контейнер.

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

После была настроена совместная работа всех docker-контейнеров с использованием docker-compose через yaml файл конфигурации. В файле была прописана ссылка на каждый docker-контейнер в облачном сервисе, связь контейнеров между собой, очередность запуска и порты подключения. Такой тип настройки позволяет автоматически развернуть все части приложения как на отдельной ВМ, так и на нескольких, работающих сообща. При введении команды docker-compose up, docker скачает необходимые контейнеры из hub, создаст публичные и приватные порты, настроит соединения и поднимет все указанные контейнеры согласно очередности на необходимых портах.

Настройка https была осуществлена с помощью обратного прокси сервера traeffik, его удобство заключается в поддержке docker.

Для настройки traeffik был создан отдельный файл конфигурации в котором указывалось генерация ssl-сертификата для https с помощью сервиса let’s encrypt, чтобы ключ генерировался автоматически в определенный период. Так как traeffik поддерживает docker и, соответственно, docker-compose, yaml конфигурации для docker-compose был несколько расширен для добавления внутренних и внешних портов используя traeffik - команды.

Также была создана отдельная админ-панель traeffik, в которой удобным образом отображаются все запущенные docker-контейнеры, порты подключения и нагрузка на ВМ.

Домен для сайта был куплен и в настройках yandex cloud был создан dns сервер, подключающий нашу ВМ со статическим портом к домену.

В целом настройка готова, теперь, чтобы поднять все сервисы нашего приложения необходимо поднять web-proxy сервер traeffik, а после чего запустить вышеописанную команду docker-compose up.

Генератор аккомпанемента

В приложении встроено два способа генерации аккомпанемента:

Алгоритмический - генерация аккорда для каждого такта
Интеллектуальный - генерация аккомпанемента в стиле хорала Баха с помощью GPT-2

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

Текстовое представление музыки, используемое в нашем проекте, подробно описано в статье [https://habr.com/ru/post/703942/]

Пайплайн, разработанный для генерации аккомпанемента работает по следующей схеме: