FastAPI-Integration¶

Panel läuft üblicherweise auf einem Bokeh-Server, der wiederum auf Tornado läuft. Es ist jedoch auch oft nützlich, eine Panel-App in eine große Webanwendung einzubetten, wie z.B. einen FastAPI-Webserver. Die Integration in FastAPI ist einfacher im Vergleich zu anderen wie z.B. Flask, da es ein leichtgewichtigeres Framework ist. Die Verwendung von Panel mit FastAPI erfordert nur ein wenig mehr Aufwand als bei Notebooks und Bokeh-Servern.

Konfiguration¶

Bevor wir mit dem Hinzufügen einer Bokeh-Anwendung zu unserem FastApi-Server beginnen, müssen wir einige der grundlegenden Konfigurationen in fastAPI/main.py einrichten:

Zunächst importieren wir alle erforderlichen Elemente:

fastAPI/main.py¶

import panel as pn
from bokeh.embed import server_document

from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates

Als nächstes definieren wir app als Instanz von FastAPI und definieren den Pfad zum Vorlagenverzeichnis:
```
8app = FastAPI()
9templates = Jinja2Templates(directory="templates")
```

Nun erstellen wir unsere erste Routine über eine asynchrone Funktion und verweisen sie an unseren Bokeh-Server:

@app.get("/")
async def bkapp_page(request: Request):
    script = server_document("http://127.0.0.1:5000/app")
    return templates.TemplateResponse(
        "base.html", {"request": request, "script": script}
    )

Wie ihr dem Code ansehen könnt, wird ein Jinja2-Template fastAPI/templates/base.html erwartet. Dieses kann z.B. folgenden Inhalt haben:

fastAPI/templates/base.html¶

<!DOCTYPE html>
<html>
    <head>
        <title>Panel in FastAPI: sliders</title>
    </head>
    <body>
        {{ script|safe }}
    </body>
</html>

Kehren wir nun zurück zu unserer fastAPI/main.py-Datei um mit pn.serve() unseren Bokeh-Server zu starten:
```
21    {"/app": createApp},
22    port=5000,
23    allow_websocket_origin=["127.0.0.1:8000"],
24    address="127.0.0.1",
25    show=False,
26)
```
createApp
ruft in diesem Beispiel unsere Panel-App auf, die jedoch erst im nächsten Abschnitt behandelt wird.

address, port
Adresse und Port, an dem der Server auf Anfragen lauscht; in unserem Fall also http://127.0.0.1:5000.

Ggf. muss noch die Umgebungsvariable BOKEH_ALLOW_WS_ORIGIN gesetzt werden mit:
$ export BOKEH_ALLOW_WS_ORIGIN=127.0.0.1:5000
show=False
sorgt dafür, dass der Bokeh-Server zwar gestartet wird, jedoch nicht unmittelbar im Browser angezeigt wird.

allow_websocket_origin
listet die Hosts auf, die sich mit dem Websocket verbinden können. In unserem Beispiel soll das fastApi sein, also verwenden wir 127.0.0.1:8000.

Nun definieren wir die sliders-App auf Basis einer Standardvorlage für FastAPI-Apps, die zeigt, wie Panel und FastAPI integriert werden können:

fastAPI/sliders/sinewave.py

ein parametrisiertes Objekt, das euren bereits vorhandenen Code darstellt:

fastAPI/sliders/sinewave.py¶

import numpy as np
import param
from bokeh.models import ColumnDataSource
from bokeh.plotting import figure


class SineWave(param.Parameterized):
    offset = param.Number(default=0.0, bounds=(-5.0, 5.0))
    amplitude = param.Number(default=1.0, bounds=(-5.0, 5.0))
    phase = param.Number(default=0.0, bounds=(0.0, 2 * np.pi))
    frequency = param.Number(default=1.0, bounds=(0.1, 5.1))
    N = param.Integer(default=200, bounds=(0, None))
    x_range = param.Range(default=(0, 4 * np.pi), bounds=(0, 4 * np.pi))
    y_range = param.Range(default=(-2.5, 2.5), bounds=(-10, 10))

    def __init__(self, **params):
        super().__init__(**params)
        x, y = self.sine()
        self.cds = ColumnDataSource(data=dict(x=x, y=y))
        self.plot = figure(
            height=400,
            width=400,
            tools="crosshair, pan, reset, save, wheel_zoom",
            x_range=self.x_range,
            y_range=self.y_range,
        )
        self.plot.line("x", "y", source=self.cds, line_width=3, line_alpha=0.6)

    @param.depends(
        "N",
        "frequency",
        "amplitude",
        "offset",
        "phase",
        "x_range",
        "y_range",
        watch=True,
    )
    def update_plot(self):
        x, y = self.sine()
        self.cds.data = dict(x=x, y=y)
        self.plot.x_range.start, self.plot.x_range.end = self.x_range
        self.plot.y_range.start, self.plot.y_range.end = self.y_range

    def sine(self):
        x = np.linspace(0, 4 * np.pi, self.N)
        y = (
            self.amplitude * np.sin(self.frequency * x + self.phase)
            + self.offset
        )
        return x, y

fastAPI/sliders/pn_app.py

erstellt eine App-Funktion aus der SineWave-Klasse:

fastAPI/sliders/pn_app.py¶

import panel as pn

from .sinewave import SineWave


def createApp():
    sw = SineWave()
    return pn.Row(sw.param, sw.plot).servable()

Schließlich kehren wir zu unserer fastAPI/main.py zurück und importieren die createApp-Funktion:
fastAPI/main.py¶
```
3from sliders.pn_app import createApp
```

Die Dateistruktur sollte nun folgendermaßen aussehen:

fastAPI
├── main.py
├── sliders
│   ├── pn_app.py
│   └── sinewave.py
└── templates
    └── base.html

Ihr könnt den Server nun starten mit:

$ uv run uvicorn main:app --reload
INFO:     Will watch for changes in these directories: ['/srv/jupyter/jupyter-tutorial/docs/web/dashboards/panel/fastAPI']
INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
INFO:     Started reloader process [218214] using StatReload
Launching server at http://127.0.0.1:5000
INFO:     Started server process [218216]
INFO:     Waiting for application startup.
INFO:     Application startup complete.

Anschließend solltet ihr im Web-Browser unter der URL http://127.0.0.1:8000 folgendes sehen: