diff --git a/doc/_static/images/hugging_face_spaces_delete.png b/doc/_static/images/hugging_face_spaces_delete.png new file mode 100644 index 0000000000..3ccb12a643 Binary files /dev/null and b/doc/_static/images/hugging_face_spaces_delete.png differ diff --git a/doc/_static/images/hugging_face_spaces_duplicate.png b/doc/_static/images/hugging_face_spaces_duplicate.png new file mode 100644 index 0000000000..6cf61d0b2d Binary files /dev/null and b/doc/_static/images/hugging_face_spaces_duplicate.png differ diff --git a/doc/_static/images/hugging_face_spaces_duplicate_form.png b/doc/_static/images/hugging_face_spaces_duplicate_form.png new file mode 100644 index 0000000000..05574f2a8b Binary files /dev/null and b/doc/_static/images/hugging_face_spaces_duplicate_form.png differ diff --git a/doc/_static/images/hugging_face_spaces_files.png b/doc/_static/images/hugging_face_spaces_files.png new file mode 100644 index 0000000000..cf3fe3868e Binary files /dev/null and b/doc/_static/images/hugging_face_spaces_files.png differ diff --git a/doc/_static/images/hugging_face_spaces_panel.png b/doc/_static/images/hugging_face_spaces_panel.png new file mode 100644 index 0000000000..1282fab356 Binary files /dev/null and b/doc/_static/images/hugging_face_spaces_panel.png differ diff --git a/doc/tutorials/basic/build_dashboard.md b/doc/tutorials/basic/build_dashboard.md index 2cf9acbaa0..687096d74a 100644 --- a/doc/tutorials/basic/build_dashboard.md +++ b/doc/tutorials/basic/build_dashboard.md @@ -4,7 +4,7 @@ In this tutorial we will build a beautiful dashboard showing key metrics of wind -Click the dropdowns below to see the requirements or full code. +Click the dropdowns below to see the requirements or the full code. :::::{dropdown} Requirements @@ -183,7 +183,7 @@ styles = { } ``` -We extract the data and *cache* it. +We extract the once data across all user *sessions* by using `pn.cache`. ```{pyodide} @pn.cache() # only download data once @@ -191,6 +191,7 @@ def get_data(): return pd.read_csv("https://assets.holoviz.org/panel/tutorials/turbines.csv.gz") source_data = get_data() +pn.panel(source_data.head()) ``` We transform the data @@ -245,9 +246,10 @@ fig = ( xlim=(min_year, max_year), color=ACCENT, ) +pn.panel(fig, height=300, sizing_mode="stretch_width") ``` -Lets display the data +Lets display the data. Notice how we set the `styles` on the components. ```{pyodide} image = pn.pane.JPG("https://assets.holoviz.org/panel/tutorials/wind_turbines_sunset.png") diff --git a/doc/tutorials/basic/deploy.md b/doc/tutorials/basic/deploy.md index aff8b1e7d6..a9e4de1a0c 100644 --- a/doc/tutorials/basic/deploy.md +++ b/doc/tutorials/basic/deploy.md @@ -1,17 +1,96 @@ # Deploy an App -COMING UP: Get your application in the hands of your users. Lets deploy it to Hugging Face spaces +Lets get your dashboard in the hands of your users. Lets deploy it to [Hugging Face Spaces](https://huggingface.co/spaces?sort=trending&search=panel). -## Congrats: You are a Hero +## Prerequisites -🥳 Congrats. You have now acquired the *basic* skills required to build a wide range of Panel apps. You are now a *Panel Hero*. +We will assume you have *signed up* for [Hugging Face](https://huggingface.co/spaces?sort=trending&search=panel) and your user is logged in. If not click the `Sign Up` button at [Hugging Face](https://huggingface.co/spaces?sort=trending&search=panel) and follow the instructions. + +![Hugging Face Spaces](../../_static/images/hugging_face_spaces_panel.png) + +## Clone the Project + +Open [awesome-panel/build_dashboard](https://huggingface.co/spaces/awesome-panel/build_dashboard). + +Click the three vertical dots and then click *Duplicate this Space*. + +![Duplicate Space](../../_static/images/hugging_face_spaces_duplicate.png) + +A new form will open. Change the *Visibility* to *Public* if you want to share it with the world. + +![Duplicate Space Form](../../_static/images/hugging_face_spaces_duplicate_form.png) + +Then click *Duplicate Space*. + +You should now have your own copy of the dashboard running. + +## Check the Files + +Lets check the files tab + +![Files Tab](../../_static/images/hugging_face_spaces_files.png) + +The *Files Tab* makes it really easy to update your project. + +- `+ Add File`: Click `+ Add File` to add or update files via *drag and drop*. +- *File*: Click any file and then *edit* to edit it. + +### Check the Dockerfile + +Click the `Dockerfile`. It should look like + +```bash +FROM python:3.11 + +WORKDIR /code + +COPY ./requirements.txt /code/requirements.txt +RUN python3 -m pip install --no-cache-dir --upgrade pip +RUN python3 -m pip install --no-cache-dir --upgrade -r /code/requirements.txt + +COPY . . + +CMD ["panel", "serve", "/code/app.py", "--address", "0.0.0.0", "--port", "7860", "--allow-websocket-origin", "*", "--num-procs", "2", "--num-threads", "0", "--index", "app"] + +RUN mkdir /.cache +RUN chmod 777 /.cache +``` + +:::{note} +The lines in the `Dockerfile` refer to + +- `FROM python:3.11`: Start from a Python 3.11 *image* +- `WORKDIR /code`: Run commands below from the `/code` folder +- `pip install ...`: Install the requirements +- `COPY . .`: Copy the repository files to the current `WORKDIR` +- `CMD [...]`: Run the following command when the *Docker container* starts. +- `"--address", "0.0.0.0", "--port", "7860"`: Serve the app at `http://0.0.0.0:7860/app` +- `"--allow-websocket-origin", "*"`: Respond to requests from any domain including `huggingface.co`. +- `"--num-procs", "2"`: Start 2 server processes to respond to users in parallel. +- `"--num-threads", "0"`: Use *threading* to execute *callbacks* and *bound* functions *concurrently*. +- `"--index", "app"`: Also serve the app at `http://0.0.0.0:7860` +::: + +## Delete Your Space + +If your dashboard is not intended for real usage please delete it again to save the worlds resources. + +Open the *Settings* tab. Navigate to the bottom of the page. Follow the instructions to *Delete this space*. + +![Delete Space](../../_static/images/hugging_face_spaces_delete.png) + +## 🥳 Congrats: You are a Hero + +You have now acquired the *basic* skills required to build a wide range of Panel apps. You are now a *Panel Hero*. The recommended next steps are to check out the the *basic apps* on the [*Basic Tutorials*](index.md) page, check out the *basic Topics* on the [*Basic Tutorials*](index.md) page and start using Panel for real. -When you are ready to acquire the skills to build larger and more complex apps then check out the [Intermediate Tutorials](../intermediate/index.md). +When you are ready to acquire the skills to build larger and more complex apps, then check out the [Intermediate Tutorials](../intermediate/index.md). ## References ### How-to -- [Deploy Applications](../../how_to/deployment/index.html) +- [Configure the Server](../../how_to/server/index.md) +- [Deploy Panel Applications](../../how_to/deployment/index.md) +- [Enable Automatic Threading](../../how_to/concurrency/threading.md)