Streamlit App on HuggingFace Space using Leafmap and Localtileserver

[jordancaraballo]

I understand we have had some of these conversations before, but I have been trying during the weekend to get a leafmap-based streamlit app running on HuggingFace spaces. giswqs was kind enough to fix some of the system checks from leafmap during the weekend to allow the app to run on HugginFace spaces.

Unfortunately, while the app runs, the rasters shown on the map remain transparent. I have seen this before with port exposure/blocking problems, which I have fixed in the past with jupyter proxy, and client_port variables at the TileClient level. Unfortunately, I have not been able to fix it this time. Running a bit out of ideas here on how to make it work.

I understand this is not at all possible on Streamlit cloud because of the way they manage their environment. I have seen the discussions so far, and @banesullivan attempts to fix it in the past without luck. That being said, HuggingFace exposes a couple of more ports, with 80 and 8080 available as well. The app works excellently locally, the challenge is while deploying it to any of these providers.

Functionality of the App:

• Download set of raster files from HuggingFace datasets
• Use leafmap to add them as rasters to the map. I started from the streamlit-map template, but my case has local rasters (I admit I have not been able to find an affordable location to publish them).

The core elements of the app are below, with the HuggingFace Space here https://huggingface.co/spaces/loboda-umd/fire-hnl-streamlit (you can also see the code from there).

import os
--
  | import leafmap as leafmap_api
  | import streamlit as st
  | import leafmap.foliumap as leafmap
  | from glob import glob
  | from pathlib import Path
  | from datetime import date, timedelta
  | from huggingface_hub import hf_hub_download, snapshot_download
  | import folium
  |  
  | st.set_page_config(layout="wide")
  |  
  | markdown = """
  | FiRE-HNL Beta Dashboard
  | Validation of lightning probability maps during fire season 2024.
  | """
  |  
  |  
  | st.sidebar.title("About")
  | st.sidebar.info(markdown)
  | logo = "https://i.imgur.com/UbOXYAU.png"
  | st.sidebar.image(logo)
  |  
  | dataset_path_2016 = snapshot_download(
  | repo_id="loboda-umd/fire-hnl-lightning-2016",
  | #subfolder="2016-06-01_2016-06-11",
  | repo_type="dataset",
  | #filename='d02_2016-06-01_00-00-00_0-warp-lightning-clipped.tif'
  | #allow_patterns=["*.tif"]
  | )
  |  
  | dataset_path_2024 = snapshot_download(
  | repo_id="loboda-umd/fire-hnl-lightning-2024",
  | #subfolder="2016-06-01_2016-06-11",
  | repo_type="dataset",
  | #filename='d02_2016-06-01_00-00-00_0-warp-lightning-clipped.tif'
  | #allow_patterns=["*.tif"]
  | )
  |  
  | def format_filename(filename):
  | return f'{Path(filename).stem}'.split('_')[1]
  |  
  | # define layers dict
  | options_2024 = sorted(glob(os.path.join(dataset_path_2024, '*/*.tif')))
  | options_2016 = sorted(glob(os.path.join(dataset_path_2016, '*/*.tif')))
  |  
  | #st.title(f"Lightning Forecast: {format_filename(options_2024[0])} to {format_filename(options_2024[-1])}")
  | st.title(f"Lightning Forecast")
  | col1, col2 = st.columns([4, 1])
  |  
  | # options = layers_dict #list(leafmap.basemaps.keys())
  | # print(options)
  | index = 0 #options.index("OpenTopoMap")
  |  
  | with col2:
  | current_forecast_date = st.selectbox("Current Forecast Window:", options_2024, index, format_func=format_filename)
  | previous_forecast_date = st.selectbox("Previous Forecast Window:", options_2024, index, format_func=format_filename)
  | legacy_forecast_date = st.selectbox("Legacy Examples:", options_2016, index, format_func=format_filename)
  |  
  | m = leafmap.Map(
  | locate_control=True, latlon_control=True,
  | draw_export=True, minimap_control=True,
  | center=[30, -40],
  | zoom=13,
  | google_map='terrain'
  |  
  | )
  | m.add_basemap("OpenTopoMap")
  |  
  | with col1:
  |  
  | #dataset_path = snapshot_download(
  | #    repo_id="loboda-umd/fire-hnl-lightning-2016",
  | #    #subfolder="2016-06-01_2016-06-11",
  | #    repo_type="dataset",
  | #    #filename='d02_2016-06-01_00-00-00_0-warp-lightning-clipped.tif'
  | #    #allow_patterns=["*.tif"]
  | #)
  | print(current_forecast_date)
  | m.add_raster(
  | current_forecast_date,
  | bands=[1],
  | vmin=0,
  | vmax=100,
  | colormap='jet',
  | layer_name=Path(current_forecast_date).stem,
  | client_port=8501,
  | port=8080,
  | debug=True
  | )
  |  
  | # folium does not support this
  | # m.add_time_slider(layers_dict, time_interval=1)
  | m.to_streamlit(height=700, bidirectional=True)

