Enhance app with file upload, localization and fixes

.gitignore

@@ -0,0 +1,8 @@
+__pycache__/
+*.pyc
+.DS_Store
+.venv
+env/
+venv/
+.idea/
+.vscode/

Dockerfile

@@ -0,0 +1,18 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Create a non-root user for security (good practice for HF Spaces)
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+EXPOSE 7860
+
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md

@@ -0,0 +1,55 @@
+---
+title: 智能库存预测引擎
+emoji: 📦
+colorFrom: blue
+colorTo: green
+sdk: docker
+app_port: 7860
+short_description: 基于 Holt-Winters 算法的电商库存销量预测与优化系统
+pinned: false
+license: mit
+---
+
+# 智能库存预测引擎 (Inventory Forecast Engine)
+
+## 📊 项目简介
+这是一个专为跨境电商、零售商和供应链管理者设计的**智能库存预测与优化系统**。它利用**Holt-Winters 三次指数平滑算法**，能够处理具有**趋势性**和**季节性**的销量数据，精准预测未来需求，并自动计算**安全库存 (Safety Stock)** 和 **再订货点 (ROP)**，帮助商家在降低库存成本的同时防止缺货。
+
+## 🚀 核心功能
+*   **智能销量预测**：基于历史数据，自动识别增长趋势和季节性波动，生成未来 6 个月的销量预测。
+*   **动态库存优化**：
+    *   **安全库存计算**：根据目标服务水平 (Service Level) 和提前期 (Lead Time) 波动，科学计算缓冲库存。
+    *   **再订货点 (ROP)**：动态建议何时补货，避免断货风险。
+    *   **经济订货量 (EOQ)**：基于持有成本和订货成本，建议最佳单次采购量。
+*   **实时交互模拟**：
+    *   调整服务水平 (90% - 99%)，实时查看对库存资金占用的影响。
+    *   调整采购提前期，模拟供应链延迟对库存水位的压力。
+*   **数据可视化**：集成 ECharts，直观展示历史销量、AI 预测曲线及趋势分析。
+
+## 🛠️ 技术栈
+*   **后端**: Python Flask, NumPy (算法实现)
+*   **前端**: Vue 3, Tailwind CSS (现代化暗黑风格 UI)
+*   **图表**: Apache ECharts 5
+*   **部署**: Docker (Gunicorn WSGI)
+
+## 💡 商业价值
+对于年销售额 $1M+ 的电商卖家，库存周转率每提升 1 次，可能释放数万美元的现金流。本工具通过科学算法替代 Excel 拍脑袋估算，显著降低滞销风险和缺货损失。
+
+## 📦 如何运行
+### 本地运行
+```bash
+# 安装依赖
+pip install -r requirements.txt
+
+# 启动服务
+python app.py
+```
+
+### Docker 运行
+```bash
+docker build -t inventory-engine .
+docker run -p 7860:7860 inventory-engine
+```
+
+---
+*Generated by Trae AI Pair Programmer*

app.py

