Enhance functionality: Import/Export, Localization, and UI improvements

Dockerfile

@@ -0,0 +1,12 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 7860
+
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md

@@ -0,0 +1,48 @@
+---
+title: Assembly Line Balancer
+emoji: 🏭
+colorFrom: indigo
+colorTo: blue
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
+# 产线平衡大师 (Assembly Line Balancer)
+
+这是一个基于 Flask 和 Vue.js 的产线平衡工具 (Assembly Line Balancing Problem Solver)。
+它可以帮助你计算和优化装配线的工序分配，提高效率，减少平衡损失。
+
+## 功能特性
+
+- **自动平衡计算**: 使用 RPW (Ranked Positional Weight) 启发式算法进行产线平衡。
+- **可视化图表**: 
+  - 工位负荷图 (Station Load Chart)
+  - 工序优先关系图 (Precedence Graph)
+- **交互式编辑**: 直接在网页上添加、删除、修改工序和时间。
+- **数据导入导出**: 
+  - 支持导入 CSV/Excel 文件 (列名: ID, Duration, Predecessors)
+  - 支持导出平衡结果为 CSV
+- **多语言支持**: 界面完全汉化。
+
+## 使用说明
+
+1. **设置目标节拍 (Cycle Time)**: 输入期望的生产节拍。
+2. **输入工序数据**:
+   - ID: 工序编号
+   - Duration: 工序标准时间
+   - Predecessors: 紧前工序 (用逗号分隔)
+3. **点击“开始平衡计算”**: 系统将自动生成分配方案。
+4. **查看结果**:
+   - 检查平衡率、平滑指数等指标。
+   - 查看工位负荷图，识别瓶颈。
+   - 导出结果用于生产排程。
+
+## 部署
+
+本项目支持 Docker 部署。
+
+```bash
+docker build -t assembly-line-balancer .
+docker run -p 7860:7860 assembly-line-balancer
+```

app.py

