Update app.py

app.py

@@ -1,566 +1,314 @@
-import React, { useState, useEffect } from 'react';
-import {
-  LineChart, Line, BarChart, Bar, PieChart, Pie, AreaChart, Area,
-  XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
-  ScatterChart, Scatter, Cell
-} from 'recharts';
-import Papa from 'papaparse';
+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
 
-// 主色調
-const COLORS = ['#8884d8', '#82ca9d', '#ffc658', '#ff8042', '#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#a4de6c'];
+# 初始化默認數據
+default_data = pd.DataFrame({
+    "類別": ["A", "B", "C", "D", "E"],
+    "數值": [10, 20, 15, 25, 30]
+})
 
-const App = () => {
-  const [data, setData] = useState([]);
-  const [headers, setHeaders] = useState([]);
-  const [chartType, setChartType] = useState('bar');
-  const [xAxis, setXAxis] = useState('');
-  const [yAxis, setYAxis] = useState('');
-  const [pieColumn, setPieColumn] = useState('');
-  const [tableData, setTableData] = useState([['', ''], ['', '']]);
-  const [customization, setCustomization] = useState({
-    chartWidth: 600,
-    chartHeight: 400,
-    fontSize: 12,
-    legendPosition: 'bottom',
-    colorScheme: COLORS,
-    showGrid: true,
-    showTooltip: true,
-    showLegend: true,
-  });
+# 可用的顏色方案
+COLOR_SCHEMES = {
+    "默認": px.colors.qualitative.Plotly,
+    "藍綠色系": px.colors.sequential.Blues,
+    "紅色系": px.colors.sequential.Reds,
+    "綠色系": px.colors.sequential.Greens,
+    "彩虹色": px.colors.sequential.Turbo
+}
 
-  useEffect(() => {
-    // 表格發生變化時更新數據
-    processTableData();
-  }, [tableData]);
-
-  const processTableData = () => {
-    if (tableData.length <= 1) return;
+def create_plot(df, chart_type, x_column, y_column, color_scheme, title, width, height, show_grid, show_legend):
+    """創建圖表函數"""
     
-    const headers = tableData[0].filter(h => h.trim() !== '');
-    if (headers.length < 1) return;
+    # 數據預處理
+    if df is None or df.empty:
+        df = default_data
     
-    setHeaders(headers);
+    # 確保列存在
+    if x_column not in df.columns:
+        x_column = df.columns[0] if len(df.columns) > 0 else "類別"
     
-    const processedData = [];
+    if y_column not in df.columns:
+        y_column = df.columns[1] if len(df.columns) > 1 else "數值"
     
-    for (let i = 1; i < tableData.length; i++) {
-      if (tableData[i].some(cell => cell.trim() !== '')) {
-        const rowData = {};
-        
-        tableData[i].forEach((cell, cellIndex) => {
-          if (cellIndex < headers.length) {
-            // 嘗試將數字字符串轉換為數字
-            const value = cell.trim();
-            const numValue = parseFloat(value);
-            rowData[headers[cellIndex]] = isNaN(numValue) ? value : numValue;
-          }
-        });
-        
-        processedData.push(rowData);
-      }
+    # 獲取選擇的顏色方案
+    colors = COLOR_SCHEMES[color_scheme]
+    
+    # 設置圖表參數
+    fig_params = {
+        "width": width,
+        "height": height,
+        "title": title
     }
     
-    setData(processedData);
+    # 基於選擇的圖表類型創建圖表
+    if chart_type == "長條圖":
+        fig = px.bar(df, x=x_column, y=y_column, color_discrete_sequence=colors, **fig_params)
     
-    // 預設第一個列作為X軸，第二個列作為Y軸
-    if (headers.length >= 1 && !xAxis) {
-      setXAxis(headers[0]);
-    }
+    elif chart_type == "折線圖":
+        fig = px.line(df, x=x_column, y=y_column, markers=True, color_discrete_sequence=colors, **fig_params)
     
-    if (headers.length >= 2 && !yAxis) {
-      setYAxis(headers[1]);
-    }
+    elif chart_type == "圓餅圖":
+        fig = px.pie(df, names=x_column, values=y_column, color_discrete_sequence=colors, **fig_params)
     
-    if (headers.length >= 1 && !pieColumn) {
-      setPieColumn(headers[0]);
-    }
-  };
-
-  const addRow = () => {
-    setTableData([...tableData, Array(tableData[0].length).fill('')]);
-  };
-
-  const addColumn = () => {
-    setTableData(tableData.map(row => [...row, '']));
-  };
-
-  const handleCellChange = (rowIndex, colIndex, value) => {
-    const newData = [...tableData];
-    newData[rowIndex][colIndex] = value;
-    setTableData(newData);
-  };
-
-  const handleCustomizationChange = (key, value) => {
-    setCustomization({
-      ...customization,
-      [key]: value
-    });
-  };
-
-  const handlePasteData = (e) => {
-    e.preventDefault();
-    const clipboard = e.clipboardData.getData('text');
-    const rows = clipboard.split('\n').filter(row => row.trim());
+    elif chart_type == "散點圖":
+        fig = px.scatter(df, x=x_column, y=y_column, color_discrete_sequence=colors, **fig_params)
     
-    if (rows.length > 0) {
-      const pastedData = rows.map(row => row.split('\t'));
-      
-      // 確保所有行有相同的列數
-      const maxCols = Math.max(...pastedData.map(row => row.length));
-      const normalizedData = pastedData.map(row => {
-        while (row.length < maxCols) {
-          row.push('');
-        }
-        return row;
-      });
-      
-      setTableData(normalizedData);
-    }
-  };
-
-  const handleFileUpload = (e) => {
-    const file = e.target.files[0];
-    if (file) {
-      Papa.parse(file, {
-        complete: (results) => {
-          if (results.data && results.data.length > 0) {
-            setTableData(results.data);
-          }
-        }
-      });
-    }
-  };
-
-  const renderChart = () => {
-    if (data.length === 0) {
-      return <div className="p-4 text-center">請輸入或粘貼數據以生成圖表</div>;
-    }
-
-    const { chartWidth, chartHeight, fontSize, showGrid, showTooltip, showLegend, legendPosition, colorScheme } = customization;
+    elif chart_type == "區域圖":
+        fig = px.area(df, x=x_column, y=y_column, color_discrete_sequence=colors, **fig_params)
     
-    const style = {
-      fontSize: `${fontSize}px`
-    };
-
-    switch (chartType) {
-      case 'bar':
-        return (
-          <ResponsiveContainer width={chartWidth} height={chartHeight}>
-            <BarChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
-              {showGrid && <CartesianGrid strokeDasharray="3 3" />}
-              <XAxis dataKey={xAxis} style={style} />
-              <YAxis style={style} />
-              {showTooltip && <Tooltip />}
-              {showLegend && <Legend layout="horizontal" verticalAlign={legendPosition} />}
-              <Bar dataKey={yAxis} fill={colorScheme[0]} />
-            </BarChart>
-          </ResponsiveContainer>
-        );
-      
-      case 'line':
-        return (
-          <ResponsiveContainer width={chartWidth} height={chartHeight}>
-            <LineChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
-              {showGrid && <CartesianGrid strokeDasharray="3 3" />}
-              <XAxis dataKey={xAxis} style={style} />
-              <YAxis style={style} />
-              {showTooltip && <Tooltip />}
-              {showLegend && <Legend layout="horizontal" verticalAlign={legendPosition} />}
-              <Line type="monotone" dataKey={yAxis} stroke={colorScheme[0]} activeDot={{ r: 8 }} />
-            </LineChart>
-          </ResponsiveContainer>
-        );
-      
-      case 'area':
-        return (
-          <ResponsiveContainer width={chartWidth} height={chartHeight}>
-            <AreaChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
-              {showGrid && <CartesianGrid strokeDasharray="3 3" />}
-              <XAxis dataKey={xAxis} style={style} />
-              <YAxis style={style} />
-              {showTooltip && <Tooltip />}
-              {showLegend && <Legend layout="horizontal" verticalAlign={legendPosition} />}
-              <Area type="monotone" dataKey={yAxis} stroke={colorScheme[0]} fill={colorScheme[0]} />
-            </AreaChart>
-          </ResponsiveContainer>
-        );
-      
-      case 'pie':
-        // 對餅圖數據進行特殊處理
-        const pieData = data.map(item => ({
-          name: String(item[pieColumn]),
-          value: typeof item[yAxis] === 'number' ? item[yAxis] : 0
-        }));
+    else:  # 默認使用長條圖
+        fig = px.bar(df, x=x_column, y=y_column, color_discrete_sequence=colors, **fig_params)
+    
+    # 設置網格
+    fig.update_layout(
+        showlegend=show_legend,
+        xaxis=dict(showgrid=show_grid),
+        yaxis=dict(showgrid=show_grid)
+    )
+    
+    return fig
 
-        return (
-          <ResponsiveContainer width={chartWidth} height={chartHeight}>
-            <PieChart margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
-              {showTooltip && <Tooltip />}
-              {showLegend && <Legend layout="horizontal" verticalAlign={legendPosition} />}
-              <Pie
-                data={pieData}
-                cx="50%"
-                cy="50%"
-                labelLine={true}
-                outerRadius={chartHeight / 3}
-                fill="#8884d8"
-                dataKey="value"
-                nameKey="name"
-                label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
-              >
-                {pieData.map((entry, index) => (
-                  <Cell key={`cell-${index}`} fill={colorScheme[index % colorScheme.length]} />
-                ))}
-              </Pie>
-            </PieChart>
-          </ResponsiveContainer>
-        );
-      
-      case 'scatter':
-        return (
-          <ResponsiveContainer width={chartWidth} height={chartHeight}>
-            <ScatterChart margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
-              {showGrid && <CartesianGrid strokeDasharray="3 3" />}
-              <XAxis dataKey={xAxis} name={xAxis} style={style} />
-              <YAxis dataKey={yAxis} name={yAxis} style={style} />
-              {showTooltip && <Tooltip cursor={{ strokeDasharray: '3 3' }} />}
-              {showLegend && <Legend layout="horizontal" verticalAlign={legendPosition} />}
-              <Scatter name={`${xAxis} vs ${yAxis}`} data={data} fill={colorScheme[0]} />
-            </ScatterChart>
-          </ResponsiveContainer>
-        );
-      
-      default:
-        return null;
-    }
-  };
+def process_upload(file):
+    """處理上傳的文件"""
+    try:
+        if file is None:
+            return None, "未上傳文件"
+        
+        # 檢查文件類型
+        file_type = file.name.split('.')[-1].lower()
+        
+        if file_type == 'csv':
+            df = pd.read_csv(file.name)
+        elif file_type in ['xls', 'xlsx']:
+            df = pd.read_excel(file.name)
+        else:
+            return None, f"不支持的文件類型: {file_type}。請上傳CSV或Excel文件。"
+        
+        return df, f"成功載入數據，共{len(df)}行，{len(df.columns)}列"
+    
+    except Exception as e:
+        return None, f"載入文件時出錯: {str(e)}"
 
-  const exportSvg = () => {
-    // 獲取SVG內容
-    const svgElement = document.querySelector('.recharts-wrapper svg');
-    if (svgElement) {
-      // 創建一個Blob對象
-      const svgData = new XMLSerializer().serializeToString(svgElement);
-      const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
-      const svgUrl = URL.createObjectURL(svgBlob);
-      
-      // 創建下載鏈接
-      const downloadLink = document.createElement('a');
-      downloadLink.href = svgUrl;
-      downloadLink.download = `chart_export_${new Date().toISOString()}.svg`;
-      document.body.appendChild(downloadLink);
-      downloadLink.click();
-      document.body.removeChild(downloadLink);
-    }
-  };
+def parse_data(csv_data):
+    """解析CSV文本數據"""
+    try:
+        if not csv_data or csv_data.strip() == "":
+            return None, "未提供數據"
+        
+        # 使用StringIO讀取CSV文本
+        df = pd.read_csv(io.StringIO(csv_data))
+        return df, f"成功解析數據，共{len(df)}行，{len(df.columns)}列"
+    
+    except Exception as e:
+        return None, f"解析數據時出錯: {str(e)}"
 
-  const exportPng = () => {
-    // 將SVG轉換為Canvas，然後導出為PNG
-    const svgElement = document.querySelector('.recharts-wrapper svg');
-    if (svgElement) {
-      const svgData = new XMLSerializer().serializeToString(svgElement);
-      const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d');
-      
-      // 設置Canvas大小
-      canvas.width = customization.chartWidth;
-      canvas.height = customization.chartHeight;
-      
-      const img = new Image();
-      img.onload = function() {
-        ctx.drawImage(img, 0, 0);
-        const pngUrl = canvas.toDataURL('image/png');
+def export_data(df, format_type):
+    """導出數據為各種格式"""
+    if df is None or df.empty:
+        return None, "沒有數據可以導出"
+    
+    try:
+        if format_type == "CSV":
+            buffer = io.StringIO()
+            df.to_csv(buffer, index=False)
+            data = buffer.getvalue()
+            filename = "exported_data.csv"
+            mime_type = "text/csv"
         
-        const downloadLink = document.createElement('a');
-        downloadLink.href = pngUrl;
-        downloadLink.download = `chart_export_${new Date().toISOString()}.png`;
-        document.body.appendChild(downloadLink);
-        downloadLink.click();
-        document.body.removeChild(downloadLink);
-      };
-      
-      img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)));
-    }
-  };
+        elif format_type == "Excel":
+            buffer = io.BytesIO()
+            df.to_excel(buffer, index=False)
+            data = buffer.getvalue()
+            filename = "exported_data.xlsx"
+            mime_type = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+        
+        elif format_type == "JSON":
+            buffer = io.StringIO()
+            data = df.to_json(orient="records")
+            filename = "exported_data.json"
+            mime_type = "application/json"
+        
+        else:
+            return None, f"不支持的導出格式: {format_type}"
+        
+        return (data, filename, mime_type), f"數據已成功導出為{format_type}格式"
+    
+    except Exception as e:
+        return None, f"導出數據時出錯: {str(e)}"
 
