Este proyecto consta de dos partes, la parte Python que utiliza Flask que instala y expone una API para trabajar con el modelo de Facebook demucs para separar las pistas de una cancion.
La segunda parte es el FrontEnd, o la interfaz que esta construida con VueJS. Esta interfaz permite al usuario interactuar con la API que hace de wrapper para demucs
Para funcionar correctamente debe existir una carpeta uploads al mismo nivel que App.py
El proyecto utiliza Python3 para Flask y NodeJS para VueJS, para los estilos VueJS utiliza Tailwind
Hacer correr la aplicacion con docker run -p 5000:5000 <nombre de la imagen> luego entrar por medio del navegador a http://localhost:5000. En esta pantalla se puede subir la cancion.
Para no tener que bajar el modelo demucs en la maquina local o si no tienes o quieres instalar Python o tu SO no es compatible se adjunta un Google Colab al Repo.
Este Google Colab instala las dependencias y clona el repositorio, ademas expone la App a internet por medio de nGrok.
Para utilizar nGrok se debe ingresar un authtoken en #NGROK-AUTHTOKEN# en el archivo, que debes obtener de tu propia cuenta de nGrok, que debes reemplazar en el Colab por eso para usar la version Google Colab, recomiendo copiarlo a un Colab Propio y ingresar la clave ahi para tu uso personal.
Existen 2 rutas /uploads que entrega una lista de todos los archivos disponibles, en caso de convertir varias canciones aparecera la carpeta de cada cancion y /uploads/<path a archivo> donde se ingresa todo el path correspondiente con el nombre del archivo para escucharlo o descargarlo
El POST a / sube la cancion y el GET a / muestra la interfaz
Se configuro Flask para servir la carpeta templates/static entonces la template index.html carga archivos de esta ruta static.
Funciona haciendo el npm run build de la App VueJS y luego copiando el contenido de la carpeta dist a templates, en la raiz va el index.html y los assets dentro de assets
Como esta corriendo en Flask, es necesario modificar el index.html para que pueda hacer los imports de los archivos que se sirven de manera static.
En Flask se hace de esta manera:
<script type="module" crossorigin src="{{ url_for('static', filename='assets/index-BEo07Hxm.js') }}"></script>
<link rel="stylesheet" crossorigin href="{{ url_for('static', filename='assets/index-CjMc3gsX.css') }}">
Obviamente los nombres de los archivos deben ser los correctos, cambian cada vez que haces npm run build, solo eso es necesario cambiar y deberia funcionar correctamente
En development hay un server Flask y un server VueJS (con dos terminales diferentes), y debes cambiar la variable API_PREFIX en HomeView para que apunte al server Flask, recuerda que esto debes quitarlo cuando compiles para produccion con npm run build
Cuando se carga una cancion se comienza a hacer la separacion de tracks, esto se hace en otro hilo pero no vuelve bien. Posiblemente ejecutar un thread.join() pueda ayudar. Aunque no regrese bien, separa los archivos de manera correcta. Quizas sea posible mejorar esto pero aparentemente es necesario crear un entorno Celery que necesita una DB redis para entregar los mensajes, asi que por ahora queda asi.