Update app.py

app.py

@@ -1273,8 +1273,500 @@ def recommend_chart_settings(df):
 """
 Gradio 應用程式：進階數據可視化工具
 作者：Gemini
-版本：1.1 (修正 Dataframe height 參數錯誤)
-描述：此部分包含 Gradio UI 介面定義、事件處理和應用程式啟動。
+版本：2.0 (完整修復版 - 簡化佈局，移除下拉選單 CSS)
+描述：包含所有功能的完整程式碼，旨在解決下拉選單問題。
+"""
+
+# =========================================
+# == 套件導入 (Import Libraries) ==
+# =========================================
+import gradio as gr
+import pandas as pd
+import numpy as np
+import plotly.express as px
+import plotly.graph_objects as go
+import io
+import base64
+from PIL import Image
+# import matplotlib.pyplot as plt # Matplotlib/Seaborn 在此版本中未使用，暫時註解
+# import seaborn as sns           # Matplotlib/Seaborn 在此版本中未使用，暫時註解
+from plotly.subplots import make_subplots
+import re
+import json
+import colorsys
+import traceback # 用於更詳細的錯誤追蹤
+
+# =========================================
+# == 常數定義 (Constants) ==
+# =========================================
+
+# 圖表類型選項 (Chart Type Options)
+CHART_TYPES = [
+    "長條圖", "堆疊長條圖", "百分比堆疊長條圖", "群組長條圖", "水平長條圖",
+    "折線圖", "多重折線圖", "階梯折線圖",
+    "區域圖", "堆疊區域圖", "百分比堆疊區域圖",
+    "圓餅圖", "環形圖",
+    "散點圖", "氣泡圖",
+    "直方圖", "箱型圖", "小提琴圖",
+    "熱力圖", "樹狀圖",
+    "雷達圖", "漏斗圖", "極座標圖", "甘特圖"
+]
+
+# 顏色方案選項 (Color Scheme Options)
+COLOR_SCHEMES = {
+    "預設 (Plotly)": px.colors.qualitative.Plotly,
+    "分類 - D3": px.colors.qualitative.D3, "分類 - G10": px.colors.qualitative.G10,
+    "分類 - T10": px.colors.qualitative.T10, "分類 - Alphabet": px.colors.qualitative.Alphabet,
+    "分類 - Dark24": px.colors.qualitative.Dark24, "分類 - Light24": px.colors.qualitative.Light24,
+    "分類 - Set1": px.colors.qualitative.Set1, "分類 - Set2": px.colors.qualitative.Set2,
+    "分類 - Set3": px.colors.qualitative.Set3, "分類 - Pastel": px.colors.qualitative.Pastel,
+    "分類 - Pastel1": px.colors.qualitative.Pastel1, "分類 - Pastel2": px.colors.qualitative.Pastel2,
+    "分類 - Antique": px.colors.qualitative.Antique, "分類 - Bold": px.colors.qualitative.Bold,
+    "分類 - Prism": px.colors.qualitative.Prism, "分類 - Safe": px.colors.qualitative.Safe,
+    "分類 - Vivid": px.colors.qualitative.Vivid,
+    "連續 - Viridis": px.colors.sequential.Viridis, "連續 - Plasma": px.colors.sequential.Plasma,
+    "連續 - Inferno": px.colors.sequential.Inferno, "連續 - Magma": px.colors.sequential.Magma,
+    "連續 - Cividis": px.colors.sequential.Cividis, "連續 - Blues": px.colors.sequential.Blues,
+    "連續 - Reds": px.colors.sequential.Reds, "連續 - Greens": px.colors.sequential.Greens,
+    "連續 - Purples": px.colors.sequential.Purples, "連續 - Oranges": px.colors.sequential.Oranges,
+    "連續 - Greys": px.colors.sequential.Greys, "連續 - Rainbow": px.colors.sequential.Rainbow,
+    "連續 - Turbo": px.colors.sequential.Turbo, "連續 - Electric": px.colors.sequential.Electric,
+    "連續 - Hot": px.colors.sequential.Hot, "連續 - Teal": px.colors.sequential.Teal,
+    "發散 - Spectral": px.colors.diverging.Spectral, "發散 - RdBu": px.colors.diverging.RdBu,
+    "發散 - PRGn": px.colors.diverging.PRGn, "發散 - PiYG": px.colors.diverging.PiYG,
+    "發散 - BrBG": px.colors.diverging.BrBG, "發散 - Geyser": px.colors.diverging.Geyser,
+    "循環 - Twilight": px.colors.cyclical.Twilight, "循環 - IceFire": px.colors.cyclical.IceFire,
+}
+
+# 圖案填充選項 (Pattern Fill Options)
+PATTERN_TYPES = ["無", "/", "\\", "x", "-", "|", "+", "."]
+
+# 聚合函數選項 (Aggregation Function Options)
+AGGREGATION_FUNCTIONS = [
+    "計數", "求和", "平均值", "中位數", "最大值", "最小值", "標準差", "變異數", "第一筆", "最後一筆"
+]
+
+# =========================================
+# == 輔助函數 (Helper Functions) ==
+# =========================================
+
+# --- 顏色處理相關 ---
+COLOR_CARD_STYLE = """<div style="display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px;">{color_cards}</div>"""
+COLOR_CARD_TEMPLATE = """<div title="{color_name} ({color_hex})" style="width: 20px; height: 20px; background-color: {color_hex}; border-radius: 3px; cursor: pointer; border: 1px solid #ddd; transition: transform 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.1);" onclick="copyToClipboard('{color_hex}')" onmouseover="this.style.transform='scale(1.15)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.2)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='0 1px 2px rgba(0,0,0,0.1)';"></div>"""
+COPY_SCRIPT = """
+<script>
+function copyToClipboard(text) {
+    navigator.clipboard.writeText(text).then(() => {
+        let notificationContainer = document.getElementById('clipboard-notification-container');
+        if (!notificationContainer) {
+            notificationContainer = document.createElement('div');
+            notificationContainer.id = 'clipboard-notification-container';
+            notificationContainer.style.position = 'fixed'; notificationContainer.style.bottom = '20px'; notificationContainer.style.right = '20px'; notificationContainer.style.zIndex = '10000'; notificationContainer.style.display = 'flex'; notificationContainer.style.flexDirection = 'column'; notificationContainer.style.alignItems = 'flex-end';
+            document.body.appendChild(notificationContainer);
+        }
+        const notification = document.createElement('div');
+        notification.textContent = '已複製: ' + text;
+        notification.style.background = 'rgba(0, 0, 0, 0.7)'; notification.style.color = 'white'; notification.style.padding = '8px 15px'; notification.style.borderRadius = '4px'; notification.style.marginTop = '5px'; notification.style.fontSize = '14px'; notification.style.opacity = '1'; notification.style.transition = 'opacity 0.5s ease-out'; notification.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';
+        notificationContainer.appendChild(notification);
+        setTimeout(() => {
+            notification.style.opacity = '0';
+            setTimeout(() => { notification.remove(); }, 500);
+        }, 1500);
+    }).catch(err => { console.error('無法複製顏色代碼: ', err); });
+}
+</script>
+"""
+COMMON_COLORS = {
+    "紅色": "#FF0000", "亮紅": "#FF5733", "深紅": "#C70039", "橙色": "#FFA500", "亮橙": "#FFC300", "深橙": "#D35400",
+    "黃色": "#FFFF00", "亮黃": "#F1C40F", "金色": "#FFD700", "綠色": "#008000", "亮綠": "#2ECC71", "深綠": "#1E8449",
+    "橄欖綠": "#808000", "藍色": "#0000FF", "亮藍": "#3498DB", "深藍": "#2874A6", "天藍": "#87CEEB", "紫色": "#800080",
+    "亮紫": "#9B59B6", "深紫": "#6C3483", "薰衣草紫": "#E6E6FA", "粉紅色": "#FFC0CB", "亮粉": "#FF69B4", "深粉": "#C71585",
+    "棕色": "#A52A2A", "亮棕": "#E59866", "深棕": "#6E2C00", "青色": "#00FFFF", "藍綠色": "#008080", "綠松石色": "#40E0D0",
+    "洋紅": "#FF00FF", "紫紅色": "#DC143C", "灰色": "#808080", "淺灰": "#D3D3D3", "深灰": "#696969", "石板灰": "#708090",
+    "黑色": "#000000", "白色": "#FFFFFF", "米色": "#F5F5DC",
+}
+def generate_gradient_colors(start_color, end_color, steps=10):
+    def hex_to_rgb(hex_color):
+        hex_color = hex_color.lstrip('#')
+        return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))
+    def rgb_to_hex(rgb):
+        r, g, b = [max(0, min(255, int(c))) for c in rgb]
+        return '#{:02x}{:02x}{:02x}'.format(r, g, b)
+    try:
+        start_rgb, end_rgb = hex_to_rgb(start_color), hex_to_rgb(end_color)
+        if steps <= 1: return [start_color] if steps == 1 else []
+        r_step, g_step, b_step = [(end_rgb[i] - start_rgb[i]) / (steps - 1) for i in range(3)]
+        return [rgb_to_hex((start_rgb[0] + r_step * i, start_rgb[1] + g_step * i, start_rgb[2] + b_step * i)) for i in range(steps)]
+    except Exception as e:
+        print(f"生成漸變色時出錯: {e}"); return [start_color, end_color]
+GRADIENTS = {
+    "紅→黃": generate_gradient_colors("#FF0000", "#FFFF00"), "藍→綠": generate_gradient_colors("#0000FF", "#00FF00"),
+    "紫→粉": generate_gradient_colors("#800080", "#FFC0CB"), "紅→藍": generate_gradient_colors("#FF0000", "#0000FF"),
+    "黑→白": generate_gradient_colors("#000000", "#FFFFFF"), "藍→紅 (發散)": generate_gradient_colors("#0000FF", "#FF0000"),
+    "綠→紫 (發散)": generate_gradient_colors("#00FF00", "#800080"),
+    "彩虹 (簡易)": ["#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#0000FF", "#4B0082", "#9400D3"]
+}
+def generate_color_cards():
+    common_cards = "".join([COLOR_CARD_TEMPLATE.format(color_name=name, color_hex=hex_code) for name, hex_code in COMMON_COLORS.items()])
+    gradient_cards_html = ""
+    for name, colors in GRADIENTS.items():
+        cards = "".join([COLOR_CARD_TEMPLATE.format(color_name=f"{name} {i+1}/{len(colors)}", color_hex=color) for i, color in enumerate(colors)])
+        gradient_cards_html += f"""<div style="font-weight: bold; margin-top: 10px; font-size: 14px; color: #555;">{name}</div>{COLOR_CARD_STYLE.format(color_cards=cards)}"""
+    return f"""<div style="font-weight: bold; margin-top: 10px; font-size: 14px; color: #555;">常用單色</div>{COLOR_CARD_STYLE.format(color_cards=common_cards)}{gradient_cards_html}{COPY_SCRIPT}"""
+
+# --- 數據處理相關 ---
+def agg_function_map(func_name):
+    mapping = {"計數": "count", "求和": "sum", "平均值": "mean", "中位數": "median", "最大值": "max", "最小值": "min", "標準差": "std", "變異數": "var", "第一筆": "first", "最後一筆": "last"}
+    return mapping.get(func_name, "count")
+def parse_custom_colors(color_text):
+    custom_colors = {}
+    if color_text and isinstance(color_text, str) and color_text.strip():
+        try:
+            pairs = [p.strip() for p in color_text.split(',') if p.strip()]
+            for pair in pairs:
+                if ':' in pair:
+                    key, value = pair.split(':', 1); key, value = key.strip(), value.strip()
+                    if re.match(r"^#(?:[0-9a-fA-F]{3}){1,2}$", value): custom_colors[key] = value
+                    else: print(f"警告：忽略無效的顏色代碼 '{value}' for key '{key}'")
+        except Exception as e: print(f"解析自定義顏色時出錯: {e}"); return {}
+    return custom_colors
+def update_patterns(*patterns_input):
+    return [p for p in patterns_input if p and p != "無"]
+
+# =========================================
+# == 數據處理函數 (Data Processing Functions) ==
+# =========================================
+def process_upload(file):
+    if file is None: return None, "❌ 未上傳任何文件。"
+    try:
+        file_path = file.name; file_type = file_path.split('.')[-1].lower()
+        if file_type == 'csv':
+            try: df = pd.read_csv(file_path, encoding='utf-8')
+            except UnicodeDecodeError:
+                try: df = pd.read_csv(file_path, encoding='big5')
+                except Exception as e: return None, f"❌ 無法使用 UTF-8 或 Big5 解碼 CSV 文件: {e}"
+            except Exception as e: return None, f"❌ 讀取 CSV 文件時出錯: {e}"
+        elif file_type in ['xls', 'xlsx']:
+            try: df = pd.read_excel(file_path)
+            except Exception as e: return None, f"❌ 讀取 Excel 文件時出錯: {e}"
+        else: return None, f"❌ 不支持的文件類型: '{file_type}'。請上傳 CSV 或 Excel 文件。"
+        df.columns = df.columns.str.strip()
+        return df, f"✅ 成功載入 '{file_path.split('/')[-1]}'，共 {len(df)} 行，{len(df.columns)} 列。"
+    except Exception as e: print(f"處理上傳文件時發生未預期錯誤: {e}"); traceback.print_exc(); return None, f"❌ 處理文件時發生未預期錯誤: {e}"
+
+def parse_data(text_data):
+    if not text_data or not text_data.strip(): return None, "❌ 未輸入任何數據。"
+    try:
+        data_io = io.StringIO(text_data.strip()); first_line = data_io.readline().strip(); data_io.seek(0)
+        if ',' in first_line: separator = ','
+        elif '\t' in first_line: separator = '\t'
+        elif ' ' in first_line: separator = r'\s+'
+        else: separator = ','
+        try: df = pd.read_csv(data_io, sep=separator)
+        except pd.errors.ParserError as pe: return None, f"❌ 解析數據時出錯：可能是分隔符錯誤或數據格式問題。檢測到的分隔符: '{separator}'. 錯誤: {pe}"
+        except Exception as e: return None, f"❌ 解析數據時出錯: {e}"
+        df.columns = df.columns.str.strip()
+        return df, f"✅ 成功解析數據，共 {len(df)} 行，{len(df.columns)} 列。"
+    except Exception as e: print(f"解析文本數據時發生未預期錯誤: {e}"); traceback.print_exc(); return None, f"❌ 解析數據時發生未預期錯誤: {e}"
+
+def update_columns(df):
+    default_choices = ["-- 無數據 --"]
+    if df is None or df.empty:
+        return (gr.Dropdown(choices=default_choices, value=default_choices[0], label="X軸 / 類別"),
+                gr.Dropdown(choices=default_choices, value=default_choices[0], label="Y軸 / 數值"),
+                gr.Dropdown(choices=["無"] + default_choices, value="無", label="分組列"),
+                gr.Dropdown(choices=["無"] + default_choices, value="無", label="大小列"))
+    columns = df.columns.tolist()
+    x_default = columns[0] if columns else None
+    y_default = columns[1] if len(columns) > 1 else (columns[0] if columns else None)
+    valid_columns = [col for col in columns if col is not None and col != ""]
+    group_choices, size_choices = ["無"] + valid_columns, ["無"] + valid_columns
+    return (gr.Dropdown(choices=valid_columns, value=x_default, label="X軸 / 類別"),
+            gr.Dropdown(choices=valid_columns, value=y_default, label="Y軸 / 數值"),
+            gr.Dropdown(choices=group_choices, value="無", label="分組列"),
+            gr.Dropdown(choices=size_choices, value="無", label="大小列"))
+
+# =========================================
+# == 圖表創建核心函數 (Core Plotting Function) ==
+# =========================================
+def create_plot(df, chart_type, x_column, y_column, group_column=None, size_column=None,
+                color_scheme_name="預設 (Plotly)", patterns=[], title="", width=800, height=500,
+                show_grid=True, show_legend=True, agg_func_name="計數", custom_colors_dict={}):
+    fig = go.Figure()
+    try:
+        # --- 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 軸或數值列。")
+        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}' 不在數據中。")
+        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}' 不在數據中。")
+
+        group_col, size_col = (None if col == "無" else col for col in [group_column, size_column])
+        df_processed = df.copy()
+
+        # --- 2. 數據類型轉換與準備 ---
+        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]:
+                         df_processed[col] = pd.to_numeric(df_processed[col], errors='coerce')
+                    elif col in [x_column, group_col]:
+                         df_processed[col] = df_processed[col].astype(str)
+                except Exception as e: print(f"警告：轉換列 '{col}' 類型時出錯: {e}")
+
+        # --- 3. 數據聚合 (如果需要) ---
+        needs_aggregation = chart_type not in ["散點圖", "氣泡圖", "直方圖", "箱型圖", "小提琴圖", "甘特圖"]
+        agg_df = None
+        y_col_agg = y_column # 預設 Y 軸列名
+        if needs_aggregation:
+            grouping_cols = [x_column] + ([group_col] if group_col else [])
+            if agg_func_name == "計數":
+                agg_df = df_processed.groupby(grouping_cols, observed=False).size().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}'。")
+                try:
+                    agg_df = df_processed.groupby(grouping_cols, observed=False)[y_column].agg(agg_func_pd).reset_index()
+                    # y_col_agg 保持為 y_column
+                except Exception as agg_e: raise ValueError(f"執行聚合 '{agg_func_name}' 時出錯: {agg_e}")
+        else:
+            agg_df = df_processed
+            # y_col_agg 保持為 y_column
+
+        # --- 4. 獲取顏色方案 ---
+        colors = COLOR_SCHEMES.get(color_scheme_name, px.colors.qualitative.Plotly)
+
+        # --- 5. 創建圖表 (核心邏輯) ---
+        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)
+        elif chart_type == "堆疊長條圖":
+            fig = px.bar(agg_df, x=x_column, y=y_col_agg, color=group_col, barmode='stack', **fig_params)
+        elif chart_type == "百分比堆疊長條圖":
+             fig = px.bar(agg_df, x=x_column, y=y_col_agg, color=group_col, barmode='relative', text_auto='.1%', **fig_params)
+             fig.update_layout(yaxis_title="百分比 (%)")
+        elif chart_type == "群組長條圖":
+            fig = px.bar(agg_df, x=x_column, y=y_col_agg, color=group_col, barmode='group', **fig_params)
+        elif chart_type == "水平長條圖":
+            fig = px.bar(agg_df, y=x_column, x=y_col_agg, color=group_col, orientation='h', **fig_params)
+        elif chart_type == "折線圖":
+            fig = px.line(agg_df, x=x_column, y=y_col_agg, color=group_col, markers=True, **fig_params)
+        elif chart_type == "多重折線圖":
+            fig = px.line(agg_df, x=x_column, y=y_col_agg, color=group_col, markers=True, **fig_params)
+        elif chart_type == "階梯折線圖":
+            fig = px.line(agg_df, x=x_column, y=y_col_agg, color=group_col, line_shape='hv', **fig_params)
+        elif chart_type == "區域圖":
+            fig = px.area(agg_df, x=x_column, y=y_col_agg, color=group_col, **fig_params)
+        elif chart_type == "堆疊區域圖":
+            fig = px.area(agg_df, x=x_column, y=y_col_agg, color=group_col, groupnorm=None, **fig_params)
+        elif chart_type == "百分比堆疊區域圖":
+             fig = px.area(agg_df, x=x_column, y=y_col_agg, color=group_col, groupnorm='percent', **fig_params)
+             fig.update_layout(yaxis_title="百分比 (%)")
+        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])]))
+        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])]))
+        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("氣泡圖需要指定 '大小列'。")
+            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 == "直方圖":
+            fig = px.histogram(agg_df, x=x_column, color=group_col, **fig_params); fig.update_layout(yaxis_title="計數")
+        elif chart_type == "箱型圖":
+            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)
+        elif chart_type == "小提琴圖":
+            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:
+                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)
+            except Exception as pivot_e: raise ValueError(f"創建熱力圖的數據透視表時出錯: {pivot_e}")
+        elif chart_type == "樹狀圖":
+             path = [group_col, x_column] if group_col else [x_column]
+             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 創建
+            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])
+                 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()
+                 for i, category in enumerate(categories):
+                     subset = agg_df[agg_df[group_col] == category]; theta = subset[x_column].tolist(); r = subset[y_col_agg].tolist(); theta.append(theta[0]); r.append(r[0])
+                     color = custom_colors_dict.get(str(category), colors[i % len(colors)])
+                     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 == "漏斗圖":
+            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 == "極座標圖":
+            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)
+                 fig.update_layout(xaxis_type="date")
+             except Exception as gantt_e: raise ValueError(f"創建甘特圖時出錯: {gantt_e}")
+        else:
+            print(f"警告：未知的圖表類型 '{chart_type}'，使用長條圖代替。")
+            fig = px.bar(agg_df, x=x_column, y=y_col_agg, color=group_col, **fig_params)
+        # --- (繪圖邏輯結束) ---
+
+        # --- 6. 應用圖案 (如果支持) ---
+        if patterns:
+            try:
+                num_traces = len(fig.data)
+                if chart_type in ["長條圖", "堆疊長條圖", "百分比堆疊長條圖", "群組長條圖", "水平長條圖", "圓餅圖", "環形圖"]:
+                    for i, trace in enumerate(fig.data):
+                        pattern_index = i % len(patterns)
+                        if patterns[pattern_index] != "無": trace.marker.pattern.shape = patterns[pattern_index]; trace.marker.pattern.solidity = 0.4; trace.marker.pattern.fillmode = "replace"
+                elif chart_type in ["散點圖", "氣泡圖"]:
+                     symbol_map = {"/": "diamond", "\\": "square", "x": "x", "-": "line-ew", "|": "line-ns", "+": "cross", ".": "circle-dot"}
+                     for i, trace in enumerate(fig.data):
+                         pattern_index = i % len(patterns); symbol = symbol_map.get(patterns[pattern_index])
+                         if symbol: trace.marker.symbol = symbol
+                elif chart_type in ["折線圖", "多重折線圖", "階梯折線圖"]:
+                     dash_map = {"/": "dash", "\\": "dot", "x": "dashdot", "-": "longdash", "|": "solid", "+": "solid", ".": "solid"}
+                     for i, trace in enumerate(fig.data):
+                         pattern_index = i % len(patterns); dash = dash_map.get(patterns[pattern_index])
+                         if dash: trace.line.dash = dash
+                elif chart_type in ["區域圖", "堆疊區域圖", "百分比堆疊區域圖"]:
+                     print("提示：區域圖的圖案填充支持有限，將嘗試應用線型。")
+                     dash_map = {"/": "dash", "\\": "dot", "x": "dashdot", "-": "longdash"}
+                     for i, trace in enumerate(fig.data):
+                         pattern_index = i % len(patterns); dash = dash_map.get(patterns[pattern_index])
+                         if dash: trace.line.dash = dash; trace.fill = 'tonexty' if 'stackgroup' in trace else 'tozeroy'
+            except Exception as pattern_e: print(f"應用圖案時出錯: {pattern_e}")
+
+        # --- 7. 更新佈局 ---
+        fig.update_layout(
+            showlegend=show_legend, xaxis=dict(showgrid=show_grid), yaxis=dict(showgrid=show_grid),
+            template="plotly_white", margin=dict(l=60, r=40, t=80 if title else 40, b=60),
+            font=dict(family="Inter, sans-serif", size=12),
+            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,
+        )
+        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)
+
+    except ValueError as ve:
+        print(f"圖表創建錯誤 (ValueError): {ve}"); traceback.print_exc()
+        fig = go.Figure(); fig.add_annotation(text=f"⚠️ 創建圖表時出錯:<br>{ve}", align='left', showarrow=False, font=dict(size=14, color="red")); fig.update_layout(xaxis_visible=False, yaxis_visible=False)
+    except Exception as e:
+        error_message = f"❌ 創建圖表時發生未預期錯誤:\n{traceback.format_exc()}"; print(error_message)
+        fig = go.Figure(); user_error_msg = f"⚠️ 創建圖表時發生內部錯誤。<br>請檢查數據和設置。<br>詳細錯誤: {str(e)[:100]}..."; fig.add_annotation(text=user_error_msg, align='left', showarrow=False, font=dict(size=14, color="red")); fig.update_layout(xaxis_visible=False, yaxis_visible=False)
+    return fig
+
+# =========================================
+# == 導出與下載函數 (Export & Download Functions) ==
+# =========================================
+def export_data(df, format_type):
+    if df is None or df.empty: return None, "❌ 沒有數據可以導出。"
+    try:
+        if format_type == "CSV": filename = "exported_data.csv"; df.to_csv(filename, index=False, encoding='utf-8-sig')
+        elif format_type == "Excel": filename = "exported_data.xlsx"; df.to_excel(filename, index=False)
+        elif format_type == "JSON": filename = "exported_data.json"; df.to_json(filename, orient="records", indent=4, force_ascii=False)
+        else: return None, f"❌ 不支持的導出格式: {format_type}"
+        return filename, f"✅ 數據已成功準備為 {format_type} 格式，點擊下方鏈接下載。"
+    except Exception as e: print(f"導出數據時出錯: {e}"); traceback.print_exc(); return None, f"❌ 導出數據時出錯: {e}"
+
+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}"
+        fig.write_image(filename, format=format_lower)
+        return filename, f"✅ 圖表已成功準備為 {format_type} 格式，點擊下方鏈接下載。"
+    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}"
+
+# =========================================
+# == 智能推薦函數 (Recommendation Function) ==
+# =========================================
+def recommend_chart_settings(df):
+    recommendation = {"chart_type": None, "x_column": None, "y_column": None, "group_column": "無", "agg_function": None, "message": "無法提供推薦。"}
+    if df is None or df.empty: recommendation["message"] = "ℹ️ 請先上傳或輸入數據。"; return recommendation
+    columns = df.columns.tolist(); num_cols = df.select_dtypes(include=np.number).columns.tolist(); cat_cols = df.select_dtypes(include=['object', 'category', 'string']).columns.tolist()
+    date_cols = [col for col in columns if pd.api.types.is_datetime64_any_dtype(df[col]) or ('日期' in col or '時間' in col)]
+    try:
+        if date_cols and num_cols: recommendation.update({"chart_type": "折線圖", "x_column": date_cols[0], "y_column": num_cols[0], "agg_function": "平均值", "message": f"檢測到時間列 '{date_cols[0]}' 和數值列 '{num_cols[0]}'，推薦使用折線圖顯示趨勢。"})
+        elif len(num_cols) >= 2: recommendation.update({"chart_type": "散點圖", "x_column": num_cols[0], "y_column": num_cols[1], "agg_function": None, "message": f"檢測到數值列 '{num_cols[0]}' 和 '{num_cols[1]}'，推薦使用散點圖分析相關性。"})
+        elif cat_cols and num_cols: recommendation.update({"chart_type": "長條圖", "x_column": cat_cols[0], "y_column": num_cols[0], "agg_function": "平均值", "message": f"檢測到類別列 '{cat_cols[0]}' 和數值列 '{num_cols[0]}'，推薦使用長條圖比較各類別的數值。"})
+        elif len(cat_cols) >= 2: recommendation.update({"chart_type": "堆疊長條圖", "x_column": cat_cols[0], "y_column": None, "group_column": cat_cols[1], "agg_function": "計數", "message": f"檢測到多個類別列 ('{cat_cols[0]}', '{cat_cols[1]}', ...)，推薦使用堆疊長條圖顯示計數分佈。"})
+        elif cat_cols: recommendation.update({"chart_type": "長條圖", "x_column": cat_cols[0], "y_column": None, "agg_function": "計數", "message": f"檢測到類別列 '{cat_cols[0]}'，推薦使用長條圖顯示其頻數分佈。"})
+        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
+    return recommendation
+
+# =========================================
+# == CSS 樣式 (CSS Styling) ==
+# =========================================
+CUSTOM_CSS = """
+/* --- 全局和容器 --- */
+.gradio-container { font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f8f9fa; }
+/* --- 應用程式標頭 --- */
+.app-header { text-align: center; margin-bottom: 25px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 25px 20px; border-radius: 12px; color: white; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); }
+.app-title { font-size: 2.2em; font-weight: 700; margin: 0; letter-spacing: 1px; text-shadow: 1px 1px 3px rgba(0,0,0,0.2); }
+.app-subtitle { font-size: 1.1em; color: #e0e0e0; margin-top: 8px; font-weight: 300; }
+/* --- 區塊標題 --- */
+.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: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: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: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; }
+.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; }
+.gradio-dataframe tr:nth-child(even) { background-color: #f8f9fa; }
+.color-customization-input textarea { font-family: 'Courier New', Courier, monospace; font-size: 0.9em; }
+.gradio-tabs .tab-nav button { padding: 10px 20px !important; font-weight: 500 !important; border-radius: 8px 8px 0 0 !important; transition: background-color 0.2s ease, color 0.2s ease !important; }
+.gradio-tabs .tab-nav button.selected { background-color: #667eea !important; color: white !important; border-bottom: none !important; }
+.gradio-slider label { margin-bottom: 5px !important; }
+.gradio-slider input[type="range"] { cursor: pointer !important; }
+.gradio-checkboxgroup label, .gradio-radio label { padding: 8px 0 !important; }
+.gradio-textbox textarea, .gradio-textbox input { border-radius: 6px !important; border: 1px solid #ced4da !important; padding: 10px !important; }
+.gradio-textbox textarea:focus, .gradio-textbox input:focus { border-color: #80bdff !important; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25) !important; }
+.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; }
 """
 
 # =========================================
