Python NiceGUI: Construye potentes interfaces web con facilidad

NiceGUI es un framework de interfaz de usuario basado en Python que facilita la creación de interfaces web. Permite a los desarrolladores crear interfaces gráficas de usuario (GUI) para aplicaciones web sin tener conocimientos de HTML, CSS o JavaScript. 

En este artículo, te explicaré cómo puedes utilizar NiceGUI para crear interfaces fáciles de usar. Pero, si eres nuevo en Python, sigue nuestro curso de Introducción a Python y luego avanza hasta el curso de Programación en Python para reforzar tus habilidades. 

¿Qué es NiceGUI?

NiceGUI es una biblioteca de Python que ayuda a crear interfaces de usuario basadas en web utilizando sólo código Python. Si eres un desarrollador de Python que quiere construir una interfaz de usuario pero también quieres evitar HTML, CSS o JavaScript, NiceGUI es para ti. Está respaldado por tres tecnologías principales: 

• FastAPI para operaciones de backend.
• Vue.js para la interacción frontal.
• Tailwind CSS para el estilo. 

Sin embargo (y este es el verdadero punto de NiceGUI, en realidad) no tienes que entender estas tecnologías para utilizar NiceGUI con eficacia. Es lo suficientemente versátil como para manejar tanto pequeñas aplicaciones web como proyectos más complejos. Este es uno de los puntos fuertes de NiceGUI: su accesibilidad. Puedes crear interfaces funcionales con un código mínimo, incluso si eres nuevo en Python. Veamos el código siguiente y te mostraré lo que quiero decir.

Primeros pasos con NiceGUI

Aquí te explicaré el proceso de instalación y te guiaré en la creación de tu primera aplicación sencilla.

Proceso de instalación

Existen varios métodos para instalar NiceGUI, dependiendo de tus preferencias. He aquí cómo hacerlo. Ejecuta los siguientes comandos en tu terminal o símbolo del sistema. Doy opciones según la herramienta que utilices.

Instalar mediante pip 

pip install nicegui

Instalar a través de PyPI

python3 -m pip install nicegui

Instalación mediante Docker

docker pull zauberzeug/nicegui

Instalar mediante conda-forge

Primero, añade conda-forge a tu lista de canales así:

conda config --add channels conda-forge
conda config --set channel_priority strict

Tras habilitar el canal conda-forge, ejecuta el siguiente comando para instalar NiceGUI: 

conda install nicegui

Primera aplicación sencilla

Ya has instalado NiceGUI, así que es hora de crear nuestra primera interfaz. Tomemos un ejemplo básico: mostrar un simple mensaje de hola. En primer lugar, crea un nuevo archivo Python (por ejemplo, app.py). A continuación, escribe el siguiente código:

# Importing the module 
from nicegui import UI

# pass the text
ui.label('Hello World')

# run it
ui.run()

Ahora ejecuta el código. Puedes guardarlo y ejecutarlo pulsando el botón Ejecutar o escribiendo el siguiente comando en el terminal:

python app.py

Muestra la etiqueta utilizando NiceGUI. Imagen del autor.

Características principales de NiceGUI

NiceGUI se está haciendo popular por su sencillez, interactividad y capacidad de integración. Aquí tienes un resumen de lo que lo convierte en un marco útil para los desarrolladores.

Interfaz fácil de usar

A diferencia de otras herramientas como Streamlit o Dash, puedes utilizar NiceGUI para crear interfaces gráficas de usuario con un código mínimo. He aquí un ejemplo: 

from nicegui import ui
	ui.label('Hello NiceGUI!')
	ui.button('BUTTON', on_click=lambda: ui.notify('button was pressed'))
	ui.run()

En el código anterior, defino un botón y manejo su evento de clic. Cuando pulsé el botón, apareció el mensaje el botón estaba pulsado . Y ya está. No es el ejemplo más complicado, aunque puedes ver lo rápido que monté esta IU funcional sin configuraciones ni lógica compleja.

Interfaz NiceGUI con botón y notificación. Imagen del autor.

Interactividad en tiempo real

Con NiceGUI, también puedes crear interfaces de usuario interactivas en tiempo real que respondan instantáneamente en tu navegador web. Cuando realizas cambios en el backend, esas actualizaciones se reflejan inmediatamente en el frontend, gracias a las conexiones WebSocket. Esta comunicación continua entre el servidor y el cliente significa que no tienes que actualizar la página para ver las actualizaciones. 

from nicegui import ui
slider = ui.slider(min=0, max=100, value=50)
ui.label().bind_text_from(slider, 'value')
ui.run()

A medida que mueves el deslizador, la etiqueta se actualiza instantáneamente sin recargar la página. Esto muestra una ventaja de NiceGUI en comparación con frameworks como Streamlit y Dash, donde las actualizaciones pueden requerir más esfuerzo.

Crear un deslizador. Imagen del autor. 

Elementos visuales y diseños

