Update app.py

app.py

@@ -62,7 +62,7 @@ def normalize_drive_url(url: str) -> str:
 # -----------------------------
 # Demo / Data loading with dynamic update
 # -----------------------------
-def make_demo_dataframe(last_time=None) -> pd.DataFrame:
+def make_demo_dataframe(last_time=None) -> tuple[pd.DataFrame, datetime]:
     """隨機示範資料：含經緯度 + pid，模擬實時更新"""
     if last_time is None:
         last_time = datetime.now(tz=TAIPEI) - timedelta(minutes=60)
@@ -477,9 +477,9 @@ def pipeline(source, file, sheet_url, series_choice, dual_axis, rolling_window,
             demo_csv_path = f.name
 
         return (
-            fig1, fig2, fig3, fig4, map_html,
+            fig1, fig2, plot3, plot4, map_out,
             dash_json_str, json_path, df_with_roll,
-            demo_csv_path,
+            demo_csv_file,
             gr.Dropdown(choices=point_choices, value=default_choice),
             detail_df,
             "",  # 錯誤訊息清空
@@ -592,8 +592,7 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
 
     # 初次載入
     demo.load(
-        lambda: pipeline("drive", None, DRIVE_PRESETS[0], [], False, "5", "viridis", "OpenStreetMap", "", "", False),
-        inputs=None,
+        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,
@@ -606,7 +605,7 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
 
     # 產生 / 重新產生 / 動態更新
     run_btn.click(
-        pipeline,
+        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,
@@ -614,12 +613,12 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             demo_csv_file,
             point_selector, detail_view,
             error_msg,
-            gr.State(value=None)
+            gr.State()
         ]
     )
 
     update_btn.click(
-        pipeline,
+        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,
@@ -631,31 +630,37 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
         ]
     )
 
+    # 自動更新邏輯
+    def start_auto_update(interval):
+        return gr.update(value=interval)
+
     interval.change(
-        fn=lambda x: gr.update(),
+        fn=start_auto_update,
         inputs=[interval],
-        outputs=[]
+        outputs=[interval]
     )
 
-    demo.load(
-        None,
-        _js="""
-        () => {
-            function update() {
-                setTimeout(() => {
-                    document.querySelector('button[aria-label="手動更新數據"]').click();
-                    update();
-                }, interval * 1000);
-            }
-            const interval = """ + str(10) + """; // 初始間隔
-            update();
+    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);
         }
-        """,
-        _js_args=[interval]
-    )
+        update();
+    }
+    startAutoUpdate();
+    document.querySelector('input[type="range"]').addEventListener('input', function() {
+        let newInterval = parseInt(this.value) * 1000;
+        clearTimeout(window.updateTimeout);
+        startAutoUpdate();
+    });
+    """
 
     point_selector.change(
-        update_detail,
+        fn=update_detail,
         inputs=[df_view, point_selector],
         outputs=[detail_view]
     )