@@ -1290,14 +1782,13 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V2", theme=gr.
     </div>
     """)
 
-    # --- 狀態變量 (State Variables) ---
-    # data_state 用於存儲載入的 DataFrame
+    # --- 狀態變量 ---
     data_state = gr.State(None)
-    # 分別為兩張圖表存儲自定義顏色和圖案
     custom_colors_state_1 = gr.State({})
     patterns_state_1 = gr.State([])
     custom_colors_state_2 = gr.State({})
     patterns_state_2 = gr.State([])
+    recommendation_state = gr.State({}) # 用於存儲推薦結果
 
     # --- 主頁籤佈局 ---
     with gr.Tabs() as tabs:
@@ -1305,41 +1796,25 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V2", theme=gr.
         # --- 數據輸入頁籤 ---
         with gr.TabItem("📁 數據輸入與管理", id=0):
             with gr.Row():
-                # 左側：數據輸入
-                with gr.Column(scale=2):
+                with gr.Column(scale=2): # 左側：數據輸入
                     gr.HTML('<div class="section-title">1. 上傳或輸入數據</div>')
                     with gr.Group(elem_classes=["card"]):
                         gr.Markdown("您可以上傳本地的 CSV 或 Excel 文件，或��接在下方的文本框中貼上數據。")
-                        file_upload = gr.File(label="上傳 CSV / Excel 文件", type="filepath") # 使用 filepath 更穩定
+                        file_upload = gr.File(label="上傳 CSV / Excel 文件", type="filepath")
                         upload_button = gr.Button("⬆️ 載入文件數據", elem_classes=["primary-button"])
                         upload_status = gr.Textbox(label="載入狀態", lines=1, interactive=False)
-
                     with gr.Group(elem_classes=["card"]):
-                        csv_input = gr.Textbox(
-                            label="或者，在此貼上數據 (逗號、Tab 或空格分隔)",
-                            placeholder="例如:\n類別,數值\nA,10\nB,20\nC,15\n\n或\n類別\t數值\nA\t10\nB\t20\nC\t15",
-                            lines=8,
-                            elem_classes=["data-input-textbox"]
-                        )
+                        csv_input = gr.Textbox(label="或者，在此貼上數據 (逗號、Tab 或空格分隔)", placeholder="例如:\n類別,數值\nA,10\nB,20\nC,15...", lines=8, elem_classes=["data-input-textbox"])
                         parse_button = gr.Button("📝 解析貼上數據", elem_classes=["primary-button"])
                         parse_status = gr.Textbox(label="解析狀態", lines=1, interactive=False)
-
-                # 右側：數據預覽與導出
-                with gr.Column(scale=3):
+                with gr.Column(scale=3): # 右側：數據預覽與導出
                     gr.HTML('<div class="section-title">2. 數據預覽與導出</div>')
                     with gr.Group(elem_classes=["card"]):
                         gr.Markdown("下方將顯示載入或解析後的數據預覽。")
-                        # 修正：移除 height 參數
-                        data_preview = gr.Dataframe(label="數據表格預覽", interactive=False)
-
+                        data_preview = gr.Dataframe(label="數據表格預覽", interactive=False) # 移除 height
                         with gr.Row():
-                            export_format = gr.Dropdown(
-                                ["CSV", "Excel", "JSON"],
-                                label="選擇導出格式",
-                                value="CSV"
-                            )
+                            export_format = gr.Dropdown(["CSV", "Excel", "JSON"], label="選擇導出格式", value="CSV")
                             export_button = gr.Button("⬇️ 導出預覽數據", elem_classes=["secondary-button"])
-                        # 使用 File 組件顯示導出結果，以便下載
                         export_result = gr.File(label="導出文件下載", interactive=False)
                         export_status = gr.Textbox(label="導出狀態", lines=1, interactive=False)
 
@@ -1349,40 +1824,34 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V2", theme=gr.
             gr.Markdown("在這裡，您可以分別設置並生成兩張圖表，方便進行對比分析。")
 
             # --- 圖表一 ---
-            with gr.Group(): # 使用 Group 包裹每個圖表區塊
+            with gr.Group():
                 gr.Markdown("### 📊 圖表一設置")
                 with gr.Row():
-                    # 圖表一：左側設置
-                    with gr.Column(scale=2):
+                    # 圖表一：設定欄 (左側)
+                    with gr.Column(scale=1): # 調整比例
                         with gr.Group(elem_classes=["card"]):
                             gr.Markdown("**基本設置**")
                             chart_type_1 = gr.Dropdown(CHART_TYPES, label="圖表類型", value="長條圖", interactive=True)
-                            with gr.Row():
-                                recommend_button_1 = gr.Button("🧠 智能推薦 (圖表一)", elem_classes=["secondary-button"])
-                                # recommendation_result_1 = gr.Textbox(label="推薦結果", lines=1, interactive=False) # 暫時隱藏推薦結果文本框
+                            recommend_button_1 = gr.Button("🧠 智能推薦 (圖表一)", elem_classes=["secondary-button"])
                             chart_title_1 = gr.Textbox(label="圖表標題", placeholder="圖表一：我的數據分析")
                             agg_function_1 = gr.Dropdown(AGGREGATION_FUNCTIONS, label="聚合函數", value="計數", info="選擇如何彙總 Y 軸數據")
 
                             gr.Markdown("**數據映射**")
-                            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="用於氣泡圖等，控制點的大小")
+                            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.Column(scale=1):
                         with gr.Group(elem_classes=["card"]):
                             gr.Markdown("**顯示選項**")
-                            with gr.Row():
-                                chart_width_1 = gr.Slider(300, 1600, 700, step=50, label="寬度 (px)")
-                                chart_height_1 = gr.Slider(300, 1000, 450, step=50, label="高度 (px)")
+                            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():
                                 show_grid_1 = gr.Checkbox(label="顯示網格", value=True)
                                 show_legend_1 = gr.Checkbox(label="顯示圖例", value=True)
-
                             color_scheme_1 = gr.Dropdown(list(COLOR_SCHEMES.keys()), label="顏色方案", value="預設 (Plotly)")
                             gr.HTML('<div style="margin-top: 10px;"><b>顏色參考</b> (點擊複製)</div>')
-                            gr.HTML(generate_color_cards(), elem_id="color_display_1") # 顏色參考
+                            gr.HTML(generate_color_cards(), elem_id="color_display_1")
 
                         with gr.Group(elem_classes=["card"]):
                              gr.Markdown("**圖案與自定義顏色**")
@@ -1390,64 +1859,51 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V2", theme=gr.
                                  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.Row():
-                     with gr.Column(scale=3):
-                         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")
-                     with gr.Column(scale=1):
-                         gr.HTML('<div class="section-title" style="margin-top:0; margin-bottom:10px;">操作</div>')
-                         update_button_1 = gr.Button("🔄 更新圖表一", variant="primary", elem_classes=["primary-button"])
-                         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)
-
+                             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>')
+                        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(): # 使用 Group 包裹每個圖表區塊
+            with gr.Group():
                 gr.Markdown("### 📊 圖表二設置")
                 with gr.Row():
-                    # 圖表二：左側設置
-                    with gr.Column(scale=2):
+                    # 圖表二：設定欄 (左側)
+                    with gr.Column(scale=1): # 調整比例
                         with gr.Group(elem_classes=["card"]):
                             gr.Markdown("**基本設置**")
-                            chart_type_2 = gr.Dropdown(CHART_TYPES, label="圖表類型", value="折線圖", interactive=True) # 預設不同類型
-                            # 智能推薦按鈕可以只影響圖表一，用戶可以手動調整圖表二
-                            # recommend_button_2 = gr.Button("🧠 智能推薦 (圖表二)", elem_classes=["secondary-button"])
+                            chart_type_2 = gr.Dropdown(CHART_TYPES, label="圖表類型", value="折線圖", interactive=True)
                             chart_title_2 = gr.Textbox(label="圖表標題", placeholder="圖表二：另一種視角")
-                            agg_function_2 = gr.Dropdown(AGGREGATION_FUNCTIONS, label="聚合函數", value="平均值", info="選擇如何彙總 Y 軸數據") # 預設不同聚合
+                            agg_function_2 = gr.Dropdown(AGGREGATION_FUNCTIONS, label="聚合函數", value="平均值", info="選擇如何彙總 Y 軸數據")
 
                             gr.Markdown("**數據映射**")
-                            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="用於氣泡圖等，控制點的大小")
+                            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.Column(scale=1):
                         with gr.Group(elem_classes=["card"]):
                             gr.Markdown("**顯示選項**")
-                            with gr.Row():
-                                chart_width_2 = gr.Slider(300, 1600, 700, step=50, label="寬度 (px)")
-                                chart_height_2 = gr.Slider(300, 1000, 450, step=50, label="高度 (px)")
+                            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():
                                 show_grid_2 = gr.Checkbox(label="顯示網格", value=True)
                                 show_legend_2 = gr.Checkbox(label="顯示圖例", value=True)
-
-                            color_scheme_2 = gr.Dropdown(list(COLOR_SCHEMES.keys()), label="顏色方案", value="分類 - Set2") # 預設不同顏色
-                            # 顏色參考可以共用一個
+                            color_scheme_2 = gr.Dropdown(list(COLOR_SCHEMES.keys()), label="顏色方案", value="分類 - Set2")
+                            # 顏色參考共用
 
                         with gr.Group(elem_classes=["card"]):
                              gr.Markdown("**圖案與自定義顏色**")
@@ -1455,74 +1911,32 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V2", theme=gr.
                                  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.Row():
-                     with gr.Column(scale=3):
-                         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")
-                     with gr.Column(scale=1):
-                         gr.HTML('<div class="section-title" style="margin-top:0; margin-bottom:10px;">操作</div>')
-                         update_button_2 = gr.Button("🔄 更新圖表二", variant="primary", elem_classes=["primary-button"])
-                         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)
-
+                             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>')
+                        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)
 
         # --- 使用說明頁籤 ---
         with gr.TabItem("❓ 使用說明", id=2):
-            with gr.Group(elem_classes=["card"]):
+             with gr.Group(elem_classes=["card"]): # 使用說明也放在卡片裡
                 gr.HTML("""
                 <div class="section-title">使用說明</div>
