awesome-panel / examples

A repository of awesome panel examples. The apps are running entirely in the browser as webassembly apps. NO SERVER REQUIRED.

✨ Awesome Panel Examples

A repository of awesome Panel data app examples.

The source files are available in the src folder.

The apps are converted to webassembly and released to awesome-panel.github.io/examples/ as simple as

1. $ panel convert app.py (1 second)
2. $ git push (1 second)

This is THE FASTEST WAY TO DEPLOY DATA APPS in Python.

The apps are very performant when loaded because there is no latency for communication between server and client.

BUT the apps take time to load as they need to download a Python runtime and additional packages (50MB per app).

This is THE FUTURE OF DATAVIZ in Python.

If you like Panel and Awesome Panel please support the projects by giving them a ⭐ on Github

⭐ holoviz/panel ⭐ awesome-panel/awesome-panel ⭐ awesome-panel/examples

Thanks 👍

📙 How to

⚙️ Install the repository

git clone https://github.com/awesome-panel/examples.git

Create and activate a virtual environment, c.f. Python Virtual Environments: A Primer.

Install the requirements.txt file

pip install -r requirements.txt -U

💻 Serve a server app locally

You can serve for example the hello-world application on your Panel server via

panel serve src/hello-world/app.py --autoreload

It will be available at http://localhost:5006/app.

🏗️ Convert an app to webassembly

You can panel convert for example the hello-world application to webassembly via

panel convert src/hello-world/app.py --to pyodide-worker --out docs/hello-world

If you want to avoid repeating the big download over and over again, you can even convert to a progressive web app that can be installed on your laptop! It is as simple as adding the --pwa and --title flags.

Check out the Panel WebAssembly Guide for more details.

💻 Serve a webassembly app locally

python3 -m http.server

The app is now available at http://localhost:8000/docs/hello-world/app.html

⚙️ Configure the repository for Github Pages

You can learn how to configure Github Pages in general via the Quickstart for Github Pages.

The Github Pages of awesome-panel/examples is configured as described below

1. Add a .nojekyll file push all changes.
2. Navigate to the Settings page
3. Navigate to the Pages page
4. Configure your Pages Settings as shown below

🔥 Release to Github Pages

Git add, commit, push and merge your PR as you would normally do.

The applications are now available at awesome-panel.github.io/examples/ or similar.

Development

The below instructions are preliminary and for the project contributors

Build the project

panel convert src/hello-world/app.py --to pyodide-worker --out docs/hello-world
panel convert src/streaming-indicators/app.py --to pyodide-worker --out docs/streaming-indicators
panel convert src/stumpy-dashboard/app.py --to pyodide-worker --out docs/stumpy-dashboard
panel convert src/videostream-interface/app.py --to pyodide-worker --out docs/videostream-interface --requirements src/videostream-interface/requirements.txt
python src/index/index.py

python3 -m http.server

http://localhost:8000/docs/index.html

examples's Issues

Ipyvolume

Would this work with ipyvolume?

I have this app.py:

import panel as pn
pn.extension(sizing_mode="stretch_width", template="fast")

pn.state.template.param.update(
    site_url="https://awesome-panel.org",
    site="Awesome Panel",
    title="Hello World",
    favicon="https://raw.githubusercontent.com/MarcSkovMadsen/awesome-panel-assets/320297ccb92773da099f6b97d267cc0433b67c23/favicon/ap-1f77b4.ico",
)

import ipyvolume as ipv
import numpy as np
pn.config.css_files.append("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css")

import ipyvolume as ipv
fig = ipv.figure()
V = np.zeros((128,128,128)) 
V[30:-30,30:-30,30:-30] = 0.75
V[35:-35,35:-35,35:-35] = 0.0
V[50:-50,50:-50,50:-50] = 0.25
V[55:-55,55:-55,55:-55] = 0.0
ipv.volshow(V, level=[0.25, 0.75], opacity=0.03, level_width=0.1, data_min=0, data_max=1)
ipv.view(90, 0)

pn.panel(fig).servable()

With requirements:

awesome-panel-extensions
black
invoke
isort
mypy
pandas
panel~=0.14
pylint
numpy
scikit-image
ipyvolume==0.6.0
ipython_genutils
ipywidgets_bokeh

I did:

python3 -m pip install -r requirements.txt -U
panel convert src/myapp/app.py --to pyodide-worker --out docs/myapp
# NO ERRORS so far
python3 -m http.server
#  open this in Chrome http://localhost:8000/docs/myapp/app.html

But it's saying it Can't find a pure Python 3 wheel for 'tornado>=6.1'..
I think I made it work on JupyterLite (by patching ipyvolume) but I cannot make it work as a Panel serverless dashboard.