@@ -0,0 +1,233 @@
+import os
+import networkx as nx
+import pandas as pd
+from flask import Flask, render_template, request, jsonify
+
+app = Flask(__name__)
+
+def parse_file(file):
+    """
+    Parse uploaded file (CSV or Excel) into tasks list.
+    Expected columns: ID, Duration, Predecessors
+    """
+    filename = file.filename
+    if filename.endswith('.csv'):
+        df = pd.read_csv(file)
+    elif filename.endswith(('.xls', '.xlsx')):
+        df = pd.read_excel(file)
+    else:
+        raise ValueError("Unsupported file format. Please upload CSV or Excel.")
+
+    # Normalize columns
+    df.columns = [c.lower().strip() for c in df.columns]
+    
+    # Map common column names
+    col_map = {
+        'id': 'id', 'task': 'id', 'task_id': 'id',
+        'duration': 'duration', 'time': 'duration',
+        'predecessors': 'predecessors', 'dependencies': 'predecessors', 'preds': 'predecessors'
+    }
+    
+    # Rename columns based on map
+    df = df.rename(columns=lambda x: col_map.get(x, x))
+    
+    required = ['id', 'duration']
+    for req in required:
+        if req not in df.columns:
+            raise ValueError(f"Missing required column: {req}")
+            
+    tasks = []
+    for _, row in df.iterrows():
+        # Handle predecessors
+        preds = []
+        if 'predecessors' in df.columns and pd.notna(row['predecessors']):
+            p_val = str(row['predecessors'])
+            # Split by comma or semicolon
+            preds = [p.strip() for p in p_val.replace(';', ',').split(',') if p.strip()]
+            
+        tasks.append({
+            'id': str(row['id']),
+            'duration': float(row['duration']),
+            'predecessors': preds
+        })
+        
+    return tasks
+
+def calculate_rpw(tasks):
+    """
+    Calculate Ranked Positional Weight for each task.
+    RPW = Task Duration + Sum of durations of all successors.
+    """
+    G = nx.DiGraph()
+    task_map = {t['id']: t for t in tasks}
+    
+    # Add nodes and edges
+    for task in tasks:
+        G.add_node(task['id'], duration=float(task['duration']))
+        for pred in task.get('predecessors', []):
+            if pred:  # Ignore empty strings
+                G.add_edge(pred, task['id'])
+    
+    if not nx.is_directed_acyclic_graph(G):
+        raise ValueError("Dependencies contain a cycle (circular reference).")
+
+    rpw_values = {}
+    for node in G.nodes():
+        # Get all successors
+        successors = nx.descendants(G, node)
+        successor_duration = sum(G.nodes[s]['duration'] for s in successors)
+        rpw_values[node] = G.nodes[node]['duration'] + successor_duration
+        
+    return rpw_values, G
+
+def balance_line(tasks, cycle_time):
+    """
+    Balance the assembly line using RPW Heuristic.
+    """
+    # 1. Validation
+    for t in tasks:
+        if float(t['duration']) > cycle_time:
+            raise ValueError(f"Task {t['id']} duration ({t['duration']}) exceeds Cycle Time ({cycle_time}). Impossible to balance.")
+
+    # 2. Calculate RPW
+    rpw_map, G = calculate_rpw(tasks)
+    
+    # 3. Sort tasks by RPW descending
+    # Convert to list for processing
+    sorted_tasks = sorted(tasks, key=lambda x: rpw_map.get(x['id'], 0), reverse=True)
+    
+    stations = []
+    current_station = {'id': 1, 'tasks': [], 'time_used': 0, 'time_left': cycle_time}
+    
+    completed_tasks = set()
+    all_task_ids = set(t['id'] for t in tasks)
+    assigned_tasks = set()
+    
+    while len(assigned_tasks) < len(all_task_ids):
+        # Find candidates:
+        # - Not yet assigned
+        # - All predecessors completed
+        # - Fits in current station
+        candidates = []
+        for t in sorted_tasks:
+            tid = t['id']
+            if tid in assigned_tasks:
+                continue
+                
+            preds = t.get('predecessors', [])
+            # Check if all preds are completed (assigned to *previous* stations OR *current* station)
+            # Actually, for line balancing, "completed" means assigned to a station (could be current).
+            # But strict precedence means:
+            # If A -> B, A must be assigned before B.
+            # And physically, A must be done before B.
+            # If A and B are in same station, A must be scheduled before B in that station list.
+            # Our logic assigns sequentially, so order in 'assigned_tasks' matters.
+            
+            # Check predecessors
+            preds_met = all(p in completed_tasks for p in preds if p)
+            
+            if preds_met:
+                if float(t['duration']) <= current_station['time_left']:
+                    candidates.append(t)
+        
+        if candidates:
+            # Pick the one with highest RPW (already sorted)
+            best_task = candidates[0]
+            
+            # Assign
+            current_station['tasks'].append(best_task)
+            dur = float(best_task['duration'])
+            current_station['time_used'] += dur
+            current_station['time_left'] -= dur
+            
+            assigned_tasks.add(best_task['id'])
+            completed_tasks.add(best_task['id'])
+            
+        else:
+            # No candidates fit in current station
+            # Check if we have unassigned tasks that CANNOT fit (waiting for preds?)
+            # If there are unassigned tasks, but no candidates, it means:
+            # Either:
+            # 1. Tasks exist but don't fit in REMAINING time -> New Station
+            # 2. Tasks exist but predecessors not met -> Wait (but we iterate sorted_tasks)
+            
+            # If we couldn't find ANY task for current station, but there are still tasks left,
+            # we must open a new station.
+            if len(assigned_tasks) < len(all_task_ids):
+                stations.append(current_station)
+                new_id = len(stations) + 1
+                current_station = {'id': new_id, 'tasks': [], 'time_used': 0, 'time_left': cycle_time}
+            else:
+                break
+                
+    # Append last station
+    if current_station['tasks']:
+        stations.append(current_station)
+        
+    # Metrics
+    total_task_time = sum(float(t['duration']) for t in tasks)
+    num_stations = len(stations)
+    efficiency = (total_task_time / (num_stations * cycle_time)) * 100 if num_stations > 0 else 0
+    balance_delay = 100 - efficiency
+    
+    # Smoothness Index (SX)
+    # SX = sqrt(sum( (max_station_time - station_time)^2 ))
+    max_st_time = max(s['time_used'] for s in stations) if stations else 0
+    smoothness_index = (sum((max_st_time - s['time_used'])**2 for s in stations))**0.5
+    
+    return {
+        'stations': stations,
+        'metrics': {
+            'efficiency': round(efficiency, 2),
+            'balance_delay': round(balance_delay, 2),
+            'smoothness_index': round(smoothness_index, 2),
+            'num_stations': num_stations,
+            'cycle_time': cycle_time,
+            'total_time': total_task_time
+        }
+    }
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/calculate', methods=['POST'])
+def calculate():
+    try:
+        data = request.json
+        tasks = data.get('tasks', [])
+        cycle_time = float(data.get('cycle_time', 0))
+        
+        if cycle_time <= 0:
+            return jsonify({'error': 'Cycle time must be positive'}), 400
+        if not tasks:
+            return jsonify({'error': 'No tasks provided'}), 400
+            
+        result = balance_line(tasks, cycle_time)
+        return jsonify(result)
+        
+    except ValueError as e:
+        return jsonify({'error': str(e)}), 400
+    except Exception as e:
+        return jsonify({'error': f"Server Error: {str(e)}"}), 500
+
+@app.route('/api/upload', methods=['POST'])
+def upload_file():
+    try:
+        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
+            
+        tasks = parse_file(file)
+        return jsonify({'tasks': tasks})
+        
+    except ValueError as e:
+        return jsonify({'error': str(e)}), 400
+    except Exception as e:
+        return jsonify({'error': f"Upload failed: {str(e)}"}), 500
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860)

