Spaces:

ymlin105
/

Rossmann-Store-Sales

Running

App Files Files Community

ymlin105 commited on 15 days ago

Commit

fc9ccdf

1 Parent(s): 69975d9

feat: Fix €0 prediction issue and overhaul dashboard to match premium design

Browse files

Files changed (2) hide show

src/app.py +8 -1
src/frontend.py +264 -543

src/app.py CHANGED Viewed

@@ -143,9 +143,16 @@ def predict(request: PredictionRequest):
         X = pd.DataFrame()
         for c in feature_cols:
              if c in processed_df.columns:
-                 X[c] = processed_df[c]
              else:
                  X[c] = 0
         # 6. Predict & Explain
         # Standard Prediction

         X = pd.DataFrame()
         for c in feature_cols:
              if c in processed_df.columns:
+                 val = processed_df[c]
+                 # Robustness: Cap Year to training range (2013-2015)
+                 if c == 'Year':
+                     val = val.clip(upper=2015)
+                 X[c] = val
              else:
                  X[c] = 0
+        # Ensure numeric types
+        X = X.apply(pd.to_numeric, errors='coerce').fillna(0)
         # 6. Predict & Explain
         # Standard Prediction

src/frontend.py CHANGED Viewed

@@ -3,675 +3,396 @@ Frontend HTML template for the Rossmann Store Sales Predictor.
 A clean, modern professional dashboard for making predictions.
 """
-FRONTEND_HTML = """
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Rossmann Sales Intelligence</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
         :root {
-            /* Professional SaaS Theme */
-            --primary: #2563eb;        /* Royal Blue */
-            --primary-dark: #1e40af;
-            --secondary: #64748b;      /* Slate Grey */
-            --bg-page: #f8fafc;        /* Very light blue-grey */
-            --bg-card: #ffffff;
-            --text-main: #0f172a;      /* Dark Slate */
-            --text-muted: #64748b;
             --border: #e2e8f0;
             --success: #10b981;
-            --accent-gradient: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
         }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
             font-family: 'Inter', sans-serif;
-        }
-        body {
-            background-color: var(--bg-page);
-            color: var(--text-main);
             min-height: 100vh;
             display: flex;
             flex-direction: column;
         }
