Update app.py

app.py

@@ -11,25 +11,24 @@ from pysteps.extrapolation.semilagrangian import extrapolate
 from pyproj import Proj
 from datetime import datetime, timedelta
 import gradio as gr
-from fastapi import FastAPI
 from fastapi.staticfiles import StaticFiles
-import uvicorn
+from fastapi.responses import HTMLResponse
 
 HF_TOKEN=os.environ.get("HF_TOKEN","")
 MODEL_REPO="NovatasticRoScript/himawari-nowcast"
 DATASET_REPO="NovatasticRoScript/himawari-live-cache"
 SEQ=9; PRED=18; LK=4; W=H=640; IN_CH=6
-DISPLAY_BBOX=(103.,-3.,139.,35.)  # lon_min, lat_min, lon_max, lat_max
+DISPLAY_BBOX=(103.,-3.,139.,35.)
 PAR_POLY=[(115.,5.),(115.,15.),(120.,21.),(120.,25.),(135.,25.),(135.,5.)]
 SLIDER="https://slider.cira.colostate.edu"
 ZOOM=3
 FRAMES_DIR="/tmp/frames"
-UPDATE_INTERVAL_SEC=600  # 10 minutes
+UPDATE_INTERVAL_SEC=600
 
 os.makedirs(FRAMES_DIR, exist_ok=True)
 
 # =============================================================================
-# Himawari full-disk geostationary projection (for cropping to DISPLAY_BBOX)
+# Himawari full-disk geostationary projection
 # =============================================================================
 _HIMA_PROJ = Proj(proj='geos', h=35785863.0, lon_0=140.7, a=6378137.0, b=6356752.3, sweep='x')
 _FULL_DISK_EXTENT = 5500000.035308
@@ -99,7 +98,7 @@ model.eval()
 zeros_t=torch.zeros(1,1,H,W); coast_t=torch.zeros(1,1,H,W)
 
 # =============================================================================
-# SLIDER fetch (zoom-tile mosaic, falls back to full-disk crop)
+# SLIDER fetch
 # =============================================================================
 def slider_ts(product="band_13"):
     url=f"{SLIDER}/data/json/himawari/full_disk/{product}/latest_times.json"
@@ -188,7 +187,7 @@ def save_frame_png(data, path):
     Image.fromarray(rgb).save(path)
 
 # =============================================================================
-# Background update loop: runs forever, refreshes frames every 10 minutes
+# Background update loop
 # =============================================================================
 def update_loop():
     while True:
@@ -246,21 +245,25 @@ if not os.path.exists(os.path.join(FRAMES_DIR,"manifest.json")):
 threading.Thread(target=update_loop, daemon=True).start()
 
 # =============================================================================
-# Map UI (Leaflet, served as static HTML/JS inside a Gradio Blocks page)
+# Gradio landing page (just a link — keeps Spaces' gradio SDK happy)
+# =============================================================================
+with gr.Blocks(title="Himawari PAR Nowcast") as demo:
+    gr.Markdown("### 🌀 Himawari-9 Live Nowcast — Philippine Area of Responsibility")
+    gr.HTML('<a href="/live" target="_self" style="display:inline-block;padding:10px 20px;'
+            'background:#e63946;color:white;border-radius:6px;text-decoration:none;'
+            'font-weight:bold;">🗺️ Open Live Map</a>')
+
+demo.launch(server_name="0.0.0.0", server_port=7860, prevent_thread_lock=True)
+
+demo.app.mount("/frames", StaticFiles(directory=FRAMES_DIR), name="frames")
+
+# =============================================================================
+# Standalone map page (real HTML response -- scripts execute normally here)
 # =============================================================================
 _bounds_js = json.dumps([[DISPLAY_BBOX[1],DISPLAY_BBOX[0]],[DISPLAY_BBOX[3],DISPLAY_BBOX[2]]])
 _par_js = json.dumps([[lat,lon] for lon,lat in PAR_POLY])
 
-_MAP_HTML_TEMPLATE = r"""
-<div id="liveMap" style="width:100%;height:560px;border-radius:8px;"></div>
-<div style="margin-top:8px;display:flex;align-items:center;gap:10px;font-family:monospace;">
-  <button id="liveBtn" style="padding:6px 14px;border-radius:6px;border:none;background:#e63946;color:white;font-weight:bold;cursor:pointer;">🔴 LIVE</button>
-  <span id="frameLabel" style="min-width:260px;">Loading...</span>
-  <input id="frameSlider" type="range" min="0" max="1" value="0" style="flex:1;">
-</div>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css"/>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
-<script>
+_JS_LOGIC = """
 (function(){
   const BOUNDS = __BOUNDS__;
   const PAR = __PAR__;
@@ -338,18 +341,34 @@ _MAP_HTML_TEMPLATE = r"""
   poll();
   setInterval(poll, 20000);
 })();
-</script>
 """
+_JS_LOGIC = _JS_LOGIC.replace("__BOUNDS__", _bounds_js).replace("__PAR__", _par_js)
 
-MAP_HTML = _MAP_HTML_TEMPLATE.replace("__BOUNDS__", _bounds_js).replace("__PAR__", _par_js)
-
-with gr.Blocks(title="Himawari PAR Nowcast") as demo:
-    gr.Markdown("### 🌀 Himawari-9 Live Nowcast — Philippine Area of Responsibility")
-    gr.HTML(MAP_HTML)
+FULL_PAGE_HTML = f"""<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Himawari PAR Nowcast</title>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css"/>
+<style>body{{margin:0;font-family:monospace;background:#111;color:#eee;}}
+#controls{{padding:10px;display:flex;align-items:center;gap:10px;}}</style>
+</head>
+<body>
+<div id="liveMap" style="width:100%;height:90vh;"></div>
+<div id="controls">
+  <button id="liveBtn" style="padding:6px 14px;border-radius:6px;border:none;background:#e63946;color:white;font-weight:bold;cursor:pointer;">🔴 LIVE</button>
+  <span id="frameLabel">Loading...</span>
+  <input id="frameSlider" type="range" min="0" max="1" value="0" style="flex:1;">
+</div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
+<script>
+{_JS_LOGIC}
+</script>
+</body>
+</html>"""
 
-fastapi_app = FastAPI()
-fastapi_app.mount("/frames", StaticFiles(directory=FRAMES_DIR), name="frames")
-fastapi_app = gr.mount_gradio_app(fastapi_app, demo, path="/")
+@demo.app.get("/live", response_class=HTMLResponse)
+def live_map():
+    return FULL_PAGE_HTML
 
-if __name__ == "__main__":
-    uvicorn.run(fastapi_app, host="0.0.0.0", port=7860) 
+demo.block_thread()