-
                 <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>
-
+                <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 軸數據。選擇 "計數" 時，系統會計算 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>
                 <h3>提示</h3>
-                <ul>
-                    <li>如果圖表無法顯示或出現錯誤，請檢查數據格式、列選擇以及聚合函數是否合理。</li>
-                    <li>確保數值列確實包含數字，日期列包含有效的日期格式。</li>
-                    <li>部分圖表類型對數據結構有特定要求（例如，熱力圖、甘特圖）。</li>
-                </ul>
+                <ul><li>如果圖表無法顯示或出現錯誤，請檢查數據格式、列選擇以及聚合函數是否合理。</li><li>確保數值列確實包含數字，日期列包含有效的日期格式。</li><li>部分圖表類型對數據結構有特定要求（例如，熱力圖、甘特圖）。</li></ul>
                 """)
 
     # =========================================
@@ -1531,289 +1945,91 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V2", theme=gr.
 
     # --- 數據載入與更新 ---
     def load_data_and_update_ui(df, status_msg):
-        """輔助函數：更新數據狀態、預覽和所有下拉列表"""
-        # 更新數據預覽
         preview_df = df if df is not None else pd.DataFrame()
-        # 更新所有列選擇下拉列表
-        col_updates = update_columns(df) # 返回 4 個 Dropdown 更新對象
-        # 檢查 col_updates 是否為 None 或空，避免解包錯誤
+        col_updates = update_columns(df)
         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],
-        outputs=[
-            data_state, upload_status, data_preview,
-            x_column_1, y_column_1, group_column_1, size_column_1, # 圖表一的下拉列表
-            x_column_2, y_column_2, group_column_2, size_column_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],
+        outputs=[data_state, upload_status, data_preview, x_column_1, y_column_1, group_column_1, size_column_1, x_column_2, y_column_2, group_column_2, size_column_2]
     )
-
-    parse_button.click(
-        parse_data,
-        inputs=[csv_input],
-        outputs=[data_state, parse_status] # 先更新狀態和消息
-    ).then(
-        load_data_and_update_ui,
-        inputs=[data_state, parse_status],
-        outputs=[
-            data_state, parse_status, data_preview,
-            x_column_1, y_column_1, group_column_1, size_column_1, # 圖表一的下拉列表
-            x_column_2, y_column_2, group_column_2, size_column_2  # 圖表二的下拉列表
-        ]
+    parse_button.click(parse_data, inputs=[csv_input], outputs=[data_state, parse_status]).then(
+        load_data_and_update_ui, inputs=[data_state, parse_status],
+        outputs=[data_state, parse_status, data_preview, x_column_1, y_column_1, group_column_1, size_column_1, x_column_2, y_column_2, group_column_2, size_column_2]
     )
 
     # --- 數據導出 ---
-    export_button.click(
-        export_data,
-        inputs=[data_state, export_format],
-        outputs=[export_result, export_status]
-    )
+    export_button.click(export_data, inputs=[data_state, export_format], outputs=[export_result, export_status])
 
-    # --- 圖表一：處理顏色和圖案狀態 ---
-    color_customization_1.change(
-        parse_custom_colors,
-        inputs=[color_customization_1],
-        outputs=[custom_colors_state_1]
-    )
-    # 將圖案下拉列表的變化連接到 update_patterns 函數
+    # --- 圖表一：顏色和圖案狀態 ---
+    color_customization_1.change(parse_custom_colors, inputs=[color_customization_1], outputs=[custom_colors_state_1])
     patterns_inputs_1 = [pattern1_1, pattern2_1, pattern3_1]
-    for pattern_dd in patterns_inputs_1:
-        pattern_dd.change(
-            update_patterns,
-            inputs=patterns_inputs_1,
-            outputs=[patterns_state_1]
-        )
+    for pattern_dd in patterns_inputs_1: pattern_dd.change(update_patterns, inputs=patterns_inputs_1, outputs=[patterns_state_1])
 
     # --- 圖表一：更新圖表 ---
-    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]
-    )
-    # 當任何相關設置改變時，自動更新圖表一
-    # 將 .change 事件綁定移到循環外，以避免在循環內部重複定義函數
-    def auto_update_chart_1(*inputs):
-        # inputs 是一個包含所有 chart_inputs_1 值的元組
-        # 需要將這些值解包傳遞給 create_plot
-        # 注意：Gradio 的 .change 會將所有 input 組件的當前值按順序傳遞
-        # 我們需要確保這個順序與 create_plot 的參數順序匹配
-        # 或者，更安全的方式是從 inputs 列表創建一個字典
-        # 但這裡直接按順序傳遞應該可行，因為 inputs 列表順序固定
-        return create_plot(*inputs)
-
+    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:
-         # 避免狀態變量觸發無限循環，只監聽 UI 組件的變化
-         if not isinstance(input_component, gr.State): # 排除 State 組件
-            input_component.change(
-                auto_update_chart_1, # 使用輔助函數
-                inputs=chart_inputs_1, # 傳遞所有需要的輸入
-                outputs=[chart_output_1]
-            )
-
+         if not isinstance(input_component, gr.State): 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]
-    )
+    download_button_1.click(download_figure, inputs=[chart_output_1, export_img_format_1], outputs=[export_chart_1, export_chart_status_1])
 
     # --- 圖表一：智能推薦 ---
     def apply_recommendation(rec_dict):
-        """將推薦字典應用到圖表一的 UI 組件"""
-        if not isinstance(rec_dict, dict):
-             # 如果輸入不是字典，返回空更新列表
-             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=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=[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, # 直接調用 create_plot
-        inputs=chart_inputs_1, # 再次收集所有當前輸入
-        outputs=[chart_output_1]
-    )
+        if not isinstance(rec_dict, dict): 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=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)]
 
+    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])
 
-    # --- 圖表二：處理顏色和圖案狀態 ---
-    color_customization_2.change(
-        parse_custom_colors,
-        inputs=[color_customization_2],
-        outputs=[custom_colors_state_2]
-    )
+    # --- 圖表二：顏色和圖案狀態 ---
+    color_customization_2.change(parse_custom_colors, inputs=[color_customization_2], outputs=[custom_colors_state_2])
     patterns_inputs_2 = [pattern1_2, pattern2_2, pattern3_2]
-    for pattern_dd in patterns_inputs_2:
-        pattern_dd.change(
-            update_patterns,
-            inputs=patterns_inputs_2,
-            outputs=[patterns_state_2]
-        )
+    for pattern_dd in patterns_inputs_2: pattern_dd.change(update_patterns, inputs=patterns_inputs_2, outputs=[patterns_state_2])
 
     # --- 圖表二：更新圖表 ---
-    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)
-
+    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]
-            )
+         if not isinstance(input_component, gr.State): 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]
-    )
+    download_button_2.click(download_figure, inputs=[chart_output_2, export_img_format_2], outputs=[export_chart_2, export_chart_status_2])
 
-    # --- 圖表類型改變時更新 UI 元素可見性 (針對兩個圖表) ---
+    # --- 圖表類型改變時更新 UI 元素可見性 ---
     def update_element_visibility(chart_type):
-        """根據圖表類型更新 Y 軸、分組列、大小列的標籤和可見性"""
-        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())
-
-
-    # 將 chart_type 的變化連接到更新函數，並應用到兩個圖表的對應組件
-    chart_type_1.change(
-        update_element_visibility,
-        inputs=[chart_type_1],
-        outputs=[y_column_1, group_column_1, size_column_1]
-    )
-    chart_type_2.change(
-        update_element_visibility,
-        inputs=[chart_type_2],
-        outputs=[y_column_2, group_column_2, size_column_2]
-    )
+        try:
+            is_pie_like = chart_type in ["圓餅圖", "環形圖", "漏斗圖", "樹狀圖"]; is_histogram = chart_type == "直方圖"
+            is_box_violin = chart_type in ["箱型圖", "小提琴圖"]; is_gantt = chart_type == "甘特圖"
+            is_heatmap = chart_type == "熱力圖"; is_radar = chart_type == "雷達圖"
+            y_label, y_needed = "Y軸 / 數值", True
+            if is_histogram: y_label, y_needed = "Y軸 (自動計數)", False
+            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 ["堆疊長條圖", "百分比堆疊長條圖", "群組長條圖", "水平長條圖", "折線圖", "多重折線圖", "階梯折線圖", "區域圖", "堆疊區域圖", "百分比堆疊區域圖", "散點圖", "氣泡圖", "箱型圖", "小提琴圖", "熱力圖", "雷達圖", "極座標圖"]
+            if is_gantt: group_label, group_needed = "結束時間列", True
+            elif is_heatmap: group_label, group_needed = "行/列 分組", True
+            size_label, size_needed = "大小列", chart_type in ["氣泡圖", "散點圖"]
+            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())
+
+    chart_type_1.change(update_element_visibility, inputs=[chart_type_1], outputs=[y_column_1, group_column_1, size_column_1])
+    chart_type_2.change(update_element_visibility, inputs=[chart_type_2], outputs=[y_column_2, group_column_2, size_column_2])
 
 # =========================================
 # == 應用程式啟動 (Launch Application) ==
 # =========================================
 if __name__ == "__main__":
-    # 在 Hugging Face Spaces 上，通常不需要 share=True
-    # debug=True 可以在開發時提供更詳細的錯誤信息
-    # 增加 server_port 以便在本地運行時指定端口，避免衝突
-    # demo.launch(debug=True, server_port=7860)
-    demo.launch(debug=True) # 保持原樣，Gradio 會自動選擇端口
+    demo.launch(debug=True)