feat: upgrade UI, fix delimiters, add file upload, localization

.gitignore

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

Dockerfile

@@ -0,0 +1,23 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    gcc \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Create a non-root user
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+EXPOSE 7860
+
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,70 @@
+---
+title: Attribution Logic Engine
+emoji: 📊
+colorFrom: blue
+colorTo: purple
+sdk: docker
+pinned: false
+short_description: 商业级多渠道营销归因分析与模型对比系统
+---
+
+# 归因逻辑引擎 (Attribution Logic Engine)
+
+## 项目简介
+这是一个商业级的多渠道营销归因分析系统，旨在帮助市场营销人员理解不同营销渠道（如搜索广告、社交媒体、邮件等）对最终转化的贡献价值。
+
+传统的“最后点击” (Last Click) 归因模型往往掩盖了用户决策路径中早期接触点的重要性。本系统通过模拟真实用户路径，并应用多种归因算法（线性、时间衰减、位置优先等），直观展示不同模型下的 ROI 差异。
+
+## 核心功能
+1.  **多模型对比 (Model Comparison)**:
+    -   **Last Click**: 100% 归因于最后一次交互。
+    -   **First Click**: 100% 归因于第一次交互。
+    -   **Linear**: 所有交互点平分功劳。
+    -   **Time Decay**: 距离转化越近的交互点权重越高（指数衰减）。
+    -   **Position Based (U-Shaped)**: 首尾各 40%，中间平分 20%。
+
+2.  **用户路径可视化 (Journey Visualization)**:
+    -   使用 Sankey 图（桑基图）展示用户从首次接触到最终转化（或流失）的常见流动路径。
+
+3.  **数据导入与模拟**:
+    -   **模拟引擎**: 内置蒙特卡洛模拟器，可生成数千条复杂的用户行为路径。
+    -   **自定义数据上传**: 支持上传 `.csv` 或 `.json` 格式的归因数据进行分析。
+
+## 数据上传格式说明
+
+### CSV 格式
+需要包含 `path` (或 `touchpoints`), `converted`, `value` 字段。
+- `path`: 渠道路径，可用 `>` 或 `,` 分隔。例如 `Email > Social > Direct`。
+- `converted`: 是否转化 (1/0, true/false)。
+- `value`: 转化价值 (数字)。
+
+### JSON 格式
+一个包含对象列表的文件：
+```json
+[
+  {
+    "path": ["Email", "Social Ads", "Direct"],
+    "converted": true,
+    "value": 150.0
+  },
+  ...
+]
+```
+
+## 技术栈
+-   **Backend**: Python 3.11, Flask, Pandas
+-   **Frontend**: Vue 3, Tailwind CSS, ECharts 5
+-   **Deployment**: Docker (Hugging Face Spaces Compatible)
+
+## 商业价值
+对于广告投放预算超过 $10k/月的企业，错误的归因模型可能导致 20-30% 的预算浪费。本工具帮助识别那些“助攻”型渠道（如社交媒体种草），避免因 ROI 计算错误而过早关闭有效渠道。
+
+## 运行方式
+```bash
+# 构建镜像
+docker build -t attribution-engine .
+
+# 运行容器
+docker run -p 7860:7860 attribution-engine
+```
+访问 http://localhost:7860 即可使用。

app.py