-        /* Navbar */
         .navbar {
-            background: var(--bg-card);
-            border-bottom: 1px solid var(--border);
-            padding: 1rem 2rem;
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
-        .brand {
-            font-weight: 700;
-            font-size: 1.25rem;
-            color: var(--text-main);
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-        .brand span { color: var(--primary); }
-        .status-badge {
-            font-size: 0.85rem;
-            padding: 0.25rem 0.75rem;
-            border-radius: 9999px;
-            background: #e2e8f0;
-            color: var(--secondary);
-            font-weight: 500;
-            display: flex;
-            align-items: center;
-            gap: 0.4rem;
-        }
-        .status-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background-color: #94a3b8;
         }
-        /* Main Layout */
-        .container {
-            flex: 1;
-            max-width: 1200px;
             margin: 0 auto;
-            padding: 2rem;
             width: 100%;
-            display: grid;
-            grid-template-columns: 350px 1fr;
             gap: 2rem;
         }
-        @media (max-width: 900px) {
-            .container {
-                grid-template-columns: 1fr;
-            }
-        }
-        /* Cards */
-        .card {
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            border-radius: 12px;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
-            padding: 1.5rem;
-            height: 100%;
-        }
-        .card-header {
-            margin-bottom: 1.5rem;
-        }
-        .card-title {
-            font-size: 1.1rem;
-            font-weight: 600;
-            color: var(--text-main);
-            margin-bottom: 0.25rem;
         }
-        .card-subtitle {
-            font-size: 0.875rem;
-            color: var(--text-muted);
-        }
-        /* Form Styling */
-        .form-grid {
-            display: grid;
-            gap: 1.25rem;
-        }
-        .form-group {
-            display: flex;
-            flex-direction: column;
-            gap: 0.4rem;
-        }
-        .form-group label {
-            font-size: 0.85rem;
-            font-weight: 500;
-            color: var(--text-main);
-        }
-        .form-control {
-            padding: 0.6rem 0.8rem;
-            border: 1px solid var(--border);
-            border-radius: 6px;
-            font-size: 0.95rem;
-            color: var(--text-main);
-            background: #fff;
-            transition: border-color 0.15s, box-shadow 0.15s;
-        }
-        .form-control:focus {
-            outline: none;
-            border-color: var(--primary);
-            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
-        }
-        /* Button */
-        .btn-primary {
-            background: var(--accent-gradient);
-            color: white;
-            border: none;
-            padding: 0.75rem;
-            border-radius: 8px;
-            font-weight: 500;
-            font-size: 0.95rem;
-            cursor: pointer;
-            transition: opacity 0.2s, transform 0.1s;
             margin-top: 1rem;
-            width: 100%;
-            box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
         }
-        .btn-primary:hover {
-            opacity: 0.95;
-        }
-        .btn-primary:active {
-            transform: translateY(1px);
-        }
-        .btn-primary:disabled {
-            background: var(--secondary);
-            cursor: not-allowed;
-            transform: none;
-        }
-        /* Results Area */
-        .results-container {
-            display: flex;
-            flex-direction: column;
-            gap: 1.5rem;
-            height: 100%;
-        }
-        .metric-card {
-            background: linear-gradient(to right, #ffffff, #f8fafc);
-            border: 1px solid var(--border);
-            border-radius: 12px;
-            padding: 2rem;
-            text-align: center;
-            position: relative;
             overflow: hidden;
         }
-        .metric-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            height: 100%;
-            width: 4px;
-            background: var(--primary);
-        }
-        .metric-label {
-            font-size: 0.875rem;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            color: var(--text-muted);
-            font-weight: 600;
-            margin-bottom: 0.5rem;
-        }
-        .metric-value {
-            font-size: 3rem;
-            font-weight: 700;
-            color: var(--text-main);
-            letter-spacing: -1px;
-            line-height: 1;
-        }
-        .ci-range {
-            font-size: 0.95rem;
-            color: var(--text-muted);
-            margin-top: 0.5rem;
-            font-weight: 500;
-        }
-        /* Explanation Waterfall */
-        .explanation-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-            gap: 1.5rem;
-        }
-        .explanation-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 0.75rem 0;
-            border-bottom: 1px solid #f1f5f9;
-        }
-        .explanation-item:last-child {
-            border-bottom: none;
-        }
-        .impact-tag {
-            font-size: 0.8rem;
-            font-weight: 700;
-            padding: 0.2rem 0.6rem;
-            border-radius: 4px;
-        }
-        .impact-pos { background: #dcfce7; color: #166534; }
-        .impact-neg { background: #fee2e2; color: #991b1b; }
-        .feature-name {
-            font-size: 0.9rem;
-            font-weight: 500;
-            color: var(--text-main);
         }
-        .chart-wrapper {
-            flex: 1;
-            min-height: 400px;
-            background: #fff;
-            border-radius: 12px;
-            position: relative;
         }
-        /* Empty State */
-        .empty-state {
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            color: var(--text-muted);
-            text-align: center;
-            padding: 2rem;
-            border: 2px dashed var(--border);
-            border-radius: 12px;
-            background: #fff;
-        }
-        .empty-icon {
-            font-size: 3rem;
-            margin-bottom: 1rem;
-            opacity: 0.5;
         }
-        /* Footer */
-        .footer {
-            text-align: center;
-            padding: 2rem;
-            color: var(--text-muted);
-            font-size: 0.85rem;
-            border-top: 1px solid var(--border);
-            background: #fff;
-            margin-top: auto;
-        }
-        .footer a {
-            color: var(--primary);
-            text-decoration: none;
-        }
-        .footer a:hover { text-decoration: underline; }
-        /* Smooth reveal */
-        .reveal {
-            animation: fadeIn 0.4s ease-out;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
         }
     </style>
 </head>
 <body>
     <nav class="navbar">
-        <div class="brand">
-            <span>🔹</span> Rossmann Sales Intelligence
-        </div>
-        <div class="status-badge" id="mode-badge">
-            <div class="status-dot" id="status-dot"></div>
-            <span id="status-text">Connecting...</span>
         </div>
     </nav>
-    <div class="container">
-        <!-- Sidebar / Configuration -->
         <aside class="sidebar">
-            <div class="card">
-                <div class="card-header">
-                    <h2 class="card-title">Prediction Parameters</h2>
-                    <p class="card-subtitle">Configure store & scenario details.</p>
-                </div>
-                <form id="predict-form">
-                    <div class="form-grid">
-                        <div class="form-group">
-                            <label for="store">Store ID</label>
-                            <input type="number" id="store" class="form-control"
-                                   value="1" min="1" max="1115" required placeholder="e.g. 1">
-                        </div>
-                        <div class="form-group">
-                            <label for="date">Start Date</label>
-                            <input type="date" id="date" class="form-control" required>
-                        </div>
-                        <div class="form-group">
-                            <label for="horizon">Forecast Horizon</label>
-                            <select id="horizon" class="form-control">
-                                <option value="1">1 Day</option>
-                                <option value="7" selected>7 Days</option>
-                                <option value="14">14 Days</option>
-                                <option value="30">30 Days</option>
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label for="promo">Promotion Status</label>
-                            <select id="promo" class="form-control">
-                                <option value="1" selected>Active Promo</option>
-                                <option value="0">No Promo</option>
-                            </select>
-                        </div>
-                        <!-- Advanced grouped in details for simplicity? No, keep expanding -->
-                        <div class="form-group">
-                            <label for="state_holiday">State Holiday</label>
-                            <select id="state_holiday" class="form-control">
-                                <option value="0">None</option>
-                                <option value="a">Public Holiday</option>
-                                <option value="b">Easter Holiday</option>
-                                <option value="c">Christmas</option>
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label for="school_holiday">School Holiday</label>
-                            <select id="school_holiday" class="form-control">
-                                <option value="0">No</option>
-                                <option value="1">Yes</option>
-                            </select>
-                        </div>
-                        <div class="form-group">
-                             <label for="store_type">Store Type</label>
-                             <select id="store_type" class="form-control">
-                                <option value="a">Type A</option>
-                                <option value="b">Type B</option>
-                                <option value="c">Type C</option>
-                                <option value="d">Type D</option>
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label for="assortment">Assortment</label>
-                            <select id="assortment" class="form-control">
-                                <option value="a">Basic</option>
-                                <option value="b">Extra</option>
-                                <option value="c">Extended</option>
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label for="competition_distance">Competition Dist. (m)</label>
-                            <input type="number" id="competition_distance" class="form-control" value="1270">
-                        </div>
-                    </div>
-                    <button type="submit" class="btn-primary" id="submit-btn">
-                        Result Generation
-                    </button>
                 </form>
             </div>
         </aside>
-        <!-- Main Content / Results -->
-        <main class="results-area">
-            <div id="result-placeholder" class="empty-state">
-                <div class="empty-icon">📊</div>
-                <h3>Ready to Forecast</h3>
-                <p>Enter parameters on the left to generate a sales prediction.</p>
             </div>
-            <div id="results-content" class="results-container" style="display: none;">
-                <div class="explanation-grid">
-                    <!-- Key Metric -->
-                    <div class="metric-card reveal">
-                        <div class="metric-label">Projected Sales (95% CI)</div>
-                        <div class="metric-value" id="sales_val">--</div>
-                        <div class="ci-range" id="ci_val">Range: --</div>
-                        <div style="font-size: 0.9rem; color: var(--success); margin-top: 1rem;" id="trend-indicator"></div>
                     </div>
-                    <!-- Top Drivers Card -->
-                    <div class="card reveal">
-                        <div class="card-header">
-                            <h3 class="card-title">Model Decision Insights</h3>
-                            <p class="card-subtitle">Top drivers influencing this specific forecast.</p>
-                        </div>
-                        <div id="explanation-list">
-                            <!-- Populated by JS -->
                         </div>
                     </div>
                 </div>
-                <!-- Chart -->
-                <div class="card reveal" style="flex: 1; display: flex; flex-direction: column;">
-                    <div class="card-header">
-                        <h3 class="card-title">Forecast Trend</h3>
-                        <p class="card-subtitle">Expected turnover over the selected horizon.</p>
-                    </div>
-                    <div class="chart-wrapper">
-                        <canvas id="salesChart"></canvas>
                     </div>
                 </div>
             </div>
         </main>
     </div>
-    <footer class="footer">
-        <p>© 2026 Rossmann Intelligence System. Powered by XGBoost, FastAPI & Docker.</p>
-        <div style="margin-top: 0.5rem;">
-            <a href="/docs">API Docs</a> • <a href="https://github.com/sylvia-ymlin/Rossmann-Store-Sales">GitHub</a>
-        </div>
-    </footer>
     <script>
-        // Set default date to today
         document.getElementById('date').valueAsDate = new Date();
-        let chartInstance = null;
-        // Health Check
-        fetch('/health')
-            .then(res => res.json())
-            .then(data => {
-                const badge = document.getElementById('mode-badge');
-                const dot = document.getElementById('status-dot');
-                const text = document.getElementById('status-text');
-                if (data.status === 'healthy') {
-                    badge.style.background = '#dcfce7'; /* Green-100 */
-                    badge.style.color = '#166534'; /* Green-800 */
-                    dot.style.backgroundColor = '#166534';
-                    text.textContent = 'System Online';
-                } else {
-                    text.textContent = 'System Issues';
-                    dot.style.backgroundColor = '#dc2626';
-                }
-            })
-            .catch(() => {
-                document.getElementById('status-text').textContent = 'Offline';
-            });
-        // Form Logic
-        document.getElementById('predict-form').addEventListener('submit', async (e) => {
             e.preventDefault();
-            const btn = document.getElementById('submit-btn');
-            const originalText = btn.textContent;
             btn.disabled = true;
-            btn.textContent = 'Processing...';
-            // Gather Data
-            const features = {
-                "Store": parseInt(document.getElementById('store').value),
-                "Date": document.getElementById('date').value,
-                "Promo": parseInt(document.getElementById('promo').value),
-                "StateHoliday": document.getElementById('state_holiday').value,
-                "SchoolHoliday": parseInt(document.getElementById('school_holiday').value),
-                "Assortment": document.getElementById('assortment').value,
-                "StoreType": document.getElementById('store_type').value,
-                "CompetitionDistance": parseInt(document.getElementById('competition_distance').value) || 0,
-                "ForecastDays": parseInt(document.getElementById('horizon').value)
             };
             try {
-                const response = await fetch('/predict', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(features)
                 });
-                const data = await response.json();
-                // Switch View
-                document.getElementById('result-placeholder').style.display = 'none';
-                document.getElementById('results-content').style.display = 'flex';
-                // Update Metric
-                document.getElementById('sales_val').textContent = '€' + Math.round(data.PredictedSales).toLocaleString();
-                // Update CI
-                const [low, high] = data.ConfidenceInterval;
-                document.getElementById('ci_val').textContent = `Est. Range: €${Math.round(low).toLocaleString()} - €${Math.round(high).toLocaleString()}`;
-                // Update Explanations
-                const explList = document.getElementById('explanation-list');
-                explList.innerHTML = '';
-                data.Explanation.forEach(item => {
-                    const div = document.createElement('div');
-                    div.className = 'explanation-item';
                     const isPos = item.impact > 0;
-                    div.innerHTML = `
-                        <span class="feature-name">${item.feature}</span>
-                        <span class="impact-tag ${isPos ? 'impact-pos' : 'impact-neg'}">
-                            ${isPos ? '↑' : '↓'} ${Math.abs(item.impact).toFixed(1)}%
-                        </span>
                     `;
-                    explList.appendChild(div);
                 });
-                // Simple Trend Indicator Logic (Compare first vs avg)
-                const avg = data.Forecast.reduce((acc, curr) => acc + curr.sales, 0) / data.Forecast.length;
-                const trendEl = document.getElementById('trend-indicator');
-                if (data.PredictedSales < avg) {
-                    trendEl.innerHTML = '<strong>Increasing</strong> demand projected over horizon';
-                    trendEl.style.color = '#10b981'; // Green
-                } else {
-                    trendEl.innerHTML = 'Shop expects <strong>stable/decreasing</strong> demand';
-                    trendEl.style.color = '#64748b'; // Grey
-                }
-                // Render Chart
                 renderChart(data.Forecast);
-            } catch (error) {
-                alert('Prediction Failed: ' + error.message);
-                console.error(error);
             } finally {
                 btn.disabled = false;
-                btn.textContent = originalText;
             }
         });
-        // Professional Chart
-        function renderChart(forecastData) {
-            const ctx = document.getElementById('salesChart').getContext('2d');
-            const labels = forecastData.map(d => {
-                const date = new Date(d.date);
-                return date.toLocaleDateString(undefined, {month: 'short', day: 'numeric'});
-            });
-            const dataPoints = forecastData.map(d => d.sales);
-            if (chartInstance) chartInstance.destroy();
-            // Gradient Fill
             const gradient = ctx.createLinearGradient(0, 0, 0, 400);
-            gradient.addColorStop(0, 'rgba(37, 99, 235, 0.2)'); // Brand Blue
             gradient.addColorStop(1, 'rgba(37, 99, 235, 0)');
-            chartInstance = new Chart(ctx, {
                 type: 'line',
                 data: {
                     labels: labels,
                     datasets: [{
-                        label: 'Projected Revenue (€)',
-                        data: dataPoints,
                         borderColor: '#2563eb',
                         backgroundColor: gradient,
-                        borderWidth: 2,
                         pointBackgroundColor: '#fff',
-                        pointBorderColor: '#2563eb',
                         pointBorderWidth: 2,
-                        pointRadius: 4,
-                        pointHoverRadius: 6,
-                        tension: 0.4, // Smooth Spline
-                        fill: true
                     }]
                 },
                 options: {
                     responsive: true,
                     maintainAspectRatio: false,
-                    plugins: {
                         legend: { display: false },
                         tooltip: {
-                            backgroundColor: '#1e293b',
-                            padding: 12,
-                            titleFont: { family: 'Inter', size: 13 },
-                            bodyFont: { family: 'Inter', size: 14, weight: 'bold' },
-                            cornerRadius: 8,
                             displayColors: false,
-                            callbacks: {
-                                label: (ctx) => '€' + Math.round(ctx.raw).toLocaleString()
-                            }
                         }
                     },
                     scales: {
-                        x: {
-                            grid: { display: false },
-                            ticks: { font: { family: 'Inter' }, color: '#64748b' }
-                        },
-                        y: {
-                            border: { display: false },
                             grid: { color: '#f1f5f9' },
                             ticks: {
-                                font: { family: 'Inter' },
-                                color: '#64748b',
-                                callback: (value) => '€' + value.toLocaleString()
-                            },
-                            beginAtZero: true
                         }
-                    },
-                    interaction: {
-                        intersect: false,
-                        mode: 'index',
-                    },
                 }
             });
         }
     </script>
 </body>
 </html>
-"""

 A clean, modern professional dashboard for making predictions.
 """
+FRONTEND_HTML = \"\"\"
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rossmann Sales Intelligence | Dashboard</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;600;700&display=swap" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
         :root {
+            --primary: #2563eb;
+            --primary-light: #eff6ff;
+            --secondary: #64748b;
+            --bg-page: #f1f5f9;
+            --text-main: #0f172a;
+            --text-muted: #475569;
             --border: #e2e8f0;
             --success: #10b981;
+            --danger: #ef4444;
+            --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
         }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            background-color: var(--bg-page);
+            color: var(--text-main);
             font-family: 'Inter', sans-serif;
             min-height: 100vh;
             display: flex;
             flex-direction: column;
         }
