How to integrate FastListTemplate or Vanilla template in Fastapi?

PanelFileExample


import hvplot.pandas
import numpy as np
import panel as pn
import pandas as pd

class FastListTemplateApp:
    def __init__(self):
        self.xs = np.linspace(0, np.pi)
        self.freq = pn.widgets.FloatSlider(name="Frequency", start=0, end=10, value=2)
        self.phase = pn.widgets.FloatSlider(name="Phase", start=0, end=np.pi)
        
        self.dfi_sine = hvplot.bind(self.sine, self.freq, self.phase).interactive()
        self.dfi_cosine = hvplot.bind(self.cosine, self.freq, self.phase).interactive()
        
        self.plot_opts = dict(
            responsive=True, min_height=400,
            color=pn.template.FastListTemplate.accent_base_color
        )
        
        self.template = pn.template.FastListTemplate(
            title="FastListTemplate",
            sidebar=[self.freq, self.phase],
        )
        
    def sine(self, freq, phase):
        return pd.DataFrame(dict(y=np.sin(self.xs*freq+phase)), index=self.xs)

    def cosine(self, freq, phase):
        return pd.DataFrame(dict(y=np.cos(self.xs*freq+phase)), index=self.xs)
    
    def show(self):
        self.template.main.append(
            pn.Row(
                self.dfi_sine.hvplot(title='Sine', **self.plot_opts).output(),
                self.dfi_cosine.hvplot(title='Cosine', **self.plot_opts).output(),
            )
        )
        return self.template

Main.py file

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})

I have initialised the jinja template like below

templates = Jinja2Templates(directory="templates")

At the end of the file, I am using below code to render the plot in fastapi

pn.serve({'/app': createApp, '/app2': createApp2},
        port=5000, allow_websocket_origin=["127.0.0.1:8000"],
         address="127.0.0.1", show=False)

I followed the integration article FastAPI but Iā€™m not getting the desired results.
Can someone please help ?

1 Like