Update app.py

app.py

@@ -1273,8 +1273,8 @@ def recommend_chart_settings(df):
 """
 Gradio 應用程式：進階數據可視化工具
 作者：Gemini
-版本：2.0 (完整修復版 - 簡化佈局，移除下拉選單 CSS)
-描述：包含所有功能的完整程式碼，旨在解決下拉選單問題。
+版本：3.0 (完整修復版 - 左右佈局, Accordion, 移除下拉選單 CSS)
+描述：包含所有功能的完整程式碼，旨在解決下拉選單問題並改進佈局。
 """
 
 # =========================================
@@ -1497,10 +1497,13 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
         # --- 1. 輸入驗證 ---
         if df is None or df.empty: raise ValueError("沒有有效的數據可供繪圖。")
         if not x_column or x_column == "-- 無數據 --": raise ValueError("請選擇有效的 X 軸或類別列。")
-        if not y_column or y_column == "-- 無數據 --":
-            if agg_func_name != "計數" and chart_type not in ["直方圖"]: raise ValueError("請選擇有效的 Y 軸或數值列。")
+        # 只有在非計數且非直方圖時才嚴格要求 Y 軸
+        if agg_func_name != "計數" and chart_type not in ["直方圖"] and (not y_column or y_column == "-- 無數據 --"):
+            raise ValueError("請選擇有效的 Y 軸或數值列。")
         if x_column not in df.columns: raise ValueError(f"X 軸列 '{x_column}' 不在數據中。")
-        if agg_func_name != "計數" and chart_type not in ["直方圖"] and y_column not in df.columns: raise ValueError(f"Y 軸列 '{y_column}' 不在數據中。")
+        # 只有在需要 Y 軸時才檢查 Y 軸是否存在
+        if agg_func_name != "計數" and chart_type not in ["直方圖"] and y_column not in df.columns:
+            raise ValueError(f"Y 軸列 '{y_column}' 不在數據中。")
         if group_column and group_column != "無" and group_column not in df.columns: raise ValueError(f"分組列 '{group_column}' 不在數據中。")
         if size_column and size_column != "無" and size_column not in df.columns: raise ValueError(f"大小列 '{size_column}' 不在數據中。")
 
@@ -1511,8 +1514,10 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
         for col in [x_column, y_column, group_col, size_col]:
             if col:
                 try:
-                    if agg_func_name not in ["計數"] and col in [y_column, size_col]:
+                    # 嘗試將 Y 軸和大小列轉為數值 (如果需要聚合或用於大小)
+                    if (agg_func_name != "計數" and col == y_column) or (col == size_col):
                          df_processed[col] = pd.to_numeric(df_processed[col], errors='coerce')
+                    # X 軸和分組列通常視為分類 (字符串)
                     elif col in [x_column, group_col]:
                          df_processed[col] = df_processed[col].astype(str)
                 except Exception as e: print(f"警告：轉換列 '{col}' 類型時出錯: {e}")
@@ -1523,18 +1528,34 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
         y_col_agg = y_column # 預設 Y 軸列名
         if needs_aggregation:
             grouping_cols = [x_column] + ([group_col] if group_col else [])
+            # 檢查分組列是否有效
+            invalid_grouping_cols = [col for col in grouping_cols if col not in df_processed.columns]
+            if invalid_grouping_cols:
+                raise ValueError(f"以下分組/X軸列不在數據中: {', '.join(invalid_grouping_cols)}")
+
             if agg_func_name == "計數":
-                agg_df = df_processed.groupby(grouping_cols, observed=False).size().reset_index(name='__count__')
-                y_col_agg = '__count__'
+                # 使用 size() 計算每個組的行數
+                agg_df = df_processed.groupby(grouping_cols, observed=False, dropna=False).size() # dropna=False 包含 NaN 類別
+                agg_df = agg_df.reset_index(name='__count__')
+                y_col_agg = '__count__' # 使用新生成的計數列
             else:
                 agg_func_pd = agg_function_map(agg_func_name)
                 if not y_column or y_column not in df_processed.columns: raise ValueError(f"聚合函數 '{agg_func_name}' 需要一個有效的 Y 軸數值列。")
-                if not pd.api.types.is_numeric_dtype(df_processed[y_column]): raise ValueError(f"Y 軸列 '{y_column}' 必須是數值類型才能執行聚合 '{agg_func_name}'。")
+                # 再次檢查 Y 軸是否為數值
+                if not pd.api.types.is_numeric_dtype(df_processed[y_column]):
+                     # 如果聚合函數是 first 或 last，允許非數值
+                     if agg_func_pd not in ['first', 'last']:
+                         raise ValueError(f"Y 軸列 '{y_column}' 必須是數值類型才能執行聚合 '{agg_func_name}'。")
+
                 try:
-                    agg_df = df_processed.groupby(grouping_cols, observed=False)[y_column].agg(agg_func_pd).reset_index()
+                    # 執行聚合
+                    agg_df = df_processed.groupby(grouping_cols, observed=False, dropna=False)[y_column].agg(agg_func_pd)
+                    agg_df = agg_df.reset_index()
                     # y_col_agg 保持為 y_column
-                except Exception as agg_e: raise ValueError(f"執行聚合 '{agg_func_name}' 時出錯: {agg_e}")
+                except Exception as agg_e:
+                    raise ValueError(f"執行聚合 '{agg_func_name}' 時出錯: {agg_e}")
         else:
+            # 不需要聚合，直接使用處理過的數據
             agg_df = df_processed
             # y_col_agg 保持為 y_column
 
@@ -1545,8 +1566,6 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
         fig_params = {"data_frame": agg_df, "title": title, "color_discrete_sequence": colors, "width": width, "height": height}
         if group_col and custom_colors_dict: fig_params["color_discrete_map"] = custom_colors_dict
 