@@ -0,0 +1,274 @@
+import os
+import random
+import json
+import csv
+import io
+from flask import Flask, render_template, jsonify, request
+from collections import defaultdict
+
+app = Flask(__name__)
+app.secret_key = os.urandom(24)
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max upload
+
+# Configuration
+CHANNELS = ['Paid Search', 'Social Ads', 'Email', 'Direct', 'Referral', 'Display']
+MAX_JOURNEY_LENGTH = 5
+
+def generate_mock_data(count=1000):
+    """Generate synthetic user journeys."""
+    journeys = []
+    for _ in range(count):
+        # Random journey length 1-5
+        length = random.randint(1, MAX_JOURNEY_LENGTH)
+        # Random path
+        path = [random.choice(CHANNELS) for _ in range(length)]
+        # Random conversion (20% chance)
+        converted = random.random() < 0.2
+        value = 100 if converted else 0
+        
+        journeys.append({
+            'path': path,
+            'converted': converted,
+            'value': value
+        })
+    return journeys
+
+def calculate_attribution(journeys, model):
+    """
+    Calculate attribution value for each channel based on the selected model.
+    Models: 'last_click', 'first_click', 'linear', 'time_decay', 'position_based'
+    """
+    channel_values = defaultdict(float)
+    total_conversions = 0
+    total_revenue = 0
+
+    for journey in journeys:
+        # Ensure robust data types
+        converted = bool(journey.get('converted', False))
+        if not converted:
+            continue
+            
+        path = journey.get('path', [])
+        if not path:
+            continue
+            
+        value = float(journey.get('value', 0))
+        
+        total_conversions += 1
+        total_revenue += value
+        
+        if model == 'last_click':
+            if path:
+                channel_values[path[-1]] += value
+            
+        elif model == 'first_click':
+            if path:
+                channel_values[path[0]] += value
+            
+        elif model == 'linear':
+            weight = value / len(path)
+            for touch in path:
+                channel_values[touch] += weight
+                
+        elif model == 'time_decay':
+            # Exponential decay: 2^(-x) where x is distance from conversion
+            weights = [2 ** -(len(path) - 1 - i) for i in range(len(path))]
+            total_weight = sum(weights)
+            if total_weight > 0:
+                normalized_weights = [w / total_weight * value for w in weights]
+                for i, touch in enumerate(path):
+                    channel_values[touch] += normalized_weights[i]
+                
+        elif model == 'position_based':
+            # 40% first, 40% last, 20% middle distributed
+            if len(path) == 1:
+                channel_values[path[0]] += value
+            elif len(path) == 2:
+                channel_values[path[0]] += value * 0.5
+                channel_values[path[1]] += value * 0.5
+            else:
+                channel_values[path[0]] += value * 0.4
+                channel_values[path[-1]] += value * 0.4
+                middle_weight = (value * 0.2) / (len(path) - 2)
+                for touch in path[1:-1]:
+                    channel_values[touch] += middle_weight
+
+    return {
+        'breakdown': dict(channel_values),
+        'total_conversions': total_conversions,
+        'total_revenue': total_revenue
+    }
+
+def get_top_paths(journeys, limit=10):
+    """Aggregate common paths for Sankey diagram."""
+    path_counts = defaultdict(int)
+    for journey in journeys:
+        path = journey.get('path', [])
+        converted = journey.get('converted', False)
+        if not path:
+            continue
+            
+        # Convert list to tuple for hashing
+        path_tuple = tuple(path + ['Conversion' if converted else 'Dropoff'])
+        path_counts[path_tuple] += 1
+        
+    sorted_paths = sorted(path_counts.items(), key=lambda x: x[1], reverse=True)[:limit]
+    
+    # Format for ECharts Sankey
+    nodes = set()
+    links = []
+    
+    for path, count in sorted_paths:
+        for i in range(len(path) - 1):
+            src_node = f"{path[i]} (Step {i+1})"
+            tgt_node = f"{path[i+1]} (Step {i+2})"
+            
+            if path[i+1] in ['Conversion', 'Dropoff']:
+                tgt_node = path[i+1]
+            
+            nodes.add(src_node)
+            nodes.add(tgt_node)
+            
+            # Check if link exists
+            found = False
+            for link in links:
+                if link['source'] == src_node and link['target'] == tgt_node:
+                    link['value'] += count
+                    found = True
+                    break
+            if not found:
+                links.append({'source': src_node, 'target': tgt_node, 'value': count})
+                
+    return {
+        'nodes': [{'name': n} for n in list(nodes)],
+        'links': links
+    }
+
+def parse_uploaded_file(file):
+    """Parse CSV or JSON file into standard journey format."""
+    filename = file.filename.lower()
+    journeys = []
+    
+    try:
+        if filename.endswith('.json'):
+            content = json.load(file)
+            # Expect list of dicts
+            if isinstance(content, list):
+                journeys = content
+            else:
+                raise ValueError("JSON must be a list of journey objects")
+                
+        elif filename.endswith('.csv'):
+            # Read CSV
+            stream = io.StringIO(file.stream.read().decode("UTF8"), newline=None)
+            reader = csv.DictReader(stream)
+            
+            for row in reader:
+                # Heuristic to find path column
+                path_str = row.get('path') or row.get('touchpoints') or row.get('channels')
+                if not path_str:
+                    continue
+                
+                # Try to parse path string (e.g. "A > B > C" or "A,B,C")
+                if '>' in path_str:
+                    path = [p.strip() for p in path_str.split('>')]
+                else:
+                    path = [p.strip() for p in path_str.split(',')]
+                    
+                # Conversion
+                conv_str = str(row.get('converted', '0')).lower()
+                converted = conv_str in ['true', '1', 'yes', 'on']
+                
+                # Value
+                try:
+                    value = float(row.get('value', 0))
+                except:
+                    value = 0
+                
+                journeys.append({
+                    'path': path,
+                    'converted': converted,
+                    'value': value
+                })
+        else:
+            raise ValueError("Unsupported file type. Please upload .csv or .json")
+            
+    except Exception as e:
+        raise ValueError(f"Error parsing file: {str(e)}")
+        
+    if not journeys:
+        raise ValueError("No valid journey data found in file")
+        
+    return journeys
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/analyze', methods=['POST'])
+def analyze():
+    try:
+        data = request.json
+        sample_size = int(data.get('sample_size', 1000))
+        
+        # Generate data
+        journeys = generate_mock_data(sample_size)
+        
+        # Calculate for all models
+        results = {}
+        models = ['last_click', 'first_click', 'linear', 'time_decay', 'position_based']
+        
+        for m in models:
+            results[m] = calculate_attribution(journeys, m)
+            
+        # Get Sankey data
+        sankey_data = get_top_paths(journeys, limit=20)
+        
+        return jsonify({
+            'attribution_results': results,
+            'sankey_data': sankey_data,
+            'journey_count': len(journeys)
+        })
+        
+    except Exception as e:
+        return jsonify({'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
+            
+        journeys = parse_uploaded_file(file)
+        
+        # Limit processing for performance if too large
+        if len(journeys) > 50000:
+            journeys = journeys[:50000]
+            
+        # Calculate for all models
+        results = {}
+        models = ['last_click', 'first_click', 'linear', 'time_decay', 'position_based']
+        
+        for m in models:
+            results[m] = calculate_attribution(journeys, m)
+            
+        # Get Sankey data
+        sankey_data = get_top_paths(journeys, limit=30)
+        
+        return jsonify({
+            'attribution_results': results,
+            'sankey_data': sankey_data,
+            'journey_count': len(journeys)
+        })
+        
+    except ValueError as e:
+        return jsonify({'error': str(e)}), 400
+    except Exception as e:
+        return jsonify({'error': f"Internal error: {str(e)}"}), 500
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860)

requirements.txt

@@ -0,0 +1,2 @@
+flask
+pandas

templates/index.html

@@ -0,0 +1,353 @@
+<!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>归因逻辑引擎 | Attribution Logic 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>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        gray: {
+                            800: '#1f2937',
+                            900: '#111827',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        body { background-color: #0f172a; color: #e2e8f0; }
+        .glass-panel {
+            background: rgba(30, 41, 59, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .chart-container {
+            height: 400px;
+            width: 100%;
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #1e293b; 
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #475569; 
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #64748b; 
+        }
+    </style>
+</head>
+<body class="min-h-screen p-6 font-sans">
+    <div id="app" class="max-w-7xl mx-auto space-y-6">
+        <!-- Header -->
+        <header class="flex justify-between items-center mb-8">
+            <div>
+                <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">
+                    归因逻辑引擎
+                </h1>
+                <p class="text-slate-400 mt-2">商业级多渠道营销归因分析与模型对比系统</p>
+            </div>
+            <div class="flex items-center space-x-4">
+                <span class="px-3 py-1 rounded-full bg-blue-500/20 text-blue-300 text-sm border border-blue-500/30">
+                    v1.1.0
+                </span>
+            </div>
+        </header>
+
+        <!-- Controls -->
+        <div class="glass-panel p-6 rounded-xl grid grid-cols-1 md:grid-cols-3 gap-6 items-end">
+            <div>
+                <label class="block text-sm font-medium text-slate-300 mb-2">
+                    模拟样本量 (Sample Size)
+                </label>
+                <input type="range" v-model.number="sampleSize" min="100" max="5000" step="100"
+                    class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer">
+                <div class="text-right text-xs text-slate-400 mt-1">${ sampleSize } 条数据</div>
+            </div>
+            
+            <div class="flex justify-end md:col-span-2 space-x-4">
+                 <!-- File Upload -->
+                 <input type="file" ref="fileInput" @change="handleFileUpload" class="hidden" accept=".csv,.json">
+                 <button @click="triggerUpload" :disabled="loading"
+                    class="px-6 py-2.5 bg-slate-700 hover:bg-slate-600 text-white rounded-lg font-medium transition-all border border-slate-600 flex items-center space-x-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+                    </svg>
+                    <span>上传数据</span>
+                </button>
+
+                <button @click="analyze" :disabled="loading"
+                    class="px-6 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition-all shadow-lg shadow-blue-900/50 flex items-center space-x-2">
+                    <span v-if="loading" class="animate-spin">⟳</span>
+                    <span>${ loading ? '计算中...' : '生成模拟分析' }</span>
+                </button>
+            </div>
+        </div>
+
+        <!-- Error Message -->
+        <div v-if="error" class="p-4 rounded-lg bg-red-500/20 border border-red-500/50 text-red-200">
+            <strong>错误：</strong> ${ error }
+        </div>
+
+        <!-- Metrics Cards -->
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6" v-if="results">
+            <div class="glass-panel p-6 rounded-xl border-l-4 border-emerald-500">
+                <h3 class="text-slate-400 text-sm uppercase">总转化数 (Conversions)</h3>
+                <p class="text-3xl font-bold text-emerald-400 mt-2">${ results.attribution_results.last_click.total_conversions }</p>
+            </div>
+            <div class="glass-panel p-6 rounded-xl border-l-4 border-indigo-500">
+                <h3 class="text-slate-400 text-sm uppercase">总营收 (Revenue)</h3>
+                <p class="text-3xl font-bold text-indigo-400 mt-2">
+                    ¥${ formatCurrency(results.attribution_results.last_click.total_revenue) }
+                </p>
+            </div>
+            <div class="glass-panel p-6 rounded-xl border-l-4 border-purple-500">
+                <h3 class="text-slate-400 text-sm uppercase">平均转化率 (CVR)</h3>
+                <p class="text-3xl font-bold text-purple-400 mt-2">
+                    ${ ((results.attribution_results.last_click.total_conversions / results.journey_count) * 100).toFixed(1) }%
+                </p>
+            </div>
+        </div>
+
+        <!-- Charts Grid -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6" v-show="results">
+            <!-- Model Comparison -->
+            <div class="glass-panel p-6 rounded-xl">
+                <h3 class="text-lg font-semibold text-white mb-4 flex items-center">
+                    <span class="w-2 h-6 bg-blue-500 rounded mr-3"></span>
+                    归因模型对比 (Model Comparison)
+                </h3>
+                <div id="barChart" class="chart-container"></div>
+            </div>
+
+            <!-- Sankey Flow -->
+            <div class="glass-panel p-6 rounded-xl">
+                <h3 class="text-lg font-semibold text-white mb-4 flex items-center">
+                    <span class="w-2 h-6 bg-pink-500 rounded mr-3"></span>
+                    用户路径流向 (Journey Flow)
+                </h3>
+                <div id="sankeyChart" class="chart-container"></div>
+            </div>
+        </div>
+        
+        <!-- Insights Table -->
+        <div class="glass-panel p-6 rounded-xl" v-if="results">
+            <h3 class="text-lg font-semibold text-white mb-4">渠道价值详情 (Channel Breakdown)</h3>
+            <div class="overflow-x-auto">
+                <table class="w-full text-left border-collapse">
+                    <thead>
+                        <tr class="text-slate-400 border-b border-slate-700">
+                            <th class="p-3">渠道 (Channel)</th>
+                            <th class="p-3">Last Click</th>
+                            <th class="p-3">First Click</th>
+                            <th class="p-3">Linear</th>
+                            <th class="p-3">Time Decay</th>
+                            <th class="p-3">Position Based</th>
+                        </tr>
+                    </thead>
+                    <tbody class="text-slate-300">
+                        <tr v-for="channel in displayedChannels" :key="channel" class="border-b border-slate-700/50 hover:bg-slate-800/50">
+                            <td class="p-3 font-medium text-white">${ channel }</td>
+                            <td class="p-3">¥${ formatCurrency(results.attribution_results.last_click.breakdown[channel] || 0) }</td>
+                            <td class="p-3">¥${ formatCurrency(results.attribution_results.first_click.breakdown[channel] || 0) }</td>
+                            <td class="p-3">¥${ formatCurrency(results.attribution_results.linear.breakdown[channel] || 0) }</td>
+                            <td class="p-3">¥${ formatCurrency(results.attribution_results.time_decay.breakdown[channel] || 0) }</td>
+                            <td class="p-3 text-yellow-400 font-bold">¥${ formatCurrency(results.attribution_results.position_based.breakdown[channel] || 0) }</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+    </div>
+
+    <script>
+        const { createApp, ref, onMounted, nextTick, computed } = Vue;
+
+        createApp({
+            delimiters: ['${', '}'],
+            setup() {
+                const sampleSize = ref(1000);
+                const loading = ref(false);
+                const results = ref(null);
+                const error = ref(null);
+                const fileInput = ref(null);
+                
+                let barChart = null;
+                let sankeyChart = null;
+
+                const displayedChannels = computed(() => {
+                    if (!results.value) return [];
+                    // Extract all unique channels from the results
+                    const channels = new Set();
+                    const breakdown = results.value.attribution_results.last_click.breakdown;
+                    for (const ch in breakdown) {
+                        channels.add(ch);
+                    }
+                    return Array.from(channels).sort();
+                });
+
+                const formatCurrency = (val) => {
+                    return Math.round(val).toLocaleString();
+                };
+
+                const analyze = async () => {
+                    loading.value = true;
+                    error.value = null;
+                    try {
+                        const res = await fetch('/api/analyze', {
+                            method: 'POST',
+                            headers: {'Content-Type': 'application/json'},
+                            body: JSON.stringify({ sample_size: sampleSize.value })
+                        });
+                        if (!res.ok) throw new Error(await res.text());
+                        
+                        results.value = await res.json();
+                        
+                        await nextTick();
+                        renderCharts();
+                    } catch (e) {
+                        console.error(e);
+                        error.value = '分析失败: ' + e.message;
+                    } finally {
+                        loading.value = false;
+                    }
+                };
+                
+                const triggerUpload = () => {
+                    fileInput.value.click();
+                };
+                
+                const handleFileUpload = async (event) => {
+                    const file = event.target.files[0];
+                    if (!file) return;
+                    
+                    loading.value = true;
+                    error.value = null;
+                    
+                    const formData = new FormData();
+                    formData.append('file', file);
+                    
+                    try {
+                        const res = await fetch('/api/upload', {
+                            method: 'POST',
+                            body: formData
+                        });
+                        
+                        if (!res.ok) {
+                            const errText = await res.text();
+                            throw new Error(errText || '上传失败');
+                        }
+                        
+                        results.value = await res.json();
+                        await nextTick();
+                        renderCharts();
+                        
+                        // Reset input
+                        event.target.value = '';
+                        
+                    } catch (e) {
+                        console.error(e);
+                        error.value = '文件处理失败: ' + e.message;
+                    } finally {
+                        loading.value = false;
+                    }
+                };
+
+                const renderCharts = () => {
+                    if (!results.value) return;
+
+                    // Bar Chart
+                    if (barChart) barChart.dispose();
+                    barChart = echarts.init(document.getElementById('barChart'), 'dark');
+                    
+                    const channels = displayedChannels.value;
+                    const models = ['last_click', 'first_click', 'linear', 'time_decay', 'position_based'];
+                    const modelNames = ['Last Click', 'First Click', 'Linear', 'Time Decay', 'Position'];
+                    
+                    const series = channels.map(channel => {
+                        return {
+                            name: channel,
+                            type: 'bar',
+                            stack: 'total',
+                            emphasis: { focus: 'series' },
+                            data: models.map(m => Math.round(results.value.attribution_results[m].breakdown[channel] || 0))
+                        };
+                    });
+
+                    barChart.setOption({
+                        backgroundColor: 'transparent',
+                        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+                        legend: { data: channels, bottom: 0, textStyle: { color: '#94a3b8' } },
+                        grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true },
+                        xAxis: { 
+                            type: 'category', 
+                            data: modelNames,
+                            axisLine: { lineStyle: { color: '#475569' } }
+                        },
+                        yAxis: { 
+                            type: 'value',
+                            axisLine: { lineStyle: { color: '#475569' } },
+                            splitLine: { lineStyle: { color: '#334155', type: 'dashed' } }
+                        },
+                        series: series
+                    });
+
+                    // Sankey Chart
+                    if (sankeyChart) sankeyChart.dispose();
+                    sankeyChart = echarts.init(document.getElementById('sankeyChart'), 'dark');
+                    
+                    sankeyChart.setOption({
+                        backgroundColor: 'transparent',
+                        tooltip: { trigger: 'item', triggerOn: 'mousemove' },
+                        series: [{
+                            type: 'sankey',
+                            data: results.value.sankey_data.nodes,
+                            links: results.value.sankey_data.links,
+                            emphasis: { focus: 'adjacency' },
+                            lineStyle: { color: 'gradient', curveness: 0.5 },
+                            label: { color: '#e2e8f0' },
+                            layoutIterations: 32 // Improve layout
+                        }]
+                    });
+                    
+                    window.addEventListener('resize', () => {
+                        barChart && barChart.resize();
+                        sankeyChart && sankeyChart.resize();
+                    });
+                };
+
+                onMounted(() => {
+                    analyze();
+                });
+
+                return {
+                    sampleSize,
+                    loading,
+                    results,
+                    error,
+                    fileInput,
+                    analyze,
+                    triggerUpload,
+                    handleFileUpload,
+                    displayedChannels,
+                    formatCurrency
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>