Streamlit vs Dash: cómo crear tu propio dashboard interactivo con python

Escoger una entrada para un blog recién abierto nunca es fácil. ¿Qué contenido elijo? ¿Qué debería contar primero? ¿Interesará esto a alguien? Así que, como ya he comentado en la presentación de la propia web, creo que lo mejor es ir al grano. Y también creo que no hay nada mejor para esto que hablar de dashboards y visualización de datos, ¿estáis conmigo?

Pues bien, preparáos. No va a ser un camino corto, pero nos esperan muchas aventuras por el camino. Os resumo el itinerario:

1. Extracción y construcción de BBDD
2. Con nuestro dataset inicial listo, trabajaremos la estructura para poder montar un dashboard decente en Dash.
3. Haremos lo mismo con Streamlit, con una configuración algo distinta.
4. Por último, compararemos las herramientas para tener claro cuál es nuestra elección y qué usos podemos darle.

¿Cómo lo véis? ¿Os unís a la aventura? Espero que sea así pero, listos o no, allá vamos. Para los más impacientes (y más experimentados) os dejo aquí mi github con todo el proceso montado y los pasos a seguir de forma más esquemática. Para los que prefieren una guía visual y amplia, quedáos conmigo por aquí.

Extracción y construcción de BBDD

Vayamos a lo primero: conseguir nuestro conjunto de datos. En este caso voy a usar un dataset algo especial, ya que viene de un proyecto que he venido desarrollando durante los últimos meses. En este trataba de entender un fenómeno que en la música se vino a llamar loudness war, y del que podéis saber algo más aquí. Básicamente, lo que venía a decir este fenómeno es que se llevaba produciendo un aumento deliberado del volumen en las grabaciones desde la década de los noventa, principalmente. Esto había llevado a canciones con un menor rango dinámico (que lleva a un menor «sentimiento») y, por consiguiente, a producciones con peor sonido. La idea prometía, pero quería comprobar que esto era así realmente, así que me dediqué a extraer datos de ese loudness en un gran conjunto de canciones y, con esto, saque las conclusiones que podéis leer este artículo.

Aún así, no me quedé del todo a gusto con lo que había conseguido (y todavía falta un paso más, del que espero poder escribir pronto) porque necesitaba todavía una herramienta para satisfacer mi curiosidad musical, a saber: un dashboard que me permitiera ver el rango de loudness de las cacniones que yo escogiera. Algo como esto:

Por supuesto, os he hecho un spóiler del artículo, pero creo que es bueno que veáis hacia dónde queremos dirigirnos. Pues bien, vayamos a conseguir primero nuestro conjunto de datos. Para no desviarnos del tema que nos ocupa no voy a entrar en mucho detalle sobre este paquete, lo dejaré para otra entrada en la que hablemos de extracción de datos de API. En cualquier caso, todo esto es opcional porque ya he preparado un conjunto de datos que podemos usar para ambas herramientas, así que puedes saltarte los últimos sino te interesa la parte más hard del artículo, pero debes completar hasta el paso 5 para poder continuar más tarde. Si eres de los que necesita hacer todos los pasos, adelante:

1. Haz un clone de mi repositorio en la carpeta que prefieras de tu ordenador:

git clone https://github.com/74minutos/loudness_war

2. Una vez lo tengas todo en tu local, crea (sino tienes) una cuenta de desarrollador en spotify en este enlace: https://developer.spotify.com/documentation/web-api/quick-start/

3. Cuando lo tengas, crea una carpeta en el root de tu directorio llamada credentials y, dentro de esta, un archivo llamado «spotify_credentials.json», con la siguiente estructura:

{client_id: "inserta aquí tu client_id", client_secret: "inserta aquí tu cliente_secret"}

4. Crea un virtual env a través de la consola con el siguiente comando:

python -m venv env

5. Instala todas las dependencias del proyecto a través del requirements.txt:

env\Scripts\pip install -r requirements.txt

(esta es sintaxis windows, si estás en mac o linux, simplemente cambia el env\Scripts\ por env/bin/)

6. Por último, antes de lanzar los scripts, crea tres directorios en la carpeta de tu proyecto: test_dir, audio_analysis y results.