-        # 繪圖邏輯... (與 Part 2 相同，此處省略以縮短篇幅，實際代碼中應包含)
-        # ... (省略 chart_type 判斷和 px/go 繪圖代碼) ...
         # --- (繪圖邏輯開始) ---
         if chart_type == "長條圖":
             fig = px.bar(agg_df, x=x_column, y=y_col_agg, color=group_col, **fig_params)
@@ -1575,37 +1594,60 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
         elif chart_type == "圓餅圖":
             if group_col: print("警告：圓餅圖不支持分組列，已忽略。")
             fig = px.pie(agg_df, names=x_column, values=y_col_agg, **fig_params)
-            if not group_col and custom_colors_dict: fig.update_traces(marker=dict(colors=[custom_colors_dict.get(cat, colors[i % len(colors)]) for i, cat in enumerate(agg_df[x_column])]))
+            if not group_col and custom_colors_dict: fig.update_traces(marker=dict(colors=[custom_colors_dict.get(str(cat), colors[i % len(colors)]) for i, cat in enumerate(agg_df[x_column])]))
         elif chart_type == "環形圖":
             if group_col: print("警告：環形圖不支持分組列，已忽略。")
             fig = px.pie(agg_df, names=x_column, values=y_col_agg, hole=0.4, **fig_params)
-            if not group_col and custom_colors_dict: fig.update_traces(marker=dict(colors=[custom_colors_dict.get(cat, colors[i % len(colors)]) for i, cat in enumerate(agg_df[x_column])]))
+            if not group_col and custom_colors_dict: fig.update_traces(marker=dict(colors=[custom_colors_dict.get(str(cat), colors[i % len(colors)]) for i, cat in enumerate(agg_df[x_column])]))
         elif chart_type == "散點圖":
             fig = px.scatter(agg_df, x=x_column, y=y_col_agg, color=group_col, size=size_col, **fig_params)
         elif chart_type == "氣泡圖":
             if not size_col: raise ValueError("氣泡圖需要指定 '大小列'。")
+            # 確保大小列是數值
+            if not pd.api.types.is_numeric_dtype(agg_df[size_col]):
+                 raise ValueError(f"大小列 '{size_col}' 必須是數值類型。")
             fig = px.scatter(agg_df, x=x_column, y=y_col_agg, color=group_col, size=size_col, size_max=60, **fig_params)
         elif chart_type == "直方圖":
+            # 直方圖分析單一變量分佈，Y 軸通常是計數
+            # 確保 x_column 是數值類型
+            if not pd.api.types.is_numeric_dtype(agg_df[x_column]):
+                 raise ValueError(f"直方圖的 X 軸列 '{x_column}' 必須是數值類型。")
             fig = px.histogram(agg_df, x=x_column, color=group_col, **fig_params); fig.update_layout(yaxis_title="計數")
         elif chart_type == "箱型圖":
+            # Y 軸必須是數值
+            if not pd.api.types.is_numeric_dtype(agg_df[y_col_agg]):
+                 raise ValueError(f"箱型圖的 Y 軸列 '{y_col_agg}' 必須是數值類型。")
             fig = px.box(agg_df, x=group_col, y=y_col_agg, color=group_col, **fig_params)
-            if not group_col: fig = px.box(agg_df, y=y_col_agg, **fig_params)
+            if not group_col: fig = px.box(agg_df, y=y_col_agg, **fig_params) # 無分組
         elif chart_type == "小提琴圖":
+            if not pd.api.types.is_numeric_dtype(agg_df[y_col_agg]):
+                 raise ValueError(f"小提琴圖的 Y 軸列 '{y_col_agg}' 必須是數值類型。")
             fig = px.violin(agg_df, x=group_col, y=y_col_agg, color=group_col, box=True, points="all", **fig_params)
             if not group_col: fig = px.violin(agg_df, y=y_col_agg, box=True, points="all", **fig_params)
         elif chart_type == "熱力圖":
             if not group_col: raise ValueError("熱力圖需要 X 軸、Y 軸 和一個 分組列 (用於顏色或數值)。")
             try:
+                # 確保值列是數值
+                if not pd.api.types.is_numeric_dtype(agg_df[y_col_agg]):
+                     raise ValueError(f"熱力圖的值列 '{y_col_agg}' 必須是數值類型。")
+                # 創建數據透視表
                 pivot_df = pd.pivot_table(agg_df, values=y_col_agg, index=group_col, columns=x_column, aggfunc=agg_function_map(agg_func_name) if agg_func_name != "計數" else 'size')
-                fig = px.imshow(pivot_df, color_continuous_scale=px.colors.sequential.Viridis, aspect="auto", **fig_params); fig.update_layout(coloraxis_showscale=True)
+                fig = px.imshow(pivot_df, color_continuous_scale=px.colors.sequential.Viridis, aspect="auto", text_auto=True, **fig_params); # text_auto 顯示數值
+                fig.update_layout(coloraxis_showscale=True)
             except Exception as pivot_e: raise ValueError(f"創建熱力圖的數據透視表時出錯: {pivot_e}")
         elif chart_type == "樹狀圖":
              path = [group_col, x_column] if group_col else [x_column]
+             # 確保值列是數值
+             if not pd.api.types.is_numeric_dtype(agg_df[y_col_agg]):
+                  raise ValueError(f"樹狀圖的值列 '{y_col_agg}' 必須是數值類型。")
              fig = px.treemap(agg_df, path=path, values=y_col_agg, color=group_col if group_col else x_column, **fig_params)
         elif chart_type == "雷達圖":
             fig = go.Figure() # 使用 go.Figure 創建
