Update app.py

app.py

@@ -4,7 +4,6 @@ import re
 import tempfile
 from datetime import datetime, timedelta
 from dateutil import tz
-import time
 import logging
 
 import gradio as gr
@@ -17,11 +16,15 @@ from matplotlib import cm
 import branca.colormap as bcm
 import folium.plugins as plugins
 from matplotlib.patches import Wedge, Rectangle, FancyArrowPatch
-from matplotlib.path import Path as mpath
 
-from grafanalib.core import (
-    Dashboard, Graph, Row, Target, YAxis, YAxes, Time, BarGauge
-)
+# -------- grafanalib（可選；若未安裝則降級） --------
+try:
+    from grafanalib.core import (
+        Dashboard, Graph, Row, Target, YAxis, YAxes, Time, BarGauge
+    )
+    GRAFANA_AVAILABLE = True
+except Exception:
+    GRAFANA_AVAILABLE = False
 
 # 設置日誌
 logging.basicConfig(level=logging.DEBUG)
@@ -42,14 +45,19 @@ def normalize_drive_url(url: str) -> str:
     if not isinstance(url, str) or not url.strip():
         raise ValueError("請提供有效的 Google 連結")
     url = url.strip()
+
+    # Google Sheets
     m = re.search(r"https://docs\.google\.com/spreadsheets/d/([a-zA-Z0-9-_]+)", url)
     if m:
         sheet_id = m.group(1)
         return f"https://docs.google.com/spreadsheets/d/{sheet_id}/export?format=csv"
+
+    # Google Drive File
     m = re.search(r"https://drive\.google\.com/file/d/([a-zA-Z0-9-_]+)/", url)
     if m:
         file_id = m.group(1)
         return f"https://drive.google.com/uc?export=download&id={file_id}"
+
     return url
 
 # -----------------------------
@@ -60,11 +68,13 @@ def make_demo_dataframe(last_time=None) -> tuple[pd.DataFrame, datetime]:
         last_time = datetime.now(tz=TAIPEI) - timedelta(minutes=60)
     else:
         last_time = last_time + timedelta(minutes=1)  # 模擬每分鐘新增數據
+
     times = [last_time + timedelta(minutes=i) for i in range(61)]
     amp = np.random.rand(len(times))
     cnt = np.random.randint(0, 11, size=len(times))
     lats = np.random.uniform(21.8, 25.3, size=len(times))
     lons = np.random.uniform(120.0, 122.0, size=len(times))
+
     df = pd.DataFrame({"time": times, "amplitude": amp, "count": cnt, "lat": lats, "lon": lons})
     df["pid"] = np.arange(len(df))
     logger.debug(f"Generated new data with last_time: {last_time}")
@@ -74,12 +84,27 @@ def _finalize_time(df: pd.DataFrame) -> pd.DataFrame:
     time_col = next((c for c in ["time", "timestamp", "datetime", "date"] if c in df.columns), None)
     if time_col is None:
         raise ValueError("資料需包含時間欄位（time/timestamp/datetime/date 其一）")
-    df[time_col] = pd.to_datetime(df[time_col])
+
+    df[time_col] = pd.to_datetime(df[time_col], errors="coerce")
+    if df[time_col].isna().all():
+        raise ValueError("時間欄位解析失敗，請確認格式")
+
     df = df.rename(columns={time_col: "time"})
-    if getattr(df["time"].dt, "tz", None) is None:
-        df["time"] = df["time"].dt.tz_localize(TAIPEI)
-    else:
-        df["time"] = df["time"].dt.tz_convert(TAIPEI)
+
+    # 若為 naive → 設定為台北時區；若已有時區 → 轉為台北
+    try:
+        if df["time"].dt.tz is None:
+            df["time"] = df["time"].dt.tz_localize(TAIPEI)
+        else:
+            df["time"] = df["time"].dt.tz_convert(TAIPEI)
+    except Exception:
+        # 逐列處理（防止混合型資料）
+        def _to_tpe(t):
+            if t.tzinfo is None:
+                return t.tz_localize(TAIPEI)
+            return t.tz_convert(TAIPEI)
+        df["time"] = df["time"].apply(_to_tpe)
+
     return df.sort_values("time").reset_index(drop=True)
 
 def load_csv(file: gr.File | None) -> pd.DataFrame:
@@ -97,7 +122,7 @@ def load_drive_csv(sheet_or_file_url: str) -> pd.DataFrame:
     except Exception as e:
         raise ValueError(f"Google 連結載入失敗：{str(e)}")
 