7. Aquí viene la parte en la que conseguimos la diferente información y la aunamos toda en un único archivo csv. Para ello lanzaremos 3 scripts de la siguiente manera (siguiendo con lo anterior, si estás en linux o mac, cambia también el ^por \):

env\Scripts\python -m audio_analysis_to_dash.get_tracks^
  --directory test_dir^
  --credentials_path credentials\spotify_credentials.json

env\Scripts\python -m audio_analysis_to_dash.get_audio_analysis^
  --directory audio_analysis^
  --tracks_path test_dir\tracks.json^
  --spotify_credentials_path credentials\spotify_credentials.json

env\Scripts\python -m audio_analysis_to_dash.join_data^
    --directory_tracks test_dir^
    --directory_audio audio_analysis^
    --filename results\joined_data.csv

Como he dicho anteriormente, he dividido el proceso en 3 llamadas diferenciadas para ser más didáctico, pero lo podríamos envolver todo en un único wrapper (me lo guardo para una próxima entrada). ¿Qué hacen estas llamadas? Pues la primera se encarga de obtener la información de las canciones (nombre, artista, id, album…) en base a la década que le haya marcado (todas desde los 60). La segunda recoge esos ids que hemos extraído y le pide a Spotify la información sobre el loudness de los mismos. Por último, la tercera realiza una unión denormalizada de las dos fuentes y nos devuelve un csv con el que podemos trabajar.

Dashboard en Dash

Antes de nada, creo que es justo y necesario presentar la herramienta en la que vamos a trabajar. Dash es un proyecto open-source a través del cual puedes crear tus propios dashboards desde 0 con python y, si te atreves, algo de css. Está basado en plotly y sus capacidades son muy amplias. Tiene una gran potencia de procesamiento de datos, una gran galería de diferentes gráficos a utilizar y, por supuesto, todo el estilo que le quieras o puedas añadir a través de css. Puedes hacer las pruebas que necesites en tu local y más tarde, necesitarás de un servicio de alojamiento para poder cargar tu dashboard como si de una web se tratara (de hecho, lo es). Os dejo por aquí la documentación oficial y la guía de usuario, para el que quiera profundizar más en el tema.

Pues bien, sea cual sea el camino que hayas tomado en la bifurcación anterior, lo cierto es que has llegado hasta aquí con un conjunto de datos con el que trabajar y crear tu primer dashboard interactivo con python y Dash. Al final, te tiene que quedar algo como esto (para verlo en el servidor y jugar un poco, clica aquí):

Debo aclarar que para suplir mi poco conocimiento en css, he tomado prestado el estilo que la recomendadísima web realpython.com ofrece en este tutorial. Creías que ahora venía la parte difícil, ¿verdad? Pues te diré la verdad…no. Si has seguido los pasos anteriores, lo único que tienes que hacer para poder cargar tu propio dashboard en Dash a partir de servidor local, es ejecutar este código en tu terminal:

env\Scripts\python -m audio_analysis_to_dash.app

Se te abrirá un diálogo en el cual te dirá la url a la que debes acudir para poder visualizar el dashboard. Ya está. Ya lo has hecho. Ya te había dicho que esta no era la parte difícil. Pero evidentemente, esto no te permitirá compartir tu sabiduría con el mundo, así que será mejor que lo subamos a alguna plataforma con la que expandir la buena nueva. Y aquí las cosas quizá sí que se pongan algo más complicadas.

Vamos a usar Heroku para deployear nuestro dashboard y os iré contando una serie de cosas por el camino que nos servirán para decantarnos por una herramienta u otra al final de nuestro viaje. Para simplificar el proceso, mi recomendación es que os creéis un nuevo repositorio en Github en el que almacenaréis exclusivamente la carpeta «audio_analysis__to_dash» + los requirements de todo el proyecto. Una vez tengáis esto hecho, seguiremos los siguientes pasos:

1. Creamos una cuenta en Heroku: https://signup.heroku.com/

2. Una vez dentro, creamos una nueva app:

3. Elegimos un nombre para la app (loudness-war lo veía muy apropiado).

