Deploying Quarto-Shiny Interactive Docs in Hugging Face

How to deploy Quarto-Shiny docs in Hugging Face
code
Author

Daniel Granados

Published

July 11, 2023

Hugging Faces spaces

Hugging Face is a super popular platform for AI, boasting 150k+ models, 25k+ datasets, and 30k+ ML apps. It’s core mission is to democratize machine learning. It may have first caught your eye during the great DALL-E mini meme era, when it was released back in 2022 and people where playing around with it.

Within Hugging Face, there’s a feature called Spaces, which allows hosting ML applications ranging from streamlit, gradio, panel, and now shiny apps.

Quarto Interactive Docs

Sometimes, you may simply need to share an interactive Quarto document. Although docs are generally simpler than apps, if you include shiny interactivity, you’ll need to deploy your document somewhere to enable others to use the interactive parts.

Common deployment options include Shinyapps.io and Posit Connect, which, unlike GitHub Pages, support more than just static files. However, the key advantage of Hugging Face is that it allows you to keep your document in a private space, ensuring you can share it exclusively with selected members of your defined organization on Hugging Face.

Before we start, this post assumes you know how to git commit and push.

Now, let’s dive into the walkthrough.

Deploying the thing

The code for all this stuff and the interactive doc example are here:

https://huggingface.co/spaces/d-niel/quarto_shiny_R_example/

Creating the space

First follow this steps:

  1. Navigate to Spaces and the click on create space

  2. Spaces are git repos, so give your repo name

  3. Select the docker without template to host your doc, the shiny template is not needed for this example

  4. Clone the repo!

Once you clone the repo in your machine you’ll need basically two things: Rendering your .qmd and a Dockerfile (its just a text file called Dockerfile).

Hugging Face actually recommends you keep your libraries in a separate requierements.txt file but I just wrote them in the dockerfile for this example.

So here is what the dockerfile would look like:


FROM rocker/shiny-verse:latest

WORKDIR /code

RUN apt-get update && apt-get install -y --no-install-recommends \
    pandoc \
    pandoc-citeproc \
    curl \
    gdebi-core \
    && rm -rf /var/lib/apt/lists/*

# Install stable packages from CRAN
RUN install2.r --error \
    ggExtra \
    shiny \
    jsonlite \
    ggplot2 \
    htmltools \
    remotes \
    renv \
    knitr \
    rmarkdown \
    quarto
    
# Install development packages from GitHub
RUN installGithub.r \
    rstudio/bslib \
    rstudio/httpuv

RUN curl -LO https://quarto.org/download/latest/quarto-linux-amd64.deb
RUN gdebi --non-interactive quarto-linux-amd64.deb

RUN useradd -m -u 1000 user
USER user
ENV HOME=/home/user \
    PATH=/home/user/.local/bin:$PATH
WORKDIR $HOME/app


COPY --chown=user . $HOME/app

CMD ["quarto", "serve", "title.qmd", "--port", "7860", "--host", "0.0.0.0"]

The Dockerfile consists of three main parts that serve different purposes:

  1. The initial part sets up a Shiny server environment based on the “rocker/shiny-verse” image and installs dependencies like pandoc, pandoc-citeproc, curl, and gdebi-core. Its just as the template available for a shiny app.

  2. The second part focuses on the specific requirements of the container. It downloads the quarto binary using curl and installs it with gdebi. This step ensures that the container has the necessary quarto command line interface.

  3. The third part addresses an important consideration explained in the spaces documentation. It deals with file permissions, which are crucial to avoid “permission denied” errors when writing files. This step ensures proper permissions are set.

Finally, the Dockerfile includes a command to serve the quarto document. Hugging Face uses port 7860 for serving so be sure to include that.

Once you have rendered your qmd file and written the Dockerfile, you can add, commit, and push them. The push triggers the build process, allowing you to observe and access your document.

Additional resources

@james-h-wade provides advice on how to deploy Shiny apps to Hugging Face and guides you through the common caveats here

A detailed guide to host quarto interactive docs in docker can be found here.

Permissions in docker spaces in Hugging Face are discussed here