-  const exportCsv = () => {
-    // 導出數據為CSV
-    const csvContent = Papa.unparse(tableData);
-    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-    const url = URL.createObjectURL(blob);
+def update_columns(df):
+    """更新列選擇下拉菜單"""
+    if df is None or df.empty:
+        # 默認列
+        return 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])
     
-    const downloadLink = document.createElement('a');
-    downloadLink.href = url;
-    downloadLink.download = `data_export_${new Date().toISOString()}.csv`;
-    document.body.appendChild(downloadLink);
-    downloadLink.click();
-    document.body.removeChild(downloadLink);
-  };
+    return x_dropdown, y_dropdown
 
-  return (
-    <div className="p-4 max-w-6xl mx-auto">
-      <h1 className="text-2xl font-bold mb-6 text-center">數據可視化工具</h1>
-      
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        {/* 數據輸入區 */}
-        <div className="p-4 border rounded shadow-sm">
-          <h2 className="text-lg font-semibold mb-3">數據輸入</h2>
-          
-          <div className="mb-4 flex gap-2">
-            <button 
-              onClick={addRow} 
-              className="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600"
-            >
-              添加行
-            </button>
-            <button 
-              onClick={addColumn} 
-              className="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600"
-            >
-              添加列
-            </button>
-            <label className="px-3 py-1 bg-purple-500 text-white rounded hover:bg-purple-600 cursor-pointer">
-              上傳CSV
-              <input 
-                type="file" 
-                accept=".csv" 
-                onChange={handleFileUpload} 
-                className="hidden"
-              />
-            </label>
-            <button 
-              onClick={exportCsv} 
-              className="px-3 py-1 bg-gray-500 text-white rounded hover:bg-gray-600"
-            >
-              導出CSV
-            </button>
-          </div>
-          
-          <div className="mb-4 overflow-x-auto">
-            <div 
-              className="border rounded"
-              onPaste={handlePasteData}
-            >
-              <table className="min-w-full divide-y divide-gray-200">
-                <tbody className="bg-white divide-y divide-gray-200">
-                  {tableData.map((row, rowIndex) => (
-                    <tr key={rowIndex}>
-                      {row.map((cell, colIndex) => (
-                        <td key={colIndex} className="px-2 py-1 border">
-                          <input
-                            type="text"
-                            value={cell}
-                            onChange={(e) => handleCellChange(rowIndex, colIndex, e.target.value)}
-                            className="w-full border-0 focus:ring-0"
-                          />
-                        </td>
-                      ))}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-            <p className="text-sm text-gray-500 mt-2">提示：您可以直接從Excel或其他表格軟件複製並粘貼數據</p>
-          </div>
-        </div>
+def download_figure(fig):
+    """導出圖表為圖像"""
+    if fig is None:
+        return None, "沒有圖表可以導出"
+    
+    try:
+        # 將Plotly圖表轉換為PNG圖像
+        img_bytes = fig.to_image(format="png")
         
-        {/* 圖表區 */}
-        <div className="p-4 border rounded shadow-sm">
-          <h2 className="text-lg font-semibold mb-3">圖表預覽</h2>
-          
-          <div className="mb-4 grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium mb-1">圖表類型</label>
-              <select 
-                value={chartType} 
-                onChange={(e) => setChartType(e.target.value)}
-                className="w-full p-2 border rounded"
-              >
-                <option value="bar">長條圖</option>
-                <option value="line">折線圖</option>
-                <option value="area">區域圖</option>
-                <option value="pie">圓餅圖</option>
-                <option value="scatter">散點圖</option>
-              </select>
-            </div>
-            
-            {chartType !== 'pie' && (
-              <div>
-                <label className="block text-sm font-medium mb-1">X軸</label>
-                <select 
-                  value={xAxis} 
-                  onChange={(e) => setXAxis(e.target.value)}
-                  className="w-full p-2 border rounded"
-                >
-                  {headers.map((header, index) => (
-                    <option key={index} value={header}>{header}</option>
-                  ))}
-                </select>
-              </div>
-            )}
-            
-            <div>
-              <label className="block text-sm font-medium mb-1">
-                {chartType === 'pie' ? '數值列' : 'Y軸'}
-              </label>
-              <select 
-                value={yAxis} 
-                onChange={(e) => setYAxis(e.target.value)}
-                className="w-full p-2 border rounded"
-              >
-                {headers.map((header, index) => (
-                  <option key={index} value={header}>{header}</option>
-                ))}
-              </select>
-            </div>
+        # 創建PIL圖像對象
+        img = Image.open(io.BytesIO(img_bytes))
+        
+        return img, "圖表已成功導出為PNG圖像"
+    
+    except Exception as e:
+        return None, f"導出圖表時出錯: {str(e)}"
+
+# 建立Gradio界面
+with gr.Blocks(title="數據可視化工具") as demo:
+    gr.Markdown("# 數據可視化工具")
+    gr.Markdown("上傳CSV或Excel文件，或直接在下方輸入數據來創建各種圖表")
+    
+    # 狀態變量
+    data_state = gr.State(None)
+    
+    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="或直接輸入CSV數據（逗號分隔）", placeholder="類別,數值\nA,10\nB,20\nC,15\nD,25\nE,30", lines=10)
+                    parse_button = gr.Button("解析數據")
+                    parse_status = gr.Textbox(label="解析狀態")
             
-            {chartType === 'pie' && (
-              <div>
-                <label className="block text-sm font-medium mb-1">類別列</label>
-                <select 
-                  value={pieColumn} 
-                  onChange={(e) => setPieColumn(e.target.value)}
-                  className="w-full p-2 border rounded"
-                >
-                  {headers.map((header, index) => (
-                    <option key={index} value={header}>{header}</option>
-                  ))}
-                </select>
-              </div>
-            )}
-          </div>
-          
-          <div className="mb-4 flex justify-center overflow-auto">
-            {renderChart()}
-          </div>
-          
-          <div className="flex gap-2 justify-center">
-            <button 
-              onClick={exportSvg} 
-              className="px-3 py-1 bg-indigo-500 text-white rounded hover:bg-indigo-600"
-            >
-              導出SVG
-            </button>
-            <button 
-              onClick={exportPng} 
-              className="px-3 py-1 bg-pink-500 text-white rounded hover:bg-pink-600"
-            >
-              導出PNG
-            </button>
-          </div>
-        </div>
-      </div>
-      
-      {/* 自定義選項 */}
-      <div className="mt-6 p-4 border rounded shadow-sm">
-        <h2 className="text-lg font-semibold mb-3">自定義選項</h2>
+            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="導出狀態")
         
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-          <div>
-            <label className="block text-sm font-medium mb-1">圖表寬度</label>
-            <input 
-              type="range" 
-              min="300" 
-              max="1200" 
-              value={customization.chartWidth} 
-              onChange={(e) => handleCustomizationChange('chartWidth', Number(e.target.value))} 
-              className="w-full"
-            />
-            <div className="text-xs text-center">{customization.chartWidth}px</div>
-          </div>
-          
-          <div>
-            <label className="block text-sm font-medium mb-1">圖表高度</label>
-            <input 
-              type="range" 
-              min="200" 
-              max="800" 
-              value={customization.chartHeight} 
-              onChange={(e) => handleCustomizationChange('chartHeight', Number(e.target.value))} 
-              className="w-full"
-            />
-            <div className="text-xs text-center">{customization.chartHeight}px</div>
-          </div>
-          
-          <div>
-            <label className="block text-sm font-medium mb-1">字體大小</label>
-            <input 
-              type="range" 
-              min="8" 
-              max="24" 
-              value={customization.fontSize} 
-              onChange={(e) => handleCustomizationChange('fontSize', Number(e.target.value))} 
-              className="w-full"
-            />
-            <div className="text-xs text-center">{customization.fontSize}px</div>
-          </div>
-          
-          <div>
-            <label className="block text-sm font-medium mb-1">圖例位置</label>
-            <select 
-              value={customization.legendPosition} 
-              onChange={(e) => handleCustomizationChange('legendPosition', e.target.value)}
-              className="w-full p-2 border rounded"
-            >
-              <option value="top">頂部</option>
-              <option value="bottom">底部</option>
-              <option value="left">左側</option>
-              <option value="right">右側</option>
-            </select>
-          </div>
-          
-          <div>
-            <label className="block text-sm font-medium mb-1">顯示網格線</label>
-            <input 
-              type="checkbox" 
-              checked={customization.showGrid} 
-              onChange={(e) => handleCustomizationChange('showGrid', e.target.checked)} 
-              className="mr-2"
-            />
-          </div>
-          
-          <div>
-            <label className="block text-sm font-medium mb-1">顯示提示框</label>
-            <input 
-              type="checkbox" 
-              checked={customization.showTooltip} 
-              onChange={(e) => handleCustomizationChange('showTooltip', e.target.checked)} 
-              className="mr-2"
-            />
-          </div>
-          
-          <div>
-            <label className="block text-sm font-medium mb-1">顯示圖例</label>
-            <input 
-              type="checkbox" 
-              checked={customization.showLegend} 
-              onChange={(e) => handleCustomizationChange('showLegend', e.target.checked)} 
-              className="mr-2"
-            />
-          </div>
-          
-          <div className="col-span-full">
-            <label className="block text-sm font-medium mb-1">顏色方案</label>
-            <div className="flex flex-wrap gap-2">
-              {customization.colorScheme.map((color, index) => (
-                <input 
-                  key={index}
-                  type="color" 
-                  value={color} 
-                  onChange={(e) => {
-                    const newColors = [...customization.colorScheme];
-                    newColors[index] = e.target.value;
-                    handleCustomizationChange('colorScheme', newColors);
-                  }} 
-                  className="w-8 h-8 p-0 border-0"
-                />
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
+        # 圖表創建頁籤
+        with gr.TabItem("圖表創建"):
+            with gr.Row():
+                with gr.Column():
+                    chart_type = gr.Dropdown(
+                        ["長條圖", "折線圖", "圓餅圖", "散點圖", "區域圖"], 
+                        label="圖表類型", 
+                        value="長條圖"
+                    )
+                    
+                    x_column = gr.Dropdown(["類別"], label="X軸（或類別）")
+                    y_column = gr.Dropdown(["數值"], label="Y軸（或數值）")
+                    
+                    chart_title = gr.Textbox(label="圖表標題", placeholder="我的數據圖表")
+                    
+                    color_scheme = gr.Dropdown(
+                        list(COLOR_SCHEMES.keys()),
+                        label="顏色方案",
+                        value="默認"
+                    )
+                
+                with gr.Column():
+                    chart_width = gr.Slider(300, 1200, 700, label="圖表寬度")
+                    chart_height = gr.Slider(300, 800, 500, label="圖表高度")
+                    
+                    show_grid = gr.Checkbox(label="顯示網格", value=True)
+                    show_legend = gr.Checkbox(label="顯示圖例", value=True)
+                    
+                    update_button = gr.Button("更新圖表")
+                    download_button = gr.Button("導出為PNG圖像")
+            
+            with gr.Row():
+                chart_output = gr.Plot(label="圖表預覽")
+                download_output = gr.Image(label="導出的圖表", visible=False)
+    
+    # 事件處理
+    upload_button.click(
+        process_upload, 
+        inputs=[file_upload], 
+        outputs=[data_state, upload_status]
+    ).then(
+        lambda df: df if df is not None else pd.DataFrame(),
+        inputs=[data_state],
+        outputs=[data_preview]
+    ).then(
+        update_columns,
+        inputs=[data_state],
+        outputs=[x_column, y_column]
+    )
+    
+    parse_button.click(
+        parse_data,
+        inputs=[csv_input],
+        outputs=[data_state, parse_status]
+    ).then(
+        lambda df: df if df is not None else pd.DataFrame(),
+        inputs=[data_state],
+        outputs=[data_preview]
+    ).then(
+        update_columns,
+        inputs=[data_state],
+        outputs=[x_column, y_column]
+    )
+    
+    export_button.click(
+        export_data,
+        inputs=[data_state, export_format],
+        outputs=[export_result, export_status]
+    )
+    
+    update_button.click(
+        create_plot,
+        inputs=[data_state, chart_type, x_column, y_column, color_scheme, 
+                chart_title, chart_width, chart_height, show_grid, show_legend],
+        outputs=[chart_output]
+    )
+    
+    download_button.click(
+        download_figure,
+        inputs=[chart_output],
+        outputs=[download_output, gr.Textbox(label="下載狀態")]
+    ).then(
+        lambda: gr.update(visible=True),
+        outputs=[download_output]
+    )
+    
+    # 自動顯示圖表預覽
+    chart_type.change(
+        create_plot,
+        inputs=[data_state, chart_type, x_column, y_column, color_scheme, 
+                chart_title, chart_width, chart_height, show_grid, show_legend],
+        outputs=[chart_output]
+    )
+    
+    x_column.change(
+        create_plot,
+        inputs=[data_state, chart_type, x_column, y_column, color_scheme, 
+                chart_title, chart_width, chart_height, show_grid, show_legend],
+        outputs=[chart_output]
+    )
+    
+    y_column.change(
+        create_plot,
+        inputs=[data_state, chart_type, x_column, y_column, color_scheme, 
+                chart_title, chart_width, chart_height, show_grid, show_legend],
+        outputs=[chart_output]
+    )
 
-export default App;
+# 啟動應用
+demo.launch()