4. En la pestaña Deploy, nos conectamos a Github y elegimos el repositorio que hemos creado para este propósito:

5. Vamos abajo del todo y clicamos en Deploy Branch:

Voilà! Si todo sale correctamente, que debería, en el menú de cabecera saldrá la opción Open App:

Al abrir esta app, os debería llevar a la web que os he enseñado al principio de este apartado.

Si bien es cierto que no es complicado realizar estas operaciones, el hecho de tener que utilizar un elemento externo a Dash hace que el proceso de publicar sea bastante engorroso. Por otro lado, al no tener cuenta premium en Heroku, si cargaba toda la base de datos me quedaba sin memoria y la App no funcionaba. Tener este tipo de dependencias me hace plantearme seriamente utilizar Dash. A su favor debo decir que las opciones de estilo y visualización son prácticamente infinitas -por el simple hecho de poder alimentar el dashboard a través de css y de todo su repertorio de gráficos- y que la carga de datos es tremendamente ágil.

Dashboard en Streamlit

Antes de empezar a explicaros Streamlit o hacer la guía paso a paso, debeis hacer una cosa inmediatamente: abrir vuestra cuenta en Streamlit y pedir una invitación para poder compartir. Hacedlo aquí. Ya. Rápido. Espero. ¿Lo tenéis? Perfecto. Tardan un tiempo en concenderte esta invitación y mientras tanto, podéis seguir leyendo la guía. No os preocupéis si pasa 1 día o 2.

¿Qué hace Streamlit? Pues ofrece un servicio muy parecido a Dash, basado en los componetes de gráficas Altair. Tal y como se venden en su propia web, es un servicio para construir web apps a través de datos categorizados en python. Sin requerir experiencia con herramientas de front-end como css ni la necesidad de grandes servidores de almacenamiento. En pocos minutos, puedes tener tu dashboard listo. Vamos a comprobar si su marketing dice la verdad:

A estas alturas, ya tendrás experiencia con mi repositorio, igual hasta le has cogido cariño. Si es así y lo tienes todo bien organizado hasta el paso 5 que he mencionado antes, lo único que tienes que lanzar ahora en tu terminal para que se abra una webapp con nuestro dashboard es lo siguiente:

env\Scripts\streamlit run audio_analysis_to_streamlit\data_to_streamlit.py

Se te debería abrir una nueva pestaña en tu navegador como esta, donde podrás elegir la canción (o canciones) que decidas (mirad la maravilla que hace Radiohead con Creep):

Vale, como antes, esto era lo fácil. Vamos a ver si en el proceso de subida de nuestro dashboard Streamlit cumple su promesa o no.

1. Si ya tienes tu cuenta de sharing en Streamlit, deberías poder ir a esta página y que te apareciera algo como esto, donde clicaremos en New App:

3. Cuando ya lo tengas, ve a la nueva pantalla que se habrá abierto en Streamlit, completa la configuración (con los datos de tu cuenta en GitHub) y clica en Deploy!:

Si has podido seguir los pasos correctamente, una nueva App se creará y tendrás tu dashboard listo para trabajar y compartir. Parece que el marketing de Streamlit no estaba lejos de la realidad.

Conclusiones

Llegamos por fin a nuestro último puerto en esta travesía, pero no me digáis que no hemos tenido grandes aventuras en el oceáno. Tened en cuenta que lo que hemos hecho aquí es simplemente tocar la superficie de lo que son capaces estas herramientas, simplemente para realizar dos proyectos igual en cada una y poder comparar.

Dicho esto, debo declarar vencedora a Streamlit. Y no porque Dash sea una mala herramienta, ni mucho menos, pero la veo útil en otro tipo de proyectos. Si estás buscando una infraestructura potente y mucho rendimiento a gran escala (para una organización entera, por ejemplo), sin duda escogería Dash, ya que te ofrece todas esas virtudes. Pero si tu deseo -como es el mío de momento- es el de poder crear dashboards de forma sencilla y ágil para proyectos personales que no requieren de grandes volúmenes, Streamlit es la mejor opción.

Espero vuestros comentarios sobre estas dos herramientas y sobre las que consideréis más útiles en vuestro día a día.