+        h1, h2, h3 { font-family: 'Outfit', sans-serif; }
+        /* Navigation */
         .navbar {
+            background: #fff;
+            padding: 1rem 2.5rem;
             display: flex;
             justify-content: space-between;
             align-items: center;
+            border-bottom: 1px solid var(--border);
+            position: sticky;
+            top: 0;
+            z-index: 100;
         }
+        .brand { font-weight: 700; font-size: 1.4rem; color: #1e293b; display: flex; align-items: center; gap: 0.75rem; }
+        .brand-icon { color: var(--primary); font-size: 1.6rem; }
+        .status-pill {
+            display: flex; align-items: center; gap: 0.5rem;
+            background: #fff; padding: 0.4rem 1rem; border-radius: 99px;
+            border: 1px solid var(--border); font-size: 0.85rem; font-weight: 600;
         }
+        .dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
+        .dot.online { background: var(--success); box-shadow: 0 0 8px var(--success); }
+        /* Layout */
+        .dashboard-container {
+            display: grid;
+            grid-template-columns: 320px 1fr;
+            max-width: 1440px;
             margin: 0 auto;
             width: 100%;
+            flex: 1;
+            padding: 2rem;
             gap: 2rem;
         }
+        @media (max-width: 1024px) { .dashboard-container { grid-template-columns: 1fr; } }
+        /* Sidebar Controls */
+        .sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
+        .side-card {
+            background: #fff; border-radius: 16px; padding: 1.5rem;
+            box-shadow: var(--card-shadow); border: 1px solid var(--border);
         }
+        .group-title { font-size: 0.85rem; font-weight: 700; color: var(--secondary); text-transform: uppercase; margin-bottom: 1rem; border-bottom: 1px solid #f1f5f9; padding-bottom: 0.5rem; letter-spacing: 0.05em; }
+        .form-control { width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 10px; font-size: 0.9rem; margin-bottom: 1rem; transition: 0.2s; background: #fafafa; }
+        .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); background: #fff; }
+        label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--text-muted); }
+        .btn-predict {
+            width: 100%; background: var(--primary); color: #fff; border: none;
+            padding: 1rem; border-radius: 12px; font-weight: 700; font-size: 1rem;
+            cursor: pointer; transition: 0.2s; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
             margin-top: 1rem;
         }
