Initial commit: Enhanced Model Race Lab with demo data and UI fixes

Dockerfile

@@ -0,0 +1,24 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Install system dependencies if needed (e.g. for sklearn build sometimes)
+# But usually slim is enough for wheels.
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Create a non-root user for Hugging Face Spaces security
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+EXPOSE 7860
+
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,62 @@
+---
+title: Model Race Lab
+emoji: 🏎️
+colorFrom: indigo
+colorTo: purple
+sdk: docker
+app_port: 7860
+short_description: 自动机器学习算法竞速与代码生成平台
+---
+
+# Model Race Lab | 算法竞速实验室
+
+[English](README_EN.md) | [中文](README.md)
+
+**Model Race Lab** 是一个专为数据科学爱好者和开发者设计的生产力工具。它允许用户上传数据集，一键运行多种机器学习算法（如随机森林、SVM、逻辑回归等）进行“竞速”，直观对比性能，并自动生成获胜模型的 Python 训练代码。
+
+## 核心功能
+
+1.  **数据上传与预览**：支持 CSV/Excel 文件拖拽上传，自动解析列名。
+2.  **多算法竞速**：
+    *   **分类任务**：Logistic Regression, Decision Tree, Random Forest, SVM, KNN
+    *   **回归任务**：Linear Regression, Decision Tree, Random Forest, SVR, KNN
+3.  **实时可视化**：ECharts 图表展示各模型 Accuracy/F1 或 MSE/R2 得分。
+4.  **资产积累（代码生成）**：一键导出获胜模型的完整 Python 训练脚本（基于 Scikit-learn），可直接用于生产环境或进一步微调。
+5.  **交互式体验**：Vue 3 + Tailwind CSS 打造的现代化极简 UI。
+
+## 快速开始
+
+### 本地运行
+
+1. 克隆项目：
+   ```bash
+   git clone https://huggingface.co/spaces/username/model-race-lab
+   cd model-race-lab
+   ```
+
+2. 使用 Docker 运行：
+   ```bash
+   docker build -t model-race-lab .
+   docker run -p 7860:7860 model-race-lab
+   ```
+
+3. 访问浏览器：`http://localhost:7860`
+
+### 示例数据
+
+项目根目录下提供了 `demo.csv` (鸢尾花数据集) 供测试使用。
+
+## 技术栈
+
+*   **Backend**: Flask, Pandas, Scikit-learn
+*   **Frontend**: Vue 3, Tailwind CSS, ECharts
+*   **Deployment**: Docker
+
+## 商业价值
+
+*   **提效**: 将模型基准测试（Baseline）的时间从小时级缩短至分钟级。
+*   **教育**: 帮助初学者直观理解不同算法在同一数据集上的表现差异。
+*   **资产**: 自动生成的代码是高价值的数字资产，减少重复造轮子。
+
+---
+Created by Trae AI.

app.py