NiceGUI tiene opciones de diseño, incluyendo botones, deslizadores, gráficos y elementos 3D. Puedes organizar estos elementos en filas, columnas y tarjetas para crear interfaces sin escribir HTML ni CSS. He aquí un ejemplo:

from nicegui import ui
with ui.column():
    ui.button('Button 1')
    ui.button('Button 2')
with ui.row():
    with ui.card().style('width: 300px; height: 150px'):
        ui.label('Temperature')
        ui.slider(min=0, max=100, value=20)
    
    with ui.card().style('width: 500px; height: 400px'):  # Adjusting the size of the card
        ui.label('Line Chart')
        ui.echart({
            'title': {'text': 'Sample Line Chart', 'left': 'center', 'textStyle': {'fontSize': 18}},
            'xAxis': {
                'type': 'category',
                'data': ['Category A', 'Category B', 'Category C'],
                'axisLabel': {'rotate': 0}  # Ensures the labels are not rotated
            },
            'yAxis': {'type': 'value'},
            'series': [{
                'name': 'Values',
                'data': [1, 2, 3],
                'type': 'line',
                'smooth': True,  # Makes the line smoother
                'label': {'show': True}  # Shows data points on the chart
            }]
        })
ui.run()

He utilizado este código para crear un diseño interactivo. El código importa primero el módulo necesario de NiceGUI. A continuación, crea una columna con dos botones y una fila con dos tarjetas. La primera tarjeta contiene un control de temperatura, que tiene una etiqueta y un control deslizante para ajustar la temperatura. La segunda tarjeta contiene un gráfico de líneas. Por último, ui.run() ejecuta el código para mostrar el resultado.

Crear elementos visuales y diseños. Imagen del autor.

Integración con bibliotecas externas

Si te dedicas a la ciencia de datos o a la visualización, tengo buenas noticias para ti: NiceGUI funciona bien con librerías populares de Python como NumPy, Matplotlib y Plotly. Supongamos que trabajas en proyectos de ciencia de datos que requieren un procesamiento o visualización de datos complejos. En este caso, puedes utilizar estas bibliotecas como lo harías normalmente en Python, y NiceGUI te mostrará los resultados en una interfaz basada en web. 

He aquí un ejemplo de cómo puedes utilizar NiceGUI junto con Matplotlib y NumPy para crear una visualización básica de datos en una interfaz basada en web. Primero, instalamos las bibliotecas necesarias ejecutando esto:

pip install nicegui numpy matplotlib

Ahora, crea un sencillo script en Python para generar un gráfico y mostrarlo mediante NiceGUI de la siguiente forma:

import numpy as np
import matplotlib.pyplot as plt
from nicegui import ui

# Generate some data using NumPy
x = np.linspace(0, 10, 100)
y = np.sin(x)

# Create a Matplotlib plot
plt.plot(x, y)
plt.title('Sine Wave')
plt.xlabel('X-axis')
plt.ylabel('Y-axis')

# Save the plot to display it in the web interface
plt.savefig('sine_wave_plot.png')

# Define the NiceGUI interface
@ui.page('/')
def main_page():
    # Display the plot using NiceGUI
    ui.image('sine_wave_plot.png')

# Run the NiceGUI application
ui.run()

Gráfico interactivo utilizando NiceGUI, Matplotlib y NumPy. Imagen del autor.

Funciones avanzadas y casos de uso

Ahora ya conoces los aspectos básicos de NiceGUI, así que veamos algunas de sus funciones avanzadas. Te ayudarán a crear aplicaciones web más complejas e interactivas. 

Cuadros de mando de datos

Aparte de los diseños básicos, puedes incluso crear cuadros de mando que muestren datos en directo utilizando NiceGUI. He aquí cómo:

• Utiliza NiceGUI para actualizar datos en la pantalla sin recargar la página.
• Añade tablas y gráficos utilizando herramientas como Matplotlib o Plotly.
• Deja que los usuarios cambien lo que ven con botones y menús desplegables.

Por ejemplo, he creado un panel financiero que muestra los precios de las acciones en tiempo real utilizando NiceGUI y Matplotlib.

from nicegui import ui
import plotly.express as px
import pandas as pd

# Sample data
df = pd.DataFrame({
    'time': ['10:00', '10:05', '10:10'],
    'stock_price': [100, 102, 105]
})

# Create a Plotly line chart
fig = px.line(df, x='time', y='stock_price', title='Stock Price Over Time')

# Use NiceGUI to display the chart
with ui.card():
    ui.plotly(fig)
ui.run()

Panel de acciones en tiempo real con NiceGUI y Plotly. Imagen del autor.

También puedes conectar tu aplicación a una API que transmita datos en directo. Para ello, Matplotlib o Plotly te ayudarán a crear gráficos que se actualizan automáticamente a medida que llegan nuevos datos, ofreciendo a los usuarios una visión del mercado en tiempo real.

