Update app.py

app.py

@@ -9,6 +9,9 @@ from PIL import Image
 import matplotlib.pyplot as plt
 import seaborn as sns
 from plotly.subplots import make_subplots
+import re
+import json
+import colorsys
 
 # 擴展的圖表類型
 CHART_TYPES = [
@@ -39,6 +42,11 @@ COLOR_SCHEMES = {
     "綠色系": px.colors.sequential.Greens,
     "紫色系": px.colors.sequential.Purples,
     "灰度": px.colors.sequential.Greys,
+    "彩虹": px.colors.sequential.Rainbow,
+    "漸變藍綠": px.colors.sequential.Turbo,
+    "漸變紫橙": px.colors.diverging.Spectral,
+    "漸變紅藍": px.colors.diverging.RdBu,
+    "漸變棕綠": px.colors.diverging.BrBG
 }
 
 # 圖案填充類型 (黑白印刷用)
@@ -48,9 +56,128 @@ PATTERN_TYPES = [
 
 # 統計函數選項
 AGGREGATION_FUNCTIONS = [
-    "求和", "平均值", "最大值", "最小值", "計數", "中位數", "標準差", "變異數"
+    "計數", "求和", "平均值", "最大值", "最小值", "中位數", "標準差", "變異數"
 ]
 
+# HTML顏色展示卡片樣式
+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}" style="
+    width: 25px; 
+    height: 25px; 
+    background-color: {color_hex}; 
+    border-radius: 3px; 
+    cursor: pointer;
+    border: 1px solid #ddd;
+    transition: transform 0.2s;
+" onclick="copyToClipboard('{color_hex}')" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"></div>
+"""
+
+COPY_SCRIPT = """
+<script>
+function copyToClipboard(text) {
+    navigator.clipboard.writeText(text);
+    const notification = document.createElement('div');
+    notification.textContent = '已複製: ' + text;
+    notification.style.position = 'fixed';
+    notification.style.bottom = '20px';
+    notification.style.right = '20px';
+    notification.style.padding = '10px';
+    notification.style.background = '#333';
+    notification.style.color = 'white';
+    notification.style.borderRadius = '4px';
+    notification.style.zIndex = '1000';
+    document.body.appendChild(notification);
+    setTimeout(() => {
+        notification.style.opacity = '0';
+        notification.style.transition = 'opacity 0.5s';
+        setTimeout(() => document.body.removeChild(notification), 500);
+    }, 1500);
+}
+</script>
+"""
+
+# 常見的顏色名稱和十六進制代碼
+COMMON_COLORS = {
+    "紅色": "#FF0000", "橙色": "#FFA500", "黃色": "#FFFF00", "綠色": "#008000", 
+    "藍色": "#0000FF", "紫色": "#800080", "粉紅色": "#FFC0CB", "棕色": "#A52A2A",
+    "灰色": "#808080", "黑色": "#000000", "白色": "#FFFFFF", "青色": "#00FFFF", 
+    "洋紅": "#FF00FF", "淺藍": "#ADD8E6", "淺綠": "#90EE90", "淺黃": "#FFFFE0"
+}
+
+# 生成漸變色系
+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):
+        return '#{:02x}{:02x}{:02x}'.format(int(rgb[0]), int(rgb[1]), int(rgb[2]))
+    
+    start_rgb = hex_to_rgb(start_color)
+    end_rgb = hex_to_rgb(end_color)
+    
+    r_step = (end_rgb[0] - start_rgb[0]) / (steps - 1)
+    g_step = (end_rgb[1] - start_rgb[1]) / (steps - 1)
+    b_step = (end_rgb[2] - start_rgb[2]) / (steps - 1)
+    
+    gradient_colors = []
+    for i in range(steps):
+        r = start_rgb[0] + r_step * i
+        g = start_rgb[1] + g_step * i
+        b = start_rgb[2] + b_step * i
+        gradient_colors.append(rgb_to_hex((r, g, b)))
+    
+    return gradient_colors
+
+# 為顏色選擇添加的各種漸變色系
+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"),
+    "彩虹": ["#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#0000FF", "#4B0082", "#9400D3"]
+}
+
+# 生成顏色卡片展示
+def generate_color_cards():
+    # 常見顏色卡片
+    common_cards = ""
+    for name, hex_code in COMMON_COLORS.items():
+        common_cards += COLOR_CARD_TEMPLATE.format(color_name=name, color_hex=hex_code)
+    
+    # 漸變色系卡片
+    gradient_cards = {}
+    for name, colors in GRADIENTS.items():
+        gradient_cards[name] = ""
+        for i, color in enumerate(colors):
+            gradient_cards[name] += COLOR_CARD_TEMPLATE.format(
+                color_name=f"{name} {i+1}/{len(colors)}", 
+                color_hex=color
+            )
+    
+    # 合成卡片展示HTML
+    color_display = f"""
+    <div style="font-weight: bold; margin-top: 10px;">常見顏色</div>
+    {COLOR_CARD_STYLE.format(color_cards=common_cards)}
+    """
+    
+    for name, cards in gradient_cards.items():
+        color_display += f"""
+        <div style="font-weight: bold; margin-top: 10px;">{name}</div>
+        {COLOR_CARD_STYLE.format(color_cards=cards)}
+        """
+    
+    color_display += COPY_SCRIPT
+    
+    return color_display
+
 def agg_function_map(func_name):
     """映射中文統計函數名稱到Pandas函數"""
     mapping = {
@@ -63,11 +190,11 @@ def agg_function_map(func_name):
         "標準差": "std",
         "變異數": "var"
     }
-    return mapping.get(func_name, "sum")
+    return mapping.get(func_name, "count")
 
 def create_plot(df, chart_type, x_column, y_column, group_column=None, size_column=None, 
                color_scheme="默認", patterns=[], title="", width=700, height=500, 
-               show_grid=True, show_legend=True, agg_function="求和", custom_colors={}):
+               show_grid=True, show_legend=True, agg_function="計數", custom_colors={}):
     """創建圖表函數"""
     
     # 數據預處理
@@ -160,30 +287,37 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
                 # 簡單計數
                 counts = df[x_column].value_counts().reset_index()
                 counts.columns = [x_column, 'count']
-                fig = px.bar(counts, x=x_column, y='count', **fig_params)        
+                fig = px.bar(counts, x=x_column, y='count', **fig_params)
         
         elif chart_type == "群組長條圖":
             if group_column and group_column in df.columns:
-                grouped_df = df.pivot_table(index=x_column, columns=group_column, 
-                                           values=y_column, aggfunc=agg_func).reset_index()
-                grouped_df = grouped_df.fillna(0)
+                # 明確將字符串列轉換為類別型
+                df[x_column] = df[x_column].astype('category')
+                df[group_column] = df[group_column].astype('category')
                 
-                # 取得所有類別
-                categories = grouped_df.columns.tolist()
+                # 先進行分組統計
+                group_df = df.groupby([x_column, group_column])[y_column].agg(agg_func).reset_index()
+                
+                # 創建樞紐表
+                pivot_df = group_df.pivot_table(index=x_column, columns=group_column, 
+                                              values=y_column).reset_index().fillna(0)
+                
+                # 獲取所有類別
+                categories = pivot_df.columns.tolist()
                 categories.remove(x_column)
                 
                 for i, category in enumerate(categories):
                     color = colors[i % len(colors)]
-                    if category in custom_colors:
-                        color = custom_colors[category]
+                    if str(category) in custom_colors:
+                        color = custom_colors[str(category)]
                         
                     pattern_shape = None
                     if patterns and i < len(patterns) and patterns[i] != "無":
                         pattern_shape = patterns[i]
                         
                     fig.add_trace(go.Bar(
-                        x=grouped_df[x_column],
-                        y=grouped_df[category],
+                        x=pivot_df[x_column],
+                        y=pivot_df[category],
                         name=str(category),
                         marker_color=color,
                         marker_pattern_shape=pattern_shape
@@ -230,18 +364,25 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
         
         elif chart_type == "多重折線圖":
             if group_column and group_column in df.columns:
-                grouped_df = df.pivot_table(index=x_column, columns=group_column, 
-                                           values=y_column, aggfunc=agg_func).reset_index()
-                grouped_df = grouped_df.fillna(0)
+                # 明確將字符串列轉換為類別型
+                df[x_column] = df[x_column].astype('category')
+                df[group_column] = df[group_column].astype('category')
                 
-                # 取得所有類別
-                categories = grouped_df.columns.tolist()
+                # 先進行分組統計
+                group_df = df.groupby([x_column, group_column])[y_column].agg(agg_func).reset_index()
+                
+                # 創建樞紐表
+                pivot_df = group_df.pivot_table(index=x_column, columns=group_column, 
+                                              values=y_column).reset_index().fillna(0)
+                
+                # 獲取所有類別
+                categories = pivot_df.columns.tolist()
                 categories.remove(x_column)
                 
                 for i, category in enumerate(categories):
                     color = colors[i % len(colors)]
-                    if category in custom_colors:
-                        color = custom_colors[category]
+                    if str(category) in custom_colors:
+                        color = custom_colors[str(category)]
                     
                     line_dash = 'solid'
                     if patterns and i < len(patterns) and patterns[i] != "無":
@@ -255,8 +396,8 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
                             line_dash = 'longdash'
                     
                     fig.add_trace(go.Scatter(
-                        x=grouped_df[x_column],
-                        y=grouped_df[category],
+                        x=pivot_df[x_column],
+                        y=pivot_df[category],
                         mode='lines+markers',
                         name=str(category),
                         line=dict(color=color, dash=line_dash),
@@ -268,18 +409,25 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
         
         elif chart_type == "階梯折線圖":
             if group_column and group_column in df.columns:
-                grouped_df = df.pivot_table(index=x_column, columns=group_column, 
-                                           values=y_column, aggfunc=agg_func).reset_index()
-                grouped_df = grouped_df.fillna(0)
+                # 明確將字符串列轉換為類別型
+                df[x_column] = df[x_column].astype('category')
+                df[group_column] = df[group_column].astype('category')
                 
-                # 取得所有類別
-                categories = grouped_df.columns.tolist()
+                # 先進行分組統計
+                group_df = df.groupby([x_column, group_column])[y_column].agg(agg_func).reset_index()
+                
+                # 創建樞紐表
+                pivot_df = group_df.pivot_table(index=x_column, columns=group_column, 
+                                              values=y_column).reset_index().fillna(0)
+                
+                # 獲取所有類別
+                categories = pivot_df.columns.tolist()
                 categories.remove(x_column)
                 
                 for i, category in enumerate(categories):
                     color = colors[i % len(colors)]
-                    if category in custom_colors:
-                        color = custom_colors[category]
+                    if str(category) in custom_colors:
+                        color = custom_colors[str(category)]
                     
                     line_dash = 'solid'
                     if patterns and i < len(patterns) and patterns[i] != "無":
@@ -293,8 +441,8 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
                             line_dash = 'longdash'
                     
                     fig.add_trace(go.Scatter(
-                        x=grouped_df[x_column],
-                        y=grouped_df[category],
+                        x=pivot_df[x_column],
+                        y=pivot_df[category],
                         mode='lines',
                         name=str(category),
                         line=dict(shape='hv', color=color, dash=line_dash)
@@ -315,7 +463,7 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
             # 設置自定義顏色
             pie_colors = colors
             if custom_colors and len(custom_colors) > 0:
-                pie_colors = [custom_colors.get(cat, colors[i % len(colors)]) 
+                pie_colors = [custom_colors.get(str(cat), colors[i % len(colors)]) 
                              for i, cat in enumerate(grouped_df[x_column])]
             
             # 設置自定義圖案
@@ -330,13 +478,13 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
             fig = px.pie(grouped_df, names=x_column, values=y_column, 
                        color_discrete_sequence=pie_colors, **fig_params)
             
-            # 應用圖案填充
+            # 應用圖案填充 (Plotly可能不支持直接在餅圖上應用花紋，此處為嘗試)
             if pattern_shapes:
                 for i, trace in enumerate(fig.data):
-                    for j, path in enumerate(trace.marker.pattern):
-                        if j < len(pattern_shapes) and pattern_shapes[j]:
-                            path.shape = pattern_shapes[j]
-                            path.solidity = 0.5
+                    trace.marker.pattern = dict(
+                        shape=pattern_shapes[i % len(pattern_shapes)] if i < len(pattern_shapes) else None,
+                        solidity=0.5
+                    )
         
         elif chart_type == "環形圖":
             grouped_df = df.groupby(x_column)[y_column].agg(agg_func).reset_index()
@@ -344,7 +492,7 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
             # 設置自定義顏色
             pie_colors = colors
             if custom_colors and len(custom_colors) > 0:
-                pie_colors = [custom_colors.get(cat, colors[i % len(colors)]) 
+                pie_colors = [custom_colors.get(str(cat), colors[i % len(colors)]) 
                              for i, cat in enumerate(grouped_df[x_column])]
             
             fig = px.pie(grouped_df, names=x_column, values=y_column, hole=0.4,
@@ -353,10 +501,10 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
             # 應用圖案填充
             if patterns and len(patterns) > 0:
                 for i, trace in enumerate(fig.data):
-                    trace.marker.pattern = {
-                        'shape': patterns[i % len(patterns)] if patterns[i % len(patterns)] != "無" else None,
-                        'solidity': 0.5
-                    }
+                    trace.marker.pattern = dict(
+                        shape=patterns[i % len(patterns)] if patterns[i % len(patterns)] != "無" else None,
+                        solidity=0.5
+                    )
         
         elif chart_type == "散點圖":
             if group_column and group_column in df.columns:
@@ -425,20 +573,26 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
         
         elif chart_type == "堆疊區域圖":
             if group_column and group_column in df.columns:
-                # 創建樞紐表以便於繪製堆疊面積圖
-                pivot_df = df.pivot_table(index=x_column, columns=group_column, 
-                                         values=y_column, aggfunc=agg_func).reset_index()
-                pivot_df = pivot_df.fillna(0)
+                # 明確將字符串列轉換為類別型
+                df[x_column] = df[x_column].astype('category')
+                df[group_column] = df[group_column].astype('category')
                 
-                # 獲取類別列
+                # 先進行分組統計
+                group_df = df.groupby([x_column, group_column])[y_column].agg(agg_func).reset_index()
+                
+                # 創建樞紐表
+                pivot_df = group_df.pivot_table(index=x_column, columns=group_column, 
+                                              values=y_column).reset_index().fillna(0)
+                
+                # 獲取所有類別
                 categories = pivot_df.columns.tolist()
                 categories.remove(x_column)
                 
                 # 建立堆疊區域圖
                 for i, category in enumerate(categories):
                     color = colors[i % len(colors)]
-                    if category in custom_colors:
-                        color = custom_colors[category]
+                    if str(category) in custom_colors:
+                        color = custom_colors[str(category)]
                     
                     # 添加區域軌跡
                     fig.add_trace(go.Scatter(
@@ -469,12 +623,16 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
                     theta.append(theta[0])
                     r.append(r[0])
                     
+                    color = colors[i % len(colors)]
+                    if str(group) in custom_colors:
+                        color = custom_colors[str(group)]
+                    
                     fig.add_trace(go.Scatterpolar(
                         r=r,
                         theta=theta,
                         fill='toself',
                         name=str(group),
-                        line_color=colors[i % len(colors)]
+                        line_color=color
                     ))
             else:
                 grouped_df = df.groupby(x_column)[y_column].agg(agg_func).reset_index()
@@ -541,13 +699,19 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
             # 按值排序
             grouped_df = grouped_df.sort_values(by=y_column, ascending=False)
             
+            # 設置自定義顏色
+            funnel_colors = colors[:len(grouped_df)]
+            if custom_colors and len(custom_colors) > 0:
+                funnel_colors = [custom_colors.get(str(cat), colors[i % len(colors)]) 
+                               for i, cat in enumerate(grouped_df[x_column])]
+            
             # 創建漏斗圖
             fig = go.Figure(go.Funnel(
                 y=grouped_df[x_column],
                 x=grouped_df[y_column],
                 textposition="inside",
                 textinfo="value+percent initial",
-                marker={"color": colors[:len(grouped_df)]}
+                marker={"color": funnel_colors}
             ))
             
             fig.update_layout(title=title)
@@ -570,9 +734,15 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
         elif chart_type == "極座標圖":
             grouped_df = df.groupby(x_column)[y_column].agg(agg_func).reset_index()
             
+            # 設置自定義顏色
+            polar_colors = colors[:len(grouped_df)]
+            if custom_colors and len(custom_colors) > 0:
+                polar_colors = [custom_colors.get(str(cat), colors[i % len(colors)]) 
+                              for i, cat in enumerate(grouped_df[x_column])]
+            
             # 創建極座標條形���
             fig = px.bar_polar(grouped_df, r=y_column, theta=x_column,
-                            color=x_column, color_discrete_sequence=colors, **fig_params)
+                            color=x_column, color_discrete_sequence=polar_colors, **fig_params)
         
         elif chart_type == "甘特圖":
             # 甘特圖需要開始和結束時間
@@ -624,7 +794,16 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
         height=height,
         showlegend=show_legend,
         xaxis=dict(showgrid=show_grid),
-        yaxis=dict(showgrid=show_grid)
+        yaxis=dict(showgrid=show_grid),
+        # 現代化樣式設置
+        template="plotly_white",
+        margin=dict(l=50, r=50, t=50, b=50),
+        font=dict(family="Arial, sans-serif"),
+        hoverlabel=dict(
+            bgcolor="white",
+            font_size=12,
+            font_family="Arial, sans-serif"
+        )
     )
     
     return fig
@@ -717,11 +896,11 @@ def update_columns(df):
     """更新列選擇下拉菜單"""
     if df is None or df.empty:
         # 默認列
-        return gr.Dropdown(choices=["類別", "數值"], value="類別"), gr.Dropdown(choices=["類別", "數值"], value="數值"), gr.Dropdown(choices=["無", "類別", "數值"], value="無"), gr.Dropdown(choices=["無", "類別", "數值"], value="無")
+        return gr.Dropdown(choices=["類別", "數值", "計數"], value="類別"), gr.Dropdown(choices=["類別", "數值", "計數"], value="計數"), gr.Dropdown(choices=["無", "類別", "數值", "計數"], value="無"), gr.Dropdown(choices=["無", "類別", "數值", "計數"], value="無")
     
     columns = df.columns.tolist()
     x_dropdown = gr.Dropdown(choices=columns, value=columns[0] if columns else None)
-    y_dropdown = gr.Dropdown(choices=columns, value=columns[1] if len(columns) > 1 else columns[0])
+    y_dropdown = gr.Dropdown(choices=columns, value="計數" if "計數" in columns else (columns[1] if len(columns) > 1 else columns[0]))
     group_dropdown = gr.Dropdown(choices=["無"] + columns, value="無")
     size_dropdown = gr.Dropdown(choices=["無"] + columns, value="無")
     
@@ -763,10 +942,227 @@ def download_figure(fig, format_type="PNG"):
     except Exception as e:
         return None, f"導出圖表時出錯: {str(e)}"
 
-# 建立Gradio界面
-with gr.Blocks(title="進階數據可視化工具") as demo:
-    gr.Markdown("# 進階數據可視化工具")
-    gr.Markdown("上傳CSV或Excel文件，或直接在下方輸入數據來創建各種專業圖表")
+def recommend_chart_settings(df):
+    """智能分析數據並推薦最佳圖表設置"""
+    if df is None or df.empty:
+        return {
+            "message": "請先上傳或輸入數據"
+        }
+    
+    # 獲取列名和數據類型
+    columns = df.columns.tolist()
+    num_columns = df.select_dtypes(include=['number']).columns.tolist()
+    cat_columns = df.select_dtypes(include=['object', 'category']).columns.tolist()
+    
+    # 排除"計數"列
+    if "計數" in num_columns:
+        num_columns.remove("計數")
+    
+    # 統計數據特徵
+    num_rows = len(df)
+    num_unique_values = {col: df[col].nunique() for col in columns}
+    
+    # 初始化推薦結果
+    recommendation = {
+        "chart_type": None,
+        "x_column": None,
+        "y_column": None,
+        "group_column": None,
+        "agg_function": None,
+        "message": ""
+    }
+    
+    # 根據數據特徵推薦圖表
+    # 案例1: 有2個類別列，需要分析它們之間的關係
+    if len(cat_columns) >= 2 and '計數' in columns:
+        # 例如機構類型和情緒分析數據
+        recommendation["chart_type"] = "堆疊長條圖"
+        recommendation["x_column"] = cat_columns[0]  # 第一個類別列作為X軸
+        recommendation["y_column"] = "計數"          # 使用計數列作為Y軸
+        recommendation["group_column"] = cat_columns[1]  # 第二個類別列作為分組
+        recommendation["agg_function"] = "求和"
+        recommendation["message"] = f"檢測到有類別列 '{cat_columns[0]}' 和 '{cat_columns[1]}'，推薦使用堆疊長條圖來顯示兩者關係"
+    
+    # 案例2: 只有一個類別列
+    elif len(cat_columns) == 1 and '計數' in columns:
+        recommendation["chart_type"] = "長條圖"
+        recommendation["x_column"] = cat_columns[0]
+        recommendation["y_column"] = "計數"
+        recommendation["agg_function"] = "求和"
+        recommendation["message"] = f"檢測到類別列 '{cat_columns[0]}'，推薦使用長條圖來顯示分佈"
+    
+    # 案例3: 有時間序列數據
+    elif any("日期" in col or "時間" in col for col in columns) and len(num_columns) > 0:
+        date_col = next((col for col in columns if "日期" in col or "時間" in col), None)
+        recommendation["chart_type"] = "折線圖"
+        recommendation["x_column"] = date_col
+        recommendation["y_column"] = num_columns[0] if num_columns else "計數"
+        recommendation["agg_function"] = "平均值"
+        recommendation["message"] = f"檢測到時間列 '{date_col}'，推薦使用折線圖來顯示趨勢"
+    
+    # 案例4: 有多個數值列
+    elif len(num_columns) >= 2:
+        recommendation["chart_type"] = "散點圖"
+        recommendation["x_column"] = num_columns[0]
+        recommendation["y_column"] = num_columns[1]
+        recommendation["message"] = f"檢測到數值列 '{num_columns[0]}' 和 '{num_columns[1]}'，推薦使用散點圖來分析相關性"
+    
+    # 預設情況
+    else:
+        if len(cat_columns) > 0 and "計數" in columns:
+            recommendation["chart_type"] = "長條圖"
+            recommendation["x_column"] = cat_columns[0]
+            recommendation["y_column"] = "計數"
+            recommendation["agg_function"] = "求和"
+            recommendation["message"] = "根據數據結構，推薦使用長條圖"
+        elif len(cat_columns) > 0 and len(num_columns) > 0:
+            recommendation["chart_type"] = "長條圖"
+            recommendation["x_column"] = cat_columns[0]
+            recommendation["y_column"] = num_columns[0]
+            recommendation["agg_function"] = "平均值"
+            recommendation["message"] = "根據數據結構，推薦使用長條圖"
+        else:
+            recommendation["message"] = "無法確定最佳圖表類型，請手動選擇"
+    
+    return recommendation
+
+# CSS樣式
+CUSTOM_CSS = """
+.gradio-container {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(to bottom right, #f7f9fc, #e9f0f8);
+}
+
+.app-header {
+    text-align: center;
+    margin-bottom: 20px;
+    background: linear-gradient(90deg, #4568dc, #3a6073);
+    padding: 20px;
+    border-radius: 10px;
+    color: white;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.app-title {
+    font-size: 32px;
+    font-weight: bold;
+    margin: 0;
+    display: inline-block;
+    background: linear-gradient(to right, #ffffff, #e0e0e0);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.app-subtitle {
+    font-size: 16px;
+    color: #f0f0f0;
+    margin-top: 5px;
+}
+
+.section-title {
+    font-size: 20px;
+    font-weight: bold;
+    color: #333;
+    border-bottom: 2px solid #4568dc;
+    padding-bottom: 5px;
+    margin-top: 20px;
+    margin-bottom: 15px;
+}
+
+.card {
+    background-color: white;
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+.primary-button {
+    background: linear-gradient(90deg, #4568dc, #3a6073) !important;
+    border: none !important;
+    color: white !important;
+    font-weight: bold !important;
+    padding: 10px 20px !important;
+    border-radius: 5px !important;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+}
+
+.primary-button:hover {
+    background: linear-gradient(90deg, #3a6073, #4568dc) !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1) !important;
+}
+
+.secondary-button {
+    background: linear-gradient(90deg, #6a85b6, #bac8e0) !important;
+    border: none !important;
+    color: white !important;
+    font-weight: bold !important;
+    padding: 10px 20px !important;
+    border-radius: 5px !important;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+}
+
+.secondary-button:hover {
+    background: linear-gradient(90deg, #bac8e0, #6a85b6) !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1) !important;
+}
+
+.color-panel {
+    background-color: white;
+    border-radius: 5px;
+    padding: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.tips-box {
+    background-color: #f1f7fe;
+    border-left: 4px solid #4568dc;
+    padding: 15px;
+    border-radius: 5px;
+    margin: 20px 0;
+}
+
+.chart-previewer {
+    border: 2px dashed #ccc;
+    border-radius: 10px;
+    padding: 20px;
+    min-height: 400px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.7);
+}
+
+/* Loading animation */
+@keyframes pulse {
+    0% { opacity: 0.6; }
+    50% { opacity: 1; }
+    100% { opacity: 0.6; }
+}
+
+.loading {
+    animation: pulse 1.5s infinite;
+}
+"""
+
+# 現代化UI界面
+with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具") as demo:
+    gr.HTML("""
+    <div class="app-header">
+        <h1 class="app-title">🎨 進階數據可視化工具</h1>
+        <p class="app-subtitle">上傳數據，創建各種專業圖表，輕鬆實現數據可視化</p>
+    </div>
+    """)
     
     # 狀態變量
     data_state = gr.State(None)
@@ -775,106 +1171,177 @@ with gr.Blocks(title="進階數據可視化工具") as demo:
     
     with gr.Tabs():
         # 數據輸入頁籤
-        with gr.TabItem("數據輸入"):
-            with gr.Row():
-                with gr.Column():
-                    file_upload = gr.File(label="上傳CSV或Excel文件")
-                    upload_button = gr.Button("載入文件")
-                    upload_status = gr.Textbox(label="上傳狀態")
-                
-                with gr.Column():
-                    csv_input = gr.Textbox(label="或直接輸入數據（逗號或空格分隔）", 
-                                          placeholder="類別,數值\nA,10\nB,20\nC,15\nD,25\nE,30\n\n或\n\n類別 數值\nA 10\nB 20\nC 15\nD 25\nE 30", 
-                                          lines=10)
-                    parse_button = gr.Button("解析數據")
-                    parse_status = gr.Textbox(label="解析狀態")
-            
-            with gr.Row():
-                data_preview = gr.Dataframe(label="數據預覽")
-                
-                with gr.Column():
-                    export_format = gr.Dropdown(["CSV", "Excel", "JSON"], label="導出格式", value="CSV")
-                    export_button = gr.Button("導出數據")
-                    export_result = gr.File(label="導出結果")
-                    export_status = gr.Textbox(label="導出狀態")
-        
-        # 圖表創建頁籤
-        with gr.TabItem("圖表創建"):
+        with gr.TabItem("📊 數據輸入") as tab_data:
             with gr.Row():
                 with gr.Column(scale=1):
-                    chart_type = gr.Dropdown(
-                        CHART_TYPES, 
-                        label="圖表類型", 
-                        value="長條圖"
-                    )
-                    
-                    agg_function = gr.Dropdown(
-                        AGGREGATION_FUNCTIONS,
-                        label="聚合函數",
-                        value="計數",
-                        info="選擇如何彙總數據"
-                    )
+                    gr.HTML('<div class="section-title">上傳或輸入數據</div>')
                     
-                    chart_title = gr.Textbox(label="圖表標題", placeholder="我的數據圖表")
+                    with gr.Box(elem_classes=["card"]):
+                        file_upload = gr.File(label="上傳CSV或Excel文件")
+                        upload_button = gr.Button("載入文件", elem_classes=["primary-button"])
+                        upload_status = gr.Textbox(label="上傳狀態", lines=2)
                     
-                    color_scheme = gr.Dropdown(
-                        list(COLOR_SCHEMES.keys()),
-                        label="顏色方案",
-                        value="默認"
-                    )
+                    with gr.Box(elem_classes=["card"]):
+                        csv_input = gr.Textbox(
+                            label="直接輸入數據（逗號或空格分隔）", 
+                            placeholder="類別,數值\nA,10\nB,20\nC,15\nD,25\nE,30\n\n或\n\n類別 數值\nA 10\nB 20\nC 15\nD 25\nE 30", 
+                            lines=10
+                        )
+                        parse_button = gr.Button("解析數據", elem_classes=["primary-button"])
+                        parse_status = gr.Textbox(label="解析狀態", lines=2)
                 
                 with gr.Column(scale=1):
-                    # 軸和分組選擇
-                    x_column = gr.Dropdown(["類別"], label="X軸（或類別）")
-                    y_column = gr.Dropdown(["數值"], label="Y軸（或數值）")
-                    group_column = gr.Dropdown(["無"], label="分組列（用於多系列圖表）")
-                    size_column = gr.Dropdown(["無"], label="大小列（用於氣泡圖等）")
-                    
-                    # 尺寸控制
-                    chart_width = gr.Slider(300, 1200, 700, label="圖表寬度")
-                    chart_height = gr.Slider(300, 800, 500, label="圖表高度")
+                    gr.HTML('<div class="section-title">數據預覽</div>')
                     
-                    # 顯示選項
-                    with gr.Row():
-                        show_grid = gr.Checkbox(label="顯示網格", value=True)
-                        show_legend = gr.Checkbox(label="顯示圖例", value=True)
-            
-            # 圖案和顏色自定義區
+                    with gr.Box(elem_classes=["card"]):
+                        data_preview = gr.Dataframe(label="數據表格預覽", interactive=False)
+                        
+                        with gr.Row():
+                            export_format = gr.Dropdown(
+                                ["CSV", "Excel", "JSON"], 
+                                label="導出格式", 
+                                value="CSV"
+                            )
+                            export_button = gr.Button("導出數據", elem_classes=["secondary-button"])
+                        
+                        export_result = gr.File(label="導出結果")
+                        export_status = gr.Textbox(label="導出狀態", lines=2)
+        
+        # 圖表創建頁籤
+        with gr.TabItem("📈 圖表創建") as tab_chart:
             with gr.Row():
-                with gr.Column():
-                    gr.Markdown("### 圖案和顏色設置")
-                    gr.Markdown("為圖表元素設置特定的填充圖案（適用於黑白印刷）和顏色")
-                    
-                    # 動態添加圖案，先默認提供三個
-                    with gr.Row():
-                        pattern1 = gr.Dropdown(PATTERN_TYPES, label="圖案1", value="無")
-                        pattern2 = gr.Dropdown(PATTERN_TYPES, label="圖案2", value="無")
-                        pattern3 = gr.Dropdown(PATTERN_TYPES, label="圖案3", value="無")
+                with gr.Column(scale=1):
+                    gr.HTML('<div class="section-title">圖表設置</div>')
                     
-                    # 自定義顏色區域
-                    color_customization = gr.Textbox(
-                        label="自定義顏色 (格式: 類別1:#FF0000,類別2:#00FF00)", 
-                        placeholder="A:#1f77b4,B:#ff7f0e,C:#2ca02c", 
-                        info="輸入類別名稱和十六進制顏色代碼，用逗號分隔多個項目"
-                    )
+                    with gr.Box(elem_classes=["card"]):
+                        chart_type = gr.Dropdown(
+                            CHART_TYPES, 
+                            label="📊 圖表類型", 
+                            value="長條圖",
+                            interactive=True
+                        )
+                        
+                        with gr.Row():
+                            recommend_button = gr.Button("🧠 智能推薦圖表", variant="secondary", elem_classes=["secondary-button"])
+                            recommendation_result = gr.Textbox(label="推薦結果", lines=2)
+                        
+                        chart_title = gr.Textbox(label="📝 圖表標題", placeholder="我的數據圖表")
+                        
+                        agg_function = gr.Dropdown(
+                            AGGREGATION_FUNCTIONS,
+                            label="🔄 聚合函數",
+                            value="計數",
+                            info="選擇如何彙總數據"
+                        )
+                        
+                        gr.HTML("<div class='section-title'>數據映射</div>")
+                        
+                        # 軸和分組選擇
+                        x_column = gr.Dropdown(["類別"], label="X軸（或類別）")
+                        y_column = gr.Dropdown(["計數"], label="Y軸（或數值）")
+                        group_column = gr.Dropdown(["無"], label="分組列（用於多系列圖表）")
+                        size_column = gr.Dropdown(["無"], label="大小列（用於氣泡圖等）")
+                        
+                        gr.HTML("<div class='tips-box'>💡 提示: 選擇不同圖表類型時，界面會自動調整顯示相關設置選項</div>")
                 
-                with gr.Column():
-                    # 按鈕區
-                    update_button = gr.Button("更新圖表", variant="primary")
+                with gr.Column(scale=1):
+                    gr.HTML('<div class="section-title">顯示選項</div>')
                     
-                    with gr.Row():
-                        export_format = gr.Dropdown(
-                            ["PNG", "SVG", "PDF", "JPEG"], 
-                            label="導出格式", 
-                            value="PNG"
+                    with gr.Box(elem_classes=["card"]):
+                        # 尺寸控制
+                        with gr.Row():
+                            chart_width = gr.Slider(300, 1200, 800, label="圖表寬度")
+                            chart_height = gr.Slider(300, 800, 500, label="圖表高度")
+                        
+                        with gr.Row():
+                            show_grid = gr.Checkbox(label="顯示網格", value=True)
+                            show_legend = gr.Checkbox(label="顯示圖例", value=True)
+                        
+                        color_scheme = gr.Dropdown(
+                            list(COLOR_SCHEMES.keys()),
+                            label="🎨 顏色方案",
+                            value="默認"
                         )
-                        download_button = gr.Button("導出圖表")
+                        
+                        gr.HTML('<div style="margin-top: 10px;"><b>顏色參考</b> (點擊顏色可複製顏色代碼)</div>')
+                        gr.HTML(generate_color_cards(), elem_id="color_display")
                     
-                    export_chart = gr.File(label="導出的圖表")
-                    export_chart_status = gr.Textbox(label="導出狀態")
+                    # 圖案和顏色自定義區
+                    with gr.Box(elem_classes=["card"]):
+                        gr.HTML('<div class="section-title">自定義圖案和顏色</div>')
+                        
+                        # 動態添加圖案，先默認提供三個
+                        with gr.Row():
+                            pattern1 = gr.Dropdown(PATTERN_TYPES, label="圖案1", value="無")
+                            pattern2 = gr.Dropdown(PATTERN_TYPES, label="圖案2", value="無")
+                            pattern3 = gr.Dropdown(PATTERN_TYPES, label="圖案3", value="無")
+                        
+                        # 自定義顏色區域
+                        color_customization = gr.Textbox(
+                            label="自定義顏色 (格式: 類別1:#FF0000,類別2:#00FF00)", 
+                            placeholder="正面:#2ca02c,負面:#ff7f0e,中性:#1f77b4", 
+                            info="輸入類別名稱和十六進制顏色代碼，用逗號分隔多個項目"
+                        )
+                        
+                        with gr.Row():
+                            update_button = gr.Button("更新圖表", variant="primary", elem_classes=["primary-button"])
+                        
+                        with gr.Row():
+                            export_img_format = gr.Dropdown(
+                                ["PNG", "SVG", "PDF", "JPEG"], 
+                                label="導出格式", 
+                                value="PNG"
+                            )
+                            download_button = gr.Button("導出圖表", elem_classes=["secondary-button"])
+                        
+                        export_chart = gr.File(label="導出的圖表")
+                        export_chart_status = gr.Textbox(label="導出狀態", lines=2)
             
             # 圖表預覽區
-            chart_output = gr.Plot(label="圖表預覽")
+            gr.HTML('<div class="section-title">圖表預覽</div>')
+            with gr.Box(elem_classes=["chart-previewer"]):
+                chart_output = gr.Plot(label="", elem_id="chart_preview")
+        
+        # 使用說明頁籤
+        with gr.TabItem("📖 使用說明") as tab_help:
+            gr.HTML("""
+            <div class="card">
+                <div class="section-title">使用說明</div>
+                
+                <h3>數據輸入</h3>
+                <ul>
+                    <li>上傳CSV或Excel文件，或在文本框中直接輸入數據</li>
+                    <li>第一行被視為欄位名稱（表頭），不會納入統計</li>
+                    <li>支持逗號分隔(CSV)或空格分隔的數據格式</li>
+                    <li>系統會自動添加「計數」列，方便進行計數統計</li>
+                </ul>
+                
+                <h3>圖表創建</h3>
+                <ul>
+                    <li><strong>智能推薦：</strong>系統可根據您的數據結構智能推薦最適合的圖表類型和設置</li>
+                    <li><strong>圖表類型：</strong>支持20多種專業圖表，包括長條圖、堆疊長條圖、折線圖、圓餅圖等</li>
+                    <li><strong>聚合函數：</strong>選擇如何彙總數據（計數、求和、平均值、最大值等）</li>
+                    <li><strong>分組列：</strong>用於創建多系列圖表，例如按類別分組的長條圖</li>
+                    <li><strong>大小列：</strong>用於氣泡圖等需要額外數值控制大小的圖表</li>
+                </ul>
+                
+                <h3>自定義選項</h3>
+                <ul>
+                    <li><strong>顏色方案：</strong>選擇預設的顏色系列，包括明亮、柔和、漸變等多種風格</li>
+                    <li><strong>自定義顏色：</strong>為特定類別設置顏色，格式為"類別1:#FF0000,類別2:#00FF00"</li>
+                    <li><strong>圖案填充：</strong>為圖表元素設置填充圖案，特別適用於黑白印刷</li>
+                    <li><strong>導出格式：</strong>支持PNG、SVG、PDF和JPEG格式導出</li>
+                </ul>
+                
+                <h3>常見使用場景</h3>
+                <ul>
+                    <li><strong>分類數據分析：</strong>使用長條圖或圓餅圖展示不同類別的分布</li>
+                    <li><strong>多分類比較：</strong>使用堆疊長條圖或群組長條圖展示多個分類維度的關係</li>
+                    <li><strong>趨勢分析：</strong>使用折線圖或區域圖展示數據隨時間的變化</li>
+                    <li><strong>相關性分析：</strong>使用散點圖或熱力圖分析變量之間的關係</li>
+                </ul>
+            </div>
+            """)
     
     # 輔助函數
     def parse_custom_colors(color_text):
@@ -902,14 +1369,6 @@ with gr.Blocks(title="進階數據可視化工具") as demo:
             patterns.append(p3)
         return patterns
     
-    def process_group_column(group_col):
-        """處理分組列選擇"""
-        return None if group_col == "無" else group_col
-    
-    def process_size_column(size_col):
-        """處理大小列選擇"""
-        return None if size_col == "無" else size_col
-    
     # 事件處理
     upload_button.click(
         process_upload, 
@@ -992,7 +1451,7 @@ with gr.Blocks(title="進階數據可視化工具") as demo:
     # 導出圖表
     download_button.click(
         download_figure,
-        inputs=[chart_output, export_format],
+        inputs=[chart_output, export_img_format],
         outputs=[export_chart, export_chart_status]
     )
     
@@ -1022,107 +1481,76 @@ with gr.Blocks(title="進階數據可視化工具") as demo:
         update_element_visibility,
         inputs=[chart_type],
         outputs=[x_column, y_column, group_column, size_column]
-    )
-    
-    # 圖表相關自動更新函數
-    def auto_update_chart(df, chart_type, x_col, y_col, group_col, size_col, color_scheme, patterns_list, title, width, height, show_grid, show_legend, agg_func, custom_colors):
-        """圖表自動更新函數，用於各種輸入改變時"""
-        # 處理可能為"無"的選項
-        group_column_value = None if group_col == "無" else group_col
-        size_column_value = None if size_col == "無" else size_col
-        
-        return create_plot(
-            df, chart_type, x_col, y_col, group_column_value, size_column_value,
-            color_scheme, patterns_list, title, width, height, show_grid, show_legend, agg_func, custom_colors
-        )
-    
-    # 添加自動更新事件
-    chart_type.change(
-        auto_update_chart,
+    ).then(
+        lambda df, chart_type, x_col, y_col, group_col, size_col, color_scheme, patterns, title, width, height, show_grid, show_legend, agg_func, custom_colors: 
+        create_plot(
+            df, chart_type, x_col, y_col, 
+            None if group_col == "無" else group_col, 
+            None if size_col == "無" else size_col,
+            color_scheme, patterns, title, width, height, 
+            show_grid, show_legend, agg_func, custom_colors
+        ),
         inputs=[
-            data_state, chart_type, x_column, y_column, group_column, size_column,
+            data_state, chart_type, x_column, y_column, 
+            group_column, size_column,
             color_scheme, patterns_state, chart_title, chart_width, chart_height, 
             show_grid, show_legend, agg_function, custom_colors_state
         ],
         outputs=[chart_output]
     )
     
-    x_column.change(
-        auto_update_chart,
-        inputs=[
-            data_state, chart_type, x_column, y_column, group_column, size_column,
-            color_scheme, patterns_state, chart_title, chart_width, chart_height,
-            show_grid, show_legend, agg_function, custom_colors_state
-        ],
-        outputs=[chart_output]
-    )
-    
-    y_column.change(
-        auto_update_chart,
-        inputs=[
-            data_state, chart_type, x_column, y_column, group_column, size_column,
-            color_scheme, patterns_state, chart_title, chart_width, chart_height,
-            show_grid, show_legend, agg_function, custom_colors_state
-        ],
-        outputs=[chart_output]
-    )
-    
-    group_column.change(
-        auto_update_chart,
-        inputs=[
-            data_state, chart_type, x_column, y_column, group_column, size_column,
-            color_scheme, patterns_state, chart_title, chart_width, chart_height,
-            show_grid, show_legend, agg_function, custom_colors_state
-        ],
-        outputs=[chart_output]
-    )
-    
-    agg_function.change(
-        auto_update_chart,
-        inputs=[
-            data_state, chart_type, x_column, y_column, group_column, size_column,
-            color_scheme, patterns_state, chart_title, chart_width, chart_height,
-            show_grid, show_legend, agg_function, custom_colors_state
-        ],
-        outputs=[chart_output]
-    )
-    
-    color_scheme.change(
-        auto_update_chart,
+    # 智能推薦功能
+    recommend_button.click(
+        recommend_chart_settings,
+        inputs=[data_state],
+        outputs=[recommendation_result]
+    ).then(
+        lambda rec: (
+            rec.get("chart_type") if isinstance(rec, dict) and rec.get("chart_type") else None,
+            rec.get("x_column") if isinstance(rec, dict) and rec.get("x_column") else None,
+            rec.get("y_column") if isinstance(rec, dict) and rec.get("y_column") else None,
+            rec.get("group_column") if isinstance(rec, dict) and rec.get("group_column") else "無",
+            rec.get("agg_function") if isinstance(rec, dict) and rec.get("agg_function") else None
+        ),
+        inputs=[recommendation_result],
+        outputs=[chart_type, x_column, y_column, group_column, agg_function]
+    ).then(
+        lambda df, chart_type, x_col, y_col, group_col, size_col, color_scheme, patterns, title, width, height, show_grid, show_legend, agg_func, custom_colors: 
+        create_plot(
+            df, chart_type, x_col, y_col, 
+            None if group_col == "無" else group_col, 
+            None if size_col == "無" else size_col,
+            color_scheme, patterns, title, width, height, 
+            show_grid, show_legend, agg_func, custom_colors
+        ),
         inputs=[
-            data_state, chart_type, x_column, y_column, group_column, size_column,
-            color_scheme, patterns_state, chart_title, chart_width, chart_height,
+            data_state, chart_type, x_column, y_column, 
+            group_column, size_column,
+            color_scheme, patterns_state, chart_title, chart_width, chart_height, 
             show_grid, show_legend, agg_function, custom_colors_state
         ],
         outputs=[chart_output]
     )
-
-# 在啟動應用之前添加使用說明
-with demo:
-    gr.Markdown("""
-    ## 使用說明
-    
-    ### 數據輸入
-    - 上傳CSV或Excel文件，或在文本框中直接輸入數據
-    - 第一行被視為欄位名稱（表頭），不會納入統計
-    - 支持逗號分隔(CSV)或空格分隔的數據格式
-    
-    ### 圖表創建
-    - 選擇圖表類型：長條圖、折線圖、圓餅圖等多種專業圖表
-    - 聚合函數：選擇如何彙總數據（求和、平均值、最大值等）
-    - 分組列：用於創建多系列圖表，如按類別分組的長條圖
-    - 大小列：用於氣泡圖等需要額外數值控制大小的圖表
     
-    ### 自定義選項
-    - 圖案填充：為圖表元素設置填充圖案，特別適用於黑白印刷
-    - 自定義顏色：為特定類別設置顏色，格式為"類別1:#FF0000,類別2:#00FF00"
-    - 導出格式：支持PNG、SVG、PDF和JPEG格式導出
-    
-    ### 注意事項
-    - 不同圖表類型需要不同的數據組織形式
-    - 圓餅圖和環形圖只需要類別和數值列
-    - 複雜圖表（如熱力圖、雷達圖）需要適當的數據結構
-    """)
+    # 其他輸入變化自動更新圖表
+    for input_component in [x_column, y_column, group_column, size_column, agg_function, color_scheme]:
+        input_component.change(
+            lambda df, chart_type, x_col, y_col, group_col, size_col, color_scheme, patterns, title, width, height, show_grid, show_legend, agg_func, custom_colors: 
+            create_plot(
+                df, chart_type, x_col, y_col, 
+                None if group_col == "無" else group_col, 
+                None if size_col == "無" else size_col,
+                color_scheme, patterns, title, width, height, 
+                show_grid, show_legend, agg_func, custom_colors
+            ),
+            inputs=[
+                data_state, chart_type, x_column, y_column, 
+                group_column, size_column,
+                color_scheme, patterns_state, chart_title, chart_width, chart_height, 
+                show_grid, show_legend, agg_function, custom_colors_state
+            ],
+            outputs=[chart_output]
+        )
 
 # 啟動應用
 demo.launch()