Incorporación de aplicaciones Python Shinylive en documentos Quarto

Introducción

Las aplicaciones Shiny interactivas y sin servidor creadas con Python se pueden integrar perfectamente en tus documentos Quarto, lo que te permite enriquecer tus entradas de blog y artículos con contenido dinámico y en vivo. Con la extensión Shinylive de Quarto, puedes incrustar estas aplicaciones para que los usuarios puedan interactuar con ellas directamente en tu sitio web.

1. Requisitos previos

Antes de incrustar una aplicación Python Shinylive en tu documento Quarto, asegúrate de que tienes lo siguiente:

• Quarto instalado: Descargar desde quarto.org.

• Shinylive Paquete Python: Instálalo desde PyPI utilizando:

  pip install shinylive --upgrade

• Shinylive Extensión Quarto: Añada la extensión a su proyecto ejecutando:

  quarto add quarto-ext/shinylive

• Configuración YAML del documento: En tu documento (o _quarto.yml), incluye el filtro shinylive:

  filters:
    - shinylive

2. Incorporación de una aplicación básica de Python

Para incrustar una aplicación Python Shinylive, utilice un bloque de código marcado con {shinylive-python}. Incluya la opción #| standalone: true para indicar que el código representa una aplicación completa.

Ejemplo: aplicación «Hello Python»

A continuación se muestra un ejemplo de una aplicación Shiny interactiva básica para Python incrustada en un documento Quarto:

Código fuente

```{shinylive-python}
#| standalone: true
#| viewerHeight: 650

from shiny import App, ui, render
import numpy as np
import matplotlib.pyplot as plt

# Definir la interfaz de usuario
app_ui = ui.page_fluid(
    ui.input_slider("bins", "Number of bins:", 5, 30, 10, step=1),
    ui.output_plot("histPlot")
)

# Definir la lógica del servidor
def server(input, output, session):
    @output
    @render.plot
    def histPlot():
        # Generar datos aleatorios para la demostración
        x = np.random.normal(0, 1, 1000)
        # Crear contenedores basados en la entrada del control deslizante
        bins = np.linspace(x.min(), x.max(), input.bins() + 1)
        plt.figure(figsize=(8, 4))
        plt.hist(x, bins=bins, color="skyblue", edgecolor="white")
        plt.title("Interactive Histogram of Random Data")
        plt.xlabel("Value")
        plt.ylabel("Frequency")
        plt.show()

# Crear la aplicación Shinylive
app = App(app_ui, server)
```

Resultados

Nota

Cuando ejecute el bloque de código, aparecerá una aplicación interactiva directamente en su documento. Los usuarios pueden ajustar el control deslizante para actualizar el histograma en tiempo real.

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| viewerHeight: 650

from shiny import App, ui, render
import numpy as np
import matplotlib.pyplot as plt

# Definir la interfaz de usuario
app_ui = ui.page_fluid(
    ui.input_slider("bins", "Number of bins:", 5, 30, 10, step=1),
    ui.output_plot("histPlot")
)

# Definir la lógica del servidor
def server(input, output, session):
    @output
    @render.plot
    def histPlot():
        # Generar datos aleatorios para la demostración
        x = np.random.normal(0, 1, 1000)
        # Crear contenedores basados en la entrada del control deslizante
        bins = np.linspace(x.min(), x.max(), input.bins() + 1)
        plt.figure(figsize=(8, 4))
        plt.hist(x, bins=bins, color="skyblue", edgecolor="white")
        plt.title("Interactive Histogram of Random Data")
        plt.xlabel("Value")
        plt.ylabel("Frequency")
        plt.show()

# Crear la aplicación Shinylive
app = App(app_ui, server)

3. Personalizar la aplicación integrada