requirements.txt

@@ -0,0 +1,5 @@
+flask>=2.0.0
+networkx>=3.0
+gunicorn>=20.0.0
+pandas>=2.0.0
+openpyxl>=3.1.0

templates/index.html

@@ -0,0 +1,526 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Assembly Line Balancer | 产线平衡大师</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>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; }
+        .chart-container { height: 400px; width: 100%; }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar { width: 8px; height: 8px; }
+        ::-webkit-scrollbar-track { background: #f1f1f1; }
+        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
+    </style>
+</head>
+<body>
+    <div id="app" class="min-h-screen flex flex-col">
+        <!-- Header -->
+        <header class="bg-white shadow-sm z-10">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                    <div class="bg-indigo-600 p-2 rounded-lg text-white">
+                        <i class="fa-solid fa-industry text-xl"></i>
+                    </div>
+                    <h1 class="text-xl font-bold text-gray-900">产线平衡大师 <span class="text-gray-400 text-sm font-normal">| Assembly Line Balancer</span></h1>
+                </div>
+                <div class="flex items-center gap-4">
+                    <button @click="triggerUpload" class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">
+                        <i class="fa-solid fa-upload mr-1"></i> 导入数据
+                    </button>
+                    <button @click="exportResult" :disabled="!stations.length" class="text-sm text-indigo-600 hover:text-indigo-800 font-medium disabled:opacity-50 disabled:cursor-not-allowed">
+                        <i class="fa-solid fa-download mr-1"></i> 导出结果
+                    </button>
+                    <button @click="loadDemoData" class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">
+                        <i class="fa-solid fa-magic mr-1"></i> 加载演示数据
+                    </button>
+                    <a href="https://huggingface.co/spaces" target="_blank" class="text-gray-500 hover:text-gray-700">
+                        <i class="fa-brands fa-github text-xl"></i>
+                    </a>
+                </div>
+                <input type="file" ref="fileInput" @change="handleFileUpload" class="hidden" accept=".csv,.xlsx,.xls">
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="flex-1 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 w-full gap-6 grid grid-cols-1 lg:grid-cols-12">
+            
+            <!-- Left Panel: Controls & Data -->
+            <div class="lg:col-span-4 space-y-6">
+                
+                <!-- Settings Card -->
+                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+                    <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
+                        <i class="fa-solid fa-sliders mr-2 text-indigo-500"></i> 参数设置
+                    </h2>
+                    
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">目标节拍 (Cycle Time)</label>
+                            <div class="relative rounded-md shadow-sm">
+                                <input type="number" v-model.number="cycleTime" step="0.1" min="0.1"
+                                    class="block w-full rounded-md border-gray-300 pl-3 pr-12 focus:border-indigo-500 focus:ring-indigo-500 py-2 border sm:text-sm"
+                                    placeholder="例如: 10">
+                                <div class="absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <span class="text-gray-500 sm:text-sm">秒</span>
+                                </div>
+                            </div>
+                            <p class="mt-1 text-xs text-gray-500">决定产线的最大产出速度</p>
+                        </div>
+
+                        <div class="pt-2">
+                            <button @click="calculate" 
+                                :disabled="loading"
+                                class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
+                                <span v-if="loading"><i class="fa-solid fa-circle-notch fa-spin mr-2"></i> 计算中...</span>
+                                <span v-else><i class="fa-solid fa-calculator mr-2"></i> 开始平衡计算</span>
+                            </button>
+                        </div>
+                        
+                        <!-- Error Message -->
+                        <div v-if="error" class="bg-red-50 border-l-4 border-red-500 p-4 mt-4">
+                            <div class="flex">
+                                <div class="flex-shrink-0">
+                                    <i class="fa-solid fa-circle-exclamation text-red-400"></i>
+                                </div>
+                                <div class="ml-3">
+                                    <p class="text-sm text-red-700">${ error }</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Tasks Editor -->
+                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex flex-col h-[600px]">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-lg font-semibold text-gray-800 flex items-center">
+                            <i class="fa-solid fa-list-check mr-2 text-indigo-500"></i> 工序列表
+                        </h2>
+                        <button @click="addTask" class="p-1.5 bg-gray-100 rounded-md hover:bg-gray-200 text-gray-600 transition-colors" title="添加工序">
+                            <i class="fa-solid fa-plus"></i>
+                        </button>
+                    </div>
+
+                    <div class="flex-1 overflow-auto -mx-2 px-2">
+                        <table class="min-w-full divide-y divide-gray-200">
+                            <thead class="bg-gray-50 sticky top-0">
+                                <tr>
+                                    <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-20">ID</th>
+                                    <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-24">工时</th>
+                                    <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">紧前工序</th>
+                                    <th scope="col" class="w-10"></th>
+                                </tr>
+                            </thead>
+                            <tbody class="bg-white divide-y divide-gray-200">
+                                <tr v-for="(task, index) in tasks" :key="index" class="hover:bg-gray-50 group">
+                                    <td class="px-3 py-2">
+                                        <input type="text" v-model="task.id" class="w-full border-gray-200 rounded text-sm focus:ring-indigo-500 focus:border-indigo-500 px-1 py-0.5" placeholder="A">
+                                    </td>
+                                    <td class="px-3 py-2">
+                                        <input type="number" v-model.number="task.duration" step="0.1" class="w-full border-gray-200 rounded text-sm focus:ring-indigo-500 focus:border-indigo-500 px-1 py-0.5">
+                                    </td>
+                                    <td class="px-3 py-2">
+                                        <input type="text" :value="task.predecessors.join(',')" @input="updatePreds(index, $event.target.value)" 
+                                            class="w-full border-gray-200 rounded text-sm focus:ring-indigo-500 focus:border-indigo-500 px-1 py-0.5" 
+                                            placeholder="A,B">
+                                    </td>
+                                    <td class="px-3 py-2 text-right">
+                                        <button @click="removeTask(index)" class="text-gray-400 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity">
+                                            <i class="fa-solid fa-trash-can"></i>
+                                        </button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="mt-2 text-xs text-gray-400 text-center">
+                        提示: 紧前工序用逗号分隔
+                    </div>
+                </div>
+            </div>
+
+            <!-- Right Panel: Visualization -->
+            <div class="lg:col-span-8 space-y-6">
+                
+                <!-- Metrics Grid -->
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
+                        <div class="flex items-center justify-between mb-2">
+                            <h3 class="text-sm font-medium text-gray-500">产线平衡率 (Efficiency)</h3>
+                            <i class="fa-solid fa-chart-pie text-indigo-500"></i>
+                        </div>
+                        <div class="flex items-end">
+                            <span class="text-3xl font-bold text-gray-900">${ metrics.efficiency || 0 }</span>
+                            <span class="text-lg text-gray-600 mb-1 ml-1">%</span>
+                        </div>
+                        <div class="mt-2 w-full bg-gray-200 rounded-full h-1.5">
+                            <div class="bg-indigo-600 h-1.5 rounded-full transition-all duration-500" :style="{ width: (metrics.efficiency || 0) + '%' }"></div>
+                        </div>
+                    </div>
+
+                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
+                        <div class="flex items-center justify-between mb-2">
+                            <h3 class="text-sm font-medium text-gray-500">工位数量 (Stations)</h3>
+                            <i class="fa-solid fa-people-group text-indigo-500"></i>
+                        </div>
+                        <div class="flex items-end">
+                            <span class="text-3xl font-bold text-gray-900">${ metrics.num_stations || 0 }</span>
+                            <span class="text-sm text-gray-500 mb-1 ml-2">个</span>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">平衡损失率: ${ metrics.balance_delay || 0 }%</p>
+                    </div>
+
+                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
+                        <div class="flex items-center justify-between mb-2">
+                            <h3 class="text-sm font-medium text-gray-500">平滑指数 (SX)</h3>
+                            <i class="fa-solid fa-wave-square text-indigo-500"></i>
+                        </div>
+                        <div class="flex items-end">
+                            <span class="text-3xl font-bold text-gray-900">${ metrics.smoothness_index || 0 }</span>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-2">数值越小越平滑</p>
+                    </div>
+                </div>
+
+                <!-- Station Chart -->
+                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+                    <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
+                        <i class="fa-solid fa-chart-simple mr-2 text-indigo-500"></i> 工位负荷图
+                    </h2>
+                    <div id="stationChart" class="chart-container"></div>
+                </div>
+
+                <!-- Dependency Graph -->
+                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+                    <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
+                        <i class="fa-solid fa-project-diagram mr-2 text-indigo-500"></i> 工序优先关系图
+                    </h2>
+                    <div id="graphChart" class="chart-container"></div>
+                </div>
+
+                <!-- Detailed Station List -->
+                 <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6" v-if="stations.length > 0">
+                    <h2 class="text-lg font-semibold text-gray-800 mb-4">详细分配方案</h2>
+                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                        <div v-for="station in stations" :key="station.id" class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
+                            <div class="flex justify-between items-center mb-3">
+                                <span class="font-bold text-gray-700">工位 ${ station.id }</span>
+                                <span :class="{'text-green-600': station.time_used <= cycleTime, 'text-red-600': station.time_used > cycleTime}" class="text-sm font-mono">
+                                    ${ station.time_used.toFixed(1) } / ${ cycleTime }s
+                                </span>
+                            </div>
+                            <div class="w-full bg-gray-100 rounded-full h-2 mb-3">
+                                <div class="h-2 rounded-full transition-all" 
+                                    :class="getLoadColor(station.time_used, cycleTime)"
+                                    :style="{ width: Math.min((station.time_used / cycleTime) * 100, 100) + '%' }"></div>
+                            </div>
+                            <div class="flex flex-wrap gap-2">
+                                <span v-for="t in station.tasks" :key="t.id" class="px-2 py-1 bg-indigo-50 text-indigo-700 text-xs rounded border border-indigo-100 font-medium">
+                                    ${ t.id } (${ t.duration })
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                 </div>
+            </div>
+        </main>
+    </div>
+
+    <script>
+        const { createApp, ref, onMounted, nextTick } = Vue;
+
+        createApp({
+            delimiters: ['${', '}'],
+            setup() {
+                const loading = ref(false);
+                const error = ref(null);
+                const cycleTime = ref(10);
+                const fileInput = ref(null);
+                const tasks = ref([
+                    { id: '1', duration: 5, predecessors: [] },
+                    { id: '2', duration: 3, predecessors: ['1'] },
+                    { id: '3', duration: 4, predecessors: ['1'] },
+                    { id: '4', duration: 3, predecessors: ['2', '3'] },
+                    { id: '5', duration: 6, predecessors: ['4'] }
+                ]);
+                const stations = ref([]);
+                const metrics = ref({});
+                
+                let stationChart = null;
+                let graphChart = null;
+
+                const updatePreds = (index, value) => {
+                    const arr = value.split(',').map(s => s.trim()).filter(s => s);
+                    tasks.value[index].predecessors = arr;
+                };
+
+                const addTask = () => {
+                    const nextId = (tasks.value.length + 1).toString();
+                    tasks.value.push({ id: nextId, duration: 1, predecessors: [] });
+                };
+
+                const removeTask = (index) => {
+                    tasks.value.splice(index, 1);
+                };
+                
+                const triggerUpload = () => {
+                    fileInput.value.click();
+                };
+                
+                const handleFileUpload = async (event) => {
+                    const file = event.target.files[0];
+                    if (!file) return;
+                    
+                    const formData = new FormData();
+                    formData.append('file', file);
+                    
+                    loading.value = true;
+                    error.value = null;
+                    
+                    try {
+                        const response = await fetch('/api/upload', {
+                            method: 'POST',
+                            body: formData
+                        });
+                        
+                        const data = await response.json();
+                        
+                        if (!response.ok) {
+                            throw new Error(data.error || 'Upload failed');
+                        }
+                        
+                        tasks.value = data.tasks;
+                        // Clear stations as data changed
+                        stations.value = [];
+                        metrics.value = {};
+                        updateCharts();
+                        
+                    } catch (e) {
+                        error.value = e.message;
+                    } finally {
+                        loading.value = false;
+                        // Reset input
+                        event.target.value = '';
+                    }
+                };
+                
+                const exportResult = () => {
+                    if (stations.value.length === 0) return;
+                    
+                    // Simple CSV export
+                    let csvContent = "data:text/csv;charset=utf-8,";
+                    csvContent += "Station ID,Task ID,Duration\n";
+                    
+                    stations.value.forEach(station => {
+                        station.tasks.forEach(task => {
+                            csvContent += `${station.id},${task.id},${task.duration}\n`;
+                        });
+                    });
+                    
+                    const encodedUri = encodeURI(csvContent);
+                    const link = document.createElement("a");
+                    link.setAttribute("href", encodedUri);
+                    link.setAttribute("download", "balancing_result.csv");
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+                };
+
+                const loadDemoData = () => {
+                    // Classic Jackson (1956) Problem (Simplified) or similar
+                    tasks.value = [
+                        { id: '1', duration: 6, predecessors: [] },
+                        { id: '2', duration: 2, predecessors: [] },
+                        { id: '3', duration: 5, predecessors: ['1'] },
+                        { id: '4', duration: 7, predecessors: ['1'] },
+                        { id: '5', duration: 1, predecessors: ['2'] },
+                        { id: '6', duration: 2, predecessors: ['2'] },
+                        { id: '7', duration: 3, predecessors: ['3', '4'] },
+                        { id: '8', duration: 6, predecessors: ['5', '6'] },
+                        { id: '9', duration: 5, predecessors: ['7', '8'] },
+                        { id: '10', duration: 5, predecessors: ['9'] },
+                        { id: '11', duration: 4, predecessors: ['10'] }
+                    ];
+                    cycleTime.value = 10;
+                    calculate();
+                };
+                
+                const calculate = async () => {
+                    loading.value = true;
+                    error.value = null;
+                    try {
+                        const response = await fetch('/api/calculate', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({
+                                tasks: tasks.value,
+                                cycle_time: cycleTime.value
+                            })
+                        });
+                        
+                        const data = await response.json();
+                        
+                        if (!response.ok) {
+                            throw new Error(data.error || 'Calculation failed');
+                        }
+                        
+                        stations.value = data.stations;
+                        metrics.value = data.metrics;
+                        
+                        // Update charts
+                        nextTick(() => {
+                            updateCharts();
+                        });
+                        
+                    } catch (e) {
+                        error.value = e.message;
+                    } finally {
+                        loading.value = false;
+                    }
+                };
+
+                const getLoadColor = (used, max) => {
+                    const pct = used / max;
+                    if (pct > 1) return 'bg-red-500';
+                    if (pct > 0.9) return 'bg-green-500';
+                    if (pct > 0.7) return 'bg-blue-500';
+                    return 'bg-yellow-500';
+                };
+
+                const initCharts = () => {
+                    const chartDom1 = document.getElementById('stationChart');
+                    const chartDom2 = document.getElementById('graphChart');
+                    
+                    if (chartDom1) {
+                        stationChart = echarts.init(chartDom1);
+                        window.addEventListener('resize', () => stationChart.resize());
+                    }
+                    
+                    if (chartDom2) {
+                        graphChart = echarts.init(chartDom2);
+                        window.addEventListener('resize', () => graphChart.resize());
+                    }
+                };
+
+                const updateCharts = () => {
+                    if (!stationChart || !graphChart) return;
+                    
+                    // 1. Station Chart
+                    const stationIds = stations.value.map(s => `ST-${s.id}`);
+                    const stationTimes = stations.value.map(s => s.time_used);
+                    const idleTimes = stations.value.map(s => {
+                        const val = cycleTime.value - s.time_used;
+                        return val > 0 ? parseFloat(val.toFixed(1)) : 0;
+                    });
+
+                    stationChart.setOption({
+                        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+                        legend: { data: ['作业时间', '空闲时间'] },
+                        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+                        xAxis: { type: 'category', data: stationIds },
+                        yAxis: { type: 'value', name: '时间 (秒)' },
+                        series: [
+                            {
+                                name: '作业时间',
+                                type: 'bar',
+                                stack: 'total',
+                                label: { show: true, position: 'inside' },
+                                data: stationTimes,
+                                itemStyle: { color: '#4f46e5' }
+                            },
+                            {
+                                name: '空闲时间',
+                                type: 'bar',
+                                stack: 'total',
+                                label: { show: true, position: 'top' },
+                                data: idleTimes,
+                                itemStyle: { color: '#e5e7eb' }
+                            },
+                            {
+                                type: 'line',
+                                data: Array(stationIds.length).fill(cycleTime.value),
+                                markLine: {
+                                    data: [{ yAxis: cycleTime.value, name: '节拍' }],
+                                    lineStyle: { color: '#ef4444', type: 'dashed' }
+                                }
+                            }
+                        ]
+                    });
+
+                    // 2. Graph Chart
+                    // Convert tasks to nodes and edges
+                    const nodes = tasks.value.map(t => ({
+                        name: t.id,
+                        value: t.duration,
+                        symbolSize: 40,
+                        itemStyle: { color: '#4f46e5' },
+                        label: { show: true, color: '#fff' }
+                    }));
+                    
+                    const edges = [];
+                    tasks.value.forEach(t => {
+                        t.predecessors.forEach(p => {
+                            if (p && tasks.value.find(task => task.id === p)) {
+                                edges.push({
+                                    source: p,
+                                    target: t.id,
+                                    lineStyle: { curveness: 0.2 }
+                                });
+                            }
+                        });
+                    });
+                    
+                    graphChart.setOption({
+                         title: { text: '任务关系图', left: 'center' },
+                         tooltip: {},
+                         series: [
+                             {
+                                 type: 'graph',
+                                 layout: 'force',
+                                 animation: false,
+                                 data: nodes,
+                                 links: edges,
+                                 roam: true,
+                                 label: { position: 'right' },
+                                 force: { repulsion: 300, edgeLength: 50 }
+                             }
+                         ]
+                    });
+                };
+
+                onMounted(() => {
+                    initCharts();
+                    // Load default data on start
+                    loadDemoData();
+                });
+
+                return {
+                    loading,
+                    error,
+                    cycleTime,
+                    tasks,
+                    stations,
+                    metrics,
+                    fileInput,
+                    updatePreds,
+                    addTask,
+                    removeTask,
+                    loadDemoData,
+                    calculate,
+                    getLoadColor,
+                    triggerUpload,
+                    handleFileUpload,
+                    exportResult
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>