Make demo app deploy-able to Hugging Face spaces (#685)

demo/Dockerfile

@@ -0,0 +1,32 @@
+FROM python:3.10.14-bullseye
+
+RUN apt-get update && \
+    apt-get install -y \
+    # General dependencies
+    locales \
+    locales-all && \
+    # Clean local repository of package files since they won't be needed anymore.
+    # Make sure this line is called after all apt-get update/install commands have
+    # run.
+    apt-get clean && \
+    # Also delete the index files which we also don't need anymore.
+    rm -rf /var/lib/apt/lists/*
+
+ENV LC_ALL en_US.UTF-8
+ENV LANG en_US.UTF-8
+ENV LANGUAGE en_US.UTF-8
+
+# Install dependencies
+COPY requirements.txt .
+RUN pip install -r requirements.txt
+
+# Create non-root user
+RUN groupadd -g 900 mesop && useradd -u 900 -s /bin/bash -g mesop mesop
+USER mesop
+
+# Add app code here
+COPY . /srv/mesop-app
+WORKDIR /srv/mesop-app
+
+# Run Mesop through gunicorn. Should be available at localhost:8080
+CMD ["gunicorn", "--bind", "0.0.0.0:8080", "main:me"]

demo/README.md

@@ -1,3 +1,14 @@
+---
+title: Mesop Demo Gallery
+emoji: 👓
+colorFrom: blue
+colorTo: purple
+sdk: docker
+pinned: false
+license: apache-2.0
+app_port: 8080
+---
+
 # Mesop demo app
 
 This app demonstrates Mesop's various components and features. Create your own Cloud Run app by following: https://google.github.io/mesop/guides/deployment/
@@ -12,7 +23,7 @@ From workspace root:
 rm -rf demo/venv && \
 virtualenv --python python3 demo/venv && \
 source demo/venv/bin/activate && \
-pip install -r demo/requirements.txt --no-binary pydantic
+pip install -r demo/requirements.txt
 ```
 
 ### Run
@@ -35,7 +46,12 @@ If you add more demos and want to re-generate screenshots, do the following step
 
 ## Deployment
 
-> Note: make sure you [generate screenshots](#generate-screenshots) before deploying!
+**Pre-requisites:**
+
+- Make sure you [generate screenshots](#generate-screenshots) before deploying!
+- Ensure a recent version of Mesop has been published to pip, otherwise the demos may not work (because they rely on a new API).
+
+### Deploy to Cloud Run
 
 This app is deployed to Google Cloud Run.
 
@@ -44,3 +60,17 @@ gcloud run deploy mesop --source .
 ```
 
 See our Mesop deployment [docs](https://google.github.io/mesop/guides/deployment/#deploy-to-google-cloud-run) for more background.
+
+### Deploy to Hugging Face Spaces
+
+> NOTE: You need to update demo/requirements.txt to point to the latest Mesop version because Hugging Face Spaces may use a cached version of Mesop which is too old.
+
+Because Hugging Face Spaces has restrictions on not having binary files (e.g. image files), we cannot push the full Mesop Git repo to Hugging Face Spaces. Instead, we copy just the `demo` directory and turn it into a standalone Git repo which we deploy.
+
+```sh
+./demo/deploy_to_hf.sh ../hf_demo
+```
+
+You can change `../hf_demo` to any dir path outside of your Mesop repo.
+
+> Note: if you get an error in Hugging Face Spaces "No app file", then you can create an "app.py" file in the Spaces UI to manually trigger a build. This seems like a bug with Hugging Face.

demo/deploy_to_hf.sh

@@ -0,0 +1,56 @@
+#!/bin/bash
+
+set -e
+
+error_handler() {
+    echo "Error: An error occurred. Exiting script."
+    exit 1
+}
+
+# Set up error handling
+trap error_handler ERR
+
+if [ $# -eq 0 ]; then
+    echo "Error: Please provide a destination path as an argument."
+    exit 1
+fi
+
+DEST_PATH="$1"
+
+if [ ! -d "$DEST_PATH" ]; then
+    echo "Destination path does not exist. Creating it now."
+    mkdir -p "$DEST_PATH"
+fi
+
+# Get the path of this script which is the demo dir.
+DEMO_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+
+cp -R "$DEMO_DIR/" "$DEST_PATH"
+echo "Demo files have been copied to $DEST_PATH"
+
+cd "$DEST_PATH"
+echo "Changed directory to $DEST_PATH"
+
+echo "Updating allowed iframe parents to include hugging face spaces site..."
+# Find all .py files and update the allowed_iframe_parents list
+find . -name "*.py" -type f | while read -r file; do
+    # Use sed with -i.bak so it woroks on MacOs
+    sed -i.bak 's/allowed_iframe_parents=\["https:\/\/google\.github\.io"\]/allowed_iframe_parents=["https:\/\/google.github.io", "https:\/\/huggingface.co"]/' "$file"
+    # Remove the backup file created by sed
+    rm "${file}.bak"
+done
+echo "Update complete."
+
+git init
+
+git add .
+
+git commit -m "Commit"
+
+# The hf remote may already exist if the script has been run
+# on this dest directory before.
+git remote add hf https://huggingface.co/spaces/wwwillchen/mesop || true
+
+git push hf --force
+
+echo "Pushed to: https://huggingface.co/spaces/wwwillchen/mesop. Check the logs to see that it's deployed correctly."

demo/requirements.txt

@@ -1,4 +1,4 @@
-mesop
+mesop>=0.10.0
 Flask==3.0.0
 gunicorn==22.0.0
 Werkzeug==3.0.1