-def load_data(source: str, file: gr.File | None = None, sheet_url: str = "", last_time=None) -> tuple[pd.DataFrame, datetime]:
+def load_data(source: str, file: gr.File | None = None, sheet_url: str = "", last_time=None) -> tuple[pd.DataFrame, datetime | None]:
     if source == "drive":
         if not sheet_url:
             raise ValueError("請選擇 Google 連結")
@@ -110,21 +135,47 @@ def load_data(source: str, file: gr.File | None = None, sheet_url: str = "", las
         return make_demo_dataframe(last_time)
 
 # -----------------------------
-# 新功能：資料過濾
+# 資料過濾（時區安全）
 # -----------------------------
+def _to_taipei(dt_like):
+    ts = pd.to_datetime(dt_like, errors="coerce")
+    if pd.isna(ts):
+        return None
+    if ts.tzinfo is None:
+        return ts.tz_localize(TAIPEI)
+    return ts.tz_convert(TAIPEI)
+
 def filter_data(df: pd.DataFrame, start_time: str, end_time: str) -> pd.DataFrame:
     if start_time:
-        df = df[df["time"] >= pd.to_datetime(start_time).tz_localize(TAIPEI)]
+        st = _to_taipei(start_time)
+        if st is not None:
+            df = df[df["time"] >= st]
     if end_time:
-        df = df[df["time"] <= pd.to_datetime(end_time).tz_localize(TAIPEI)]
+        et = _to_taipei(end_time)
+        if et is not None:
+            df = df[df["time"] <= et]
     return df
 
 # -----------------------------
-# grafanalib JSON builder
+# grafanalib JSON builder（可降級）
 # -----------------------------
 def build_grafanalib_dashboard(series_columns: list[str], dual_axis: bool, rolling_window: int) -> dict:
+    if not GRAFANA_AVAILABLE:
+        return {
+            "error": "grafanalib 未安裝。如需啟用，請在 requirements.txt 加入：grafanalib",
+            "series": series_columns,
+            "dual_axis": bool(dual_axis),
+            "rolling_window": int(rolling_window),
+        }
+
     panels = [
-        Graph(title=f"{series_columns[0]}", dataSource="(example)", targets=[Target(expr=f"{series_columns[0]}", legendFormat=series_columns[0])], lines=True, bars=False, points=False, yAxes=YAxes(left=YAxis(format="short"), right=YAxis(format="short"))),
+        Graph(
+            title=f"{series_columns[0]}",
+            dataSource="(example)",
+            targets=[Target(expr=f"{series_columns[0]}", legendFormat=series_columns[0])],
+            lines=True, bars=False, points=False,
+            yAxes=YAxes(left=YAxis(format="short"), right=YAxis(format="short"))
+        ),
     ]
     if len(series_columns) > 1:
         targets = [Target(expr=f"{series_columns[1]}", legendFormat=series_columns[1])]
@@ -133,12 +184,37 @@ def build_grafanalib_dashboard(series_columns: list[str], dual_axis: bool, rolli
             targets.append(Target(expr=f"{series_columns[0]}", legendFormat=f"{series_columns[0]} (line)"))
             lines, bars = True, True
             title = f"{series_columns[1]} (bar) + {series_columns[0]} (line)"
-        panels.append(Graph(title=title, dataSource="(example)", targets=targets, lines=lines, bars=bars, points=False, yAxes=YAxes(left=YAxis(format="short"), right=YAxis(format="short"))))
+        panels.append(
+            Graph(
+                title=title,
+                dataSource="(example)",
+                targets=targets,
+                lines=lines, bars=bars, points=False,
+                yAxes=YAxes(left=YAxis(format="short"), right=YAxis(format="short"))
+            )
+        )
+
     panels.extend([
-        Graph(title=f"{series_columns[0]} rolling({rolling_window})", dataSource="(example)", targets=[Target(expr=f"{series_columns[0]}_rolling{rolling_window}", legendFormat=f"{series_columns[0]}_rolling{rolling_window}")], lines=True, bars=False, points=False, yAxes=YAxes(left=YAxis(format="short"), right=YAxis(format="short"))),
-        BarGauge(title=f"Latest {series_columns[0]}", dataSource="(example)", targets=[Target(expr=f"last({series_columns[0]})", legendFormat=series_columns[0])]),
+        Graph(
+            title=f"{series_columns[0]} rolling({rolling_window})",
+            dataSource="(example)",
+            targets=[Target(expr=f"{series_columns[0]}_rolling{rolling_window}",
+                            legendFormat=f"{series_columns[0]}_rolling{rolling_window}")],
+            lines=True, bars=False, points=False,
+            yAxes=YAxes(left=YAxis(format="short"), right=YAxis(format="short"))
+        ),
+        BarGauge(
+            title=f"Latest {series_columns[0]}",
+            dataSource="(example)",
+            targets=[Target(expr=f"last({series_columns[0]})", legendFormat=series_columns[0])]
+        ),
     ])
-    return Dashboard(title="Grafana-like Demo (grafanalib + Gradio)", rows=[Row(panels=panels)], timezone="browser", time=Time("now-1h", "now")).to_json_data()
+    return Dashboard(
+        title="Grafana-like Demo (grafanalib + Gradio)",
+        rows=[Row(panels=panels)],
+        timezone="browser",
+        time=Time("now-1h", "now")
+    ).to_json_data()
 
 # -----------------------------
 # Matplotlib helpers
@@ -155,8 +231,12 @@ def _style_time_axis(ax):
 
 def _normalize_times(series: pd.Series) -> pd.Series:
     s = series.copy()
-    if getattr(s.dt, "tz", None) is not None:
-        s = s.dt.tz_convert("UTC").dt.tz_localize(None)
+    try:
+        if s.dt.tz is not None:
+            s = s.dt.tz_convert("UTC").dt.tz_localize(None)
+    except Exception:
+        # 若混合/特殊情形，轉為 datetime 再去除 tz
+        s = pd.to_datetime(s, errors="coerce").dt.tz_convert("UTC").dt.tz_localize(None)
     return s
 
 def render_line(df, col):
@@ -172,11 +252,21 @@ def render_line(df, col):
 
 def render_bar_or_dual(df, second_col, first_col, dual_axis):
     times = _normalize_times(df["time"])
+
+    # 計算推薦的柱寬（用中位時間差；安全 fallback）
+    if len(times) >= 2:
+        delta_sec = pd.to_timedelta(times.diff(), errors="coerce").dt.total_seconds().median()
+        if pd.isna(delta_sec) or delta_sec <= 0:
+            delta_sec = 60.0
+    else:
+        delta_sec = 60.0
+    width_days = max(10.0, float(delta_sec) * 0.8) / 86400.0  # Matplotlib 的日期單位 = 天
+
     x = mdates.date2num(times.dt.to_pydatetime().tolist())
     fig, ax = plt.subplots(figsize=(6, 3))
-    width = max(10, (times.astype("int64").diff().median() or 60) / 1e9 * 0.8) / 86400
-    ax.bar(x, df[second_col], width=width, align="center", label=second_col)
+    ax.bar(x, df[second_col], width=width_days, align="center", label=second_col)
     title = f"{second_col} (bar)"
+
     if dual_axis:
         ax2 = ax.twinx()
         ax2.plot(times, df[first_col], linewidth=1.6, label=f"{first_col} (line)")
@@ -186,6 +276,7 @@ def render_bar_or_dual(df, second_col, first_col, dual_axis):
         ax.legend(h1 + h2, l1 + l2, loc="upper left")
     else:
         ax.legend(loc="upper left")
+
     ax.set_title(title, fontsize=12, pad=8)
     _style_time_axis(ax)
     fig.tight_layout()
@@ -206,7 +297,7 @@ def render_rolling(df, col, window=5):
     return fig, df
 
 # -----------------------------
-# 新增 Gauge 渲染
+# Gauge 渲染
 # -----------------------------
 def degree_range(n):
     start = np.linspace(0, 180, n + 1, endpoint=True)[0:-1]
@@ -219,28 +310,43 @@ def rot_text(ang):
     return rotation
 
 def render_gauge(df, col):
-    value = df[col].iloc[-1] if not df.empty else 0
-    min_val, max_val = df[col].min(), df[col].max()
-    normalized = (value - min_val) / (max_val - min_val + 1e-9) if max_val > min_val else 0
+    if df.empty:
+        value = 0.0
+        min_val, max_val = 0.0, 1.0
+    else:
+        value = float(df[col].iloc[-1])
+        min_val, max_val = float(df[col].min()), float(df[col].max())
+
+    normalized = (value - min_val) / (max_val - min_val + 1e-9) if max_val > min_val else 0.0
     labels = ['LOW', 'MEDIUM', 'HIGH']
     N = len(labels)
     colors = ['#007A00', '#FFCC00', '#ED1C24']
     arrow = 1 if normalized < 0.33 else 2 if normalized < 0.66 else 3
+
     fig, ax = plt.subplots(figsize=(5, 3.5))
     ang_range, mid_points = degree_range(N)
     labels = labels[::-1]
-    patches = [Wedge((0., 0.), .4, *ang, facecolor='w', lw=2) for ang in ang_range] + [Wedge((0., 0.), .4, *ang, width=0.10, facecolor=c, lw=2, alpha=0.5) for ang, c in zip(ang_range, colors)]
-    [ax.add_patch(p) for p in patches]
+
+    patches = [Wedge((0., 0.), .4, *ang, facecolor='w', lw=2) for ang in ang_range] + \
+              [Wedge((0., 0.), .4, *ang, width=0.10, facecolor=c, lw=2, alpha=0.5) for ang, c in zip(ang_range, colors)]
+    for p in patches:
+        ax.add_patch(p)
+
     for mid, lab in zip(mid_points, labels):
-        ax.text(0.35 * np.cos(np.radians(mid)), 0.35 * np.sin(np.radians(mid)), lab, horizontalalignment='center', verticalalignment='center', fontsize=12, fontweight='bold', rotation=rot_text(mid))
+        ax.text(0.35 * np.cos(np.radians(mid)), 0.35 * np.sin(np.radians(mid)),
+                lab, ha='center', va='center', fontsize=12, fontweight='bold', rotation=rot_text(mid))
+
     ax.add_patch(Rectangle((-0.4, -0.1), 0.8, 0.1, facecolor='w', lw=2))
-    ax.text(0, -0.05, f"Latest {col}: {value:.2f}", horizontalalignment='center', verticalalignment='center', fontsize=12, fontweight='bold')
+    ax.text(0, -0.05, f"Latest {col}: {value:.2f}", ha='center', va='center', fontsize=12, fontweight='bold')
+
     pos = mid_points[abs(arrow - N)]
-    ax.arrow(0, 0, 0.225 * np.cos(np.radians(pos)), 0.225 * np.sin(np.radians(pos)), width=0.04, head_width=0.09, head_length=0.1, fc='k', ec='k')
-    ax.add_patch(FancyArrowPatch((0, 0), (0.01 * np.cos(np.radians(pos)), 0.01 * np.sin(np.radians(pos))), mutation_scale=10, fc='k', ec='k'))
+    ax.arrow(0, 0, 0.225 * np.cos(np.radians(pos)), 0.225 * np.sin(np.radians(pos)),
+             width=0.04, head_width=0.09, head_length=0.1, fc='k', ec='k')
+    ax.add_patch(FancyArrowPatch((0, 0), (0.01 * np.cos(np.radians(pos)), 0.01 * np.sin(np.radians(pos))),
+                                 mutation_scale=10, fc='k', ec='k'))
     ax.set_frame_on(False)
-    ax.axes.set_xticks([])
-    ax.axes.set_yticks([])
+    ax.set_xticks([])
+    ax.set_yticks([])
     ax.axis('equal')
     plt.tight_layout()
     return fig
@@ -252,31 +358,56 @@ def _to_hex_color(value: float, cmap=cm.viridis) -> str:
     rgba = cmap(value)
     return "#{:02x}{:02x}{:02x}".format(int(rgba[0]*255), int(rgba[1]*255), int(rgba[2]*255))
 
-def render_map_folium(df: pd.DataFrame, value_col: str = "amplitude", size_col: str = "count", cmap_name: str = "viridis", tiles: str = "OpenStreetMap", show_heatmap: bool = False) -> str:
+def render_map_folium(df: pd.DataFrame, value_col: str = "amplitude", size_col: str = "count",
+                      cmap_name: str = "viridis", tiles: str = "OpenStreetMap", show_heatmap: bool = False) -> str:
     if df.empty:
         return "<p>無資料可顯示地圖</p>"
+
     center_lat, center_lon = df["lat"].mean(), df["lon"].mean()
     m = folium.Map(location=[center_lat, center_lon], zoom_start=7, tiles=tiles)
-    vmin, vmax = df[value_col].min(), df[value_col].max()
+
+    vmin, vmax = float(df[value_col].min()), float(df[value_col].max())
     cmap = getattr(cm, cmap_name)
-    colormap = bcm.LinearColormap([_to_hex_color(i, cmap) for i in np.linspace(0, 1, 256)], vmin=vmin, vmax=vmax)
+    colormap = bcm.LinearColormap(
+        [_to_hex_color(i, cmap) for i in np.linspace(0, 1, 128)], vmin=vmin, vmax=vmax
+    )
     colormap.caption = f"{value_col} (color scale)"
     colormap.add_to(m)
+
     if show_heatmap:
         heat_data = [[row["lat"], row["lon"], row[value_col]] for _, row in df.iterrows()]
         plugins.HeatMap(heat_data, radius=15, blur=10).add_to(m)
     else:
         for _, row in df.iterrows():
-            norm_val = (row[value_col] - vmin) / (vmax - vmin + 1e-9)
-            popup_html = f"<b>#ID:</b> {int(row['pid'])}<br><b>time:</b> {pd.to_datetime(row['time']).strftime('%Y-%m-%d %H:%M:%S')}<br><b>{value_col}:</b> {row[value_col]:.4f}<br><b>{size_col}:</b> {row[size_col]}<br><b>lat/lon:</b> {row['lat']:.5f}, {row['lon']:.5f}"
-            folium.CircleMarker(location=[row["lat"], row["lon"]], radius=row[size_col] + 3, color="black", weight=1, fill=True, fill_opacity=0.7, fill_color=_to_hex_color(norm_val, cmap), popup=folium.Popup(popup_html, max_width=300)).add_to(m)
+            norm_val = (row[value_col] - vmin) / (vmax - vmin + 1e-9) if vmax > vmin else 0.0
+            popup_html = (
+                f"<b>#ID:</b> {int(row['pid'])}"
+                f"<br><b>time:</b> {pd.to_datetime(row['time']).strftime('%Y-%m-%d %H:%M:%S')}"
+                f"<br><b>{value_col}:</b> {row[value_col]:.4f}"
+                f"<br><b>{size_col}:</b> {int(row[size_col]) if size_col in row else ''}"
+                f"<br><b>lat/lon:</b> {row['lat']:.5f}, {row['lon']:.5f}"
+            )
+            folium.CircleMarker(
+                location=[row["lat"], row["lon"]],
+                radius=(int(row[size_col]) if size_col in row else 3) + 3,
+                color="black", weight=1, fill=True, fill_opacity=0.7,
+                fill_color=_to_hex_color(norm_val, cmap),
+                popup=folium.Popup(popup_html, max_width=300)
+            ).add_to(m)
     return m._repr_html_()
 
 # -----------------------------
 # Detail helpers
 # -----------------------------
 def make_point_choices(df: pd.DataFrame) -> list[str]:
-    return [f"#{int(r['pid'])} | {pd.to_datetime(r['time']).strftime('%H:%M:%S')} | amp={r.get('amplitude', 0):.3f} cnt={int(r.get('count', 0))}" for _, r in df.iterrows()]
+    choices = []
+    for _, r in df.iterrows():
+        amp = r.get('amplitude', np.nan)
+        cnt = r.get('count', np.nan)
+        amp_str = f"{amp:.3f}" if pd.notna(amp) else "NA"
+        cnt_str = f"{int(cnt)}" if pd.notna(cnt) else "NA"
+        choices.append(f"#{int(r['pid'])} | {pd.to_datetime(r['time']).strftime('%H:%M:%S')} | amp={amp_str} cnt={cnt_str}")
+    return choices
 
 def pick_detail(df: pd.DataFrame, choice: str) -> pd.DataFrame:
     if not choice:
@@ -290,48 +421,94 @@ def pick_detail(df: pd.DataFrame, choice: str) -> pd.DataFrame:
 # -----------------------------
 # Main pipeline with dynamic update
 # -----------------------------
-def pipeline(source, file, sheet_url, series_choice, dual_axis, rolling_window, cmap_choice, tiles_choice, start_time, end_time, show_heatmap, last_time=None):
+def pipeline(source, file, sheet_url, series_choice, dual_axis, rolling_window,
+            cmap_choice, tiles_choice, start_time, end_time, show_heatmap, last_time=None):
+
     try:
         df, new_last_time = load_data(source, file, sheet_url, last_time)
         df = filter_data(df, start_time, end_time)
-        numeric_cols = [c for c in df.columns if c not in ["time", "lat", "lon", "pid"] and pd.api.types.is_numeric_dtype(df[c])]
+
+        # 數值欄位辨識
+        numeric_cols = [c for c in df.columns
+                        if c not in ["time", "lat", "lon", "pid"] and pd.api.types.is_numeric_dtype(df[c])]
+
         chosen = [c for c in (series_choice or numeric_cols[:2]) if c in numeric_cols] or numeric_cols[:2] or []
         if not chosen:
             raise ValueError("無有效數值欄位可視覺化")
+
+        # grafanalib JSON
         dash_json = build_grafanalib_dashboard(chosen, bool(dual_axis), int(rolling_window))
         dash_json_str = json.dumps(dash_json, ensure_ascii=False, indent=2, default=str)
         with tempfile.NamedTemporaryFile(delete=False, suffix=".json", mode="w", encoding="utf-8") as f:
             f.write(dash_json_str)
             json_path = f.name
+
+        # 視覺化
         fig1 = render_line(df, chosen[0])
         fig2 = render_bar_or_dual(df, chosen[1], chosen[0], bool(dual_axis)) if len(chosen) > 1 else plt.figure()
         fig3, df_with_roll = render_rolling(df.copy(), chosen[0], int(rolling_window))
         fig4 = render_gauge(df, chosen[0])
-        map_html = render_map_folium(df, value_col=chosen[0], size_col=chosen[1] if len(chosen) > 1 else "count", cmap_name=cmap_choice, tiles=tiles_choice, show_heatmap=bool(show_heatmap))
+
+        # 地圖
+        size_col = chosen[1] if len(chosen) > 1 else ("count" if "count" in df.columns else chosen[0])
+        map_html = render_map_folium(df, value_col=chosen[0], size_col=size_col,
+                                     cmap_name=cmap_choice, tiles=tiles_choice, show_heatmap=bool(show_heatmap))
+
+        # 點位詳情
         point_choices = [] if show_heatmap else make_point_choices(df)
-        default_choice = point_choices[0] if point_choices else ""
-        detail_df = pick_detail(df, default_choice)
+        default_choice = point_choices[0] if point_choices else None
+        detail_df = pick_detail(df, default_choice) if default_choice else pd.DataFrame()
+
+        # 產一份 demo csv 供下載
         demo_df = make_demo_dataframe()[0]
         with tempfile.NamedTemporaryFile(delete=False, suffix=".csv", mode="w", encoding="utf-8") as f:
             demo_df.to_csv(f, index=False)
             demo_csv_path = f.name
+
         logger.debug(f"Pipeline executed with new_last_time: {new_last_time}")
-        return fig1, fig2, fig3, fig4, map_html, dash_json_str, json_path, df_with_roll, demo_csv_path, gr.Dropdown(choices=point_choices, value=default_choice), detail_df, "", new_last_time
+
+        return (
+            fig1, fig2, fig3, fig4,                      # 4 plots
+            map_html,                                     # map (HTML)
+            dash_json_str, json_path,                     # JSON string & file
+            df_with_roll, demo_csv_path,                  # dataframe & demo csv
+            gr.update(choices=point_choices, value=default_choice),  # point selector
+            detail_df,                                    # detail view
+            "",                                           # error message
+            new_last_time                                 # state
+        )
+
     except Exception as e:
         logger.error(f"Pipeline error: {str(e)}")
-        return None, None, None, None, "<p>錯誤：無資料顯示</p>", "", None, pd.DataFrame(), None, gr.Dropdown(choices=[], value=None), pd.DataFrame(), str(e), last_time
-
-def regenerate_demo(series_choice, dual_axis, rolling_window, cmap_choice, tiles_choice, current_choice, start_time, end_time, show_heatmap, last_time):
-    return pipeline("demo", None, "", series_choice, dual_axis, rolling_window, cmap_choice, tiles_choice, start_time, end_time, show_heatmap, last_time)
+        # 發生錯誤時回傳空/預設
+        return (
+            None, None, None, None,
+            "<p>錯誤：無資料顯示</p>",
+            "", None,
+            pd.DataFrame(), None,
+            gr.update(choices=[], value=None),
+            pd.DataFrame(),
+            str(e),
+            last_time
+        )
+
+def regenerate_demo(series_choice, dual_axis, rolling_window, cmap_choice, tiles_choice,
+                    current_choice, start_time, end_time, show_heatmap, last_time):
+    return pipeline("demo", None, "", series_choice, dual_axis, rolling_window,
+                    cmap_choice, tiles_choice, start_time, end_time, show_heatmap, last_time)
 
 def update_detail(df: pd.DataFrame, choice: str):
     return pick_detail(df, choice)
 
 # -----------------------------
-# UI 優化
+# UI
 # -----------------------------
 with gr.Blocks(theme=gr.themes.Soft()) as demo:
     gr.Markdown("## 動態時間序列 - Grafana-like Demo + Folium Map")
+
+    # Persistent state for streaming demo time
+    last_time_state = gr.State(value=None)
+
     with gr.Row():
         with gr.Column(scale=1):
             source_radio = gr.Radio(["upload", "drive", "demo"], label="資料來源", value="demo")
@@ -340,6 +517,7 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             with gr.Row():
                 start_time_in = gr.Textbox(label="開始時間", placeholder="2023-01-01 00:00:00")
                 end_time_in = gr.Textbox(label="結束時間", placeholder="2023-12-31 23:59:59")
+
         with gr.Column(scale=1):
             series_multiselect = gr.CheckboxGroup(label="數值欄位", choices=[])
             dual_axis_chk = gr.Checkbox(label="第二面板雙軸", value=False)
@@ -347,11 +525,14 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             cmap_dd = gr.Dropdown(label="地圖配色", choices=["viridis", "plasma", "inferno", "magma", "cividis", "coolwarm"], value="viridis")
             tiles_dd = gr.Dropdown(label="地圖底圖", choices=["OpenStreetMap", "Stamen Terrain", "Stamen Toner", "CartoDB positron", "CartoDB dark_matter"], value="OpenStreetMap")
             heatmap_chk = gr.Checkbox(label="顯示熱圖", value=False)
+
     with gr.Row():
         run_btn = gr.Button("產生 Dashboard", scale=1)
-        update_btn = gr.Button("手動更新數據", scale=1)
-        interval = gr.Slider(5, 60, value=10, step=5, label="自動更新間隔 (秒)")
+        update_btn = gr.Button("手動更新數據", scale=1, elem_id="update_btn")
+        interval = gr.Slider(5, 60, value=10, step=5, label="自動更新間隔 (秒)", elem_id="interval_slider")
+
     error_msg = gr.Markdown(value="", label="錯誤訊息", visible=True)
+
     with gr.Tabs():
         with gr.Tab("圖表"):
             with gr.Row():
@@ -364,86 +545,140 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                     plot3 = gr.Plot(label="3：Rolling Mean")
                 with gr.Column(scale=1):
                     plot4 = gr.Plot(label="4：Gauge")
+
         with gr.Tab("地圖"):
             map_out = gr.HTML(label="5：Geo Map")
+
         with gr.Tab("JSON & 檔案"):
             json_box = gr.Code(label="grafanalib Dashboard JSON", language="json")
             json_file = gr.File(label="下載 dashboard.json")
             demo_csv_file = gr.File(label="下載示範資料 demo.csv")
+
         with gr.Tab("資料預覽"):
-            df_view = gr.Dataframe(label="資料預覽", wrap=True)
+            df_view = gr.Dataframe(label="資料預覽")
+
         with gr.Tab("點位詳情"):
             gr.Markdown("### 點位詳情")
             point_selector = gr.Dropdown(label="選擇點位", choices=[], value=None)
-            detail_view = gr.Dataframe(label="選取點詳細資料", wrap=True)
+            detail_view = gr.Dataframe(label="選取點詳細資料")
 
+    # 探測欄位（不回傳新元件，而是更新其 choices/value）
     def probe_columns(source, file, preset_url, start_time, end_time):
         sheet_url = preset_url if source == "drive" else ""
         try:
             df, _ = load_data(source, file, sheet_url)
             df = filter_data(df, start_time, end_time)
-            numeric_cols = [c for c in df.columns if c not in ["time", "lat", "lon", "pid"] and pd.api.types.is_numeric_dtype(df[c])]
-            return gr.CheckboxGroup(choices=numeric_cols, value=numeric_cols[:2]), df, ""
+            numeric_cols = [c for c in df.columns
+                            if c not in ["time", "lat", "lon", "pid"] and pd.api.types.is_numeric_dtype(df[c])]
+            return gr.update(choices=numeric_cols, value=numeric_cols[:2]), df, ""
         except Exception as e:
-            return gr.CheckboxGroup(choices=[]), pd.DataFrame(), str(e)
+            return gr.update(choices=[], value=[]), pd.DataFrame(), str(e)
 
-    source_radio.change(probe_columns, [source_radio, file_in, preset_dd, start_time_in, end_time_in], [series_multiselect, df_view, error_msg])
-    file_in.change(probe_columns, [source_radio, file_in, preset_dd, start_time_in, end_time_in], [series_multiselect, df_view, error_msg])
-    preset_dd.change(probe_columns, [source_radio, file_in, preset_dd, start_time_in, end_time_in], [series_multiselect, df_view, error_msg])
-    start_time_in.change(probe_columns, [source_radio, file_in, preset_dd, start_time_in, end_time_in], [series_multiselect, df_view, error_msg])
-    end_time_in.change(probe_columns, [source_radio, file_in, preset_dd, start_time_in, end_time_in], [series_multiselect, df_view, error_msg])
+    source_radio.change(
+        probe_columns, [source_radio, file_in, preset_dd, start_time_in, end_time_in],
+        [series_multiselect, df_view, error_msg]
+    )
+    file_in.change(
+        probe_columns, [source_radio, file_in, preset_dd, start_time_in, end_time_in],
+        [series_multiselect, df_view, error_msg]
+    )
+    preset_dd.change(
+        probe_columns, [source_radio, file_in, preset_dd, start_time_in, end_time_in],
+        [series_multiselect, df_view, error_msg]
+    )
+    start_time_in.change(
+        probe_columns, [source_radio, file_in, preset_dd, start_time_in, end_time_in],
+        [series_multiselect, df_view, error_msg]
+    )
+    end_time_in.change(
+        probe_columns, [source_radio, file_in, preset_dd, start_time_in, end_time_in],
+        [series_multiselect, df_view, error_msg]
+    )
 
+    # 初次載入：用 drive 範例
     demo.load(
-        fn=lambda: pipeline("drive", None, DRIVE_PRESETS[0], [], False, "5", "viridis", "OpenStreetMap", "", "", False),
-        outputs=[plot1, plot2, plot3, plot4, map_out, json_box, json_file, df_view, demo_csv_file, point_selector, detail_view, error_msg, gr.State(value=None)]
+        fn=lambda: pipeline("drive", None, DRIVE_PRESETS[0], [], False, "5",
+                            "viridis", "OpenStreetMap", "", "", False, None),
+        outputs=[
+            plot1, plot2, plot3, plot4,
+            map_out,
+            json_box, json_file,
+            df_view, demo_csv_file,
+            point_selector, detail_view,
+            error_msg,
+            last_time_state
+        ]
     )
 
+    # 執行 / 更新（使用同一個 last_time_state）
     run_btn.click(
         fn=pipeline,
-        inputs=[source_radio, file_in, preset_dd, series_multiselect, dual_axis_chk, rolling_dd, cmap_dd, tiles_dd, start_time_in, end_time_in, heatmap_chk, gr.State(value=None)],
-        outputs=[plot1, plot2, plot3, plot4, map_out, json_box, json_file, df_view, demo_csv_file, point_selector, detail_view, error_msg, gr.State()]
+        inputs=[source_radio, file_in, preset_dd, series_multiselect, dual_axis_chk, rolling_dd,
+                cmap_dd, tiles_dd, start_time_in, end_time_in, heatmap_chk, last_time_state],
+        outputs=[plot1, plot2, plot3, plot4,
+                 map_out, json_box, json_file,
+                 df_view, demo_csv_file,
+                 point_selector, detail_view,
+                 error_msg,
+                 last_time_state]
     )
 
     update_btn.click(
         fn=pipeline,
-        inputs=[source_radio, file_in, preset_dd, series_multiselect, dual_axis_chk, rolling_dd, cmap_dd, tiles_dd, start_time_in, end_time_in, heatmap_chk, gr.State()],
-        outputs=[plot1, plot2, plot3, plot4, map_out, json_box, json_file, df_view, demo_csv_file, point_selector, detail_view, error_msg, gr.State()]
+        inputs=[source_radio, file_in, preset_dd, series_multiselect, dual_axis_chk, rolling_dd,
+                cmap_dd, tiles_dd, start_time_in, end_time_in, heatmap_chk, last_time_state],
+        outputs=[plot1, plot2, plot3, plot4,
+                 map_out, json_box, json_file,
+                 df_view, demo_csv_file,
+                 point_selector, detail_view,
+                 error_msg,
+                 last_time_state]
     )
 
-    def start_auto_update(interval):
-        logger.debug(f"Setting auto update interval to {interval} seconds")
-        return gr.update(value=interval)
-
-    interval.change(
-        fn=start_auto_update,
-        inputs=[interval],
-        outputs=[interval]
-    )
-
-    demo.js = """
-    function startAutoUpdate() {
-        let intervalValue = parseInt(document.querySelector('input[type="range"]').value) * 1000;
-        function update() {
-            setTimeout(() => {
-                document.querySelector('button[aria-label="手動更新數據"]').click();
-                update();
-            }, intervalValue);
-        }
-        update();
-        document.querySelector('input[type="range"]').addEventListener('input', function() {
-            intervalValue = parseInt(this.value) * 1000;
-            clearTimeout(window.updateTimeout);
-            update();
-        });
-    }
-    startAutoUpdate();
-    """
-
+    # 點位詳情
     point_selector.change(
         fn=update_detail,
         inputs=[df_view, point_selector],
         outputs=[detail_view]
     )
 
+    # 自動更新（JS 以 elem_id 鎖定，避免 aria-label 變動）
+    gr.HTML("""
+    <script>
+      (function () {
+        function getSliderEl() {
+          const container = document.getElementById("interval_slider");
+          if (!container) return null;
+          return container.querySelector('input[type="range"]');
+        }
+        function getUpdateBtn() {
+          const container = document.getElementById("update_btn");
+          if (!container) return null;
+          // Gradio v4 內 Button 外層會包一層 div
+          return container.querySelector("button") || container;
+        }
+        let timer = null;
+        function schedule() {
+          const slider = getSliderEl();
+          const btn = getUpdateBtn();
+          if (!slider || !btn) {
+            setTimeout(schedule, 1000);
+            return;
+          }
+          const ms = parseInt(slider.value) * 1000;
+          if (timer) clearInterval(timer);
+          timer = setInterval(() => { btn.click(); }, ms);
+          slider.addEventListener("input", () => {
+            if (timer) clearInterval(timer);
+            const ms2 = parseInt(slider.value) * 1000;
+            timer = setInterval(() => { btn.click(); }, ms2);
+          });
+        }
+        schedule();
+      })();
+    </script>
+    """)
+
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860)
+    # 在 Hugging Face Spaces 上可省略 server_name/server_port，平台會自動注入
+    demo.launch()