Puedes mejorar la aplicación incrustada mediante: - Mostrar el editor de código:
Añade #| components: [editor, viewer] para mostrar tanto el código fuente como la aplicación en ejecución. - Cambiar el diseño:
Utiliza #| layout: vertical para apilar el editor y el visor verticalmente. - Ajustar la altura del visor:
Establece #| viewerHeight: 420 (o el valor que prefieras) para controlar el área de visualización de la aplicación.

Ejemplo: aplicación editable

Código fuente

```{shinylive-python}
#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 650

from shiny import App, ui, render
import numpy as np
import matplotlib.pyplot as plt

app_ui = ui.page_fluid(
    ui.input_slider("bins", "Number of bins:", 5, 30, 10, step=1),
    ui.output_plot("histPlot")
)

def server(input, output, session):
    @output
    @render.plot
    def histPlot():
        x = np.random.normal(0, 1, 1000)
        bins = np.linspace(x.min(), x.max(), input.bins() + 1)
        plt.figure(figsize=(8, 4))
        plt.hist(x, bins=bins, color="skyblue", edgecolor="white")
        plt.title("Interactive Histogram of Random Data")
        plt.xlabel("Value")
        plt.ylabel("Frequency")
        plt.show()

app = App(app_ui, server)
```

Nota

Este ejemplo proporciona un editor y un visor en paralelo, lo que permite a los usuarios modificar el código y ver los resultados al instante.

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| components: [editor, viewer]
#| layout: horizontal
#| viewerHeight: 650

from shiny import App, ui, render
import numpy as np
import matplotlib.pyplot as plt

app_ui = ui.page_fluid(
    ui.input_slider("bins", "Number of bins:", 5, 30, 10, step=1),
    ui.output_plot("histPlot")
)

def server(input, output, session):
    @output
    @render.plot
    def histPlot():
        x = np.random.normal(0, 1, 1000)
        bins = np.linspace(x.min(), x.max(), input.bins() + 1)
        plt.figure(figsize=(8, 4))
        plt.hist(x, bins=bins, color="skyblue", edgecolor="white")
        plt.title("Interactive Histogram of Random Data")
        plt.xlabel("Value")
        plt.ylabel("Frequency")
        plt.show()

app = App(app_ui, server)

4. Consejos y mejores prácticas

• Asegurar la instalación de la extensión:
  Confirma que la extensión Quarto Shinylive se ha añadido a tu proyecto y que el filtro shinylive está incluido en tu encabezado YAML.
• Optimizar la configuración del visor:
  Utiliza viewerHeight y las opciones de diseño para adaptar la visualización de la aplicación al diseño de tu documento.
• Probar localmente:
  Siempre previsualice su aplicación incrustada localmente antes de publicar su documento.
• Comprobar las rutas de los activos:
  Asegúrese de que todas las rutas de los activos estén configuradas correctamente para que la aplicación se cargue sin problemas.

Lecturas adicionales

• Explicación de los bloques de código interactivo
  Aprenda a crear y personalizar bloques de código interactivos en Quarto Live.
• Instalación y configuración de Shinylive para Python
  Instrucciones detalladas para instalar el paquete Python shinylive y configurar la gestión de activos.
• Creación de una aplicación Python Shinylive básica
  Compila y exporta tu primera aplicación Python Shinylive.
• Personalización avanzada y resolución de problemas para Shinylive (Python)
  Explore temas avanzados para ajustar y solucionar problemas de sus aplicaciones Shinylive.

Conclusión

La integración de aplicaciones Python Shinylive en tus documentos Quarto te permite ofrecer una experiencia dinámica e interactiva directamente en tus entradas de blog o artículos. Siguiendo este tutorial, has aprendido a integrar una aplicación Shinylive totalmente funcional, personalizar su apariencia y proporcionar una experiencia interactiva perfecta a tus lectores. Continúa explorando recursos de lectura adicionales para profundizar tus conocimientos y mejorar tu contenido interactivo.

Explorar más artículos

Nota

Aquí hay más artículos de la misma categoría para ayudarte a profundizar en el tema.