Update app.py

app.py

@@ -21,17 +21,9 @@ Run:
     python app.py
 """
 
-import os
-import tempfile
-import time
-
 import gradio as gr
 import folium
 import openpyxl
-from selenium import webdriver
-from selenium.webdriver.chrome.options import Options as ChromeOptions
-from selenium.webdriver.support.ui import WebDriverWait
-from selenium.common.exceptions import TimeoutException, WebDriverException
 
 import state_lookup
 
@@ -45,7 +37,6 @@ COLOR_PALETTE = [
 _cached_filepath = None
 _cached_section_configs = None
 _cached_data = None
-_last_map_html = None  # full standalone HTML of the most recently generated map, for PNG export
 
 
 def parse_coords(coord_str):
@@ -234,6 +225,48 @@ def build_map_legend(section_configs):
     )
 
 
+def build_export_button():
+    """A button + inline script that rasterizes the map (tiles, markers, overlays) to a
+    downloadable PNG entirely in the visitor's browser via html2canvas — no server-side
+    headless browser needed, so it works the same locally and on hosted deployments."""
+    return """
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <button id="d2m-export-btn" onclick="d2mExportPNG()" style="
+        position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:1000;
+        background:white;border:1px solid #ccc;border-radius:6px;padding:8px 14px;
+        font-size:13px;cursor:pointer;box-shadow:2px 2px 6px rgba(0,0,0,0.2);">
+        📥 Download PNG
+    </button>
+    <script>
+    function d2mExportPNG() {
+        var btn = document.getElementById('d2m-export-btn');
+        var originalText = btn.innerHTML;
+        if (typeof html2canvas === 'undefined') {
+            alert('Export library failed to load — check your internet connection and try again.');
+            return;
+        }
+        btn.innerHTML = '⏳ Rendering…';
+        btn.disabled = true;
+        btn.style.visibility = 'hidden';
+        html2canvas(document.body, {useCORS: true, backgroundColor: '#ffffff'}).then(function(canvas) {
+            var link = document.createElement('a');
+            link.download = 'standorte-map.png';
+            link.href = canvas.toDataURL('image/png');
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }).catch(function(err) {
+            alert('Export failed: ' + err);
+        }).finally(function() {
+            btn.innerHTML = originalText;
+            btn.disabled = false;
+            btn.style.visibility = 'visible';
+        });
+    }
+    </script>
+    """
+
+
 def build_sidebar_legend(section_configs):
     if not section_configs:
         return "<p><em>Upload a file to see the colour legend.</em></p>"
@@ -387,54 +420,9 @@ def generate_map(
         <span style="color:#555">{stats_text}</span>
     </div>"""))
 
-    global _last_map_html
-    _last_map_html = fig.render()
-    return fig._repr_html_()
+    m.get_root().html.add_child(folium.Element(build_export_button()))
 
-
-def export_map_png():
-    """Render the last generated map with headless Chrome and return a PNG file path."""
-    if _last_map_html is None:
-        raise gr.Error("Generate a map first, then export it.")
-
-    tmp_dir = tempfile.mkdtemp(prefix="d2m_")
-    html_path = os.path.join(tmp_dir, "map.html")
-    png_path = os.path.join(tmp_dir, "map.png")
-    with open(html_path, "w", encoding="utf-8") as f:
-        f.write(_last_map_html)
-
-    opts = ChromeOptions()
-    opts.add_argument("--headless=new")
-    opts.add_argument("--no-sandbox")
-    opts.add_argument("--disable-dev-shm-usage")
-    opts.add_argument("--hide-scrollbars")
-    opts.add_argument("--window-size=1900,1200")
-
-    try:
-        driver = webdriver.Chrome(options=opts)
-    except WebDriverException as e:
-        raise gr.Error(
-            "Could not start headless Chrome for the export. "
-            f"Make sure Google Chrome or Chromium is installed. ({e})"
-        )
-
-    try:
-        driver.get(f"file://{html_path}")
-        try:
-            WebDriverWait(driver, 10).until(
-                lambda d: d.execute_script(
-                    "return document.querySelectorAll('.leaflet-tile-loading').length === 0 "
-                    "&& document.querySelectorAll('.leaflet-tile-loaded').length > 0"
-                )
-            )
-        except TimeoutException:
-            pass  # export whatever tiles did load rather than failing outright
-        time.sleep(0.5)
-        driver.save_screenshot(png_path)
-    finally:
-        driver.quit()
-
-    return gr.update(value=png_path, visible=True)
+    return fig._repr_html_()
 
 
 # ──────────────────────────────────────────────
@@ -522,11 +510,9 @@ with gr.Blocks(title="Standorte Karte Deutschland", theme=gr.themes.Soft()) as d
                 value="<p style='color:#888;padding:40px;text-align:center;'>"
                       "Upload a file and click <b>Generate Map</b> to begin.</p>",
             )
-            export_btn = gr.Button("📸 Export Map as PNG")
-            export_image = gr.Image(
-                label="Exported PNG (hover for the download button)",
-                interactive=False,
-                visible=False,
+            gr.Markdown(
+                "_Use the **📥 Download PNG** button at the top of the generated map "
+                "to save it as an image._"
             )
 
     # ── Event wiring ─────────────────────────────────────────────────────────
@@ -574,12 +560,6 @@ with gr.Blocks(title="Standorte Karte Deutschland", theme=gr.themes.Soft()) as d
         outputs=[map_output],
     )
 
-    export_btn.click(
-        fn=export_map_png,
-        inputs=[],
-        outputs=[export_image],
-    )
-
 
 if __name__ == "__main__":
     demo.launch(share=False, server_port=7860, inbrowser=True)