Update app.py

app.py

@@ -1273,7 +1273,7 @@ def recommend_chart_settings(df):
 """
 Gradio 應用程式：進階數據可視化工具
 作者：Gemini
-版本：1.0 (分段提供 - Part 3)
+版本：1.1 (修正 Dataframe height 參數錯誤)
 描述：此部分包含 Gradio UI 介面定義、事件處理和應用程式啟動。
 """
 
@@ -1329,7 +1329,8 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V2", theme=gr.
                     gr.HTML('<div class="section-title">2. 數據預覽與導出</div>')
                     with gr.Group(elem_classes=["card"]):
                         gr.Markdown("下方將顯示載入或解析後的數據預覽。")
-                        data_preview = gr.Dataframe(label="數據表格預覽", interactive=False, height=350)
+                        # 修正：移除 height 參數
+                        data_preview = gr.Dataframe(label="數據表格預覽", interactive=False)
 
                         with gr.Row():
                             export_format = gr.Dropdown(
@@ -1535,6 +1536,13 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V2", theme=gr.
         preview_df = df if df is not None else pd.DataFrame()
         # 更新所有列選擇下拉列表
         col_updates = update_columns(df) # 返回 4 個 Dropdown 更新對象
+        # 檢查 col_updates 是否為 None 或空，避免解包錯誤
+        if col_updates is None or len(col_updates) != 4:
+             # 如果更新失敗，返回原始狀態或空更新
+             print("警告: update_columns 未返回預期的 4 個組件更新。")
+             # 返回空更新避免錯誤，但下拉列表可能不會更新
+             return [df, status_msg, preview_df] + [gr.update()] * 8
+
         return [df, status_msg, preview_df] + list(col_updates) * 2 # 更新兩組下拉列表
 
     upload_button.click(
@@ -1600,15 +1608,26 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V2", theme=gr.
         outputs=[chart_output_1]
     )
     # 當任何相關設置改變時，自動更新圖表一
+    # 將 .change 事件綁定移到循環外，以避免在循環內部重複定義函數
+    def auto_update_chart_1(*inputs):
+        # inputs 是一個包含所有 chart_inputs_1 值的元組
+        # 需要將這些值解包傳遞給 create_plot
+        # 注意：Gradio 的 .change 會將所有 input 組件的當前值按順序傳遞
+        # 我們需要確保這個順序與 create_plot 的參數順序匹配
+        # 或者，更安全的方式是從 inputs 列表創建一個字典
+        # 但這裡直接按順序傳遞應該可行，因為 inputs 列表順序固定
+        return create_plot(*inputs)
+
     for input_component in chart_inputs_1:
          # 避免狀態變量觸發無限循環，只監聽 UI 組件的變化
-         if isinstance(input_component, (gr.Dropdown, gr.Textbox, gr.Slider, gr.Checkbox)):
+         if not isinstance(input_component, gr.State): # 排除 State 組件
             input_component.change(
-                create_plot,
-                inputs=chart_inputs_1,
+                auto_update_chart_1, # 使用輔助函數
+                inputs=chart_inputs_1, # 傳遞所有需要的輸入
                 outputs=[chart_output_1]
             )
 
+
     # --- 圖表一：導出圖表 ---
     download_button_1.click(
         download_figure,
@@ -1620,30 +1639,41 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V2", theme=gr.
     def apply_recommendation(rec_dict):
         """將推薦字典應用到圖表一的 UI 組件"""
         if not isinstance(rec_dict, dict):
-            return [gr.update()] * 5 # 返回空更新以避免錯誤
-
-        # 如果聚合是計數，Y 軸應為空或不更新
-        y_val = None if rec_dict.get("agg_function") == "計數" else rec_dict.get("y_column")
-
+             # 如果輸入不是字典，返回空更新列表
+             print("警告：apply_recommendation 收到非字典輸入。")
+             return [gr.update()] * 5
+
+        # 安全地獲取推薦值，提供默認值
+        chart_type_val = rec_dict.get("chart_type")
+        x_col_val = rec_dict.get("x_column")
+        agg_func_val = rec_dict.get("agg_function")
+        y_col_val = None if agg_func_val == "計數" else rec_dict.get("y_column")
+        group_col_val = rec_dict.get("group_column", "無") # 默認為 "無"
+
+        # 返回更新列表
         return [
-            gr.Dropdown(value=rec_dict.get("chart_type")),
-            gr.Dropdown(value=rec_dict.get("x_column")),
-            gr.Dropdown(value=y_val), # 使用處理過的 Y 值
-            gr.Dropdown(value=rec_dict.get("group_column", "無")),
-            gr.Dropdown(value=rec_dict.get("agg_function"))
+            gr.Dropdown(value=chart_type_val),
+            gr.Dropdown(value=x_col_val),
+            gr.Dropdown(value=y_col_val),
+            gr.Dropdown(value=group_col_val),
+            gr.Dropdown(value=agg_func_val)
         ]
 
+
+    # 創建一個狀態來存儲推薦結果，以便在 then() 中使用
+    recommendation_state = gr.State({})
+
     recommend_button_1.click(
         recommend_chart_settings,
         inputs=[data_state],
-        outputs=None # 先不直接輸出到 Textbox
+        outputs=[recommendation_state] # 將結果存儲在狀態中
     ).then(
         apply_recommendation,
-        inputs=None, # 使用 click 的輸出作為 then 的輸入
+        inputs=[recommendation_state], # 從狀態讀取推薦結果
         outputs=[chart_type_1, x_column_1, y_column_1, group_column_1, agg_function_1]
     ).then( # 應用推薦後立即觸發一次圖表更新
-        create_plot,
-        inputs=chart_inputs_1, # 重新收集所有輸入
+        create_plot, # 直接調用 create_plot
+        inputs=chart_inputs_1, # 再次收集所有當前輸入
         outputs=[chart_output_1]
     )
 
@@ -1675,10 +1705,13 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V2", theme=gr.
         outputs=[chart_output_2]
     )
     # 當任何相關設置改變時，自動更新圖表二
+    def auto_update_chart_2(*inputs):
+        return create_plot(*inputs)
+
     for input_component in chart_inputs_2:
-         if isinstance(input_component, (gr.Dropdown, gr.Textbox, gr.Slider, gr.Checkbox)):
+         if not isinstance(input_component, gr.State):
             input_component.change(
-                create_plot,
+                auto_update_chart_2,
                 inputs=chart_inputs_2,
                 outputs=[chart_output_2]
             )
@@ -1693,69 +1726,75 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V2", theme=gr.
     # --- 圖表類型改變時更新 UI 元素可見性 (針對兩個圖表) ---
     def update_element_visibility(chart_type):
         """根據圖表類型更新 Y 軸、分組列、大小列的標籤和可見性"""
-        # 圓餅圖、環形圖、漏斗圖、樹狀圖：主要關心類別 (X) 和數值 (Y)
-        is_pie_like = chart_type in ["圓餅圖", "環形圖", "漏斗圖", "樹狀圖"]
-        # 直方圖：主要關心 X 軸分佈，Y 軸是計數
-        is_histogram = chart_type == "直方圖"
-        # 箱型圖、小提琴圖：Y 軸是數值，X 軸是可選的分組
-        is_box_violin = chart_type in ["箱型圖", "小提琴圖"]
-        # 甘特圖：Y 軸是開始時間，分組列是結束時間
-        is_gantt = chart_type == "甘特圖"
-        # 熱力圖：需要 X, Y 和分組列
-        is_heatmap = chart_type == "熱力圖"
-        # 雷達圖：Theta (X), R (Y), Color (Group)
-        is_radar = chart_type == "雷達圖"
-
-        # Y 軸的標籤和需求
-        y_label = "Y軸 / 數值"
-        y_needed = True
-        if is_histogram:
-            y_label = "Y軸 (自動計數)"
-            y_needed = False # 不需要用戶選擇 Y
-        elif is_pie_like:
-            y_label = "數值列 (用於大小/值)"
-        elif is_box_violin:
-            y_label = "數值列"
-        elif is_gantt:
-            y_label = "開始時間列"
-        elif is_radar:
-            y_label = "徑向值 (R)"
-
-
-        # 分組列的標籤和需求
-        group_label = "分組列"
-        group_needed = chart_type in [
-            "堆疊長條圖", "百分比堆疊長條圖", "群組長條圖", "水平長條圖", # 可選
-            "折線圖", "多重折線圖", "階梯折線圖", # 可選
-            "區域圖", "堆疊區域圖", "百分比堆疊區域圖", # 可選
-            "散點圖", "氣泡圖", # 可選
-            "箱型圖", "小提琴圖", # 可選，用於 X 軸
-            "熱力圖", # 必需，用於 Index 或 Columns
-            "雷達圖", # 必需，用於區分線條
-            "極座標圖" # 可選
-        ]
-        if is_gantt:
-            group_label = "結束時間列"
-            group_needed = True
-        elif is_heatmap:
-             group_label = "行/列 分組"
-             group_needed = True
-
-
-        # 大小列的需求
-        size_label = "大小列"
-        size_needed = chart_type in ["氣泡圖", "散點圖"] # 甘特圖顏色也可以用 Size 列
-        if is_gantt:
-             size_label = "顏色列 (可選)"
-             size_needed = True # 允許選擇顏色列
-
+        try: # 添加 try-except 塊以捕獲潛在錯誤
+            # 圓餅圖、環形圖、漏斗圖、樹狀圖：主要關心類別 (X) 和數值 (Y)
+            is_pie_like = chart_type in ["圓餅圖", "環形圖", "漏斗圖", "樹狀圖"]
+            # 直方圖：主要關心 X 軸分佈，Y 軸是計數
+            is_histogram = chart_type == "直方圖"
+            # 箱型圖、小提琴圖：Y 軸是數值，X 軸是可選的分組
+            is_box_violin = chart_type in ["箱型圖", "小提琴圖"]
+            # 甘特圖：Y 軸是開始時間，分組列是結束時間
+            is_gantt = chart_type == "甘特圖"
+            # 熱力圖：需要 X, Y 和分組列
+            is_heatmap = chart_type == "熱力圖"
+            # 雷達圖：Theta (X), R (Y), Color (Group)
+            is_radar = chart_type == "雷達圖"
+
+            # Y 軸的標籤和需求
+            y_label = "Y軸 / 數值"
+            y_needed = True
+            if is_histogram:
+                y_label = "Y軸 (自動計數)"
+                y_needed = False # 不需要用戶選擇 Y
+            elif is_pie_like:
+                y_label = "數值列 (用於大小/值)"
+            elif is_box_violin:
+                y_label = "數值列"
+            elif is_gantt:
+                y_label = "開始時間列"
+            elif is_radar:
+                y_label = "徑向值 (R)"
+
+
+            # 分組列的標籤和需求
+            group_label = "分組列"
+            group_needed = chart_type in [
+                "堆疊長條圖", "百分比堆疊長條圖", "群組長條圖", "水平長條圖", # 可選
+                "折線圖", "多重折線圖", "階梯折線圖", # 可選
+                "區域圖", "堆疊區域圖", "百分比堆疊區域圖", # 可選
+                "散點圖", "氣泡圖", # 可選
+                "箱型圖", "小提琴圖", # 可選，用於 X 軸
+                "熱力圖", # 必需，用於 Index 或 Columns
+                "雷達圖", # 必需，用於區分線條
+                "極座標圖" # 可選
+            ]
+            if is_gantt:
+                group_label = "結束時間列"
+                group_needed = True
+            elif is_heatmap:
+                 group_label = "行/列 分組"
+                 group_needed = True
+
+
+            # 大小列的需求
+            size_label = "大小列"
+            size_needed = chart_type in ["氣泡圖", "散點圖"] # 甘特圖顏色也可以用 Size 列
+            if is_gantt:
+                 size_label = "顏色列 (可選)"
+                 size_needed = True # 允許選擇顏色列
+
+
+            # 返回更新對象
+            return (
+                gr.update(label=y_label, visible=y_needed),
+                gr.update(label=group_label, visible=group_needed),
+                gr.update(label=size_label, visible=size_needed)
+            )
+        except Exception as e:
+             print(f"Error in update_element_visibility: {e}")
+             # 返回默認更新以避免應用程序崩潰
+             return (gr.update(), gr.update(), gr.update())
 
-        # 返回更新對象
-        return (
-            gr.update(label=y_label, visible=y_needed),
-            gr.update(label=group_label, visible=group_needed),
-            gr.update(label=size_label, visible=size_needed)
-        )
 
     # 將 chart_type 的變化連接到更新函數，並應用到兩個圖表的對應組件
     chart_type_1.change(
@@ -1775,4 +1814,6 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V2", theme=gr.
 if __name__ == "__main__":
     # 在 Hugging Face Spaces 上，通常不需要 share=True
     # debug=True 可以在開發時提供更詳細的錯誤信息
-    demo.launch(debug=True)
+    # 增加 server_port 以便在本地運行時指定端口，避免衝突
+    # demo.launch(debug=True, server_port=7860)
+    demo.launch(debug=True) # 保持原樣，Gradio 會自動選擇端口