+            # 確保 R 值是數值
+            if not pd.api.types.is_numeric_dtype(agg_df[y_col_agg]):
+                 raise ValueError(f"雷達圖的徑向值列 '{y_col_agg}' 必須是數值類型。")
             if not group_col: # 單系列
-                 theta = agg_df[x_column].tolist(); r = agg_df[y_col_agg].tolist(); theta.append(theta[0]); r.append(r[0])
+                 theta = agg_df[x_column].tolist(); r = agg_df[y_col_agg].tolist(); theta.append(theta[0]); r.append(r[0]) # 封閉圖形
                  fig.add_trace(go.Scatterpolar(r=r, theta=theta, fill='toself', name=y_col_agg, line_color=colors[0]))
             else: # 多系列
                  categories = agg_df[group_col].unique()
@@ -1615,16 +1657,39 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
                      fig.add_trace(go.Scatterpolar(r=r, theta=theta, fill='toself', name=str(category), line_color=color))
             fig.update_layout(polar=dict(radialaxis=dict(visible=True)), showlegend=show_legend, title=title, width=width, height=height)
         elif chart_type == "漏斗圖":
+            # 確保值列是數值
+            if not pd.api.types.is_numeric_dtype(agg_df[y_col_agg]):
+                 raise ValueError(f"漏斗圖的值列 '{y_col_agg}' 必須是數值類型。")
             sorted_df = agg_df.sort_values(by=y_col_agg, ascending=False)
             fig = px.funnel(sorted_df, x=y_col_agg, y=x_column, color=group_col, **fig_params)
         elif chart_type == "極座標圖":
+            # 確保 R 值是數值
+            if not pd.api.types.is_numeric_dtype(agg_df[y_col_agg]):
+                 raise ValueError(f"極座標圖的徑向值列 '{y_col_agg}' 必須是數值類型。")
             fig = px.bar_polar(agg_df, r=y_col_agg, theta=x_column, color=group_col if group_col else x_column, **fig_params)
         elif chart_type == "甘特圖":
+             # 甘特圖使用原始數據，需要開始和結束列
              if not y_column or not group_col: raise ValueError("甘特圖需要指定 開始列 (Y軸) 和 結束列 (分組列)。")
              try:
-                 df_gantt = df.copy(); df_gantt['_start_'] = pd.to_datetime(df_gantt[y_column], errors='coerce'); df_gantt['_end_'] = pd.to_datetime(df_gantt[group_col], errors='coerce')
-                 if df_gantt['_start_'].isnull().any() or df_gantt['_end_'].isnull().any(): raise ValueError("開始列或結束列包含無效的日期時間格式。")
-                 fig = px.timeline(df_gantt, x_start='_start_', x_end='_end_', y=x_column, color=size_col if size_col else None, title=title, color_discrete_sequence=colors, width=width, height=height)
+                 df_gantt = df.copy() # 使用原始 df
+                 start_col, end_col = y_column, group_col # 根據用戶選擇
+                 task_col = x_column # 任務列
+                 # 檢查列是否存在
+                 if start_col not in df_gantt.columns: raise ValueError(f"開始列 '{start_col}' 不在數據中。")
+                 if end_col not in df_gantt.columns: raise ValueError(f"結束列 '{end_col}' 不在數據中。")
+                 if task_col not in df_gantt.columns: raise ValueError(f"任務列 '{task_col}' 不在數據中。")
+
+                 # 嘗試轉換為日期時間
+                 df_gantt['_start_'] = pd.to_datetime(df_gantt[start_col], errors='coerce')
+                 df_gantt['_end_'] = pd.to_datetime(df_gantt[end_col], errors='coerce')
+                 # 檢查是否有無效日期
+                 if df_gantt['_start_'].isnull().any(): raise ValueError(f"開始列 '{start_col}' 包含無效或無法解析的日期時間格式。")
+                 if df_gantt['_end_'].isnull().any(): raise ValueError(f"結束列 '{end_col}' 包含無效或無法解析的日期時間格式。")
+
+                 # 繪製甘特圖
+                 fig = px.timeline(df_gantt, x_start='_start_', x_end='_end_', y=task_col,
+                                   color=size_col if size_col else None, # 可以用大小列來區分顏色
+                                   title=title, color_discrete_sequence=colors, width=width, height=height)
                  fig.update_layout(xaxis_type="date")
              except Exception as gantt_e: raise ValueError(f"創建甘特圖時出錯: {gantt_e}")
         else:
@@ -1666,9 +1731,12 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
             hoverlabel=dict(bgcolor="white", font_size=12, font_family="Inter, sans-serif"),
             legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1) if show_legend else None,
         )
+        # 根據圖表類型更新軸標籤
+        final_y_label = y_col_agg if y_col_agg != '__count__' else '計數'
         if chart_type in ["圓餅圖", "環形圖", "漏斗圖", "樹狀圖"]: fig.update_layout(xaxis_title=None, yaxis_title=None)
-        elif chart_type == "水平長條圖": fig.update_layout(xaxis_title=y_col_agg, yaxis_title=x_column)
-        else: fig.update_layout(xaxis_title=x_column, yaxis_title=y_col_agg)
+        elif chart_type == "水平長條圖": fig.update_layout(xaxis_title=final_y_label, yaxis_title=x_column)
+        elif chart_type == "直方圖": fig.update_layout(xaxis_title=x_column, yaxis_title='計數')
+        else: fig.update_layout(xaxis_title=x_column, yaxis_title=final_y_label)
 
     except ValueError as ve:
         print(f"圖表創建錯誤 (ValueError): {ve}"); traceback.print_exc()
@@ -1695,12 +1763,22 @@ def download_figure(fig, format_type="PNG"):
     if fig is None or not fig.data: return None, "❌ 沒有圖表可以導出。"
     try:
         format_lower = format_type.lower(); filename = f"chart_export.{format_lower}"