+        .btn-predict:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3); background: #1d4ed8; }
+        .btn-predict:active { transform: translateY(0); }
+        /* Result Area */
+        .main-display { display: flex; flex-direction: column; gap: 1.5rem; }
+        .top-row { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 1.5rem; }
+        @media (max-width: 768px) { .top-row { grid-template-columns: 1fr; } }
+        /* KPI Card */
+        .kpi-card {
+            background: #fff; border-radius: 20px; padding: 2.5rem; position: relative;
+            box-shadow: var(--card-shadow); border: 1px solid var(--border);
+            display: flex; flex-direction: column; align-items: center; justify-content: center;
             overflow: hidden;
         }
+        .kpi-card::before { content: ''; position: absolute; top:0; left:0; width: 6px; height: 100%; background: var(--primary); }
+        .kpi-label { font-size: 0.9rem; font-weight: 700; color: var(--secondary); margin-bottom: 1.5rem; letter-spacing: 0.05em; }
+        .kpi-value { font-size: 5rem; font-weight: 800; color: var(--text-main); font-family: 'Outfit'; line-height: 1; margin-bottom: 1rem; }
+        .ci-badge {
+            background: var(--primary-light); color: var(--primary);
+            padding: 0.5rem 1.25rem; border-radius: 99px; font-size: 0.9rem; font-weight: 700;
+            border: 1px solid rgba(37, 99, 235, 0.1);
         }