@@ -0,0 +1,787 @@
+import os
+import json
+import math
+import random
+import io
+import csv
+import logging
+import numpy as np
+import pandas as pd
+from datetime import datetime, timedelta
+from flask import Flask, render_template_string, request, jsonify, send_file
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+app = Flask(__name__)
+app.secret_key = os.urandom(24)
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max upload
+
+# -----------------------------------------------------------------------------
+# 核心算法逻辑
+# -----------------------------------------------------------------------------
+
+def generate_mock_data(months=24, trend=0.02, seasonality_strength=0.2, base=1000):
+    """生成模拟销量数据：趋势 + 季节性 + 随机噪声"""
+    data = []
+    start_date = datetime.now() - timedelta(days=months*30)
+    
+    for i in range(months):
+        # 时间索引
+        date = start_date + timedelta(days=i*30)
+        date_str = date.strftime("%Y-%m")
+        
+        # 趋势项 (线性增长)
+        trend_factor = 1 + (i * trend)
+        
+        # 季节项 (模拟年度周期)
+        # 使用 month 0-11 映射到 0-2pi
+        month_idx = date.month - 1
+        season_factor = 1 + seasonality_strength * math.sin(2 * math.pi * month_idx / 12)
+        
+        # 随机噪声
+        noise = random.uniform(0.9, 1.1)
+        
+        # 最终销量
+        volume = int(base * trend_factor * season_factor * noise)
+        
+        data.append({
+            "date": date_str,
+            "volume": volume
+        })
+    
+    return data
+
+def holt_winters_forecast(series, n_preds=6, alpha=0.3, beta=0.1, gamma=0.1, season_len=12):
+    """
+    简化的 Holt-Winters (Triple Exponential Smoothing) 实现
+    series: list of historical values
+    n_preds: number of months to predict
+    """
+    series = np.array(series)
+    n = len(series)
+    
+    # 数据过短处理
+    if n < season_len * 2:
+        season_len = max(2, n // 2)
+
+    # 初始值
+    level = series[0]
+    trend = series[1] - series[0] if n > 1 else 0
+    seasonals = [series[i] / (series[0] if series[0] != 0 else 1) for i in range(season_len)]
+    
+    result = []
+    
+    # 拟合历史数据 (简单模拟，不进行复杂的参数优化，仅做演示运算)
+    levels = [level]
+    trends = [trend]
+    
+    # 训练阶段
+    for i in range(n):
+        val = series[i]
+        s_idx = i % season_len
+        prev_level = levels[-1]
+        prev_trend = trends[-1]
+        prev_seasonal = seasonals[s_idx]
+        
+        # 防止除零
+        if prev_seasonal == 0: prev_seasonal = 1
+        if prev_level == 0: prev_level = 1
+
+        # 更新 Level
+        new_level = alpha * (val / prev_seasonal) + (1 - alpha) * (prev_level + prev_trend)
+        
+        # 更新 Trend
+        new_trend = beta * (new_level - prev_level) + (1 - beta) * prev_trend
+        
+        # 更新 Seasonal
+        new_seasonal = gamma * (val / new_level) + (1 - gamma) * prev_seasonal
+        
+        levels.append(new_level)
+        trends.append(new_trend)
+        seasonals[s_idx] = new_seasonal # 更新当前季节系数
+        
+        # 记录拟合值 (One-step ahead forecast)
+        fitted = (prev_level + prev_trend) * prev_seasonal
+        result.append(fitted)
+
+    # 预测未来
+    forecast = []
+    last_level = levels[-1]
+    last_trend = trends[-1]
+    
+    for i in range(n_preds):
+        m = i + 1
+        s_idx = (n + i) % season_len
+        pred = (last_level + m * last_trend) * seasonals[s_idx]
+        forecast.append(int(pred))
+        
+    return result, forecast
+
+def calculate_inventory_metrics(history_series, forecast_series, lead_time_days, service_level, unit_cost, holding_cost_percent):
+    """计算库存核心指标"""
+    if not history_series:
+        return {}
+        
+    # 1. 计算日均销量 (简化：月销量 / 30)
+    avg_monthly_demand = np.mean(history_series[-6:]) # 取最近6个月均值
+    avg_daily_demand = avg_monthly_demand / 30
+    
+    # 2. 计算需求标准差 (用于安全库存)
+    # 计算最近历史数据的波动性
+    std_dev_monthly = np.std(history_series[-6:])
+    std_dev_daily = std_dev_monthly / math.sqrt(30)
+    
+    # 3. Z-score 映射 (Service Level -> Z)
+    # 90% -> 1.28, 95% -> 1.645, 99% -> 2.33
+    z_map = {
+        0.90: 1.28,
+        0.95: 1.645,
+        0.98: 2.05,
+        0.99: 2.33
+    }
+    # 默认插值或取最近
+    z_score = 1.645 # default 95%
+    closest_sl = min(z_map.keys(), key=lambda x: abs(x - service_level))
+    z_score = z_map[closest_sl]
+    
+    # 4. 安全库存 (Safety Stock) = Z * sigma_LT
+    # sigma_LT = sigma_daily * sqrt(Lead Time)
+    safety_stock = z_score * std_dev_daily * math.sqrt(lead_time_days)
+    
+    # 5. 再订货点 (ROP) = (Daily Demand * Lead Time) + Safety Stock
+    rop = (avg_daily_demand * lead_time_days) + safety_stock
+    
+    # 6. 建议订货量 (EOQ - Economic Order Quantity)
+    # EOQ = sqrt( (2 * AnnualDemand * OrderCost) / HoldingCostPerUnit )
+    # 假设 OrderCost 固定为 $50 (演示用)
+    annual_demand = np.sum(forecast_series) * (12 / len(forecast_series)) if len(forecast_series) > 0 else 0
+    order_cost = 50 
+    holding_cost_per_unit = unit_cost * holding_cost_percent
+    
+    if holding_cost_per_unit > 0:
+        eoq = math.sqrt((2 * annual_demand * order_cost) / holding_cost_per_unit)
+    else:
+        eoq = annual_demand / 12 # fallback
+        
+    return {
+        "safety_stock": int(safety_stock),
+        "rop": int(rop),
+        "eoq": int(eoq),
+        "avg_daily_demand": round(avg_daily_demand, 2),
+        "turnover_rate": round(annual_demand / ((safety_stock + eoq/2) * unit_cost), 1) if unit_cost > 0 and (safety_stock + eoq/2) > 0 else 0
+    }
+
+# -----------------------------------------------------------------------------
+# Routes
+# -----------------------------------------------------------------------------
+
+@app.route('/')
+def index():
+    return render_template_string(TEMPLATE)
+
+@app.route('/api/generate', methods=['POST'])
+def api_generate():
+    try:
+        params = request.json
+        trend = float(params.get('trend', 0.02))
+        seasonality = float(params.get('seasonality', 0.2))
+        base = int(params.get('base', 1000))
+        
+        data = generate_mock_data(months=24, trend=trend, seasonality_strength=seasonality, base=base)
+        return jsonify({"status": "success", "data": data})
+    except Exception as e:
+        logger.error(f"Generate error: {e}")
+        return jsonify({"status": "error", "message": str(e)}), 500
+
+@app.route('/api/forecast', methods=['POST'])
+def api_forecast():
+    try:
+        req = request.json
+        history = req.get('history', []) # list of {date, volume}
+        params = req.get('params', {})
+        
+        if not history:
+            return jsonify({"status": "error", "message": "No history data provided"}), 400
+
+        # Extract time series
+        volumes = [d['volume'] for d in history]
+        dates = [d['date'] for d in history]
+        
+        # Run Forecast
+        fitted, forecast = holt_winters_forecast(volumes, n_preds=6)
+        
+        # Generate future dates
+        try:
+            last_date = datetime.strptime(dates[-1], "%Y-%m")
+        except ValueError:
+             # Try another format if %Y-%m fails, or default
+            last_date = datetime.now()
+
+        future_dates = []
+        for i in range(6):
+            d = last_date + timedelta(days=(i+1)*30)
+            future_dates.append(d.strftime("%Y-%m"))
+            
+        # Calculate Inventory Metrics
+        lead_time = int(params.get('lead_time', 14))
+        service_level = float(params.get('service_level', 0.95))
+        unit_cost = float(params.get('unit_cost', 50))
+        
+        metrics = calculate_inventory_metrics(
+            volumes, forecast, 
+            lead_time_days=lead_time,
+            service_level=service_level,
+            unit_cost=unit_cost,
+            holding_cost_percent=0.2 # 20% annual holding cost
+        )
+        
+        return jsonify({
+            "forecast_dates": future_dates,
+            "forecast_values": forecast,
+            "metrics": metrics,
+            "fitted": fitted # Optional: show how well it fit history
+        })
+    except Exception as e:
+        logger.error(f"Forecast error: {e}")
+        return jsonify({"status": "error", "message": str(e)}), 500
+
+@app.route('/api/upload', methods=['POST'])
+def api_upload():
+    try:
+        if 'file' not in request.files:
+            return jsonify({"status": "error", "message": "No file part"}), 400
+        file = request.files['file']
+        if file.filename == '':
+            return jsonify({"status": "error", "message": "No selected file"}), 400
+            
+        if file:
+            # Handle large files by processing stream or reading efficiently
+            # For simplicity with pandas, we read into memory, but limit is 16MB via config
+            try:
+                if file.filename.endswith('.csv'):
+                    df = pd.read_csv(file)
+                elif file.filename.endswith(('.xls', '.xlsx')):
+                    df = pd.read_excel(file)
+                else:
+                     return jsonify({"status": "error", "message": "Unsupported file format. Please use CSV or Excel."}), 400
+            except Exception as e:
+                return jsonify({"status": "error", "message": f"File parse error: {str(e)}"}), 400
+
+            # Normalize columns
+            df.columns = [c.lower() for c in df.columns]
+            
+            # Look for date and volume columns
+            date_col = next((c for c in df.columns if 'date' in c or 'time' in c or '日期' in c or '时间' in c), None)
+            vol_col = next((c for c in df.columns if 'vol' in c or 'qty' in c or 'amount' in c or '销量' in c or '数量' in c), None)
+            
+            if not date_col or not vol_col:
+                return jsonify({"status": "error", "message": "Could not identify 'Date' or 'Volume' columns. Please name them clearly."}), 400
+                
+            # Sort by date
+            try:
+                df[date_col] = pd.to_datetime(df[date_col])
+                df = df.sort_values(date_col)
+                df[date_col] = df[date_col].dt.strftime('%Y-%m')
+            except Exception:
+                 return jsonify({"status": "error", "message": "Date column format invalid"}), 400
+
+            data = []
+            for _, row in df.iterrows():
+                try:
+                    vol = int(row[vol_col])
+                    data.append({
+                        "date": str(row[date_col]),
+                        "volume": vol
+                    })
+                except ValueError:
+                    continue # skip invalid rows
+            
+            return jsonify({"status": "success", "data": data})
+
+    except Exception as e:
+        logger.error(f"Upload error: {e}")
+        return jsonify({"status": "error", "message": str(e)}), 500
+
+# -----------------------------------------------------------------------------
+# Vue Template
+# -----------------------------------------------------------------------------
+
+TEMPLATE = """
+<!DOCTYPE html>
+<html lang="zh-CN" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>智能库存预测引擎 (Inventory Forecast Engine)</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></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">
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3B82F6',
+                        secondary: '#10B981',
+                        dark: '#111827',
+                        darker: '#0B0F19',
+                        card: '#1F2937'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        body { background-color: #0B0F19; color: #E5E7EB; font-family: 'Inter', sans-serif; }
+        .glass-panel {
+            background: rgba(31, 41, 55, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(75, 85, 99, 0.4);
+        }
+        input[type="range"] {
+            accent-color: #3B82F6;
+        }
+        /* Loading overlay */
+        .loading-overlay {
+            position: fixed; top:0; left:0; width:100%; height:100%;
+            background: rgba(0,0,0,0.7); z-index: 100;
+            display: flex; justify-content: center; align-items: center;
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col">
+    <div id="app" class="flex-grow flex flex-col">
+        <!-- Loading -->
+        <div v-if="loading" class="loading-overlay">
+            <div class="text-center">
+                <i class="fas fa-spinner fa-spin text-4xl text-blue-500 mb-2"></i>
+                <p class="text-gray-300">处理中...</p>
+            </div>
+        </div>
+
+        <!-- Header -->
+        <header class="border-b border-gray-800 bg-darker/80 backdrop-blur sticky top-0 z-50">
+            <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center shadow-lg shadow-blue-500/20">
+                        <i class="fas fa-cubes text-white text-lg"></i>
+                    </div>
+                    <div>
+                        <h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-400">智能库存预测引擎</h1>
+                        <p class="text-xs text-gray-500">Inventory Forecast Engine Pro</p>
+                    </div>
+                </div>
+                <div class="flex gap-4">
+                    <label class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg text-sm transition flex items-center gap-2 border border-gray-700 cursor-pointer">
+                        <i class="fas fa-upload text-blue-400"></i> 上传数据
+                        <input type="file" class="hidden" @change="handleFileUpload" accept=".csv,.xls,.xlsx">
+                    </label>
+                    <button @click="generateData" class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg text-sm transition flex items-center gap-2 border border-gray-700">
+                        <i class="fas fa-sync-alt" :class="{'animate-spin': loading}"></i> 重新生成
+                    </button>
+                    <button @click="runForecast" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg text-sm font-medium transition shadow-lg shadow-blue-600/20 flex items-center gap-2">
+                        <i class="fas fa-calculator"></i> 运行预测
+                    </button>
+                </div>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="flex-grow p-6 max-w-7xl mx-auto w-full grid grid-cols-12 gap-6">
+            
+            <!-- Sidebar Controls -->
+            <div class="col-span-12 lg:col-span-3 space-y-6">
+                <!-- Data Settings -->
+                <div class="glass-panel rounded-xl p-5">
+                    <h3 class="text-sm font-semibold text-gray-300 mb-4 flex items-center gap-2">
+                        <i class="fas fa-database text-blue-400"></i> 数据模拟参数
+                    </h3>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="text-xs text-gray-400 block mb-1">基础月销量 (Base)</label>
+                            <input v-model.number="params.base" type="number" class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm focus:border-blue-500 outline-none text-white">
+                        </div>
+                        <div>
+                            <label class="text-xs text-gray-400 block mb-1">增长趋势 (Trend)</label>
+                            <div class="flex items-center gap-2">
+                                <input v-model.number="params.trend" type="range" min="-0.05" max="0.1" step="0.01" class="flex-grow h-1 bg-gray-700 rounded-lg appearance-none cursor-pointer">
+                                <span class="text-xs w-12 text-right text-mono text-gray-300">${ (params.trend * 100).toFixed(0) }%</span>
+                            </div>
+                        </div>
+                        <div>
+                            <label class="text-xs text-gray-400 block mb-1">季节性强度 (Seasonality)</label>
+                            <div class="flex items-center gap-2">
+                                <input v-model.number="params.seasonality" type="range" min="0" max="0.8" step="0.1" class="flex-grow h-1 bg-gray-700 rounded-lg appearance-none cursor-pointer">
+                                <span class="text-xs w-12 text-right text-mono text-gray-300">${ params.seasonality }</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Inventory Settings -->
+                <div class="glass-panel rounded-xl p-5">
+                    <h3 class="text-sm font-semibold text-gray-300 mb-4 flex items-center gap-2">
+                        <i class="fas fa-sliders-h text-green-400"></i> 库存策略配置
+                    </h3>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="text-xs text-gray-400 block mb-1">目标服务水平 (Service Level)</label>
+                            <select v-model.number="invParams.service_level" class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm focus:border-green-500 outline-none text-white">
+                                <option :value="0.90">90% (低风险)</option>
+                                <option :value="0.95">95% (标准)</option>
+                                <option :value="0.98">98% (高可用)</option>
+                                <option :value="0.99">99% (关键业务)</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="text-xs text-gray-400 block mb-1">采购提前期 (Lead Time Days)</label>
+                            <div class="flex items-center gap-2">
+                                <input v-model.number="invParams.lead_time" type="range" min="1" max="60" step="1" class="flex-grow h-1 bg-gray-700 rounded-lg appearance-none cursor-pointer">
+                                <span class="text-xs w-12 text-right text-mono text-gray-300">${ invParams.lead_time }d</span>
+                            </div>
+                        </div>
+                        <div>
+                            <label class="text-xs text-gray-400 block mb-1">单件成本 ($)</label>
+                            <input v-model.number="invParams.unit_cost" type="number" class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm focus:border-green-500 outline-none text-white">
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Info Card -->
+                 <div class="glass-panel rounded-xl p-5 bg-gradient-to-br from-blue-900/20 to-purple-900/20 border-blue-500/20">
+                    <h4 class="text-sm font-bold text-blue-300 mb-2">商业价值说明</h4>
+                    <p class="text-xs text-gray-400 leading-relaxed">
+                        本系统使用 <strong>Holt-Winters 三次指数平滑算法</strong> 预测未来销量，并基于正态分布理论计算<strong>安全库存</strong>与<strong>再订货点 (ROP)</strong>。帮助商家在维持服务水平的同时，最小化资金占用。
+                    </p>
+                </div>
+            </div>
+
+            <!-- Main Charts & Metrics -->
+            <div class="col-span-12 lg:col-span-9 flex flex-col gap-6">
+                
+                <!-- Error Message -->
+                <div v-if="error" class="bg-red-900/50 border border-red-500/50 p-4 rounded-lg flex items-center gap-3">
+                    <i class="fas fa-exclamation-circle text-red-500"></i>
+                    <span class="text-red-200 text-sm">${ error }</span>
+                    <button @click="error = null" class="ml-auto text-red-400 hover:text-red-200"><i class="fas fa-times"></i></button>
+                </div>
+
+                <!-- KPI Cards -->
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-4" v-if="metrics">
+                    <div class="glass-panel p-4 rounded-xl border-l-4 border-blue-500 relative overflow-hidden group">
+                        <div class="absolute right-0 top-0 p-3 opacity-10 group-hover:opacity-20 transition">
+                            <i class="fas fa-shield-alt text-4xl"></i>
+                        </div>
+                        <div class="text-xs text-gray-400 mb-1">建议安全库存</div>
+                        <div class="text-2xl font-bold text-white">${ metrics.safety_stock } <span class="text-xs font-normal text-gray-500">件</span></div>
+                        <div class="text-xs text-blue-400 mt-1">Buffer Stock</div>
+                    </div>
+                    
+                    <div class="glass-panel p-4 rounded-xl border-l-4 border-yellow-500 relative overflow-hidden group">
+                        <div class="absolute right-0 top-0 p-3 opacity-10 group-hover:opacity-20 transition">
+                            <i class="fas fa-bell text-4xl"></i>
+                        </div>
+                        <div class="text-xs text-gray-400 mb-1">再订货点 (ROP)</div>
+                        <div class="text-2xl font-bold text-white">${ metrics.rop } <span class="text-xs font-normal text-gray-500">件</span></div>
+                        <div class="text-xs text-yellow-400 mt-1">Reorder Point</div>
+                    </div>
+                    
+                    <div class="glass-panel p-4 rounded-xl border-l-4 border-green-500 relative overflow-hidden group">
+                        <div class="absolute right-0 top-0 p-3 opacity-10 group-hover:opacity-20 transition">
+                            <i class="fas fa-shopping-cart text-4xl"></i>
+                        </div>
+                        <div class="text-xs text-gray-400 mb-1">经济订货量 (EOQ)</div>
+                        <div class="text-2xl font-bold text-white">${ metrics.eoq } <span class="text-xs font-normal text-gray-500">件</span></div>
+                        <div class="text-xs text-green-400 mt-1">Optimal Order Qty</div>
+                    </div>
+
+                     <div class="glass-panel p-4 rounded-xl border-l-4 border-purple-500 relative overflow-hidden group">
+                        <div class="absolute right-0 top-0 p-3 opacity-10 group-hover:opacity-20 transition">
+                            <i class="fas fa-sync text-4xl"></i>
+                        </div>
+                        <div class="text-xs text-gray-400 mb-1">预估周转率</div>
+                        <div class="text-2xl font-bold text-white">${ metrics.turnover_rate }x <span class="text-xs font-normal text-gray-500">/年</span></div>
+                        <div class="text-xs text-purple-400 mt-1">Turnover Rate</div>
+                    </div>
+                </div>
+
+                <!-- Main Chart -->
+                <div class="glass-panel p-5 rounded-xl flex-grow flex flex-col min-h-[400px]">
+                    <h3 class="text-lg font-semibold text-gray-200 mb-4 flex justify-between items-center">
+                        <span><i class="fas fa-chart-line text-blue-500 mr-2"></i> 销量预测与库存分析</span>
+                        <span class="text-xs font-normal text-gray-500 bg-gray-800 px-2 py-1 rounded">Holt-Winters Model</span>
+                    </h3>
+                    <div id="mainChart" class="flex-grow w-full h-full"></div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <script>
+        const { createApp, ref, onMounted, watch, nextTick } = Vue;
+
+        createApp({
+            delimiters: ['${', '}'], // Changed to avoid Jinja2 conflict
+            setup() {
+                const loading = ref(false);
+                const error = ref(null);
+                const chartInstance = ref(null);
+                
+                // State
+                const historyData = ref([]);
+                const forecastData = ref(null);
+                const metrics = ref(null);
+                
+                // Parameters
+                const params = ref({
+                    base: 1000,
+                    trend: 0.02,
+                    seasonality: 0.3
+                });
+                
+                const invParams = ref({
+                    service_level: 0.95,
+                    lead_time: 14,
+                    unit_cost: 50
+                });
+
+                // Methods
+                const initChart = () => {
+                    const el = document.getElementById('mainChart');
+                    if (el) {
+                        chartInstance.value = echarts.init(el);
+                        window.addEventListener('resize', () => chartInstance.value.resize());
+                    }
+                };
+
+                const updateChart = () => {
+                    if (!chartInstance.value) return;
+                    
+                    const dates = historyData.value.map(d => d.date);
+                    const values = historyData.value.map(d => d.volume);
+                    
+                    let series = [
+                        {
+                            name: '历史销量',
+                            type: 'line',
+                            data: values,
+                            smooth: true,
+                            symbolSize: 6,
+                            itemStyle: { color: '#3B82F6' },
+                            areaStyle: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                    { offset: 0, color: 'rgba(59, 130, 246, 0.5)' },
+                                    { offset: 1, color: 'rgba(59, 130, 246, 0.0)' }
+                                ])
+                            }
+                        }
+                    ];
+                    
+                    let xAxisData = [...dates];
+                    
+                    if (forecastData.value) {
+                        const fDates = forecastData.value.dates;
+                        const fValues = forecastData.value.values;
+                        
+                        // 连接历史最后一点和预测第一点，为了视觉连贯
+                        const lastHistDate = dates[dates.length-1];
+                        const lastHistVal = values[values.length-1];
+                        
+                        // 构造预测数据序列 (前补 null)
+                        const nulls = Array(values.length - 1).fill(null);
+                        // 把历史最后一点作为预测起始点
+                        const plotForecast = [lastHistVal, ...fValues];
+                        const fullForecastData = [...nulls, ...plotForecast];
+                        
+                        // 扩展 X 轴
+                        xAxisData = [...dates, ...fDates];
+                        
+                        series.push({
+                            name: 'AI 预测销量',
+                            type: 'line',
+                            data: fullForecastData,
+                            smooth: true,
+                            symbolSize: 6,
+                            lineStyle: { type: 'dashed', width: 3 },
+                            itemStyle: { color: '#10B981' }
+                        });
+                        
+                        if (metrics.value) {
+                            const avgDemand = metrics.value.avg_daily_demand * 30;
+                            
+                            series.push({
+                                name: '月均需求趋势',
+                                type: 'line',
+                                data: Array(xAxisData.length).fill(avgDemand),
+                                showSymbol: false,
+                                lineStyle: { color: '#6B7280', width: 1, type: 'dotted' },
+                                z: -1
+                            });
+                        }
+                    }
+
+                    const option = {
+                        backgroundColor: 'transparent',
+                        tooltip: {
+                            trigger: 'axis',
+                            backgroundColor: 'rgba(17, 24, 39, 0.9)',
+                            borderColor: '#374151',
+                            textStyle: { color: '#E5E7EB' }
+                        },
+                        legend: {
+                            data: ['历史销量', 'AI 预测销量'],
+                            textStyle: { color: '#9CA3AF' },
+                            bottom: 0
+                        },
+                        grid: {
+                            left: '3%',
+                            right: '4%',
+                            bottom: '10%',
+                            top: '10%',
+                            containLabel: true
+                        },
+                        xAxis: {
+                            type: 'category',
+                            boundaryGap: false,
+                            data: xAxisData,
+                            axisLine: { lineStyle: { color: '#4B5563' } },
+                            axisLabel: { color: '#9CA3AF' }
+                        },
+                        yAxis: {
+                            type: 'value',
+                            splitLine: { lineStyle: { color: '#374151' } },
+                            axisLabel: { color: '#9CA3AF' }
+                        },
+                        series: series
+                    };
+                    
+                    chartInstance.value.setOption(option);
+                };
+
+                const generateData = async () => {
+                    loading.value = true;
+                    error.value = null;
+                    try {
+                        const res = await fetch('/api/generate', {
+                            method: 'POST',
+                            headers: {'Content-Type': 'application/json'},
+                            body: JSON.stringify(params.value)
+                        });
+                        const data = await res.json();
+                        if(data.status === 'error') throw new Error(data.message);
+                        historyData.value = data.data;
+                        
+                        // 自动运行预测
+                        await runForecast();
+                    } catch (e) {
+                        console.error(e);
+                        error.value = "生成数据失败: " + e.message;
+                    } finally {
+                        loading.value = false;
+                    }
+                };
+
+                const runForecast = async () => {
+                    if (historyData.value.length === 0) return;
+                    
+                    try {
+                        const res = await fetch('/api/forecast', {
+                            method: 'POST',
+                            headers: {'Content-Type': 'application/json'},
+                            body: JSON.stringify({
+                                history: historyData.value,
+                                params: invParams.value
+                            })
+                        });
+                        const data = await res.json();
+                        
+                        if(data.status === 'error') throw new Error(data.message);
+
+                        forecastData.value = {
+                            dates: data.forecast_dates,
+                            values: data.forecast_values
+                        };
+                        metrics.value = data.metrics;
+                        
+                        nextTick(() => {
+                            updateChart();
+                        });
+                    } catch (e) {
+                        console.error(e);
+                        error.value = "预测失败: " + e.message;
+                    }
+                };
+                
+                const handleFileUpload = async (event) => {
+                    const file = event.target.files[0];
+                    if (!file) return;
+                    
+                    if (file.size > 15 * 1024 * 1024) {
+                        error.value = "文件过大，请上传小于 15MB 的文件";
+                        return;
+                    }
+
+                    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.status === 'error') {
+                            throw new Error(data.message);
+                        }
+                        
+                        historyData.value = data.data;
+                        await runForecast();
+                        
+                    } catch (e) {
+                        console.error(e);
+                        error.value = "上传失败: " + e.message;
+                    } finally {
+                        loading.value = false;
+                        // Reset input
+                        event.target.value = ''; 
+                    }
+                };
+
+                // Watchers for real-time updates
+                watch(invParams, () => {
+                    runForecast();
+                }, { deep: true });
+
+                // Lifecycle
+                onMounted(() => {
+                    initChart();
+                    generateData();
+                });
+
+                return {
+                    loading,
+                    error,
+                    params,
+                    invParams,
+                    metrics,
+                    generateData,
+                    runForecast,
+                    handleFileUpload
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>
+"""
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=True)

requirements.txt

@@ -0,0 +1,5 @@
+flask
+numpy
+pandas
+gunicorn
+openpyxl