Intégrer des applications Python Shinylive dans les documents Quarto

Introduction

Les apps Shiny interactives et sans serveur construites avec Python peuvent être intégrées fluidement dans vos documents Quarto, ce qui vous permet d’enrichir vos billets de blog et vos articles avec du contenu dynamique et en direct. En utilisant l’extension Shinylive Quarto, vous pouvez intégrer ces applications afin que les utilisateurs puissent interagir avec elles directement sur votre site web.

1. Prérequis

Avant d’intégrer une application Shinylive Python dans votre document Quarto, assurez-vous que vous avez les éléments suivants:

• Quarto installé: Télécharger à partir de quarto.org.

• En utilisant Python : Shinylive Python Package: Installez-le à partir de PyPI en utilisant:

  pip install shinylive --upgrade

• Shinylive dans Quarto Extension: Ajoutez l’extension à votre projet en exécutant:

  quarto add quarto-ext/shinylive

• Configuration YAML du document: Dans votre document (ou _quarto.yml), incluez le filtre shinylive:

  filters:
    - shinylive

2. Intégrer une application Python Shinylive de base

Pour intégrer une application Python Shinylive, utilisez un bloc de code marqué par {shinylive-python}. Inclure l’option #| standalone: true pour indiquer que le code représente une application complète.

Exemple : « Application « Hello Shinylive Python

Voici un exemple d’une application Shiny for Python interactive de base intégrée dans un document Quarto:

Source Code

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

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

# Définir l'interface utilisateur
app_ui = ui.page_fluid(
    ui.input_slider("bins", "Number of bins:", 5, 30, 10, step=1),
    ui.output_plot("histPlot")
)

# Définir la logique du serveur
def server(input, output, session):
    @output
    @render.plot
    def histPlot():
        # Générer des données aléatoires pour la démonstration
        x = np.random.normal(0, 1, 1000)
        # Créer des cases en fonction de l'entrée du curseur
        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()

# Créer l'application Shinylive
app = App(app_ui, server)
```

Résultats

Note

Lorsque vous exécutez le bloc de code, une application interactive apparaît directement dans votre document. Les utilisateurs peuvent ajuster le curseur pour mettre à jour l’histogramme en temps réel.

#| '!! 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

# Définir l'interface utilisateur
app_ui = ui.page_fluid(
    ui.input_slider("bins", "Number of bins:", 5, 30, 10, step=1),
    ui.output_plot("histPlot")
)

# Définir la logique du serveur
def server(input, output, session):
    @output
    @render.plot
    def histPlot():
        # Générer des données aléatoires pour la démonstration
        x = np.random.normal(0, 1, 1000)
        # Créer des cases en fonction de l'entrée du curseur
        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()

# Créer l'application Shinylive
app = App(app_ui, server)

3. Personnaliser l’application intégrée

Vous pouvez améliorer l’application intégrée en: - Afficher l’éditeur de code:
Ajouter #| components: [editor, viewer] pour afficher à la fois le code source et l’application en cours d’exécution. - Changer la mise en page:
Utilisez #| layout: vertical pour empiler verticalement l’éditeur et le viewer. - Ajuster la hauteur du viewer:
Configurez #| viewerHeight: 420 (ou la valeur de votre choix) pour contrôler la zone d’affichage de l’application.

Exemple : Application modifiable

Source Code

```{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)
```

Note

Cet exemple présente un éditeur et un viewer côte à côte, ce qui permet aux utilisateurs de modifier le code et de voir instantanément les résultats.

#| '!! 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. Conseils et bonnes pratiques

• Assurer l’installation de l’extension:
  Confirmez que l’extension Shinylive Quarto est ajoutée à votre projet et que le filtre shinylive est inclus dans votre en-tête YAML.
• Optimiser les paramètres du viewer:
  Utilisez viewerHeight et les options de mise en page pour adapter l’affichage de l’app à la conception de votre document.
• Tester localement:
  Prévisualisez toujours votre application intégrée localement avant de publier votre document.
• Vérifier les chemins d’accès aux ressources:
  Assurez-vous que tous les chemins d’accès aux ressources sont correctement configurés pour que l’application se charge sans problème.

Plus d’informations

• Explication des blocs de code interactifs
  Apprenez à créer et à personnaliser des blocs de code interactifs dans Quarto Live.
• Installer et configurer Shinylive pour Python
  Instructions détaillées pour l’installation du package Python shinylive et la configuration de la gestion des actifs.
• Créer une application Shinylive Python de base
  Construisez et exportez votre première application Shinylive Python.
• Personnalisation avancée et dépannage pour Shinylive (Python)
  Explorer les sujets avancés pour affiner et dépanner vos applications Shinylive.

Conclusion

Intégrer des apps Shinylive Python dans vos documents Quarto vous permet d’offrir une expérience dynamique et interactive directement dans vos billets de blog ou vos articles. En suivant ce tutoriel, vous avez appris à intégrer une app Shinylive entièrement fonctionnelle, à personnaliser son apparence et à offrir une expérience interactive fluide à vos lecteurs. Continuez à explorer les ressources de lecture complémentaire pour approfondir vos connaissances et améliorer votre contenu interactif.

Explorer d’autres articles

Note

Voici d’autres articles de la même catégorie pour vous aider à approfondir le sujet.