@@ -0,0 +1,374 @@
+import os
+import io
+import json
+import csv
+import random
+from flask import Flask, request, jsonify, render_template, send_file
+
+# Try to import heavy libraries. If they fail (e.g., Python 3.14 preview env), we use Mock Mode.
+try:
+    import pandas as pd
+    import numpy as np
+    from sklearn.model_selection import train_test_split
+    from sklearn.linear_model import LogisticRegression, LinearRegression
+    from sklearn.tree import DecisionTreeClassifier, DecisionTreeRegressor
+    from sklearn.ensemble import RandomForestClassifier, RandomForestRegressor
+    from sklearn.svm import SVC, SVR
+    from sklearn.neighbors import KNeighborsClassifier, KNeighborsRegressor
+    from sklearn.metrics import accuracy_score, f1_score, mean_squared_error, r2_score
+    from sklearn.preprocessing import LabelEncoder, StandardScaler
+    from sklearn.impute import SimpleImputer
+    MOCK_MODE = False
+    print("Libraries loaded successfully. Running in REAL mode.")
+except ImportError:
+    MOCK_MODE = True
+    print("Heavy libraries not found. Running in MOCK mode for UI verification.")
+    # Mock classes/modules if needed, or just handle logic in routes
+
+app = Flask(__name__)
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB limit
+
+# In-memory storage
+# key: file_id, value: DataFrame (Real) or List[Dict] (Mock)
+DATA_STORE = {}
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/upload', methods=['POST'])
+def upload_file():
+    if 'file' not in request.files:
+        return jsonify({'error': 'No file part'}), 400
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({'error': 'No selected file'}), 400
+    
+    try:
+        file_id = os.urandom(8).hex()
+        
+        if MOCK_MODE:
+            # Simple CSV parsing using standard library
+            if not file.filename.endswith('.csv'):
+                return jsonify({'error': 'Mock mode only supports CSV'}), 400
+            
+            # Read file content
+            content = file.read().decode('utf-8')
+            f = io.StringIO(content)
+            reader = csv.reader(f)
+            columns = next(reader)
+            columns = [c.strip() for c in columns]
+            
+            rows = []
+            for row in reader:
+                if len(row) == len(columns):
+                    rows.append(dict(zip(columns, row)))
+            
+            DATA_STORE[file_id] = {'columns': columns, 'rows': rows}
+            
+            preview = rows[:5]
+            return jsonify({
+                'file_id': file_id,
+                'columns': columns,
+                'preview': preview,
+                'rows': len(rows)
+            })
+            
+        else:
+            # Real Pandas logic
+            if file.filename.endswith('.csv'):
+                df = pd.read_csv(file)
+            elif file.filename.endswith('.xlsx'):
+                df = pd.read_excel(file)
+            else:
+                return jsonify({'error': 'Unsupported file format'}), 400
+            
+            # Clean column names
+            df.columns = [str(c).strip() for c in df.columns]
+            DATA_STORE[file_id] = df
+            
+            # Return columns and preview
+            preview = df.head(5).to_dict(orient='records')
+            return jsonify({
+                'file_id': file_id,
+                'columns': df.columns.tolist(),
+                'preview': preview,
+                'rows': len(df)
+            })
+            
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/demo', methods=['POST'])
+def use_demo():
+    try:
+        file_id = os.urandom(8).hex()
+        demo_path = 'demo.csv'
+        
+        if not os.path.exists(demo_path):
+             # Create a dummy demo csv if not exists
+             with open(demo_path, 'w') as f:
+                 f.write("col1,col2,target\n1,2,0\n3,4,1\n5,6,0")
+        
+        if MOCK_MODE:
+            with open(demo_path, 'r', encoding='utf-8') as f:
+                reader = csv.reader(f)
+                columns = next(reader)
+                columns = [c.strip() for c in columns]
+                rows = []
+                for row in reader:
+                    if len(row) == len(columns):
+                        rows.append(dict(zip(columns, row)))
+            
+            DATA_STORE[file_id] = {'columns': columns, 'rows': rows}
+            preview = rows[:5]
+            row_count = len(rows)
+        else:
+            df = pd.read_csv(demo_path)
+            df.columns = [str(c).strip() for c in df.columns]
+            DATA_STORE[file_id] = df
+            preview = df.head(5).to_dict(orient='records')
+            row_count = len(df)
+            columns = df.columns.tolist()
+
+        return jsonify({
+            'file_id': file_id,
+            'columns': columns,
+            'preview': preview,
+            'rows': row_count
+        })
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/race', methods=['POST'])
+def run_race():
+    data = request.json
+    file_id = data.get('file_id')
+    target = data.get('target')
+    task_type = data.get('task_type')
+    selected_algos = data.get('algos', [])
+    
+    if file_id not in DATA_STORE:
+        return jsonify({'error': 'File session expired'}), 404
+    
+    if MOCK_MODE:
+        # Generate realistic random results for UI testing
+        results = []
+        import time
+        time.sleep(1) # Simulate delay
+        
+        for name in selected_algos:
+            if task_type == 'classification':
+                acc = round(random.uniform(0.75, 0.98), 4)
+                f1 = round(acc - random.uniform(0, 0.05), 4)
+                metrics = {'Accuracy': acc, 'F1 Score': f1}
+                score = acc
+            else:
+                r2 = round(random.uniform(0.6, 0.95), 4)
+                mse = round(random.uniform(10, 100), 4)
+                metrics = {'MSE': mse, 'R2 Score': r2}
+                score = r2
+            
+            results.append({
+                'name': name,
+                'metrics': metrics,
+                'score': score
+            })
+            
+        results.sort(key=lambda x: x['score'], reverse=True)
+        return jsonify({'results': results})
+
+    # Real Mode
+    df = DATA_STORE[file_id].copy()
+    
+    try:
+        # Preprocessing
+        num_cols = df.select_dtypes(include=[np.number]).columns.tolist()
+        cat_cols = df.select_dtypes(exclude=[np.number]).columns.tolist()
+        
+        if target in num_cols: num_cols.remove(target)
+        if target in cat_cols: cat_cols.remove(target)
+            
+        if num_cols:
+            imputer_num = SimpleImputer(strategy='mean')
+            df[num_cols] = imputer_num.fit_transform(df[num_cols])
+            
+        if cat_cols:
+            df = pd.get_dummies(df, columns=cat_cols, drop_first=True)
+            
+        if task_type == 'classification':
+            le = LabelEncoder()
+            df[target] = le.fit_transform(df[target].astype(str))
+            
+        X = df.drop(columns=[target])
+        y = df[target]
+        
+        scaler = StandardScaler()
+        X = scaler.fit_transform(X)
+        
+        X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=42)
+        
+        results = []
+        
+        models_map = {
+            'classification': {
+                'Logistic Regression': LogisticRegression(max_iter=1000),
+                'Decision Tree': DecisionTreeClassifier(),
+                'Random Forest': RandomForestClassifier(n_estimators=50),
+                'SVM': SVC(),
+                'KNN': KNeighborsClassifier()
+            },
+            'regression': {
+                'Linear Regression': LinearRegression(),
+                'Decision Tree': DecisionTreeRegressor(),
+                'Random Forest': RandomForestRegressor(n_estimators=50),
+                'SVR': SVR(),
+                'KNN': KNeighborsRegressor()
+            }
+        }
+        
+        available_models = models_map.get(task_type, {})
+        
+        for name in selected_algos:
+            if name in available_models:
+                model = available_models[name]
+                model.fit(X_train, y_train)
+                y_pred = model.predict(X_test)
+                
+                metrics = {}
+                if task_type == 'classification':
+                    metrics['Accuracy'] = round(accuracy_score(y_test, y_pred), 4)
+                    metrics['F1 Score'] = round(f1_score(y_test, y_pred, average='weighted'), 4)
+                    score = metrics['Accuracy']
+                else:
+                    metrics['MSE'] = round(mean_squared_error(y_test, y_pred), 4)
+                    metrics['R2 Score'] = round(r2_score(y_test, y_pred), 4)
+                    score = metrics['R2 Score']
+                
+                results.append({
+                    'name': name,
+                    'metrics': metrics,
+                    'score': score
+                })
+        
+        results.sort(key=lambda x: x['score'], reverse=True)
+        return jsonify({'results': results})
+        
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/generate_code', methods=['POST'])
+def generate_code():
+    data = request.json
+    task_type = data.get('task_type')
+    algo_name = data.get('algo_name')
+    target = data.get('target')
+    
+    code_template = f"""
+import pandas as pd
+import numpy as np
+from sklearn.model_selection import train_test_split
+from sklearn.preprocessing import StandardScaler, LabelEncoder
+from sklearn.impute import SimpleImputer
+"""
+    
+    if task_type == 'classification':
+        imports = {
+            'Logistic Regression': 'from sklearn.linear_model import LogisticRegression',
+            'Decision Tree': 'from sklearn.tree import DecisionTreeClassifier',
+            'Random Forest': 'from sklearn.ensemble import RandomForestClassifier',
+            'SVM': 'from sklearn.svm import SVC',
+            'KNN': 'from sklearn.neighbors import KNeighborsClassifier'
+        }
+    else:
+        imports = {
+            'Linear Regression': 'from sklearn.linear_model import LinearRegression',
+            'Decision Tree': 'from sklearn.tree import DecisionTreeRegressor',
+            'Random Forest': 'from sklearn.ensemble import RandomForestRegressor',
+            'SVR': 'from sklearn.svm import SVR',
+            'KNN': 'from sklearn.neighbors import KNeighborsRegressor'
+        }
+        
+    code_template += imports.get(algo_name, "") + "\n\n"
+    
+    code_template += f"""
+# Load Data
+# Replace 'data.csv' with your actual file path
+df = pd.read_csv('data.csv')
+
+# Target Variable
+target = '{target}'
+
+# Preprocessing
+print("Preprocessing data...")
+# Handle Missing Values
+num_cols = df.select_dtypes(include=[np.number]).columns.tolist()
+cat_cols = df.select_dtypes(exclude=[np.number]).columns.tolist()
+
+if target in num_cols: num_cols.remove(target)
+if target in cat_cols: cat_cols.remove(target)
+
+if num_cols:
+    imputer = SimpleImputer(strategy='mean')
+    df[num_cols] = imputer.fit_transform(df[num_cols])
+
+if cat_cols:
+    df = pd.get_dummies(df, columns=cat_cols, drop_first=True)
+
+X = df.drop(columns=[target])
+y = df[target]
+
+# Encoding Target (if classification)
+"""
+    if task_type == 'classification':
+        code_template += """
+le = LabelEncoder()
+y = le.fit_transform(y.astype(str))
+"""
+
+    code_template += """
+# Scaling
+scaler = StandardScaler()
+X = scaler.fit_transform(X)
+
+# Train/Test Split
+X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=42)
+
+# Model Training
+print(f"Training {algo_name}...")
+"""
+
+    model_init = {
+        'Logistic Regression': 'model = LogisticRegression(max_iter=1000)',
+        'Decision Tree': 'model = DecisionTreeClassifier()',
+        'Random Forest': 'model = RandomForestClassifier(n_estimators=50)',
+        'SVM': 'model = SVC()',
+        'KNN': 'model = KNeighborsClassifier()',
+        'Linear Regression': 'model = LinearRegression()',
+        'Decision Tree Regressor': 'model = DecisionTreeRegressor()',
+        'Random Forest Regressor': 'model = RandomForestRegressor(n_estimators=50)',
+        'SVR': 'model = SVR()',
+        'KNN Regressor': 'model = KNeighborsRegressor()'
+    }
+    
+    # Simple mapping adjustment
+    key = algo_name
+    if task_type == 'regression' and 'Tree' in key: key = 'Decision Tree Regressor'
+    if task_type == 'regression' and 'Forest' in key: key = 'Random Forest Regressor'
+    if task_type == 'regression' and 'KNN' in key: key = 'KNN Regressor'
+    
+    code_template += model_init.get(key, "model = " + key + "()") + "\n"
+    
+    code_template += """
+model.fit(X_train, y_train)
+
+# Evaluation
+score = model.score(X_test, y_test)
+print(f"Model Score: {score:.4f}")
+print("Done!")
+"""
+    
+    return jsonify({'code': code_template})
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=True)