+        # 確保有 kaleido
+        import kaleido
         fig.write_image(filename, format=format_lower)
         return filename, f"✅ 圖表已成功準備為 {format_type} 格式，點擊下方鏈接下載。"
+    except ImportError:
+         error_msg = "❌ 導出圖表失敗：需要 Kaleido 套件。請在環境中安裝 `pip install -U kaleido`。"
+         print(error_msg); return None, error_msg
     except ValueError as ve:
-         if "kaleido" in str(ve): error_msg = "❌ 導出圖表失敗：需要 Kaleido 套件。請在環境中安裝 `pip install -U kaleido`。"; print(error_msg); return None, error_msg
-         else: print(f"導出圖表時出錯 (ValueError): {ve}"); traceback.print_exc(); return None, f"❌ 導出圖表時出錯: {ve}"
-    except Exception as e: print(f"導出圖表時發生未預期錯誤: {e}"); traceback.print_exc(); return None, f"❌ 導出圖表時發生未預期錯誤: {e}"
+         # kaleido 可能安裝但無法運行
+         if "kaleido" in str(ve).lower():
+             error_msg = "❌ 導出圖表失敗：Kaleido 套件無法運行。請檢查其依賴項或嘗試重新安裝。"
+             print(f"{error_msg}\n{ve}"); traceback.print_exc(); return None, error_msg
+         else:
+            print(f"導出圖表時出錯 (ValueError): {ve}"); traceback.print_exc(); return None, f"❌ 導出圖表時出錯: {ve}"
+    except Exception as e:
+        print(f"導出圖表時發生未預期錯誤: {e}"); traceback.print_exc(); return None, f"❌ 導出圖表時發生未預期錯誤: {e}"
 
 # =========================================
 # == 智能推薦函數 (Recommendation Function) ==
@@ -1719,11 +1797,13 @@ def recommend_chart_settings(df):
         elif num_cols: recommendation.update({"chart_type": "直方圖", "x_column": num_cols[0], "y_column": None, "agg_function": None, "message": f"檢測到數值列 '{num_cols[0]}'，推薦使用直方圖查看其分佈。"})
         else: recommendation["message"] = "無法根據當前數據結構提供明確的圖表推薦。"
     except Exception as e: recommendation["message"] = f"❌ 推薦時出錯: {e}"; print(f"智能推薦時出錯: {e}"); traceback.print_exc()
+    # 驗證推薦的列名
     if recommendation["x_column"] and recommendation["x_column"] not in columns: recommendation["x_column"] = None
     if recommendation["y_column"] and recommendation["y_column"] not in columns: recommendation["y_column"] = None
     if recommendation["group_column"] != "無" and recommendation["group_column"] not in columns: recommendation["group_column"] = "無"
+    # 清理無效聚合
     if recommendation["agg_function"] and recommendation["agg_function"] != "計數" and not recommendation["y_column"]: recommendation["agg_function"] = None; recommendation["message"] += " (無法確定聚合的數值列)"
-    if recommendation["agg_function"] == "計數": recommendation["y_column"] = None
+    if recommendation["agg_function"] == "計數": recommendation["y_column"] = None # 計數時 Y 軸應為空
     return recommendation
 
 # =========================================