+        .trend-text { margin-top: 2rem; font-size: 1rem; display: flex; align-items: center; gap: 0.6rem; color: var(--text-muted); }
+        /* Drivers Card */
+        .drivers-card {
+            background: #fff; border-radius: 20px; padding: 2rem;
+            box-shadow: var(--card-shadow); border: 1px solid var(--border);
         }
+        .driver-row { margin-bottom: 1.25rem; }
+        .driver-info { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.9rem; font-weight: 600; }
+        .bar-container { height: 10px; background: #f1f5f9; border-radius: 5px; overflow: hidden; position: relative; }
+        .bar-fill { height: 100%; border-radius: 5px; transition: 1s cubic-bezier(0.34, 1.56, 0.64, 1); }
+        /* Chart Card */
+        .chart-card {
+            background: #fff; border-radius: 20px; padding: 2.5rem;
+            box-shadow: var(--card-shadow); border: 1px solid var(--border);
+            flex: 1; min-height: 500px; display: flex; flex-direction: column;
         }
+        .chart-container { flex: 1; width: 100%; margin-top: 2rem; position: relative; }
+        /* Transitions */
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+        .empty-state {
+            height: calc(100vh - 200px); display: flex; flex-direction: column; align-items: center; justify-content: center;
+            opacity: 0.6; text-align: center; color: var(--secondary);
         }
     </style>
 </head>
 <body>
     <nav class="navbar">
+        <div class="brand"><span class="brand-icon">🔹</span> Rossmann <strong>Sales Intelligence</strong></div>
+        <div class="status-pill">
+            <div class="dot" id="dot"></div>
+            <span id="status">Syncing Engines...</span>
         </div>
     </nav>
+    <div class="dashboard-container">
+        <!-- Sidebar -->
         <aside class="sidebar">
+            <div class="side-card">
+                <h3 class="group-title">Scenario Context</h3>
+                <form id="form">
+                    <label>Target Store</label>
+                    <input type="number" id="store" class="form-control" value="1" min="1" max="1115">
+                    <label>Launch Date</label>
+                    <input type="date" id="date" class="form-control">
+                    <label>Forecast Horizon</label>
+                    <select id="horizon" class="form-control">
+                        <option value="1">Next 24 Hours</option>
+                        <option value="7" selected>7-Day Outlook</option>
+                        <option value="14">14-Day Outlook</option>
+                        <option value="30">30-Day Outlook</option>
+                    </select>
+                    <h3 class="group-title">Operational Shifts</h3>
+                    <label>Promotional Strategy</label>
+                    <select id="promo" class="form-control">
+                        <option value="1" selected>Active Sales Promo</option>
+                        <option value="0">Standard Operations</option>
+                    </select>
+                    <label>Public Holidays</label>
+                    <select id="state_holiday" class="form-control">
+                        <option value="0">Normal Business Day</option>
+                        <option value="a">State Holiday</option>
+                        <option value="b">Easter Period</option>
+                        <option value="c">Christmas Context</option>
+                    </select>
+                    <label>Academic Holidays</label>
+                    <select id="school_holiday" class="form-control">
+                        <option value="0">Schools in Session</option>
+                        <option value="1">School Holidays Active</option>
+                    </select>
+                    <h3 class="group-title">Local Demographics</h3>
+                    <label>Competitor Proximity (m)</label>
+                    <input type="number" id="dist" class="form-control" value="1270">
+                    <button type="submit" class="btn-predict" id="btn">Generate Intelligence</button>
                 </form>
             </div>
         </aside>
+        <!-- Main Workspace -->
+        <main class="main-display">
+            <div id="init-view" class="empty-state">
+                <span style="font-size: 5rem; margin-bottom: 1.5rem;">📊</span>
+                <h2 style="font-size: 1.8rem;">Decision Intelligence Workspace</h2>
+                <p style="max-width: 400px; line-height: 1.6;">Configure the store parameters on the left to run our AI-driven revenue projection engine.</p>
             </div>
+            <div id="result-view" style="display: none; animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);">
+                <div class="top-row">
+                    <!-- Projection KPI -->
+                    <div class="kpi-card">
+                        <span class="kpi-label">ESTIMATED REVENUE (95% CI)</span>
+                        <h2 class="kpi-value" id="val">--</h2>
+                        <div class="ci-badge" id="ci">Confidence Interval: --</div>
+                        <div class="trend-text" id="trend"></div>
                     </div>
+                    <!-- Explainability Drivers -->
+                    <div class="drivers-card">
+                        <h3 class="group-title">Decision Drivers</h3>
+                        <div id="drivers-list">
+                            <!-- Populated dynamically -->
                         </div>
                     </div>
                 </div>
+                <!-- Analysis Chart -->
+                <div class="chart-card">
+                    <h3 class="group-title">Forecast Velocity & Variance</h3>
+                    <div class="chart-container">
+                        <canvas id="chart"></canvas>
                     </div>
                 </div>
             </div>
         </main>
     </div>
     <script>
         document.getElementById('date').valueAsDate = new Date();
+        let chart = null;
+        // System Pulse
+        fetch('/health').then(r => r.json()).then(d => {
+            const dot = document.getElementById('dot');
+            const txt = document.getElementById('status');
+            if(d.status === 'healthy') {
+                dot.classList.add('online');
+                txt.textContent = 'Intelligence Engine Online';
+            }
+        });
+        document.getElementById('form').addEventListener('submit', async (e) => {
             e.preventDefault();
+            const btn = document.getElementById('btn');
+            btn.textContent = 'Processing Data...';
             btn.disabled = true;
+            const payload = {
+                Store: parseInt(document.getElementById('store').value),
+                Date: document.getElementById('date').value,
+                Promo: parseInt(document.getElementById('promo').value),
+                StateHoliday: document.getElementById('state_holiday').value,
+                SchoolHoliday: parseInt(document.getElementById('school_holiday').value),
+                Assortment: "a",
+                StoreType: "a",
+                CompetitionDistance: parseInt(document.getElementById('dist').value) || 0,
+                ForecastDays: parseInt(document.getElementById('horizon').value)
             };
             try {
+                const res = await fetch('/predict', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
                 });
+                const data = await res.json();
+                document.getElementById('init-view').style.display = 'none';
+                document.getElementById('result-view').style.display = 'flex';
+                // Display KPI
+                const pred = Math.round(data.PredictedSales);
+                document.getElementById('val').textContent = '€' + pred.toLocaleString();
+                document.getElementById('ci').textContent = `95% Range: €${Math.round(data.ConfidenceInterval[0]).toLocaleString()} - €${Math.round(data.ConfidenceInterval[1]).toLocaleString()}`;
+                // Narrative Trend
+                const forecastAvg = data.Forecast.reduce((s,f) => s + f.sales, 0) / data.Forecast.length;
+                const trendEl = document.getElementById('trend');
+                if (data.PredictedSales < forecastAvg) {
+                    trendEl.innerHTML = '<span style="color:var(--success); font-size:1.2rem;">↑</span> <strong>Upward momentum</strong> detected over the forecast horizon.';
+                } else {
+                    trendEl.innerHTML = '<span style="color:var(--secondary); font-size:1.2rem;">→</span> <strong>Stable operations</strong> projected with minor seasonal dip.';
+                }
+                // AI Explanation Bars
+                const list = document.getElementById('drivers-list');
+                list.innerHTML = '';
+                data.Explanation.slice(0, 5).forEach(item => {
                     const isPos = item.impact > 0;
+                    const color = isPos ? 'var(--success)' : 'var(--danger)';
+                    // Scale bar width (log-based contributions are usually -1.0 to 1.0, so abs(impact)% is roughly 0-50%)
+                    const barWidth = Math.min(Math.max(Math.abs(item.impact) * 2, 5), 98);
+                    const row = document.createElement('div');
+                    row.className = 'driver-row';
+                    row.innerHTML = `
+                        <div class="driver-info">
+                            <span>${item.feature}</span>
+                            <span style="color:${color}">${item.formatted_val}</span>
+                        </div>
+                        <div class="bar-container">
+                            <div class="bar-fill" style="width:${barWidth}%; background:${color}; ${isPos ? '' : 'margin-left:auto;'}"></div>
+                        </div>
                     `;
+                    list.appendChild(row);
                 });
+                // Render High-Fidelity Chart
                 renderChart(data.Forecast);
+            } catch(e) {
+                console.error(e);
+                alert("Core engine returned error. Please check parameters.");
             } finally {
+                btn.textContent = 'Generate Intelligence';
                 btn.disabled = false;
             }
         });