These have been my unsuccessful attempts:

• Not adding any configurations to the tile client (none of these variables):

  | client_port=8501,
  | port=8080,
  | debug=True

• Adding some of these variables. The streamlit application based on HuggingFace logs runs on port 8501.

  | client_port=8501,
  | port=8080,
  | debug=True

• Enabling and disabling bidirectional=True to using streamlit-folium on the backend without luck.
• Deploying the app using HuggingFace's streamlit backend without luck, moved to using a Dockerfile like the one below

FROM python:3.11-slim-bullseye
--
  |  
  | ENV DEBIAN_FRONTEND=noninteractive
  | ENV HF_HUB_DISABLE_PROGRESS_BARS=1
  |  
  | RUN rm -rf /etc/apt/sources.list.d/*.list && \
  | apt-get update && apt-get install -y git gcc build-essential python3-dev libgeos-dev
  |  
  | RUN python3 -m pip install --upgrade pip setuptools wheel
  |  
  | COPY requirements.txt .
  | RUN python3 -m pip install -U --no-cache-dir pip setuptools wheel cython numpy pyshp six pyproj streamlit-folium leafmap psutil geopandas rioxarray localtileserver huggingface_hub
  |  
  | #RUN python3 -m pip install --upgrade --no-cache-dir --no-binary :all: shapely
  | #RUN python3 -m pip install --no-cache-dir git+https://github.com/SciTools/cartopy.git --upgrade cartopy
  |  
  | #RUN python3 -m pip install --no-cache-dir --compile -r requirements.txt
  | RUN python3 -m pip install --no-cache-dir -r -U requirements.txt
  |  
  | RUN useradd -m -u 1000 user
  | USER user
  | ENV HOME=/home/user \
  | PATH=/home/user/.local/bin:$PATH
  |  
  | WORKDIR $HOME
  |  
  | RUN mkdir ./pages
  | COPY --chown=user /pages ./pages
  | COPY --chown=user /Home.py ./Home.py
  |  
  | # new version of leafmap
  |  
  | RUN pip install jupyter-server-proxy
  |  
  | ENV JUPYTER_ENABLE_LAB=yes
  |  
  | ENV LOCALTILESERVER_CLIENT_HOST=127.0.0.1
  | ARG LOCALTILESERVER_CLIENT_PREFIX='proxy/{port}'
  | ENV LOCALTILESERVER_CLIENT_PREFIX=$LOCALTILESERVER_CLIENT_PREFIX
  | ENV LOCALTILESERVER_CLIENT_PORT=8501
  |  
  | EXPOSE 8501
  | EXPOSE 7000-9000
  |  
  | CMD ["streamlit", "run", "./Home.py", "--server.port=8501"]

• I have also tried using strictly localtileserver without any other dependencies

import streamlit as st
--
  | import leafmap.foliumap as leafmap
  | from glob import glob
  | from pathlib import Path
  |  
  | import folium
  | from streamlit_folium import folium_static
  | from localtileserver import TileClient, get_leaflet_tile_layer, examples, get_folium_tile_layer
  | from ipyleaflet import Map
  |  
  | # First, create a tile server from local raster file
  | client = examples.get_san_francisco(client_port=8501, debug=True, port=8080, )
  | print(client)
  | print("FROM WRF", client.server.port)
  |  
  | # Create ipyleaflet tile layer from that server
  | #t = get_leaflet_tile_layer(client)
  | t = get_folium_tile_layer(client)
  |  
  | m = folium.Map(center=client.center())#, zoom=client.default_zoom)
  | m.add_child(t)
  | folium_static(m)

I know this is a long post, but hopefully it has enough information to document some of my attempts and possibilities. I am willing to document this deployment later on leafmap or localtileserver if we end up finding specific details that might need to be documented. I am pretty sure other folks will try to deploy these types of apps in the future.