Einbetten von Shinylive Python-Apps in Quarto-Dokumente

Einführung

Interaktive, serverlose Shiny-Apps, die mit Python erstellt wurden, können nahtlos in Ihre Quarto-Dokumente integriert werden, so dass Sie Ihre Blog-Posts und Artikel mit dynamischen, lebendigen Inhalten anreichern können. Mit der Shinylive Quarto-Erweiterung können Sie diese Anwendungen einbetten, so dass Benutzer direkt auf Ihrer Website mit ihnen interagieren können.

1. Voraussetzungen

Bevor Sie eine Shinylive Python-Anwendung in Ihr Quarto-Dokument einbetten, stellen Sie sicher, dass Sie Folgendes haben:

• Quarto Installiert: Download von quarto.org.

• Shinylive Python Paket: Installieren Sie es von PyPI mit:

  pip install shinylive --upgrade

• Shinylive Quarto Extension: Fügen Sie die Erweiterung zu Ihrem Projekt hinzu, indem Sie:

  quarto add quarto-ext/shinylive

• Dokument YAML Konfiguration: Fügen Sie in Ihrem Dokument (oder _quarto.yml) den shinylive Filter ein:

  filters:
    - shinylive

2. Einbetten einer einfachen Shinylive Python-Anwendung

Um eine Shinylive Python-Anwendung einzubetten, verwenden Sie einen mit {shinylive-python} markierten Codeblock. Fügen Sie die Option #| standalone: true ein, um anzuzeigen, dass der Code eine vollständige Anwendung darstellt.

Beispiel: ‘Hallo Shinylive Python’-App

Im Folgenden finden Sie ein Beispiel für eine einfache interaktive Shiny for Python-Anwendung, die in ein Quarto-Dokument eingebettet ist:

Quellcode

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

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

# Definieren Sie die Benutzeroberfläche
app_ui = ui.page_fluid(
    ui.input_slider("bins", "Number of bins:", 5, 30, 10, step=1),
    ui.output_plot("histPlot")
)

# Definieren Sie die Serverlogik
def server(input, output, session):
    @output
    @render.plot
    def histPlot():
        # Generieren Sie zufällige Daten zur Demonstration
        x = np.random.normal(0, 1, 1000)
        # Bins basierend auf der Eingabe des Schiebereglers erstellen
        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()

# Erstellen der Shinylive App
app = App(app_ui, server)
```

Ergebnisse

Hinweis

Wenn Sie den Codeblock ausführen, wird eine interaktive Anwendung direkt in Ihrem Dokument angezeigt. Benutzer können den Schieberegler anpassen, um das Histogramm in Echtzeit zu aktualisieren.

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

# Definieren Sie die Benutzeroberfläche
app_ui = ui.page_fluid(
    ui.input_slider("bins", "Number of bins:", 5, 30, 10, step=1),
    ui.output_plot("histPlot")
)

# Definieren Sie die Serverlogik
def server(input, output, session):
    @output
    @render.plot
    def histPlot():
        # Generieren Sie zufällige Daten zur Demonstration
        x = np.random.normal(0, 1, 1000)
        # Bins basierend auf der Eingabe des Schiebereglers erstellen
        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()

# Erstellen der Shinylive App
app = App(app_ui, server)

3. Anpassen der eingebetteten App

Sie können die eingebettete Anwendung folgendermaßen erweitern: - Anzeige des Code-Editors:
Füge #| components: [editor, viewer] hinzu, um sowohl den Quellcode als auch die laufende Anwendung anzuzeigen. - Layout ändern:
Verwenden Sie #| layout: vertical, um den Editor und den Viewer vertikal zu stapeln. - Anpassen der Viewer-Höhe:
Setzen Sie #| viewerHeight: 420 (oder Ihren bevorzugten Wert), um den Anzeigebereich der Anwendung zu steuern.

Beispiel: Editierbare App

Quellcode

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

Hinweis

Dieses Beispiel bietet einen Editor und einen Viewer nebeneinander, so dass die Nutzer den Code ändern und die Ergebnisse sofort sehen können.

#| '!! 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. Tipps und Best Practices

• Sicherstellen der Installation der Erweiterung:
  Vergewissern Sie sich, dass die Shinylive Quarto-Erweiterung zu Ihrem Projekt hinzugefügt wurde und dass der shinylive-Filter in Ihrem YAML-Header enthalten ist.
• Optimieren der Viewer-Einstellungen:
  Verwenden Sie viewerHeight und Layout-Optionen, um die Anzeige der App an das Design Ihres Dokuments anzupassen.
• Lokales Testen:
  Prüfen Sie Ihre eingebettete Anwendung immer lokal, bevor Sie Ihr Dokument veröffentlichen.
• Asset-Pfade prüfen:
  Stellen Sie sicher, dass alle Asset-Pfade korrekt konfiguriert sind, damit die App reibungslos geladen wird.

Weiterführende Literatur

• Interaktive Code-Blöcke erklärt
  Lernen Sie, wie Sie interaktive Codeblöcke in Quarto Live erstellen und anpassen können.
• Installieren und Einrichten von Shinylive für Python
  Detaillierte Anweisungen für die Installation des shinylive-Python-Pakets und die Konfiguration der Bestandsverwaltung.
• Erstellen einer einfachen Shinylive Python-Anwendung
  Erstellen und exportieren Sie Ihre erste Shinylive Python-Anwendung.
• Erweiterte Anpassung und Fehlerbehebung für Shinylive (Python)
  Erforschen Sie fortgeschrittene Themen zur Feinabstimmung und Fehlerbehebung Ihrer Shinylive-Anwendungen.

Schlussfolgerung

Durch die Einbettung von Shinylive Python-Apps in Ihre Quarto-Dokumente können Sie ein dynamisches, interaktives Erlebnis direkt in Ihren Blogbeiträgen oder Artikeln bieten. In diesem Tutorial haben Sie gelernt, wie Sie eine voll funktionsfähige Shinylive App integrieren, ihr Aussehen anpassen und Ihren Lesern ein nahtloses interaktives Erlebnis bieten können. Erforschen Sie weitere Lesematerialien, um Ihr Wissen zu vertiefen und Ihre interaktiven Inhalte zu verbessern.

Weitere Artikel erkunden

Hinweis

Hier finden Sie weitere Artikel aus derselben Kategorie, die Ihnen helfen, tiefer in das Thema einzutauchen.