Deploy: Dynamic Pricing Lab with Batch Analysis

.gitignore

@@ -0,0 +1,5 @@
+venv/
+__pycache__/
+*.pyc
+.DS_Store
+.env

Dockerfile

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

README.md

@@ -0,0 +1,67 @@
+---
+title: 智能动态定价实验室
+emoji: 📈
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+pinned: false
+short_description: 基于价格弹性模型的AI利润优化引擎
+---
+
+# 智能动态定价实验室 (Dynamic Pricing Lab)
+
+![License](https://img.shields.io/badge/license-MIT-blue.svg)
+![Python](https://img.shields.io/badge/python-3.11-green.svg)
+![Vue](https://img.shields.io/badge/vue-3.0-green.svg)
+
+## 项目简介
+
+**智能动态定价实验室** 是一个专业的商业定价模拟工具，旨在帮助电商卖家和零售商通过算法寻找利润最大化的最优价格点。
+
+本项目不仅仅是一个简单的计算器，它基于微观经济学中的**价格弹性模型 (Price Elasticity of Demand)**，通过模拟不同价格下的市场需求变化，实时计算由于销量波动带来的边际利润变化。
+
+### 核心功能
+
+*   **双模型支持**：
+    *   **线性模型 (Linear Model)**: 适用于普通商品，$D = a - bP$
+    *   **指数模型 (Constant Elasticity)**: 适用于高敏感度或必需品，$D = A \cdot P^\epsilon$
+*   **实时可视化**：使用 ECharts 绘制 "价格-利润" 曲线和 "价格-需求" 曲线，直观展示价格变动对经营结果的影响。
+*   **智能优化**：基于 `scipy.optimize` 算法，自动寻找理论上的最大利润价格点。
+*   **敏感度分析**：通过滑块实时调整市场弹性系数，模拟不同市场环境（如促销季、淡季）下的定价策略。
+
+## 技术栈
+
+*   **Backend**: Flask (Python 3.11), NumPy, SciPy
+*   **Frontend**: Vue 3, Tailwind CSS (Dark Mode), ECharts
+*   **Deployment**: Docker (Compatible with Hugging Face Spaces)
+
+## 快速开始
+
+### Docker 部署 (推荐)
+
+```bash
+# 构建镜像
+docker build -t dynamic-pricing-lab .
+
+# 运行容器
+docker run -p 7860:7860 dynamic-pricing-lab
+```
+
+访问 `http://localhost:7860` 即可使用。
+
+### 本地开发
+
+```bash
+pip install -r requirements.txt
+python app.py
+```
+
+## 商业应用场景
+
+1.  **新品定价**：通过测试少量流量估算弹性，反推最优上市价格。
+2.  **促销策略**：计算打折带来的销量提升是否足以覆盖毛利损失。
+3.  **库存清理**：寻找在清空库存目标下的最高收益价格。
+
+## License
+
+MIT License

app.py

@@ -0,0 +1,255 @@
+import os
+import logging
+import numpy as np
+import pandas as pd
+from scipy.optimize import minimize_scalar
+from flask import Flask, render_template, send_from_directory, request, jsonify
+from werkzeug.utils import secure_filename
+
+# 配置日志
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+app = Flask(__name__)
+app.config['JSON_AS_ASCII'] = False  # 支持中文 JSON
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 限制上传文件大小为 16MB
+app.config['UPLOAD_FOLDER'] = 'uploads'
+
+# 确保上传目录存在
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+
+@app.route('/')
+def index():
+    # 使用 render_template 渲染模板，前端需注意 Vue 分隔符冲突问题
+    return render_template('index.html')
+
+@app.route('/static/<path:path>')
+def send_static(path):
+    return send_from_directory('static', path)
+
+def calculate_demand_linear(price, base_price, base_demand, elasticity):
+    """
+    线性需求模型: D = a - bP
+    在基准点 (base_price, base_demand) 处的弹性为 elasticity
+    """
+    # 弹性定义: E = (dD/dP) * (P/D)
+    # 线性: dD/dP = -b
+    # E = -b * (base_price / base_demand)
+    # -> b = -E * (base_demand / base_price)
+    # -> a = base_demand + b * base_price
+    
+    # 确保弹性为负值 (输入如果是正数则取反)
+    e = -abs(elasticity)
+    
+    b = -e * (base_demand / base_price)
+    a = base_demand + b * base_price
+    
+    demand = a - b * price
+    return np.maximum(demand, 0) # 需求不能为负
+
+def calculate_demand_constant_elasticity(price, base_price, base_demand, elasticity):
+    """
+    恒定弹性模型 (指数模型): D = A * P^e
+    """
+    # base_demand = A * base_price^e
+    # -> A = base_demand / (base_price^e)
+    
+    e = -abs(elasticity)
+    A = base_demand / (base_price ** e)
+    
+    demand = A * (price ** e)
+    return demand
+
+def run_optimization(cost, base_price, base_demand, elasticity, model_type='linear'):
+    """
+    运行价格优化算法
+    """
+    # 模拟范围 (0.5x 成本 到 3x 成本，或者基准价格的 2 倍)
+    min_p = max(cost * 0.8, 0.01)
+    max_p = max(base_price * 2.0, cost * 3.0)
+    
+    prices = np.linspace(min_p, max_p, 100)
+    
+    results = []
+    max_profit = -float('inf')
+    optimal_price = base_price
+    
+    # 第一次粗略扫描
+    for p in prices:
+        if model_type == 'constant':
+            d = calculate_demand_constant_elasticity(p, base_price, base_demand, elasticity)
+        else:
+            d = calculate_demand_linear(p, base_price, base_demand, elasticity)
+        
+        revenue = p * d
+        profit = (p - cost) * d
+        
+        if profit > max_profit:
+            max_profit = profit
+            optimal_price = p
+            
+        results.append({
+            'price': round(p, 2),
+            'demand': round(d, 2),
+            'revenue': round(revenue, 2),
+            'profit': round(profit, 2)
+        })
+
+    # 第二次精细优化 (SciPy minimize_scalar)
+    # 确定搜索上界
+    zero_demand_price = max_p
+    if model_type == 'linear':
+            # a - bP = 0 -> P = a/b
+            e_val = -abs(elasticity)
+            b_val = -e_val * (base_demand / base_price)
+            if b_val != 0:
+                a_val = base_demand + b_val * base_price
+                zero_demand_price = a_val / b_val
+    
+    upper_bound = min(max_p * 1.5, zero_demand_price * 1.1 if model_type == 'linear' else max_p * 1.5)
+
+    def profit_func(p):
+        if p <= 0: return 1e9 # 惩罚项
+        if model_type == 'constant':
+            d = calculate_demand_constant_elasticity(p, base_price, base_demand, elasticity)
+        else:
+            d = calculate_demand_linear(p, base_price, base_demand, elasticity)
+        
+        # 目标是最大化利润，即最小化 -利润
+        prof = (p - cost) * d
+        return -prof 
+
+    res = minimize_scalar(profit_func, bounds=(cost, upper_bound), method='bounded')
+    
+    refined_optimal_price = optimal_price 
+    refined_max_profit = max_profit
+
+    if res.success:
+        opt_p = res.x
+        opt_prof = -res.fun
+        # 只有当结果更好时才采纳 (避免局部极小值)
+        if opt_prof >= max_profit:
+            refined_optimal_price = opt_p
+            refined_max_profit = opt_prof
+    
+    # 计算最优价格下的最终需求
+    if model_type == 'constant':
+        opt_d = calculate_demand_constant_elasticity(refined_optimal_price, base_price, base_demand, elasticity)
+    else:
+        opt_d = calculate_demand_linear(refined_optimal_price, base_price, base_demand, elasticity)
+
+    return {
+        'results': results,
+        'optimal': {
+            'price': round(refined_optimal_price, 2),
+            'profit': round(refined_max_profit, 2),
+            'demand': round(opt_d, 2),
+            'margin': round(((refined_optimal_price - cost) / refined_optimal_price) * 100, 2) if refined_optimal_price > 0 else 0
+        }
+    }
+
+@app.route('/api/analyze', methods=['POST'])
+def analyze():
+    try:
+        data = request.json
+        if not data:
+            return jsonify({'success': False, 'error': 'No data provided'}), 400
+
+        # 获取参数，提供默认值
+        cost = float(data.get('cost', 10.0))
+        base_price = float(data.get('base_price', 20.0))
+        base_demand = float(data.get('base_demand', 100.0))
+        elasticity = float(data.get('elasticity', -1.5))
+        model_type = data.get('model_type', 'linear')
+        
+        result = run_optimization(cost, base_price, base_demand, elasticity, model_type)
+        
+        return jsonify({
+            'success': True,
+            'data': result['results'],
+            'optimal': result['optimal']
+        })
+
+    except Exception as e:
+        logger.error(f"Analysis Error: {str(e)}")
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+@app.route('/api/upload', methods=['POST'])
+def upload_file():
+    """
+    处理 CSV/Excel 文件上传并批量分析
+    """
+    try:
+        if 'file' not in request.files:
+            return jsonify({'success': False, 'error': 'No file part'}), 400
+        
+        file = request.files['file']
+        if file.filename == '':
+            return jsonify({'success': False, 'error': 'No selected file'}), 400
+            
+        if file:
+            filename = secure_filename(file.filename)
+            filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+            file.save(filepath)
+            
+            # 读取文件
+            try:
+                if filename.endswith('.csv'):
+                    df = pd.read_csv(filepath)
+                elif filename.endswith(('.xls', '.xlsx')):
+                    df = pd.read_excel(filepath)
+                else:
+                    return jsonify({'success': False, 'error': 'Unsupported file format'}), 400
+            except Exception as e:
+                return jsonify({'success': False, 'error': f'File read error: {str(e)}'}), 400
+
+            # 检查必需列
+            required_cols = ['cost', 'base_price', 'base_demand']
+            missing_cols = [col for col in required_cols if col not in df.columns]
+            if missing_cols:
+                 return jsonify({'success': False, 'error': f'Missing columns: {", ".join(missing_cols)}'}), 400
+            
+            # 批量处理
+            results = []
+            for _, row in df.iterrows():
+                try:
+                    cost = float(row['cost'])
+                    base_price = float(row['base_price'])
+                    base_demand = float(row['base_demand'])
+                    elasticity = float(row.get('elasticity', -1.5))
+                    model_type = str(row.get('model_type', 'linear'))
+                    
+                    opt_res = run_optimization(cost, base_price, base_demand, elasticity, model_type)
+                    
+                    item_res = {
+                        'input': {
+                            'cost': cost,
+                            'base_price': base_price,
+                            'base_demand': base_demand,
+                            'elasticity': elasticity
+                        },
+                        'optimal': opt_res['optimal']
+                    }
+                    results.append(item_res)
+                except Exception as row_err:
+                    logger.warning(f"Row processing error: {row_err}")
+                    continue
+            
+            # 清理文件
+            try:
+                os.remove(filepath)
+            except:
+                pass
+
+            return jsonify({
+                'success': True, 
+                'batch_results': results[:50] # 限制返回数量防止过大
+            })
+
+    except Exception as e:
+        logger.error(f"Upload Error: {str(e)}")
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+if __name__ == '__main__':
+    port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port)

requirements.txt

@@ -0,0 +1,6 @@
+flask
+numpy>=1.24.0
+scipy>=1.10.0
+gunicorn
+pandas>=2.0.0
+openpyxl>=3.1.0

templates/index.html

@@ -0,0 +1,466 @@
+<!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>智能动态定价实验室 | Dynamic Pricing Lab</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>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3B82F6',
+                        secondary: '#10B981',
+                        dark: '#0f172a',
+                        surface: '#1e293b'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        body { background-color: #0f172a; color: #e2e8f0; font-family: 'Inter', sans-serif; }
+        .glass-panel {
+            background: rgba(30, 41, 59, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        input[type="range"] {
+            -webkit-appearance: none;
+            background: transparent;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            height: 16px;
+            width: 16px;
+            border-radius: 50%;
+            background: #3B82F6;
+            margin-top: -6px;
+            cursor: pointer;
+        }
+        input[type="range"]::-webkit-slider-runnable-track {
+            width: 100%;
+            height: 4px;
+            background: #475569;
+            border-radius: 2px;
+        }
+        [v-cloak] { display: none; }
+    </style>
+</head>
+<body class="min-h-screen p-4 md:p-8">
+    <div id="app" class="max-w-7xl mx-auto" v-cloak>
+        <!-- Header -->
+        <header class="mb-8 flex justify-between items-center">
+            <div>
+                <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-teal-400">
+                    智能动态定价实验室
+                </h1>
+                <p class="text-slate-400 mt-1">基于价格弹性模型的 AI 利润优化引擎</p>
+            </div>
+            <div class="text-xs text-slate-500 border border-slate-700 px-3 py-1 rounded-full">
+                v1.1.0 | Powered by SciPy
+            </div>
+        </header>
+
+        <!-- Navigation Tabs -->
+        <div class="flex space-x-4 mb-6">
+            <button @click="currentTab = 'single'" 
+                :class="{'text-blue-400 border-b-2 border-blue-400': currentTab === 'single', 'text-slate-400': currentTab !== 'single'}"
+                class="pb-2 px-1 transition font-medium">
+                单品模拟
+            </button>
+            <button @click="currentTab = 'batch'" 
+                :class="{'text-blue-400 border-b-2 border-blue-400': currentTab === 'batch', 'text-slate-400': currentTab !== 'batch'}"
+                class="pb-2 px-1 transition font-medium">
+                批量分析 (Excel/CSV)
+            </button>
+        </div>
+
+        <!-- Single Analysis Mode -->
+        <div v-show="currentTab === 'single'" class="grid grid-cols-1 lg:grid-cols-12 gap-6">
+            <!-- Sidebar Controls -->
+            <div class="lg:col-span-3 space-y-6">
+                <div class="glass-panel rounded-xl p-6 shadow-lg">
+                    <h2 class="text-lg font-semibold mb-4 text-blue-400 flex items-center">
+                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
+                        参数配置
+                    </h2>
+                    
+                    <div class="space-y-4">
+                        <!-- Input Group -->
+                        <div>
+                            <label class="block text-sm text-slate-400 mb-1">商品成本 (Cost)</label>
+                            <div class="relative">
+                                <span class="absolute left-3 top-2 text-slate-500">¥</span>
+                                <input type="number" v-model.number="params.cost" @change="calculate" 
+                                    class="w-full bg-slate-800 border border-slate-600 rounded px-8 py-2 focus:outline-none focus:border-blue-500 transition">
+                            </div>
+                        </div>
+
+                        <div>
+                            <label class="block text-sm text-slate-400 mb-1">当前售价 (Base Price)</label>
+                            <div class="relative">
+                                <span class="absolute left-3 top-2 text-slate-500">¥</span>
+                                <input type="number" v-model.number="params.base_price" @change="calculate"
+                                    class="w-full bg-slate-800 border border-slate-600 rounded px-8 py-2 focus:outline-none focus:border-blue-500 transition">
+                            </div>
+                        </div>
+
+                        <div>
+                            <label class="block text-sm text-slate-400 mb-1">当前销量 (Base Demand)</label>
+                            <div class="relative">
+                                <span class="absolute left-3 top-2 text-slate-500">📦</span>
+                                <input type="number" v-model.number="params.base_demand" @change="calculate"
+                                    class="w-full bg-slate-800 border border-slate-600 rounded px-8 py-2 focus:outline-none focus:border-blue-500 transition">
+                            </div>
+                        </div>
+
+                        <div class="pt-4 border-t border-slate-700">
+                            <div class="flex justify-between mb-1">
+                                <label class="block text-sm text-slate-400">价格敏感度 (Elasticity)</label>
+                                <span class="text-sm font-mono text-teal-400">${ params.elasticity }</span>
+                            </div>
+                            <input type="range" min="-5" max="-0.1" step="0.1" v-model.number="params.elasticity" @input="calculate"
+                                class="w-full mb-1">
+                            <p class="text-xs text-slate-500">
+                                值越小(-5)，用户对价格越敏感（稍微涨价就跑光）。
+                            </p>
+                        </div>
+
+                        <div class="pt-4">
+                            <label class="block text-sm text-slate-400 mb-2">需求模型</label>
+                            <div class="flex space-x-2 bg-slate-800 p-1 rounded">
+                                <button @click="params.model_type = 'linear'; calculate()" 
+                                    :class="{'bg-blue-600 text-white': params.model_type === 'linear', 'text-slate-400 hover:text-white': params.model_type !== 'linear'}"
+                                    class="flex-1 py-1.5 rounded text-sm transition">
+                                    线性模型
+                                </button>
+                                <button @click="params.model_type = 'constant'; calculate()" 
+                                    :class="{'bg-blue-600 text-white': params.model_type === 'constant', 'text-slate-400 hover:text-white': params.model_type !== 'constant'}"
+                                    class="flex-1 py-1.5 rounded text-sm transition">
+                                    指数模型
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Optimal Result Card -->
+                <div class="glass-panel rounded-xl p-6 border-l-4 border-teal-500" v-if="result">
+                    <h3 class="text-sm font-uppercase text-slate-400 tracking-wider mb-3">AI 建议最优解</h3>
+                    <div class="flex justify-between items-end mb-2">
+                        <span class="text-3xl font-bold text-white">¥${ result.optimal.price }</span>
+                        <span class="text-sm text-teal-400 mb-1" v-if="result.optimal.price > params.base_price">
+                            (建议涨价 ${ ((result.optimal.price - params.base_price)/params.base_price*100).toFixed(1) }%)
+                        </span>
+                        <span class="text-sm text-red-400 mb-1" v-else>
+                            (建议降价 ${ ((params.base_price - result.optimal.price)/params.base_price*100).toFixed(1) }%)
+                        </span>
+                    </div>
+                    <div class="grid grid-cols-2 gap-2 mt-4 text-sm">
+                        <div class="bg-slate-800 p-2 rounded">
+                            <div class="text-slate-500">预期利润</div>
+                            <div class="font-mono text-teal-400">¥${ result.optimal.profit }</div>
+                        </div>
+                        <div class="bg-slate-800 p-2 rounded">
+                            <div class="text-slate-500">预期销量</div>
+                            <div class="font-mono text-blue-400">${ result.optimal.demand }</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Main Chart Area -->
+            <div class="lg:col-span-9 space-y-6">
+                <div class="glass-panel rounded-xl p-6 h-[500px] flex flex-col">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-lg font-semibold text-white">利润与需求模拟分析</h2>
+                        <div class="flex space-x-4 text-sm">
+                            <div class="flex items-center"><span class="w-3 h-3 bg-teal-500 rounded-full mr-2"></span>利润 (左轴)</div>
+                            <div class="flex items-center"><span class="w-3 h-3 bg-blue-500 rounded-full mr-2"></span>需求量 (右轴)</div>
+                        </div>
+                    </div>
+                    <div id="mainChart" class="flex-1 w-full"></div>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div class="glass-panel p-4 rounded-xl text-center">
+                        <div class="text-sm text-slate-400 mb-1">当前利润 (Current)</div>
+                        <div class="text-xl font-mono text-slate-300">
+                            ¥${ ((params.base_price - params.cost) * params.base_demand).toFixed(2) }
+                        </div>
+                    </div>
+                    <div class="glass-panel p-4 rounded-xl text-center">
+                        <div class="text-sm text-slate-400 mb-1">优化后利润 (Optimized)</div>
+                        <div class="text-xl font-mono text-teal-400">
+                            ¥${ result ? result.optimal.profit : '---' }
+                        </div>
+                    </div>
+                    <div class="glass-panel p-4 rounded-xl text-center border border-teal-500/30 bg-teal-500/10">
+                        <div class="text-sm text-teal-300 mb-1">利润提升 (Uplift)</div>
+                        <div class="text-xl font-bold text-teal-400">
+                            +${ calculateUplift() }%
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Batch Analysis Mode -->
+        <div v-show="currentTab === 'batch'" class="glass-panel rounded-xl p-8 max-w-4xl mx-auto">
+            <h2 class="text-xl font-bold mb-4 text-white">批量文件分析</h2>
+            <p class="text-slate-400 mb-6">
+                上传 CSV 或 Excel 文件，包含以下列：<code class="text-sm bg-slate-800 px-1 py-0.5 rounded text-blue-300">cost</code>, 
+                <code class="text-sm bg-slate-800 px-1 py-0.5 rounded text-blue-300">base_price</code>, 
+                <code class="text-sm bg-slate-800 px-1 py-0.5 rounded text-blue-300">base_demand</code>。
+                可选列：<code class="text-sm bg-slate-800 px-1 py-0.5 rounded text-blue-300">elasticity</code> (默认 -1.5), 
+                <code class="text-sm bg-slate-800 px-1 py-0.5 rounded text-blue-300">model_type</code> (默认 linear)。
+            </p>
+
+            <div class="border-2 border-dashed border-slate-600 rounded-xl p-8 text-center hover:border-blue-500 transition cursor-pointer bg-slate-800/50"
+                 @dragover.prevent @drop.prevent="handleDrop" @click="$refs.fileInput.click()">
+                <input type="file" ref="fileInput" class="hidden" @change="handleFileSelect" accept=".csv,.xlsx,.xls">
+                <div class="text-4xl mb-3">📂</div>
+                <p class="text-lg text-slate-300 font-medium">点击或拖拽文件到此处</p>
+                <p class="text-sm text-slate-500 mt-2">支持 .csv, .xlsx (最大 16MB)</p>
+            </div>
+
+            <div v-if="uploadStatus" class="mt-4 p-4 rounded bg-slate-800 border border-slate-700">
+                <p :class="{'text-green-400': uploadStatus.type === 'success', 'text-red-400': uploadStatus.type === 'error'}">
+                    ${ uploadStatus.message }
+                </p>
+            </div>
+
+            <!-- Batch Results Table -->
+            <div v-if="batchResults && batchResults.length > 0" class="mt-8 overflow-x-auto">
+                <h3 class="text-lg font-bold mb-3 text-white">分析结果 (前 50 条)</h3>
+                <table class="w-full text-sm text-left text-slate-300">
+                    <thead class="text-xs text-slate-400 uppercase bg-slate-800">
+                        <tr>
+                            <th class="px-4 py-3">成本</th>
+                            <th class="px-4 py-3">原价</th>
+                            <th class="px-4 py-3">建议价格</th>
+                            <th class="px-4 py-3">预期利润</th>
+                            <th class="px-4 py-3">利润率提升</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(item, index) in batchResults" :key="index" class="border-b border-slate-700 hover:bg-slate-800/50">
+                            <td class="px-4 py-3">¥${ item.input.cost }</td>
+                            <td class="px-4 py-3">¥${ item.input.base_price }</td>
+                            <td class="px-4 py-3 font-bold text-blue-400">¥${ item.optimal.price }</td>
+                            <td class="px-4 py-3 text-green-400">¥${ item.optimal.profit }</td>
+                            <td class="px-4 py-3">
+                                <span v-if="item.optimal.profit > (item.input.base_price - item.input.cost) * item.input.base_demand" class="text-green-400">
+                                    ↑ 提升
+                                </span>
+                                <span v-else class="text-slate-500">-</span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const { createApp, ref, onMounted, reactive, watch } = Vue;
+
+        createApp({
+            delimiters: ['${', '}'], // Changed delimiters to avoid Jinja2 conflict
+            setup() {
+                const currentTab = ref('single');
+                const params = reactive({
+                    cost: 100,
+                    base_price: 150,
+                    base_demand: 500,
+                    elasticity: -2.0,
+                    model_type: 'linear'
+                });
+
+                const result = ref(null);
+                const batchResults = ref([]);
+                const uploadStatus = ref(null);
+                const fileInput = ref(null);
+                let chartInstance = null;
+
+                const calculateUplift = () => {
+                    if (!result.value) return 0;
+                    const currentProfit = (params.base_price - params.cost) * params.base_demand;
+                    const optProfit = result.value.optimal.profit;
+                    if (currentProfit <= 0) return 100; // Edge case
+                    return ((optProfit - currentProfit) / currentProfit * 100).toFixed(1);
+                };
+
+                const initChart = () => {
+                    const chartDom = document.getElementById('mainChart');
+                    if (!chartDom) return;
+                    chartInstance = echarts.init(chartDom);
+                    window.addEventListener('resize', () => chartInstance.resize());
+                };
+
+                const updateChart = (data) => {
+                    if (!chartInstance) return;
+                    const prices = data.map(item => item.price);
+                    const profits = data.map(item => item.profit);
+                    const demands = data.map(item => item.demand);
+
+                    const option = {
+                        backgroundColor: 'transparent',
+                        tooltip: {
+                            trigger: 'axis',
+                            axisPointer: { type: 'cross' },
+                            backgroundColor: 'rgba(15, 23, 42, 0.9)',
+                            borderColor: '#334155',
+                            textStyle: { color: '#e2e8f0' }
+                        },
+                        grid: {
+                            left: '3%', right: '3%', bottom: '3%', containLabel: true
+                        },
+                        xAxis: {
+                            type: 'category',
+                            data: prices,
+                            name: '价格 (Price)',
+                            nameLocation: 'middle',
+                            nameGap: 30,
+                            axisLine: { lineStyle: { color: '#64748b' } }
+                        },
+                        yAxis: [
+                            {
+                                type: 'value',
+                                name: '利润 (Profit)',
+                                position: 'left',
+                                axisLine: { lineStyle: { color: '#10B981' } },
+                                splitLine: { lineStyle: { color: '#334155', type: 'dashed' } },
+                                axisLabel: { formatter: '{value}' }
+                            },
+                            {
+                                type: 'value',
+                                name: '需求 (Demand)',
+                                position: 'right',
+                                axisLine: { lineStyle: { color: '#3B82F6' } },
+                                splitLine: { show: false },
+                                axisLabel: { formatter: '{value}' }
+                            }
+                        ],
+                        series: [
+                            {
+                                name: '利润',
+                                type: 'line',
+                                data: profits,
+                                smooth: true,
+                                lineStyle: { width: 3, color: '#10B981' },
+                                showSymbol: false,
+                                areaStyle: {
+                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                        { offset: 0, color: 'rgba(16, 185, 129, 0.3)' },
+                                        { offset: 1, color: 'rgba(16, 185, 129, 0)' }
+                                    ])
+                                },
+                                markPoint: {
+                                    data: [
+                                        { type: 'max', name: 'Max Profit', itemStyle: { color: '#F59E0B' } }
+                                    ]
+                                }
+                            },
+                            {
+                                name: '需求',
+                                type: 'line',
+                                yAxisIndex: 1,
+                                data: demands,
+                                smooth: true,
+                                lineStyle: { width: 2, type: 'dashed', color: '#3B82F6' },
+                                showSymbol: false
+                            }
+                        ]
+                    };
+                    chartInstance.setOption(option);
+                };
+
+                const calculate = async () => {
+                    try {
+                        const res = await fetch('/api/analyze', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify(params)
+                        });
+                        const data = await res.json();
+                        if (data.success) {
+                            result.value = data;
+                            updateChart(data.data);
+                        } else {
+                            console.error(data.error);
+                        }
+                    } catch (e) {
+                        console.error(e);
+                    }
+                };
+
+                const uploadFile = async (file) => {
+                    uploadStatus.value = { type: 'info', message: '正在上传分析中...' };
+                    const formData = new FormData();
+                    formData.append('file', file);
+
+                    try {
+                        const res = await fetch('/api/upload', {
+                            method: 'POST',
+                            body: formData
+                        });
+                        const data = await res.json();
+                        
+                        if (data.success) {
+                            batchResults.value = data.batch_results;
+                            uploadStatus.value = { type: 'success', message: `分析完成！成功处理 ${data.batch_results.length} 条数据。` };
+                        } else {
+                            uploadStatus.value = { type: 'error', message: `错误: ${data.error}` };
+                        }
+                    } catch (e) {
+                        uploadStatus.value = { type: 'error', message: `网络错误: ${e.message}` };
+                    }
+                };
+
+                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);
+                };
+
+                // Watch for tab change to resize chart
+                watch(currentTab, (newTab) => {
+                    if (newTab === 'single') {
+                        setTimeout(() => {
+                            if (chartInstance) chartInstance.resize();
+                        }, 100);
+                    }
+                });
+
+                onMounted(() => {
+                    initChart();
+                    calculate();
+                });
+
+                return {
+                    currentTab,
+                    params,
+                    result,
+                    batchResults,
+                    uploadStatus,
+                    fileInput,
+                    calculate,
+                    calculateUplift,
+                    handleFileSelect,
+                    handleDrop
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>

test_data.csv

@@ -0,0 +1,3 @@
+cost,base_price,base_demand,elasticity
+100,150,500,-2.0
+50,80,1000,-1.5