Interfaces de aprendizaje automático

NiceGUI también funciona bien con proyectos de aprendizaje automático. Así es como puedes utilizarlo:

• Crea pantallas fáciles de usar para cambiar el funcionamiento de tu modelo.
• Muestra los resultados de tu modelo a medida que se producen.
• Deja que los usuarios exploren los datos antes y después de entrenar el modelo.

Como ejemplo, he creado una interfaz para una regresión lineal:

from nicegui import ui
import numpy as np
import plotly.graph_objects as go

X = np.array([1, 2, 3, 4, 5])
y = np.array([1, 6, 8, 7, 9])

# Slope and intercept
slope = 2.2
intercept = 0.6

# Create the initial figure with two traces
fig = go.Figure()
fig.add_trace(go.Scatter(x=X, y=y, mode='markers', name='Data'))  # Actual data points
# The prediction line uses the manually set slope and intercept
y_pred = slope * X + intercept
fig.add_trace(go.Scatter(x=X, y=y_pred, mode='lines', name='Prediction'))
fig.update_layout(title='Linear Regression Model',
                  xaxis_title='X',
                  yaxis_title='Y',
                  height=400)

def update_model():
    
    y_pred = slope * X + intercept

    # Update the results with the fixed slope and intercept
    result.set_text(f"Slope: {slope:.2f}, Intercept: {intercept:.2f}")

    # Update the prediction line in the plot
    chart.update_traces(y=y_pred, selector=dict(name="Prediction"))

# Create the UI
with ui.card().classes('w-full'):
    ui.label('Linear Regression Demo').classes('text-h6')
    ui.button('Update Model', on_click=update_model).classes('my-2')
    result = ui.label(f"Slope: {slope:.2f}, Intercept: {intercept:.2f}")
    chart = ui.plotly(fig).classes('w-full')

ui.run()

NiceGUI integrado en ML. Imagen del autor.

NiceGUI vs. Otros marcos de interfaz de Python

Al iniciar un nuevo proyecto, puedes comparar NiceGUI con alternativas populares de Python como Streamlit, Dash y JustPy. Aunque cada framework tiene puntos fuertes y débiles que pueden afectar al desarrollo de tu proyecto, vamos a compararlos en términos de facilidad de uso y rendimiento.

Una vez que hayas creado tu aplicación, querrás compartirla con los demás. El despliegue hace que tu aplicación esté disponible para los usuarios, ya sea en Internet o en una red local. Como las aplicaciones de NiceGUI están basadas en Python, tienes varias opciones de despliegue.

Opciones de despliegue en la nube

Puedes optar por Google Cloud Run o AWS, dos de las opciones de despliegue en la nube más populares. Estos son los pasos básicos para desplegar tu aplicación en estas plataformas:

• Asegúrate de que tu aplicación NiceGUI funciona localmente.
• Ajusta parámetros como el host y el puerto para trabajar en un entorno de nube.
• Establece los archivos de configuración necesarios para la plataforma en la nube que hayas elegido.
• Empaqueta tu aplicación y envíala al registro de contenedores de la plataforma en la nube.
• Utiliza las herramientas de la plataforma en la nube para desplegar tu aplicación en contenedores.

El proceso de despliegue puede variar ligeramente según el tipo de plataforma en la nube que utilices. Sin embargo, casi todas las plataformas en la nube proporcionan interfaces fáciles de usar y herramientas CLI que simplifican este proceso, incluso para los que son nuevos en el alojamiento en la nube.

Soporte para Docker

Docker te permite empaquetar tu aplicación con todas sus dependencias en un único contenedor, que puede desplegarse fácilmente en cualquier sistema que admita Docker. NiceGUI también ofrece una imagen Docker, lo que lo hace ideal para la contenedorización y abstrae muchas de las complejidades del despliegue.  

La imagen Docker incluye todas las dependencias necesarias para garantizar la coherencia entre los entornos de desarrollo y producción. Sin embargo, puedes ampliar la imagen oficial para incluir requisitos adicionales para tu solicitud. El proceso de despliegue suele implicar lo siguiente: 

• Crea un Dockerfile para tu aplicación.
• Construye una imagen de contenedor.
• Despliega esa imagen en la plataforma de alojamiento que hayas elegido. 

Conclusión  

NiceGUI es un framework de Python fácil de usar, que funciona en tiempo real y puede utilizarse con otras bibliotecas populares. Así que, tanto si trabajas en un proyecto pequeño como grande, NiceGUI es una buena elección.

Para saber más sobre cómo las interfaces gráficas de usuario están dando forma al futuro del trabajo, consulta el tutorial Las interfaces gráficas de usuario y el futuro del trabajo. Si estás trabajando en aplicaciones de IA y buscas otro enfoque para crear interfaces de usuario, echa un vistazo a este tutorial sobre Creación de interfaces de usuario para aplicaciones de IA con Gradio en Python.