demo.csv

@@ -0,0 +1,16 @@
+sepal_length,sepal_width,petal_length,petal_width,species
+5.1,3.5,1.4,0.2,setosa
+4.9,3.0,1.4,0.2,setosa
+4.7,3.2,1.3,0.2,setosa
+4.6,3.1,1.5,0.2,setosa
+5.0,3.6,1.4,0.2,setosa
+7.0,3.2,4.7,1.4,versicolor
+6.4,3.2,4.5,1.5,versicolor
+6.9,3.1,4.9,1.5,versicolor
+5.5,2.3,4.0,1.3,versicolor
+6.5,2.8,4.6,1.5,versicolor
+6.3,3.3,6.0,2.5,virginica
+5.8,2.7,5.1,1.9,virginica
+7.1,3.0,5.9,2.1,virginica
+6.3,2.9,5.6,1.8,virginica
+6.5,3.0,5.2,2.0,virginica

requirements.txt

@@ -0,0 +1,5 @@
+Flask==3.0.0
+pandas==2.1.4
+scikit-learn==1.3.2
+numpy>=1.26.0
+gunicorn==21.2.0

templates/index.html

@@ -0,0 +1,403 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Model Race Lab - 算法竞速实验室</title>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; }
+        .fade-enter-from, .fade-leave-to { opacity: 0; }
+        body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; }
+    </style>
+</head>
+<body>
+    <div id="app" class="min-h-screen flex flex-col">
+        <!-- Navbar -->
+        <nav class="bg-white shadow-sm border-b border-gray-200">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex justify-between h-16">
+                    <div class="flex items-center">
+                        <i class="fa-solid fa-flask text-indigo-600 text-2xl mr-3"></i>
+                        <span class="font-bold text-xl text-gray-800 tracking-tight">Model Race Lab <span class="text-sm font-normal text-gray-500 ml-2">算法竞速实验室</span></span>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <a href="https://huggingface.co/spaces/duqing026/model-race-lab" target="_blank" class="text-gray-500 hover:text-gray-900"><i class="fa-solid fa-rocket text-xl"></i></a>
+                    </div>
+                </div>
+            </div>
+        </nav>
+
+        <!-- Main Content -->
+        <main class="flex-grow container mx-auto px-4 py-8">
+            
+            <!-- Step 1: Upload -->
+            <div v-if="step === 1" class="max-w-2xl mx-auto bg-white rounded-xl shadow-lg p-8 transition-all duration-500">
+                <h2 class="text-2xl font-bold mb-6 text-gray-800 text-center">1. 上传您的数据 (CSV)</h2>
+                <div 
+                    class="border-4 border-dashed border-gray-200 rounded-xl h-64 flex flex-col items-center justify-center cursor-pointer hover:border-indigo-400 hover:bg-indigo-50 transition-colors"
+                    @dragover.prevent
+                    @drop.prevent="handleDrop"
+                    @click="triggerUpload"
+                >
+                    <i class="fa-solid fa-cloud-arrow-up text-5xl text-gray-300 mb-4"></i>
+                    <p class="text-gray-500 font-medium">点击或拖拽 CSV 文件至此</p>
+                    <p class="text-xs text-gray-400 mt-2">支持 .csv, .xlsx</p>
+                    <input type="file" ref="fileInput" class="hidden" @change="handleFileSelect" accept=".csv,.xlsx">
+                </div>
+                
+                <div class="mt-6 flex justify-center">
+                    <button @click="useDemoData" class="text-indigo-600 font-medium hover:text-indigo-800 underline">
+                        没有数据？使用演示数据 (Iris Dataset)
+                    </button>
+                </div>
+
+                <div v-if="error" class="mt-4 p-3 bg-red-100 text-red-700 rounded-lg text-sm text-center">
+                    ${ error }
+                </div>
+            </div>
+
+            <!-- Step 2: Configuration -->
+            <div v-if="step === 2" class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg p-8">
+                <div class="flex justify-between items-center mb-6">
+                    <h2 class="text-2xl font-bold text-gray-800">2. 配置比赛参数</h2>
+                    <button @click="step = 1" class="text-gray-500 hover:text-indigo-600 text-sm">重新上传</button>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    <!-- Left: Data Preview -->
+                    <div>
+                        <h3 class="font-semibold text-gray-700 mb-3">数据预览 (前5行)</h3>
+                        <div class="overflow-x-auto bg-gray-50 rounded-lg border border-gray-200 p-2 text-xs">
+                            <table class="min-w-full">
+                                <thead>
+                                    <tr class="text-left text-gray-500">
+                                        <th v-for="col in columns" :key="col" class="p-1">${ col }</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr v-for="(row, i) in previewData" :key="i" class="border-t border-gray-100">
+                                        <td v-for="col in columns" :key="col" class="p-1 truncate max-w-[100px]">${ row[col] }</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">总行数: ${ rowCount }</p>
+                    </div>
+
+                    <!-- Right: Settings -->
+                    <div class="space-y-6">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-2">目标变量 (Target)</label>
+                            <select v-model="targetCol" class="w-full p-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
+                                <option v-for="col in columns" :key="col" :value="col">${ col }</option>
+                            </select>
+                        </div>
+
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-2">任务类型 (Task Type)</label>
+                            <div class="flex space-x-4">
+                                <button 
+                                    @click="taskType = 'classification'"
+                                    :class="{'bg-indigo-600 text-white': taskType === 'classification', 'bg-gray-100 text-gray-600': taskType !== 'classification'}"
+                                    class="flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors"
+                                >
+                                    分类 (Classification)
+                                </button>
+                                <button 
+                                    @click="taskType = 'regression'"
+                                    :class="{'bg-indigo-600 text-white': taskType === 'regression', 'bg-gray-100 text-gray-600': taskType !== 'regression'}"
+                                    class="flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors"
+                                >
+                                    回归 (Regression)
+                                </button>
+                            </div>
+                        </div>
+
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-2">参赛算法 (Algorithms)</label>
+                            <div class="space-y-2">
+                                <div v-for="algo in availableAlgos" :key="algo" class="flex items-center">
+                                    <input type="checkbox" :value="algo" v-model="selectedAlgos" class="h-4 w-4 text-indigo-600 border-gray-300 rounded">
+                                    <label class="ml-2 block text-sm text-gray-900">${ algo }</label>
+                                </div>
+                            </div>
+                        </div>
+
+                        <button 
+                            @click="startRace" 
+                            :disabled="loading || selectedAlgos.length === 0 || !targetCol"
+                            class="w-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-3 rounded-lg font-bold shadow-md hover:shadow-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                            <span v-if="loading"><i class="fa-solid fa-spinner fa-spin mr-2"></i> 比赛进行中...</span>
+                            <span v-else>开始竞速 (Start Race)</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Step 3: Results -->
+            <div v-if="step === 3" class="max-w-6xl mx-auto space-y-6">
+                <!-- Winner Banner -->
+                <div class="bg-gradient-to-r from-yellow-400 to-orange-500 rounded-xl shadow-lg p-6 text-white flex justify-between items-center">
+                    <div>
+                        <h2 class="text-3xl font-bold mb-1"><i class="fa-solid fa-trophy mr-2"></i> 获胜者: ${ raceResults[0]?.name }</h2>
+                        <p class="opacity-90 text-lg">
+                            ${ taskType === 'classification' ? 'Accuracy' : 'R2 Score' }: ${ raceResults[0]?.score }
+                        </p>
+                    </div>
+                    <button @click="generateCode(raceResults[0]?.name)" class="bg-white text-orange-600 px-6 py-2 rounded-full font-bold shadow hover:bg-gray-50 transition">
+                        <i class="fa-solid fa-code mr-2"></i> 获取代码
+                    </button>
+                </div>
+
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    <!-- Leaderboard -->
+                    <div class="bg-white rounded-xl shadow p-6 lg:col-span-1">
+                        <h3 class="font-bold text-gray-800 mb-4">排行榜</h3>
+                        <div class="space-y-3">
+                            <div v-for="(res, index) in raceResults" :key="res.name" class="flex items-center justify-between p-3 rounded-lg" :class="index === 0 ? 'bg-yellow-50 border border-yellow-200' : 'bg-gray-50'">
+                                <div class="flex items-center">
+                                    <span class="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold mr-3" :class="index === 0 ? 'bg-yellow-400 text-white' : 'bg-gray-300 text-gray-600'">${ index + 1 }</span>
+                                    <span class="font-medium text-gray-700">${ res.name }</span>
+                                </div>
+                                <span class="font-bold text-gray-800">${ res.score }</span>
+                            </div>
+                        </div>
+                        <button @click="step = 2" class="mt-6 w-full border border-gray-300 text-gray-600 py-2 rounded-lg hover:bg-gray-50">
+                            调整参数重试
+                        </button>
+                    </div>
+
+                    <!-- Charts -->
+                    <div class="bg-white rounded-xl shadow p-6 lg:col-span-2">
+                        <h3 class="font-bold text-gray-800 mb-4">性能对比</h3>
+                        <div id="chart-container" class="w-full h-80"></div>
+                    </div>
+                </div>
+
+                <!-- Code Modal -->
+                <div v-if="showCodeModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+                    <div class="bg-white rounded-xl shadow-2xl w-full max-w-3xl m-4 flex flex-col max-h-[90vh]">
+                        <div class="p-6 border-b border-gray-200 flex justify-between items-center">
+                            <h3 class="text-xl font-bold text-gray-800">Python 训练代码</h3>
+                            <button @click="showCodeModal = false" class="text-gray-400 hover:text-gray-600"><i class="fa-solid fa-times text-xl"></i></button>
+                        </div>
+                        <div class="p-6 overflow-y-auto bg-gray-900 text-gray-100 font-mono text-sm">
+                            <pre>${ generatedCode }</pre>
+                        </div>
+                        <div class="p-6 border-t border-gray-200 bg-gray-50 flex justify-end">
+                            <button @click="copyCode" class="bg-indigo-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-indigo-700">
+                                ${ copyBtnText }
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+        
+        <footer class="bg-white border-t border-gray-200 py-6 mt-auto">
+            <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
+                &copy; 2026 Model Race Lab. Powered by Flask & Vue 3.
+            </div>
+        </footer>
+    </div>
+
+    <script>
+        const { createApp, ref, computed, nextTick } = Vue;
+
+        createApp({
+            delimiters: ['${', '}'],
+            setup() {
+                const step = ref(1);
+                const fileId = ref(null);
+                const columns = ref([]);
+                const previewData = ref([]);
+                const rowCount = ref(0);
+                const targetCol = ref('');
+                const taskType = ref('classification');
+                const selectedAlgos = ref(['Logistic Regression', 'Decision Tree', 'Random Forest']);
+                const loading = ref(false);
+                const error = ref(null);
+                const raceResults = ref([]);
+                const showCodeModal = ref(false);
+                const generatedCode = ref('');
+                const copyBtnText = ref('复制到剪贴板');
+                const fileInput = ref(null);
+
+                const classificationAlgos = ['Logistic Regression', 'Decision Tree', 'Random Forest', 'SVM', 'KNN'];
+                const regressionAlgos = ['Linear Regression', 'Decision Tree', 'Random Forest', 'SVR', 'KNN'];
+
+                const availableAlgos = computed(() => {
+                    return taskType.value === 'classification' ? classificationAlgos : regressionAlgos;
+                });
+
+                const triggerUpload = () => {
+                    if (fileInput.value) {
+                        fileInput.value.click();
+                    }
+                };
+
+                const handleFileSelect = (event) => {
+                    const file = event.target.files[0];
+                    if (file) uploadFile(file);
+                };
+
+                const handleDrop = (event) => {
+                    const file = event.dataTransfer.files[0];
+                    if (file) uploadFile(file);
+                };
+
+                const uploadFile = async (file) => {
+                    const formData = new FormData();
+                    formData.append('file', file);
+                    loading.value = true;
+                    error.value = null;
+
+                    try {
+                        const res = await fetch('/api/upload', { method: 'POST', body: formData });
+                        const data = await res.json();
+                        if (data.error) throw new Error(data.error);
+
+                        fileId.value = data.file_id;
+                        columns.value = data.columns;
+                        previewData.value = data.preview;
+                        rowCount.value = data.rows;
+                        targetCol.value = data.columns[data.columns.length - 1]; // Default to last col
+                        step.value = 2;
+                    } catch (e) {
+                        error.value = e.message;
+                    } finally {
+                        loading.value = false;
+                    }
+                };
+
+                const useDemoData = async () => {
+                    loading.value = true;
+                    error.value = null;
+                    try {
+                        const res = await fetch('/api/demo', { method: 'POST' });
+                        const data = await res.json();
+                        if (data.error) throw new Error(data.error);
+
+                        fileId.value = data.file_id;
+                        columns.value = data.columns;
+                        previewData.value = data.preview;
+                        rowCount.value = data.rows;
+                        targetCol.value = data.columns[data.columns.length - 1]; 
+                        step.value = 2;
+                    } catch (e) {
+                        error.value = e.message;
+                    } finally {
+                        loading.value = false;
+                    }
+                };
+
+                const startRace = async () => {
+                    loading.value = true;
+                    try {
+                        const res = await fetch('/api/race', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({
+                                file_id: fileId.value,
+                                target: targetCol.value,
+                                task_type: taskType.value,
+                                algos: selectedAlgos.value
+                            })
+                        });
+                        const data = await res.json();
+                        if (data.error) throw new Error(data.error);
+
+                        raceResults.value = data.results;
+                        step.value = 3;
+                        nextTick(() => initChart());
+                    } catch (e) {
+                        alert(e.message);
+                    } finally {
+                        loading.value = false;
+                    }
+                };
+
+                const initChart = () => {
+                    const chartDom = document.getElementById('chart-container');
+                    const myChart = echarts.init(chartDom);
+                    
+                    const names = raceResults.value.map(r => r.name);
+                    const scores = raceResults.value.map(r => r.score);
+                    
+                    const option = {
+                        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+                        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+                        xAxis: { type: 'category', data: names, axisTick: { alignWithLabel: true } },
+                        yAxis: { type: 'value' },
+                        series: [{
+                            name: 'Score',
+                            type: 'bar',
+                            barWidth: '60%',
+                            data: scores,
+                            itemStyle: { color: '#4f46e5' }
+                        }]
+                    };
+                    myChart.setOption(option);
+                    
+                    window.addEventListener('resize', () => myChart.resize());
+                };
+
+                const generateCode = async (algoName) => {
+                    try {
+                        const res = await fetch('/api/generate_code', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({
+                                task_type: taskType.value,
+                                algo_name: algoName,
+                                target: targetCol.value
+                            })
+                        });
+                        const data = await res.json();
+                        generatedCode.value = data.code;
+                        showCodeModal.value = true;
+                    } catch (e) {
+                        alert(e.message);
+                    }
+                };
+
+                const copyCode = () => {
+                    navigator.clipboard.writeText(generatedCode.value);
+                    copyBtnText.value = '已复制!';
+                    setTimeout(() => copyBtnText.value = '复制到剪贴板', 2000);
+                };
+
+                return {
+                    step,
+                    columns,
+                    previewData,
+                    rowCount,
+                    targetCol,
+                    taskType,
+                    selectedAlgos,
+                    availableAlgos,
+                    loading,
+                    error,
+                    raceResults,
+                    showCodeModal,
+                    generatedCode,
+                    copyBtnText,
+                    fileInput,
+                    handleFileSelect,
+                    handleDrop,
+                    startRace,
+                    generateCode,
+                    copyCode,
+                    triggerUpload,
+                    useDemoData
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>