+        function renderChart(forecast) {
+            const ctx = document.getElementById('chart').getContext('2d');
+            const labels = forecast.map(f => new Date(f.date).toLocaleDateString(undefined, {weekday: 'short', month:'short', day:'numeric'}));
+            const vals = forecast.map(f => f.sales);
+            if(chart) chart.destroy();
             const gradient = ctx.createLinearGradient(0, 0, 0, 400);
+            gradient.addColorStop(0, 'rgba(37, 99, 235, 0.15)');
             gradient.addColorStop(1, 'rgba(37, 99, 235, 0)');
+            chart = new Chart(ctx, {
                 type: 'line',
                 data: {
                     labels: labels,
                     datasets: [{
+                        label: 'Projected Daily Revenue',
+                        data: vals,
                         borderColor: '#2563eb',
                         backgroundColor: gradient,
+                        fill: true,
+                        tension: 0.4,
+                        borderWidth: 4,
+                        pointRadius: 6,
                         pointBackgroundColor: '#fff',
                         pointBorderWidth: 2,
+                        pointHoverRadius: 8
                     }]
                 },
                 options: {
                     responsive: true,
                     maintainAspectRatio: false,
+                    plugins: {
                         legend: { display: false },
                         tooltip: {
+                            backgroundColor: '#0f172a',
+                            padding: 16,
+                            cornerRadius: 12,
+                            titleFont: { size: 14, weight: 'bold' },
+                            bodyFont: { size: 16 },
                             displayColors: false,
+                            callbacks: { label: c => '€' + Math.round(c.raw).toLocaleString() }
                         }
                     },
                     scales: {
+                        x: { grid: { display: false }, ticks: { font: { size: 12 } } },
+                        y: {
+                            beginAtZero: false,
                             grid: { color: '#f1f5f9' },
                             ticks: {
+                                callback: v => '€' + v.toLocaleString(),
+                                font: { size: 12 }
+                            }
                         }
+                    }
                 }
             });
         }
     </script>
 </body>
 </html>
+\"\"\"