@@ -1739,19 +1819,19 @@ CUSTOM_CSS = """
 /* --- 區塊標題 --- */
 .section-title { font-size: 1.4em; font-weight: 600; color: #343a40; border-bottom: 3px solid #7367f0; padding-bottom: 8px; margin-top: 25px; margin-bottom: 20px; }
 /* --- 卡片樣式 --- */
-.card { background-color: white; border-radius: 10px; padding: 25px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); margin-bottom: 20px; transition: transform 0.25s ease-out, box-shadow 0.25s ease-out; border: 1px solid #e0e0e0; }
+.card { background-color: white; border-radius: 10px; padding: 20px; /* 稍微減少 padding */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); margin-bottom: 20px; transition: transform 0.25s ease-out, box-shadow 0.25s ease-out; border: 1px solid #e0e0e0; }
 .card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); }
 /* --- 按鈕樣式 --- */
-.primary-button { background: linear-gradient(to right, #667eea, #764ba2) !important; border: none !important; color: white !important; font-weight: 600 !important; padding: 12px 24px !important; border-radius: 8px !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; }
+.primary-button { background: linear-gradient(to right, #667eea, #764ba2) !important; border: none !important; color: white !important; font-weight: 600 !important; padding: 10px 20px !important; /* 調整 padding */ border-radius: 8px !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; }
 .primary-button:hover { background: linear-gradient(to right, #764ba2, #667eea) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; }
-.secondary-button { background: linear-gradient(to right, #89f7fe, #66a6ff) !important; border: none !important; color: #333 !important; font-weight: 600 !important; padding: 10px 20px !important; border-radius: 8px !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; }
+.secondary-button { background: linear-gradient(to right, #89f7fe, #66a6ff) !important; border: none !important; color: #333 !important; font-weight: 600 !important; padding: 8px 16px !important; /* 調整 padding */ border-radius: 8px !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; }
 .secondary-button:hover { background: linear-gradient(to right, #66a6ff, #89f7fe) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; }
 /* --- 下拉選單修正 (Dropdown Fix) --- */
 /* 移除自定義下拉選單樣式，使用 Gradio 預設 */
 /* --- 其他 UI 元素 --- */
 .tips-box { background-color: #e7f3ff; border-left: 5px solid #66a6ff; padding: 15px 20px; border-radius: 8px; margin: 20px 0; font-size: 0.95em; color: #333; }
 .tips-box code { background-color: #d1e7fd; padding: 2px 5px; border-radius: 4px; font-family: 'Courier New', Courier, monospace; }
-.chart-previewer { border: 2px dashed #ced4da; border-radius: 10px; padding: 20px; min-height: 450px; display: flex; justify-content: center; align-items: center; background-color: #ffffff; box-shadow: inset 0 0 10px rgba(0,0,0,0.05); margin-top: 15px; }
+.chart-previewer { border: 2px dashed #ced4da; border-radius: 10px; padding: 15px; /* 減少 padding */ min-height: 400px; /* 調整高度 */ display: flex; justify-content: center; align-items: center; background-color: #ffffff; box-shadow: inset 0 0 10px rgba(0,0,0,0.05); margin-top: 10px; /* 減少 margin */ }
 .gradio-dataframe table { border-collapse: collapse; width: 100%; font-size: 0.9em; }
 .gradio-dataframe th, .gradio-dataframe td { border: 1px solid #dee2e6; padding: 8px 10px; text-align: left; }
 .gradio-dataframe th { background-color: #f8f9fa; font-weight: 600; }
@@ -1767,18 +1847,20 @@ CUSTOM_CSS = """
 .gradio-file .hidden-upload, .gradio-file .download-button { border-radius: 6px !important; }
 .gradio-file .upload-button { border-radius: 6px !important; background: #6c757d !important; color: white !important; padding: 8px 15px !important; }
 .gradio-file .upload-button:hover { background: #5a6268 !important; }
+/* Accordion 樣式微調 */
+.gradio-accordion > .label { font-weight: 600 !important; font-size: 1.1em !important; padding: 10px 0 !important; }
 """
 
 # =========================================
 # == Gradio UI 介面定義 (Gradio UI Definition) ==
 # =========================================
-with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V2", theme=gr.themes.Soft()) as demo:
+with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V3", theme=gr.themes.Soft()) as demo:
 
     # --- 應用程式標頭 ---
     gr.HTML("""
     <div class="app-header">
-        <h1 class="app-title">📊 進階數據可視化工具 V2</h1>
-        <p class="app-subtitle">上傳或貼上數據，輕鬆創建和比較多種專業圖表</p>
+        <h1 class="app-title">📊 進階數據可視化工具 V3</h1>
+        <p class="app-subtitle">上傳或貼上數據，輕鬆創建和比較多種專業圖表 (左右佈局)</p>
     </div>
     """)
 
@@ -1818,32 +1900,29 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V2", theme=gr.
                         export_result = gr.File(label="導出文件下載", interactive=False)
                         export_status = gr.Textbox(label="導出狀態", lines=1, interactive=False)
 
-        # --- 圖表創建頁籤 ---
+        # --- 圖表創建頁籤 (左右佈局) ---
         with gr.TabItem("📈 圖表創建與比較", id=1):
-            gr.HTML('<div class="section-title">創建與比較圖表</div>')
+            gr.HTML('<div class="section-title">創建與比較圖表 (左右並列)</div>')
             gr.Markdown("在這裡，您可以分別設置並生成兩張圖表，方便進行對比分析。")
 
-            # --- 圖表一 ---
-            with gr.Group():
-                gr.Markdown("### 📊 圖表一設置")
-                with gr.Row():
-                    # 圖表一：設定欄 (左側)
-                    with gr.Column(scale=1): # 調整比例
-                        with gr.Group(elem_classes=["card"]):
-                            gr.Markdown("**基本設置**")
+            with gr.Row(): # 主 Row，包含左右兩個圖表區塊
+                # --- 圖表一 (左側 Column) ---
+                with gr.Column(scale=1):
+                    gr.Markdown("### 📊 圖表一")
+                    with gr.Group(elem_classes=["card"]): # 將所有設定放在一個卡片中
+                        with gr.Accordion("基本設置", open=True): # 使用 Accordion
                             chart_type_1 = gr.Dropdown(CHART_TYPES, label="圖表類型", value="長條圖", interactive=True)
-                            recommend_button_1 = gr.Button("🧠 智能推薦 (圖表一)", elem_classes=["secondary-button"])
-                            chart_title_1 = gr.Textbox(label="圖表標題", placeholder="圖表一：我的數據分析")
+                            recommend_button_1 = gr.Button("🧠 智能推薦", elem_classes=["secondary-button"], size="sm") # 縮小按鈕
+                            chart_title_1 = gr.Textbox(label="圖表標題", placeholder="圖表一標題")
                             agg_function_1 = gr.Dropdown(AGGREGATION_FUNCTIONS, label="聚合函數", value="計數", info="選擇如何彙總 Y 軸數據")
 
-                            gr.Markdown("**數據映射**")
+                        with gr.Accordion("數據映射", open=True): # 使用 Accordion
                             x_column_1 = gr.Dropdown(["-- 無數據 --"], label="X軸 / 類別", info="選擇圖表主要分類或 X 軸")
                             y_column_1 = gr.Dropdown(["-- 無數據 --"], label="Y軸 / 數值", info="選擇圖表數值或 Y 軸 (計數時可忽略)")
                             group_column_1 = gr.Dropdown(["無"], label="分組列", info="用於生成多系列或堆疊")
                             size_column_1 = gr.Dropdown(["無"], label="大小列", info="用於氣泡圖等控制點的大小")
 
-                        with gr.Group(elem_classes=["card"]):
-                            gr.Markdown("**顯示選項**")
+                        with gr.Accordion("顯示選項", open=False): # 預設關閉
                             chart_width_1 = gr.Slider(300, 1600, 700, step=50, label="寬度 (px)")
                             chart_height_1 = gr.Slider(300, 1000, 450, step=50, label="高度 (px)")
                             with gr.Row():
@@ -1853,50 +1932,43 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V2", theme=gr.
                             gr.HTML('<div style="margin-top: 10px;"><b>顏色參考</b> (點擊複製)</div>')
                             gr.HTML(generate_color_cards(), elem_id="color_display_1")
 
-                        with gr.Group(elem_classes=["card"]):
-                             gr.Markdown("**圖案與自定義顏色**")
+                        with gr.Accordion("圖案與自定義顏色", open=False): # 預設關閉
                              with gr.Row():
                                  pattern1_1 = gr.Dropdown(PATTERN_TYPES, label="圖案1", value="無")
                                  pattern2_1 = gr.Dropdown(PATTERN_TYPES, label="圖案2", value="無")
                                  pattern3_1 = gr.Dropdown(PATTERN_TYPES, label="圖案3", value="無")
                              color_customization_1 = gr.Textbox(label="自定義顏色", placeholder="類別A:#FF5733, 類別B:#33CFFF", info="格式: 類別名:十六進制顏色代碼, ...", elem_classes=["color-customization-input"])
 
-                    # 圖表一：預覽與操作欄 (右側)
-                    with gr.Column(scale=2): # 調整比例
-                        gr.HTML('<div class="section-title" style="margin-top:0; margin-bottom:10px;">圖表一預覽</div>')
-                        with gr.Group(elem_classes=["chart-previewer"]):
-                            chart_output_1 = gr.Plot(label="", elem_id="chart_preview_1")
-                        gr.HTML('<div class="section-title" style="margin-top:20px; margin-bottom:10px;">操作</div>')
+                    # 圖表一：操作按鈕 (放在設定下方，預覽上方)
+                    with gr.Row():
                         update_button_1 = gr.Button("🔄 更新圖表一", variant="primary", elem_classes=["primary-button"])
-                        with gr.Row():
-                            export_img_format_1 = gr.Dropdown(["PNG", "SVG", "PDF", "JPEG"], label="導出格式", value="PNG")
-                            download_button_1 = gr.Button("💾 導出圖表一", elem_classes=["secondary-button"])
-                        export_chart_1 = gr.File(label="圖表一文件下載", interactive=False)
-                        export_chart_status_1 = gr.Textbox(label="導出狀態", lines=1, interactive=False)
-
-            # --- 分隔線 ---
-            gr.Markdown("---")
-
-            # --- 圖表二 ---
-            with gr.Group():
-                gr.Markdown("### 📊 圖表二設置")
-                with gr.Row():
-                    # 圖表二：設定欄 (左側)
-                    with gr.Column(scale=1): # 調整比例
-                        with gr.Group(elem_classes=["card"]):
-                            gr.Markdown("**基本設置**")
+                        export_img_format_1 = gr.Dropdown(["PNG", "SVG", "PDF", "JPEG"], label="導出格式", value="PNG", scale=1)
+                        download_button_1 = gr.Button("💾 導出圖表一", elem_classes=["secondary-button"], scale=1)
+                    export_chart_1 = gr.File(label="圖表一文件下載", interactive=False)
+                    export_chart_status_1 = gr.Textbox(label="導出狀態", lines=1, interactive=False)
+
+                    # 圖表一：預覽區域
+                    with gr.Group(elem_classes=["chart-previewer"]):
+                        chart_output_1 = gr.Plot(label="", elem_id="chart_preview_1")
+
+
+                # --- 圖表二 (右側 Column) ---
+                with gr.Column(scale=1):
+                    gr.Markdown("### 📊 圖表二")
+                    with gr.Group(elem_classes=["card"]): # 將所有設定放在一個卡片中
+                        with gr.Accordion("基本設置", open=True): # 使用 Accordion
                             chart_type_2 = gr.Dropdown(CHART_TYPES, label="圖表類型", value="折線圖", interactive=True)
-                            chart_title_2 = gr.Textbox(label="圖表標題", placeholder="圖表二：另一種視角")
+                            # 智能推薦只放在圖表一
+                            chart_title_2 = gr.Textbox(label="圖表標題", placeholder="圖表二標題")
                             agg_function_2 = gr.Dropdown(AGGREGATION_FUNCTIONS, label="聚合函數", value="平均值", info="選擇如何彙總 Y 軸數據")
 
-                            gr.Markdown("**數據映射**")
+                        with gr.Accordion("數據映射", open=True): # 使用 Accordion
                             x_column_2 = gr.Dropdown(["-- 無數據 --"], label="X軸 / 類別", info="選擇圖表主要分類或 X 軸")
                             y_column_2 = gr.Dropdown(["-- 無數據 --"], label="Y軸 / 數值", info="選擇圖表數值或 Y 軸 (計數時可忽略)")
                             group_column_2 = gr.Dropdown(["無"], label="分組列", info="用於生成多系列或堆疊")
                             size_column_2 = gr.Dropdown(["無"], label="大小列", info="用於氣泡圖等控制點的大小")
 
-                        with gr.Group(elem_classes=["card"]):
-                            gr.Markdown("**顯示選項**")
+                        with gr.Accordion("顯示選項", open=False): # 預設關閉
                             chart_width_2 = gr.Slider(300, 1600, 700, step=50, label="寬度 (px)")
                             chart_height_2 = gr.Slider(300, 1000, 450, step=50, label="高度 (px)")
                             with gr.Row():
@@ -1905,26 +1977,25 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V2", theme=gr.
                             color_scheme_2 = gr.Dropdown(list(COLOR_SCHEMES.keys()), label="顏色方案", value="分類 - Set2")
                             # 顏色參考共用
 
-                        with gr.Group(elem_classes=["card"]):
-                             gr.Markdown("**圖案與自定義顏色**")
+                        with gr.Accordion("圖案與自定義顏色", open=False): # 預設關閉
                              with gr.Row():
                                  pattern1_2 = gr.Dropdown(PATTERN_TYPES, label="圖案1", value="無")
                                  pattern2_2 = gr.Dropdown(PATTERN_TYPES, label="圖案2", value="無")
                                  pattern3_2 = gr.Dropdown(PATTERN_TYPES, label="圖案3", value="無")
                              color_customization_2 = gr.Textbox(label="自定義顏色", placeholder="���別C:#FFC300, 類別D:#C70039", info="格式: 類別名:十六進制顏色代碼, ...", elem_classes=["color-customization-input"])
 
-                    # 圖表二：預覽與操作欄 (右側)
-                    with gr.Column(scale=2): # 調整比例
-                        gr.HTML('<div class="section-title" style="margin-top:0; margin-bottom:10px;">圖表二預覽</div>')
-                        with gr.Group(elem_classes=["chart-previewer"]):
-                            chart_output_2 = gr.Plot(label="", elem_id="chart_preview_2")
-                        gr.HTML('<div class="section-title" style="margin-top:20px; margin-bottom:10px;">操作</div>')
+                    # 圖表二：操作按鈕
+                    with gr.Row():
                         update_button_2 = gr.Button("🔄 更新圖表二", variant="primary", elem_classes=["primary-button"])
-                        with gr.Row():
-                            export_img_format_2 = gr.Dropdown(["PNG", "SVG", "PDF", "JPEG"], label="導出格式", value="PNG")
-                            download_button_2 = gr.Button("💾 導出圖表二", elem_classes=["secondary-button"])
-                        export_chart_2 = gr.File(label="圖表二文件下載", interactive=False)
-                        export_chart_status_2 = gr.Textbox(label="導出狀態", lines=1, interactive=False)
+                        export_img_format_2 = gr.Dropdown(["PNG", "SVG", "PDF", "JPEG"], label="導出格式", value="PNG", scale=1)
+                        download_button_2 = gr.Button("💾 導出圖表二", elem_classes=["secondary-button"], scale=1)
+                    export_chart_2 = gr.File(label="圖表二文件下載", interactive=False)
+                    export_chart_status_2 = gr.Textbox(label="導出狀態", lines=1, interactive=False)
+
+                    # 圖表二：預覽區域
+                    with gr.Group(elem_classes=["chart-previewer"]):
+                        chart_output_2 = gr.Plot(label="", elem_id="chart_preview_2")
+
 
         # --- 使用說明頁籤 ---
         with gr.TabItem("❓ 使用說明", id=2):
@@ -1934,9 +2005,11 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V2", theme=gr.
                 <h3>數據輸入</h3>
                 <ul><li>點擊 "上傳 CSV / Excel 文件" 按鈕選擇本地文件，或在文本框中直接貼上數據。</li><li>支持逗號 (<code>,</code>)、製表符 (<code>Tab</code>) 或空格 (<code> </code>) 分隔的數據。</li><li>第一行通常被視為欄位名稱（表頭）。</li><li>數據載入或解析成功後，會在右側顯示預覽。</li><li>您可以使用 "導出預覽數據" 功能將處理後的數據保存為 CSV、Excel 或 JSON 格式。</li></ul>
                 <h3>圖表創建與比較</h3>
-                <ul><li>此頁面提供兩個獨立的圖表設置和預覽區域（圖表一、圖表二）。</li><li><strong>智能推薦：</strong>點擊 "智能推薦 (圖表一)" 按鈕，系統會根據數據結構嘗試為圖表一推薦合適的設置。</li><li><strong>圖表類型：</strong>選擇您想創建的圖表樣式。</li><li><strong>聚合函數：</strong>決定如何匯總 Y 軸數據。選擇 "計數" 時，系統會計算 X 軸（和分組列）組合的出現次數，此時無需選擇 Y 軸列。</li><li><strong>數據映射：</strong><ul><li><strong>X軸/類別：</strong>圖表的主要分類軸。</li><li><strong>Y軸/數值：</strong>圖表的數值軸。若聚合函數為 "計數"，此項可忽略。</li><li><strong>分組列：</strong>用於創建堆疊、分組或多系列圖表。</li><li><strong>大小列：</strong>主要用於氣泡圖，控制點的大小。</li></ul></li><li><strong>顯示選項：</strong>調整圖表的外觀，如寬度、高度、顏色方案、是否顯示網格和圖例。</li><li><strong>圖案與自定義顏色：</strong><ul><li>為圖表系列添加不同的填充圖案（適用於部分圖表類型，如條形圖）。</li><li>通過 "類別名:顏色代碼" 的格式為特定類別指定顏色 (例如 <code>正面:#2ca02c, 負面:#d62728</code>)。</li></ul></li><li>點擊 "更新圖表" 按鈕生成或刷新對應的圖表預覽。</li><li>使用 "導出圖表" 功能將生成的圖表保存為圖片文件。</li></ul>
+                <ul><li>此頁面提供左右兩個獨立的圖表設置和預覽區域（圖表一、圖表二）。</li><li><strong>智能推薦：</strong>點擊圖表一的 "智能推薦" 按鈕，系統會根據數據結構嘗試為圖表一推薦合適的設置。</li><li><strong>圖表類型：</strong>選擇您想創建的圖表樣式。</li><li><strong>聚合函數：</strong>決定如何匯總 Y 軸數據。
+                    <ul><li><strong style="color: #7367f0;">【重要】單欄計數：</strong>若要統計某一欄位中各個項目出現的次數（例如，統計不同產品的銷售筆數），請在 <strong>X軸/類別</strong> 選擇該欄位，並將 <strong>聚合函數</strong> 設為 <strong>計數</strong>，此時 <strong>無需��擇 Y軸/數值</strong>。然後選擇「長條圖」或「圓餅圖」。</li></ul>
+                </li><li><strong>數據映射：</strong><ul><li><strong>X軸/類別：</strong>圖表的主要分類軸。</li><li><strong>Y軸/數值：</strong>圖表的數值軸。若聚合函數為 "計數"，此項可忽略。</li><li><strong>分組列：</strong>用於創建堆疊、分組或多系列圖表。</li><li><strong>大小列：</strong>主要用於氣泡圖，控制點的大小。</li></ul></li><li><strong>顯示選項：</strong>調整圖表的外觀，如寬度、高度、顏色方案、是否顯示網格和圖例。</li><li><strong>圖案與自定義顏色：</strong><ul><li>為圖表系列添加不同的填充圖案（適用於部分圖表類型，如條形圖）。</li><li>通過 "類別名:顏色代碼" 的格式為特定類別指定顏色 (例如 <code>正面:#2ca02c, 負面:#d62728</code>)。</li></ul></li><li>點擊 "更新圖表" 按鈕生成或刷新對應的圖表預覽。</li><li>使用 "導出圖表" 功能將生成的圖表保存為圖片文件。</li></ul>
                 <h3>提示</h3>
-                <ul><li>如果圖表無法顯示或出現錯誤，請檢查數據格式、列選擇以及聚合函數是否合理。</li><li>確保數值列確實包含數字，日期列包含有效的日期格式。</li><li>部分圖表類型對數據結構有特定要求（例如，熱力圖、甘特圖）。</li></ul>
+                <ul><li>如果圖表無法顯示或出現錯誤，請檢查數據格式、列選擇以及聚合函數是否合理。</li><li>確保數值列確實包含數字，日期列包含有效的日期格式。</li><li>部分圖表類型對數據結構有特定要求（例如，熱力圖、甘特圖）。</li><li>如果下拉選單仍然有問題，嘗試刷新頁面或在不同的瀏覽器中打開。</li></ul>
                 """)
 
     # =========================================
@@ -1950,7 +2023,7 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V2", theme=gr.
         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
+        return [df, status_msg, preview_df] + list(col_updates) * 2 # 更新兩組下拉列表
 
     upload_button.click(process_upload, inputs=[file_upload], outputs=[data_state, upload_status]).then(
         load_data_and_update_ui, inputs=[data_state, upload_status],
@@ -1973,8 +2046,12 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V2", theme=gr.
     chart_inputs_1 = [data_state, chart_type_1, x_column_1, y_column_1, group_column_1, size_column_1, color_scheme_1, patterns_state_1, chart_title_1, chart_width_1, chart_height_1, show_grid_1, show_legend_1, agg_function_1, custom_colors_state_1]
     update_button_1.click(create_plot, inputs=chart_inputs_1, outputs=[chart_output_1])
     def auto_update_chart_1(*inputs): return create_plot(*inputs)
-    for input_component in chart_inputs_1:
-         if not isinstance(input_component, gr.State): input_component.change(auto_update_chart_1, inputs=chart_inputs_1, outputs=[chart_output_1])
+    # 綁定 change 事件到會影響圖表的 UI 組件
+    for input_component in [chart_type_1, x_column_1, y_column_1, group_column_1, size_column_1, color_scheme_1, chart_title_1, chart_width_1, chart_height_1, show_grid_1, show_legend_1, agg_function_1, color_customization_1, pattern1_1, pattern2_1, pattern3_1]:
+        # 確保組件不是 None 且有 change 方法
+        if input_component is not None and hasattr(input_component, 'change'):
+             input_component.change(auto_update_chart_1, inputs=chart_inputs_1, outputs=[chart_output_1])
+
 
     # --- 圖表一：導出圖表 ---
     download_button_1.click(download_figure, inputs=[chart_output_1, export_img_format_1], outputs=[export_chart_1, export_chart_status_1])
@@ -1988,7 +2065,7 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V2", theme=gr.
 
     recommend_button_1.click(recommend_chart_settings, inputs=[data_state], outputs=[recommendation_state]).then(
         apply_recommendation, 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, outputs=[chart_output_1])
+    ).then(create_plot, inputs=chart_inputs_1, outputs=[chart_output_1]) # 應用推薦後觸發更新
 
     # --- 圖表二：顏色和圖案狀態 ---
     color_customization_2.change(parse_custom_colors, inputs=[color_customization_2], outputs=[custom_colors_state_2])
@@ -1999,8 +2076,10 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V2", theme=gr.
     chart_inputs_2 = [data_state, chart_type_2, x_column_2, y_column_2, group_column_2, size_column_2, color_scheme_2, patterns_state_2, chart_title_2, chart_width_2, chart_height_2, show_grid_2, show_legend_2, agg_function_2, custom_colors_state_2]
     update_button_2.click(create_plot, inputs=chart_inputs_2, outputs=[chart_output_2])
     def auto_update_chart_2(*inputs): return create_plot(*inputs)
-    for input_component in chart_inputs_2:
-         if not isinstance(input_component, gr.State): input_component.change(auto_update_chart_2, inputs=chart_inputs_2, outputs=[chart_output_2])
+    # 綁定 change 事件到會影響圖表的 UI 組件
+    for input_component in [chart_type_2, x_column_2, y_column_2, group_column_2, size_column_2, color_scheme_2, chart_title_2, chart_width_2, chart_height_2, show_grid_2, show_legend_2, agg_function_2, color_customization_2, pattern1_2, pattern2_2, pattern3_2]:
+        if input_component is not None and hasattr(input_component, 'change'):
+             input_component.change(auto_update_chart_2, inputs=chart_inputs_2, outputs=[chart_output_2])
 
     # --- 圖表二：導出圖表 ---
     download_button_2.click(download_figure, inputs=[chart_output_2, export_img_format_2], outputs=[export_chart_2, export_chart_status_2])