Spaces:

Danielchris145
/

IronGuard

Paused

App Files Files Community

Danielchris145 commited on Dec 11, 2025

Commit

d4f5acb

verified ·

1 Parent(s): f321e64

Automated deployment via API

Browse files

Files changed (2) hide show

app.py +1 -1
templates/index.html +280 -208

app.py CHANGED Viewed

@@ -311,7 +311,7 @@ def upload_data():
         if file.filename == '':
             return jsonify({'error': 'No selected file'}), 400
-        if file and file.filename.endswith('.csv'):
             df = pd.read_csv(file)
             # Validation

         if file.filename == '':
             return jsonify({'error': 'No selected file'}), 400
+        if file and file.filename.lower().endswith('.csv'):
             df = pd.read_csv(file)
             # Validation

templates/index.html CHANGED Viewed

@@ -1,33 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>🔥 Forge Intelligence - AI Molten Iron Monitoring</title>
     <!-- Google Fonts - Luxury Tech -->
-    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;500;700&family=Inter:wght@100;300;400;500;700&display=swap" rel="stylesheet">
     <!-- Icons -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <!-- Chart.js -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
     <!-- Socket.IO -->
     <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
     <style>
         /* ============================================================================
            QUANTUM-INSPIRED LUXURY UI - FORGE INTELLIGENCE
            ============================================================================ */
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
         :root {
             /* 🌌 Quantum Palette */
             --quantum-black: #0A0A0A;
@@ -40,17 +43,17 @@
             --neon-green: #39FF14;
             --glass-white: #F8F9FA;
             --thermal-gold: #FFD700;
             /* Gradients */
             --gradient-molten: linear-gradient(135deg, #FF4500 0%, #FFD700 50%, #00BFFF 100%);
             --gradient-forge: linear-gradient(180deg, #0A0A0A 0%, #1A1A2E 50%, #16213E 100%);
             --gradient-thermal: linear-gradient(135deg, #DC143C 0%, #FF4500 100%);
             /* Fonts */
             --font-luxury: 'Orbitron', sans-serif;
             --font-tech: 'Rajdhani', sans-serif;
             --font-modern: 'Inter', sans-serif;
             /* Effects */
             --blur-glass: 12px;
             --glow-molten: 0 0 30px rgba(255, 69, 0, 0.6);
@@ -58,22 +61,22 @@
             --shadow-deep: 0 20px 60px rgba(0, 0, 0, 0.8);
             --shadow-glow: 0 0 40px rgba(255, 69, 0, 0.4);
         }
         html {
             scroll-behavior: smooth;
         }
         body {
             background: var(--gradient-forge);
             color: var(--glass-white);
             font-family: var(--font-modern);
             overflow-x: hidden;
         }
         /* ============================================================================
            1. HEADER - LUXURY NAV
            ============================================================================ */
         header {
             position: fixed;
             top: 0;
@@ -85,7 +88,7 @@
             padding: 1.5rem 2rem;
             box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
         }
         .header-container {
             display: flex;
             justify-content: space-between;
@@ -93,7 +96,7 @@
             max-width: 1400px;
             margin: 0 auto;
         }
         .logo {
             font-family: var(--font-luxury);
             font-size: 1.5rem;
@@ -106,23 +109,30 @@
             gap: 0.8rem;
             letter-spacing: 2px;
         }
         .logo-icon {
             font-size: 2rem;
             animation: pulse-glow 2s infinite;
         }
         @keyframes pulse-glow {
-            0%, 100% { text-shadow: 0 0 10px rgba(255, 69, 0, 0.5); }
-            50% { text-shadow: 0 0 30px rgba(255, 69, 0, 0.8); }
         }
         nav {
             display: flex;
             gap: 3rem;
             align-items: center;
         }
         nav a {
             color: rgba(248, 249, 250, 0.7);
             text-decoration: none;
@@ -133,7 +143,7 @@
             position: relative;
             letter-spacing: 1px;
         }
         nav a::after {
             content: '';
             position: absolute;
@@ -144,19 +154,19 @@
             background: var(--gradient-molten);
             transition: width 0.3s ease;
         }
         nav a:hover {
             color: var(--molten-orange);
         }
         nav a:hover::after {
             width: 100%;
         }
         /* ============================================================================
            2. HERO SECTION - FUTURISTIC
            ============================================================================ */
         .hero {
             margin-top: 100px;
             padding: 4rem 2rem;
@@ -168,7 +178,7 @@
             align-items: center;
             justify-content: center;
         }
         .hero::before {
             content: '';
             position: absolute;
@@ -180,7 +190,7 @@
             animation: float 8s ease-in-out infinite;
             z-index: 0;
         }
         .hero::after {
             content: '';
             position: absolute;
@@ -192,12 +202,19 @@
             animation: float 10s ease-in-out infinite reverse;
             z-index: 0;
         }
         @keyframes float {
-            0%, 100% { transform: translateY(0px) rotate(0deg); }
-            50% { transform: translateY(-80px) rotate(20deg); }
         }
         .hero-content {
             position: relative;
             z-index: 1;
@@ -205,18 +222,19 @@
             margin: 0 auto;
             animation: fade-in 1s ease;
         }
         @keyframes fade-in {
             from {
                 opacity: 0;
                 transform: translateY(50px);
             }
             to {
                 opacity: 1;
                 transform: translateY(0);
             }
         }
         .hero h1 {
             font-family: var(--font-luxury);
             font-size: 4.5rem;
@@ -229,7 +247,7 @@
             letter-spacing: 2px;
             text-shadow: 0 0 40px rgba(255, 69, 0, 0.2);
         }
         .hero-tagline {
             font-size: 1.4rem;
             color: rgba(248, 249, 250, 0.85);
@@ -239,14 +257,14 @@
             letter-spacing: 3px;
             text-transform: uppercase;
         }
         .hero-buttons {
             display: flex;
             gap: 2rem;
             justify-content: center;
             flex-wrap: wrap;
         }
         .btn-primary {
             padding: 1.2rem 3.5rem;
             background: var(--gradient-molten);
@@ -263,7 +281,7 @@
             overflow: hidden;
             letter-spacing: 1px;
         }
         .btn-primary::before {
             content: '';
             position: absolute;
@@ -274,17 +292,17 @@
             background: rgba(255, 255, 255, 0.2);
             transition: left 0.3s ease;
         }
         .btn-primary:hover {
             transform: translateY(-8px);
             box-shadow: 0 0 60px rgba(255, 69, 0, 0.9);
             letter-spacing: 2px;
         }
         .btn-primary:hover::before {
             left: 100%;
         }
         .btn-secondary {
             padding: 1.2rem 3.5rem;
             background: transparent;
@@ -298,34 +316,34 @@
             transition: all 0.3s ease;
             letter-spacing: 1px;
         }
         .btn-secondary:hover {
             background: rgba(255, 69, 0, 0.15);
             box-shadow: 0 0 40px rgba(255, 69, 0, 0.6);
             transform: translateY(-8px);
         }
         /* ============================================================================
            3. MAIN DASHBOARD
            ============================================================================ */
         .dashboard {
             max-width: 1400px;
             margin: 4rem auto;
             padding: 0 2rem 4rem;
         }
         .dashboard-grid {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
             gap: 2rem;
             margin-bottom: 3rem;
         }
         /* ============================================================================
            4. QUANTUM CARD - THERMAL MONITORING
            ============================================================================ */
         .quantum-card {
             background: rgba(26, 26, 46, 0.6);
             backdrop-filter: blur(12px);
@@ -336,7 +354,7 @@
             position: relative;
             overflow: hidden;
         }
         .quantum-card::before {
             content: '';
             position: absolute;
@@ -348,19 +366,19 @@
             opacity: 0;
             transition: opacity 0.4s ease;
         }
         .quantum-card:hover {
             border-color: rgba(255, 69, 0, 0.5);
             box-shadow: 0 0 50px rgba(255, 69, 0, 0.35),
-                        inset 0 1px 20px rgba(255, 69, 0, 0.1);
             transform: translateY(-15px);
             background: rgba(26, 26, 46, 0.8);
         }
         .quantum-card:hover::before {
             opacity: 1;
         }
         .card-header {
             display: flex;
             justify-content: space-between;
@@ -369,7 +387,7 @@
             position: relative;
             z-index: 1;
         }
         .card-title {
             font-family: var(--font-luxury);
             font-size: 1.4rem;
@@ -379,22 +397,22 @@
             gap: 0.8rem;
             letter-spacing: 1px;
         }
         .card-icon {
             font-size: 1.8rem;
             background: var(--gradient-molten);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         }
         /* ============================================================================
            5. TEMPERATURE DISPLAY - HERO METRIC
            ============================================================================ */
         .temp-container {
             grid-column: 1 / -1;
         }
         .temp-display {
             text-align: center;
             padding: 4rem 3rem;
@@ -402,9 +420,9 @@
             border-radius: 24px;
             border: 1px solid rgba(255, 69, 0, 0.3);
             box-shadow: 0 0 50px rgba(255, 69, 0, 0.2),
-                        inset 0 1px 20px rgba(255, 69, 0, 0.05);
         }
         .temp-value {
             font-family: var(--font-luxury);
             font-size: 5.5rem;
@@ -417,12 +435,19 @@
             margin-bottom: 1rem;
             letter-spacing: 2px;
         }
         @keyframes pulse-temp {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.08); }
         }
         .temp-status {
             font-family: var(--font-tech);
             font-size: 1.4rem;
@@ -436,7 +461,7 @@
             text-transform: uppercase;
             box-shadow: 0 0 30px rgba(255, 69, 0, 0.3);
         }
         .thermal-bar {
             height: 16px;
             background: rgba(255, 255, 255, 0.1);
@@ -446,7 +471,7 @@
             border: 1px solid rgba(255, 69, 0, 0.3);
             box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
         }
         .thermal-fill {
             height: 100%;
             background: var(--gradient-molten);
@@ -454,16 +479,23 @@
             box-shadow: 0 0 30px rgba(255, 69, 0, 0.8);
             border-radius: 12px;
         }
         @keyframes thermal-wave {
-            0%, 100% { width: 65%; }
-            50% { width: 80%; }
         }
         /* ============================================================================
            6. METRIC BOXES - PREMIUM STATS
            ============================================================================ */
         .metric-box {
             background: linear-gradient(135deg, rgba(255, 69, 0, 0.12) 0%, rgba(0, 191, 255, 0.08) 100%);
             padding: 1.8rem;
@@ -473,12 +505,12 @@
             z-index: 1;
             transition: all 0.3s ease;
         }
         .metric-box:hover {
             border-color: rgba(255, 69, 0, 0.5);
             background: linear-gradient(135deg, rgba(255, 69, 0, 0.18) 0%, rgba(0, 191, 255, 0.12) 100%);
         }
         .metric-label {
             font-family: var(--font-tech);
             font-size: 0.85rem;
@@ -488,7 +520,7 @@
             letter-spacing: 2px;
             font-weight: 600;
         }
         .metric-value {
             font-family: var(--font-luxury);
             font-size: 2.8rem;
@@ -498,11 +530,11 @@
             -webkit-text-fill-color: transparent;
             letter-spacing: 1px;
         }
         /* ============================================================================
            7. CHAT INTERFACE - CONVERSATIONAL AI
            ============================================================================ */
         .chat-section {
             grid-column: 1 / -1;
             background: rgba(22, 33, 62, 0.6);
@@ -510,20 +542,20 @@
             padding: 2.5rem;
             border: 1px solid rgba(0, 191, 255, 0.25);
             box-shadow: 0 0 40px rgba(0, 191, 255, 0.15),
-                        inset 0 1px 20px rgba(0, 191, 255, 0.05);
         }
         .chat-header {
             margin-bottom: 2rem;
         }
         .chat-container {
             display: flex;
             flex-direction: column;
             height: 550px;
             gap: 1.5rem;
         }
         .chat-messages {
             flex: 1;
             overflow-y: auto;
@@ -532,7 +564,7 @@
             gap: 1.2rem;
             padding-right: 1rem;
         }
         .message {
             max-width: 75%;
             padding: 1.2rem 1.8rem;
@@ -542,18 +574,19 @@
             font-size: 0.95rem;
             line-height: 1.6;
         }
         @keyframes slide-in {
             from {
                 opacity: 0;
                 transform: translateY(30px);
             }
             to {
                 opacity: 1;
                 transform: translateY(0);
             }
         }
         .message.user {
             align-self: flex-end;
             background: var(--gradient-molten);
@@ -563,7 +596,7 @@
             margin-left: auto;
             margin-right: 0;
         }
         .message.agent {
             align-self: flex-start;
             background: rgba(0, 191, 255, 0.15);
@@ -572,26 +605,26 @@
             color: rgba(248, 249, 250, 0.95);
             box-shadow: 0 0 20px rgba(0, 191, 255, 0.2);
         }
         .chat-messages::-webkit-scrollbar {
             width: 6px;
         }
         .chat-messages::-webkit-scrollbar-track {
             background: transparent;
         }
         .chat-messages::-webkit-scrollbar-thumb {
             background: rgba(255, 69, 0, 0.5);
             border-radius: 3px;
         }
         .chat-input-area {
             display: flex;
             gap: 1rem;
             margin-top: 1.5rem;
         }
         .chat-input {
             flex: 1;
             padding: 1.2rem 1.8rem;
@@ -603,19 +636,19 @@
             font-size: 0.95rem;
             transition: all 0.3s ease;
         }
         .chat-input::placeholder {
             color: rgba(248, 249, 250, 0.4);
         }
         .chat-input:focus {
             outline: none;
             background: rgba(255, 255, 255, 0.12);
             border-color: var(--cyber-blue);
             box-shadow: 0 0 30px rgba(0, 191, 255, 0.4),
-                        inset 0 1px 10px rgba(0, 191, 255, 0.1);
         }
         .btn-send {
             padding: 1rem 2.5rem;
             background: var(--gradient-molten);
@@ -629,27 +662,27 @@
             box-shadow: 0 0 30px rgba(255, 69, 0, 0.5);
             letter-spacing: 1px;
         }
         .btn-send:hover {
             transform: scale(1.08);
             box-shadow: 0 0 50px rgba(255, 69, 0, 0.8);
         }
         .btn-send:active {
             transform: scale(0.95);
         }
         /* ============================================================================
            8. ANALYTICS DASHBOARD
            ============================================================================ */
         .analytics {
             grid-column: 1 / -1;
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
             gap: 2rem;
         }
         .chart-card {
             background: rgba(26, 26, 46, 0.6);
             backdrop-filter: blur(12px);
@@ -659,110 +692,112 @@
             min-height: 380px;
             transition: all 0.3s ease;
         }
         .chart-card:hover {
             border-color: rgba(255, 69, 0, 0.4);
             box-shadow: 0 0 30px rgba(255, 69, 0, 0.2);
             transform: translateY(-5px);
         }
         /* ============================================================================
            9. RESPONSIVE DESIGN
            ============================================================================ */
         @media (max-width: 1024px) {
             .hero h1 {
                 font-size: 3.5rem;
             }
             .dashboard-grid {
                 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
             }
         }
         @media (max-width: 768px) {
             header {
                 padding: 1rem;
             }
             .header-container {
                 flex-direction: column;
                 gap: 1rem;
             }
             nav {
                 gap: 1.5rem;
                 font-size: 0.85rem;
             }
             .hero {
                 margin-top: 180px;
                 padding: 2rem 1rem;
             }
             .hero h1 {
                 font-size: 2.5rem;
             }
             .hero-tagline {
                 font-size: 1rem;
                 letter-spacing: 1px;
             }
             .hero-buttons {
                 flex-direction: column;
                 gap: 1rem;
             }
-            .btn-primary, .btn-secondary {
                 width: 100%;
             }
             .dashboard-grid {
                 grid-template-columns: 1fr;
             }
             .temp-value {
                 font-size: 3.5rem;
             }
             .message {
                 max-width: 85%;
             }
             .quantum-card {
                 padding: 1.5rem;
             }
             .chat-container {
                 height: 400px;
             }
         }
         @media (max-width: 480px) {
             .logo {
                 font-size: 1.2rem;
             }
             nav {
                 display: none;
             }
             .hero h1 {
                 font-size: 2rem;
                 line-height: 1.2;
             }
             .temp-value {
                 font-size: 2.5rem;
             }
             .metric-value {
                 font-size: 2rem;
             }
         }
     </style>
 </head>
 <body>
     <!-- ========== HEADER ========== -->
     <header>
@@ -799,7 +834,7 @@
     <!-- ========== MAIN DASHBOARD ========== -->
     <main class="dashboard" id="dashboard">
         <div class="dashboard-grid">
             <!-- TEMPERATURE HERO CARD -->
             <div class="quantum-card temp-container">
                 <div class="temp-display">
@@ -876,14 +911,17 @@
                 <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
                     <input type="file" id="csvFile" accept=".csv" class="chat-input" style="flex: 1;">
                     <button class="btn-send" onclick="uploadData()">Analyze Data</button>
-                    <button class="btn-secondary" onclick="exportData()" style="padding: 1rem 2rem; border-radius: 50px;">Export Report</button>
                 </div>
                 <div id="upload-results" style="margin-top: 1.5rem; display: none;">
                     <div class="metric-box" style="margin-bottom: 1rem;">
                         <div class="metric-label">Analysis Summary</div>
-                        <div id="upload-summary" style="font-family: var(--font-modern); margin-top: 0.5rem; line-height: 1.6;"></div>
                     </div>
-                    <div style="max-height: 200px; overflow-y: auto; background: rgba(0,0,0,0.2); border-radius: 12px; padding: 1rem;">
                         <table style="width: 100%; border-collapse: collapse; color: #eee; font-size: 0.9rem;">
                             <thead>
                                 <tr style="border-bottom: 1px solid rgba(255,255,255,0.1); text-align: left;">
@@ -912,17 +950,14 @@
                     <div class="chat-messages" id="chat-messages">
                         <div class="message agent">
                             <strong>🤖 Forge AI:</strong><br>
-                            Greetings! I'm your foundry intelligence agent. Real-time monitoring active. Ask me about pouring readiness, energy optimization, or safety alerts.
                         </div>
                     </div>
                     <div class="chat-input-area">
-                        <input
-                            type="text"
-                            class="chat-input"
-                            id="chat-input"
                             placeholder="Ask me about pouring, energy, or safety..."
-                            onkeypress="handleChatKeypress(event)"
-                        >
                         <button class="btn-send" onclick="sendChatMessage()">Send</button>
                     </div>
                 </div>
@@ -939,7 +974,7 @@
                     </div>
                     <canvas id="tempChart" height="100"></canvas>
                 </div>
                 <div class="chart-card">
                     <div class="card-header">
                         <div class="card-title">
@@ -982,144 +1017,180 @@
         // ============================================================================
         // SOCKET.IO & REAL-TIME UPDATES
         // ============================================================================
         const socket = io();
         let tempChart, energyChart;
         const tempData = [];
         const energyData = [];
         const maxDataPoints = 50;
         socket.on('connect', () => {
             console.log('✅ Connected to Forge Intelligence');
             updateThermalSimulation();
         });
         socket.on('temp_update', (data) => {
             updateTemperature(data.temp);
             logSystemEvent(`Temp Update: ${data.temp}°C | Risk: ${data.quantum_risk}`);
-            if(data.anomaly) logSystemEvent(`⚠️ ANOMALY DETECTED`, 'error');
         });
-        function logSystemEvent(msg, type='info') {
             const logs = document.getElementById('system-logs');
-            if(!logs) return;
             const div = document.createElement('div');
             const time = new Date().toLocaleTimeString();
             div.textContent = `[${time}] ${msg}`;
-            if(type === 'error') div.style.color = '#ff3333';
             logs.appendChild(div);
             logs.scrollTop = logs.scrollHeight;
         }
         // ============================================================================
         // TEMPERATURE UPDATE
         // ============================================================================
         function updateTemperature(temp) {
             document.getElementById('current-temp').textContent = Math.round(temp) + '°C';
             tempData.push(temp);
             if (tempData.length > maxDataPoints) tempData.shift();
             if (tempChart) {
                 tempChart.data.datasets[0].data = tempData;
                 tempChart.update('none');
             }
         }
         // ============================================================================
         // THERMAL SIMULATION
         // ============================================================================
         function updateThermalSimulation() {
             setInterval(() => {
                 const temp = 1450 + Math.sin(Date.now() / 3000) * 25 + (Math.random() - 0.5) * 8;
                 updateTemperature(Math.round(temp));
             }, 2000);
         }
         // ============================================================================
         // CHAT FUNCTIONALITY
         // ============================================================================
         function sendChatMessage() {
             const input = document.getElementById('chat-input');
             const message = input.value.trim();
             if (!message) return;
             addChatMessage('user', message);
             input.value = '';
             // Real Backend Call
             fetch('/api/chat', {
                 method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({query: message})
-            })
-            .then(r => r.json())
-            .then(data => {
-                addChatMessage('agent', data.response);
-                logSystemEvent(`[AI] Response generated (${data.confidence*100}% confidence)`);
             })
-            .catch(e => {
-                addChatMessage('agent', "⚠️ Connection lost to AI Core.");
-                logSystemEvent(`[AI] Connection Error: ${e}`, 'error');
-            });
         }
         // CSV Upload Logic
         function uploadData() {
             const input = document.getElementById('csvFile');
-            if(input.files.length === 0) {
                 alert('Please select a CSV file first');
                 return;
             }
             const formData = new FormData();
             formData.append('file', input.files[0]);
             logSystemEvent(`[UPLOAD] Processing ${input.files[0].name}...`);
             fetch('/api/upload_data', {
                 method: 'POST',
                 body: formData
             })
-            .then(r => r.json())
-            .then(data => {
-                if(data.error) {
-                    alert('Error: ' + data.error);
-                    return;
-                }
-                document.getElementById('upload-results').style.display = 'block';
-                document.getElementById('upload-summary').innerHTML =
-                    `Processed <strong>${data.rows_processed}</strong> rows.<br>` +
-                    `Anomalies Found: <span style="color:var(--neon-green)">${data.summary.anomalies_found}</span><br>` +
-                    `Avg Temp: ${data.summary.avg_temp}°C`;
-                const tbody = document.getElementById('results-table-body');
-                tbody.innerHTML = '';
-                data.predictions.forEach(row => {
-                    const tr = document.createElement('tr');
-                    tr.innerHTML = `
-                        <td style="padding:0.5rem">${row.id}</td>
-                        <td style="padding:0.5rem">${row.temperature}</td>
-                        <td style="padding:0.5rem">${row.energy}</td>
-                        <td style="padding:0.5rem; color:#0f0">${row.predicted_next}</td>
-                        <td style="padding:0.5rem; color:${row.is_anomaly ? 'red' : 'inherit'}">${row.risk_score}</td>
                     `;
-                    tbody.appendChild(tr);
                 });
-                logSystemEvent(`[UPLOAD] Analysis Complete. ${data.summary.anomalies_found} anomalies.`);
-            })
-            .catch(e => {
-                console.error(e);
-                alert('Upload failed');
             });
         }
         function addChatMessage(type, text) {
             const container = document.getElementById('chat-messages');
             const msgDiv = document.createElement('div');
@@ -1128,37 +1199,37 @@
             container.appendChild(msgDiv);
             container.scrollTop = container.scrollHeight;
         }
         function handleChatKeypress(e) {
             if (e.key === 'Enter') sendChatMessage();
         }
         // ============================================================================
         // BUTTON HANDLERS
         // ============================================================================
         function startMonitoring() {
             alert('🔥 Real-time monitoring activated!');
         }
         function activateAI() {
             document.getElementById('chat-input').focus();
         }
         // ============================================================================
         // CHARTS INITIALIZATION
         // ============================================================================
         window.addEventListener('load', () => {
             initCharts();
         });
         function initCharts() {
             const ctx1 = document.getElementById('tempChart').getContext('2d');
             tempChart = new Chart(ctx1, {
                 type: 'line',
                 data: {
-                    labels: Array.from({length: maxDataPoints}, (_, i) => i),
                     datasets: [{
                         label: 'Temperature (°C)',
                         data: tempData,
@@ -1193,7 +1264,7 @@
                     }
                 }
             });
             const ctx2 = document.getElementById('energyChart').getContext('2d');
             energyChart = new Chart(ctx2, {
                 type: 'bar',
@@ -1231,4 +1302,5 @@
         }
     </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>🔥 Forge Intelligence - AI Molten Iron Monitoring</title>
     <!-- Google Fonts - Luxury Tech -->
+    <link
+        href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;500;700&family=Inter:wght@100;300;400;500;700&display=swap"
+        rel="stylesheet">
     <!-- Icons -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <!-- Chart.js -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
     <!-- Socket.IO -->
     <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
     <style>
         /* ============================================================================
            QUANTUM-INSPIRED LUXURY UI - FORGE INTELLIGENCE
            ============================================================================ */
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
         :root {
             /* 🌌 Quantum Palette */
             --quantum-black: #0A0A0A;
             --neon-green: #39FF14;
             --glass-white: #F8F9FA;
             --thermal-gold: #FFD700;
             /* Gradients */
             --gradient-molten: linear-gradient(135deg, #FF4500 0%, #FFD700 50%, #00BFFF 100%);
             --gradient-forge: linear-gradient(180deg, #0A0A0A 0%, #1A1A2E 50%, #16213E 100%);
             --gradient-thermal: linear-gradient(135deg, #DC143C 0%, #FF4500 100%);
             /* Fonts */
             --font-luxury: 'Orbitron', sans-serif;
             --font-tech: 'Rajdhani', sans-serif;
             --font-modern: 'Inter', sans-serif;
             /* Effects */
             --blur-glass: 12px;
             --glow-molten: 0 0 30px rgba(255, 69, 0, 0.6);
             --shadow-deep: 0 20px 60px rgba(0, 0, 0, 0.8);
             --shadow-glow: 0 0 40px rgba(255, 69, 0, 0.4);
         }
         html {
             scroll-behavior: smooth;
         }
         body {
             background: var(--gradient-forge);
             color: var(--glass-white);
             font-family: var(--font-modern);
             overflow-x: hidden;
         }
         /* ============================================================================
            1. HEADER - LUXURY NAV
            ============================================================================ */
         header {
             position: fixed;
             top: 0;
             padding: 1.5rem 2rem;
             box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
         }
         .header-container {
             display: flex;
             justify-content: space-between;
             max-width: 1400px;
             margin: 0 auto;
         }
         .logo {
             font-family: var(--font-luxury);
             font-size: 1.5rem;
             gap: 0.8rem;
             letter-spacing: 2px;
         }
         .logo-icon {
             font-size: 2rem;
             animation: pulse-glow 2s infinite;
         }
         @keyframes pulse-glow {
+            0%,
+            100% {
+                text-shadow: 0 0 10px rgba(255, 69, 0, 0.5);
+            }
+            50% {
+                text-shadow: 0 0 30px rgba(255, 69, 0, 0.8);
+            }
         }
         nav {
             display: flex;
             gap: 3rem;
             align-items: center;
         }
         nav a {
             color: rgba(248, 249, 250, 0.7);
             text-decoration: none;
             position: relative;
             letter-spacing: 1px;
         }
         nav a::after {
             content: '';
             position: absolute;
             background: var(--gradient-molten);
             transition: width 0.3s ease;
         }
         nav a:hover {
             color: var(--molten-orange);
         }
         nav a:hover::after {
             width: 100%;
         }
         /* ============================================================================
            2. HERO SECTION - FUTURISTIC
            ============================================================================ */
         .hero {
             margin-top: 100px;
             padding: 4rem 2rem;
             align-items: center;
             justify-content: center;
         }
         .hero::before {
             content: '';
             position: absolute;
             animation: float 8s ease-in-out infinite;
             z-index: 0;
         }
         .hero::after {
             content: '';
             position: absolute;
             animation: float 10s ease-in-out infinite reverse;
             z-index: 0;
         }
         @keyframes float {
+            0%,
+            100% {
+                transform: translateY(0px) rotate(0deg);
+            }
+            50% {
+                transform: translateY(-80px) rotate(20deg);
+            }
         }
         .hero-content {
             position: relative;
             z-index: 1;
             margin: 0 auto;
             animation: fade-in 1s ease;
         }
         @keyframes fade-in {
             from {
                 opacity: 0;
                 transform: translateY(50px);
             }
             to {
                 opacity: 1;
                 transform: translateY(0);
             }
         }
         .hero h1 {
             font-family: var(--font-luxury);
             font-size: 4.5rem;
             letter-spacing: 2px;
             text-shadow: 0 0 40px rgba(255, 69, 0, 0.2);
         }
         .hero-tagline {
             font-size: 1.4rem;
             color: rgba(248, 249, 250, 0.85);
             letter-spacing: 3px;
             text-transform: uppercase;
         }
         .hero-buttons {
             display: flex;
             gap: 2rem;
             justify-content: center;
             flex-wrap: wrap;
         }
         .btn-primary {
             padding: 1.2rem 3.5rem;
             background: var(--gradient-molten);
             overflow: hidden;
             letter-spacing: 1px;
         }
         .btn-primary::before {
             content: '';
             position: absolute;
             background: rgba(255, 255, 255, 0.2);
             transition: left 0.3s ease;
         }
         .btn-primary:hover {
             transform: translateY(-8px);
             box-shadow: 0 0 60px rgba(255, 69, 0, 0.9);
             letter-spacing: 2px;
         }
         .btn-primary:hover::before {
             left: 100%;
         }
         .btn-secondary {
             padding: 1.2rem 3.5rem;
             background: transparent;
             transition: all 0.3s ease;
             letter-spacing: 1px;
         }
         .btn-secondary:hover {
             background: rgba(255, 69, 0, 0.15);
             box-shadow: 0 0 40px rgba(255, 69, 0, 0.6);
             transform: translateY(-8px);
         }
         /* ============================================================================
            3. MAIN DASHBOARD
            ============================================================================ */
         .dashboard {
             max-width: 1400px;
             margin: 4rem auto;
             padding: 0 2rem 4rem;
         }
         .dashboard-grid {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
             gap: 2rem;
             margin-bottom: 3rem;
         }
         /* ============================================================================
            4. QUANTUM CARD - THERMAL MONITORING
            ============================================================================ */
         .quantum-card {
             background: rgba(26, 26, 46, 0.6);
             backdrop-filter: blur(12px);
             position: relative;
             overflow: hidden;
         }
         .quantum-card::before {
             content: '';
             position: absolute;
             opacity: 0;
             transition: opacity 0.4s ease;
         }
         .quantum-card:hover {
             border-color: rgba(255, 69, 0, 0.5);
             box-shadow: 0 0 50px rgba(255, 69, 0, 0.35),
+                inset 0 1px 20px rgba(255, 69, 0, 0.1);
             transform: translateY(-15px);
             background: rgba(26, 26, 46, 0.8);
         }
         .quantum-card:hover::before {
             opacity: 1;
         }
         .card-header {
             display: flex;
             justify-content: space-between;
             position: relative;
             z-index: 1;
         }
         .card-title {
             font-family: var(--font-luxury);
             font-size: 1.4rem;
             gap: 0.8rem;
             letter-spacing: 1px;
         }
         .card-icon {
             font-size: 1.8rem;
             background: var(--gradient-molten);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         }
         /* ============================================================================
            5. TEMPERATURE DISPLAY - HERO METRIC
            ============================================================================ */
         .temp-container {
             grid-column: 1 / -1;
         }
         .temp-display {
             text-align: center;
             padding: 4rem 3rem;
             border-radius: 24px;
             border: 1px solid rgba(255, 69, 0, 0.3);
             box-shadow: 0 0 50px rgba(255, 69, 0, 0.2),
+                inset 0 1px 20px rgba(255, 69, 0, 0.05);
         }
         .temp-value {
             font-family: var(--font-luxury);
             font-size: 5.5rem;
             margin-bottom: 1rem;
             letter-spacing: 2px;
         }
         @keyframes pulse-temp {
+            0%,
+            100% {
+                transform: scale(1);
+            }
+            50% {
+                transform: scale(1.08);
+            }
         }
         .temp-status {
             font-family: var(--font-tech);
             font-size: 1.4rem;
             text-transform: uppercase;
             box-shadow: 0 0 30px rgba(255, 69, 0, 0.3);
         }
         .thermal-bar {
             height: 16px;
             background: rgba(255, 255, 255, 0.1);
             border: 1px solid rgba(255, 69, 0, 0.3);
             box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
         }
         .thermal-fill {
             height: 100%;
             background: var(--gradient-molten);
             box-shadow: 0 0 30px rgba(255, 69, 0, 0.8);
             border-radius: 12px;
         }
         @keyframes thermal-wave {
+            0%,
+            100% {
+                width: 65%;
+            }
+            50% {
+                width: 80%;
+            }
         }
         /* ============================================================================
            6. METRIC BOXES - PREMIUM STATS
            ============================================================================ */
         .metric-box {
             background: linear-gradient(135deg, rgba(255, 69, 0, 0.12) 0%, rgba(0, 191, 255, 0.08) 100%);
             padding: 1.8rem;
             z-index: 1;
             transition: all 0.3s ease;
         }
         .metric-box:hover {
             border-color: rgba(255, 69, 0, 0.5);
             background: linear-gradient(135deg, rgba(255, 69, 0, 0.18) 0%, rgba(0, 191, 255, 0.12) 100%);
         }
         .metric-label {
             font-family: var(--font-tech);
             font-size: 0.85rem;
             letter-spacing: 2px;
             font-weight: 600;
         }
         .metric-value {
             font-family: var(--font-luxury);
             font-size: 2.8rem;
             -webkit-text-fill-color: transparent;
             letter-spacing: 1px;
         }
         /* ============================================================================
            7. CHAT INTERFACE - CONVERSATIONAL AI
            ============================================================================ */
         .chat-section {
             grid-column: 1 / -1;
             background: rgba(22, 33, 62, 0.6);
             padding: 2.5rem;
             border: 1px solid rgba(0, 191, 255, 0.25);
             box-shadow: 0 0 40px rgba(0, 191, 255, 0.15),
+                inset 0 1px 20px rgba(0, 191, 255, 0.05);
         }
         .chat-header {
             margin-bottom: 2rem;
         }
         .chat-container {
             display: flex;
             flex-direction: column;
             height: 550px;
             gap: 1.5rem;
         }
         .chat-messages {
             flex: 1;
             overflow-y: auto;
             gap: 1.2rem;
             padding-right: 1rem;
         }
         .message {
             max-width: 75%;
             padding: 1.2rem 1.8rem;
             font-size: 0.95rem;
             line-height: 1.6;
         }
         @keyframes slide-in {
             from {
                 opacity: 0;
                 transform: translateY(30px);
             }
             to {
                 opacity: 1;
                 transform: translateY(0);
             }
         }
         .message.user {
             align-self: flex-end;
             background: var(--gradient-molten);
             margin-left: auto;
             margin-right: 0;
         }
         .message.agent {
             align-self: flex-start;
             background: rgba(0, 191, 255, 0.15);
             color: rgba(248, 249, 250, 0.95);
             box-shadow: 0 0 20px rgba(0, 191, 255, 0.2);
         }
         .chat-messages::-webkit-scrollbar {
             width: 6px;
         }
         .chat-messages::-webkit-scrollbar-track {
             background: transparent;
         }
         .chat-messages::-webkit-scrollbar-thumb {
             background: rgba(255, 69, 0, 0.5);
             border-radius: 3px;
         }
         .chat-input-area {
             display: flex;
             gap: 1rem;
             margin-top: 1.5rem;
         }
         .chat-input {
             flex: 1;
             padding: 1.2rem 1.8rem;
             font-size: 0.95rem;
             transition: all 0.3s ease;
         }
         .chat-input::placeholder {
             color: rgba(248, 249, 250, 0.4);
         }
         .chat-input:focus {
             outline: none;
             background: rgba(255, 255, 255, 0.12);
             border-color: var(--cyber-blue);
             box-shadow: 0 0 30px rgba(0, 191, 255, 0.4),
+                inset 0 1px 10px rgba(0, 191, 255, 0.1);
         }
         .btn-send {
             padding: 1rem 2.5rem;
             background: var(--gradient-molten);
             box-shadow: 0 0 30px rgba(255, 69, 0, 0.5);
             letter-spacing: 1px;
         }
         .btn-send:hover {
             transform: scale(1.08);
             box-shadow: 0 0 50px rgba(255, 69, 0, 0.8);
         }
         .btn-send:active {
             transform: scale(0.95);
         }
         /* ============================================================================
            8. ANALYTICS DASHBOARD
            ============================================================================ */
         .analytics {
             grid-column: 1 / -1;
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
             gap: 2rem;
         }
         .chart-card {
             background: rgba(26, 26, 46, 0.6);
             backdrop-filter: blur(12px);
             min-height: 380px;
             transition: all 0.3s ease;
         }
         .chart-card:hover {
             border-color: rgba(255, 69, 0, 0.4);
             box-shadow: 0 0 30px rgba(255, 69, 0, 0.2);
             transform: translateY(-5px);
         }
         /* ============================================================================
            9. RESPONSIVE DESIGN
            ============================================================================ */
         @media (max-width: 1024px) {
             .hero h1 {
                 font-size: 3.5rem;
             }
             .dashboard-grid {
                 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
             }
         }
         @media (max-width: 768px) {
             header {
                 padding: 1rem;
             }
             .header-container {
                 flex-direction: column;
                 gap: 1rem;
             }
             nav {
                 gap: 1.5rem;
                 font-size: 0.85rem;
             }
             .hero {
                 margin-top: 180px;
                 padding: 2rem 1rem;
             }
             .hero h1 {
                 font-size: 2.5rem;
             }
             .hero-tagline {
                 font-size: 1rem;
                 letter-spacing: 1px;
             }
             .hero-buttons {
                 flex-direction: column;
                 gap: 1rem;
             }
+            .btn-primary,
+            .btn-secondary {
                 width: 100%;
             }
             .dashboard-grid {
                 grid-template-columns: 1fr;
             }
             .temp-value {
                 font-size: 3.5rem;
             }
             .message {
                 max-width: 85%;
             }
             .quantum-card {
                 padding: 1.5rem;
             }
             .chat-container {
                 height: 400px;
             }
         }
         @media (max-width: 480px) {
             .logo {
                 font-size: 1.2rem;
             }
             nav {
                 display: none;
             }
             .hero h1 {
                 font-size: 2rem;
                 line-height: 1.2;
             }
             .temp-value {
                 font-size: 2.5rem;
             }
             .metric-value {
                 font-size: 2rem;
             }
         }
     </style>
 </head>
 <body>
     <!-- ========== HEADER ========== -->
     <header>
     <!-- ========== MAIN DASHBOARD ========== -->
     <main class="dashboard" id="dashboard">
         <div class="dashboard-grid">
             <!-- TEMPERATURE HERO CARD -->
             <div class="quantum-card temp-container">
                 <div class="temp-display">
                 <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
                     <input type="file" id="csvFile" accept=".csv" class="chat-input" style="flex: 1;">
                     <button class="btn-send" onclick="uploadData()">Analyze Data</button>
+                    <button class="btn-secondary" onclick="exportData()"
+                        style="padding: 1rem 2rem; border-radius: 50px;">Export Report</button>
                 </div>
                 <div id="upload-results" style="margin-top: 1.5rem; display: none;">
                     <div class="metric-box" style="margin-bottom: 1rem;">
                         <div class="metric-label">Analysis Summary</div>
+                        <div id="upload-summary"
+                            style="font-family: var(--font-modern); margin-top: 0.5rem; line-height: 1.6;"></div>
                     </div>
+                    <div
+                        style="max-height: 200px; overflow-y: auto; background: rgba(0,0,0,0.2); border-radius: 12px; padding: 1rem;">
                         <table style="width: 100%; border-collapse: collapse; color: #eee; font-size: 0.9rem;">
                             <thead>
                                 <tr style="border-bottom: 1px solid rgba(255,255,255,0.1); text-align: left;">
                     <div class="chat-messages" id="chat-messages">
                         <div class="message agent">
                             <strong>🤖 Forge AI:</strong><br>
+                            Greetings! I'm your foundry intelligence agent. Real-time monitoring active. Ask me about
+                            pouring readiness, energy optimization, or safety alerts.
                         </div>
                     </div>
                     <div class="chat-input-area">
+                        <input type="text" class="chat-input" id="chat-input"
                             placeholder="Ask me about pouring, energy, or safety..."
+                            onkeypress="handleChatKeypress(event)">
                         <button class="btn-send" onclick="sendChatMessage()">Send</button>
                     </div>
                 </div>
                     </div>
                     <canvas id="tempChart" height="100"></canvas>
                 </div>
                 <div class="chart-card">
                     <div class="card-header">
                         <div class="card-title">
         // ============================================================================
         // SOCKET.IO & REAL-TIME UPDATES
         // ============================================================================
         const socket = io();
         let tempChart, energyChart;
         const tempData = [];
         const energyData = [];
         const maxDataPoints = 50;
         socket.on('connect', () => {
             console.log('✅ Connected to Forge Intelligence');
             updateThermalSimulation();
         });
         socket.on('temp_update', (data) => {
             updateTemperature(data.temp);
             logSystemEvent(`Temp Update: ${data.temp}°C | Risk: ${data.quantum_risk}`);
+            if (data.anomaly) logSystemEvent(`⚠️ ANOMALY DETECTED`, 'error');
         });
+        function logSystemEvent(msg, type = 'info') {
             const logs = document.getElementById('system-logs');
+            if (!logs) return;
             const div = document.createElement('div');
             const time = new Date().toLocaleTimeString();
             div.textContent = `[${time}] ${msg}`;
+            if (type === 'error') div.style.color = '#ff3333';
             logs.appendChild(div);
             logs.scrollTop = logs.scrollHeight;
         }
         // ============================================================================
         // TEMPERATURE UPDATE
         // ============================================================================
         function updateTemperature(temp) {
             document.getElementById('current-temp').textContent = Math.round(temp) + '°C';
             tempData.push(temp);
             if (tempData.length > maxDataPoints) tempData.shift();
             if (tempChart) {
                 tempChart.data.datasets[0].data = tempData;
                 tempChart.update('none');
             }
         }
         // ============================================================================
         // THERMAL SIMULATION
         // ============================================================================
         function updateThermalSimulation() {
             setInterval(() => {
                 const temp = 1450 + Math.sin(Date.now() / 3000) * 25 + (Math.random() - 0.5) * 8;
                 updateTemperature(Math.round(temp));
             }, 2000);
         }
         // ============================================================================
         // CHAT FUNCTIONALITY
         // ============================================================================
         function sendChatMessage() {
             const input = document.getElementById('chat-input');
             const message = input.value.trim();
             if (!message) return;
             addChatMessage('user', message);
             input.value = '';
             // Real Backend Call
             fetch('/api/chat', {
                 method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ query: message })
             })
+                .then(r => r.json())
+                .then(data => {
+                    addChatMessage('agent', data.response);
+                    logSystemEvent(`[AI] Response generated (${data.confidence * 100}% confidence)`);
+                })
+                .catch(e => {
+                    addChatMessage('agent', "⚠️ Connection lost to AI Core.");
+                    logSystemEvent(`[AI] Connection Error: ${e}`, 'error');
+                });
         }
         // CSV Upload Logic
         function uploadData() {
             const input = document.getElementById('csvFile');
+            if (input.files.length === 0) {
                 alert('Please select a CSV file first');
                 return;
             }
             const formData = new FormData();
             formData.append('file', input.files[0]);
             logSystemEvent(`[UPLOAD] Processing ${input.files[0].name}...`);
+            const btn = document.querySelector('button[onclick="uploadData()"]');
+            btn.textContent = 'Analyzing...';
+            btn.disabled = true;
             fetch('/api/upload_data', {
                 method: 'POST',
                 body: formData
             })
+                .then(r => r.json())
+                .then(data => {
+                    if (data.error) {
+                        alert('Error: ' + data.error);
+                        return;
+                    }
+                    document.getElementById('upload-results').style.display = 'block';
+                    document.getElementById('upload-summary').innerHTML =
+                        `Processed <strong>${data.rows_processed}</strong> rows.<br>` +
+                        `Anomalies Found: <span style="color:var(--neon-green)">${data.summary.anomalies_found}</span><br>` +
+                        `Avg Temp: ${data.summary.avg_temp}°C`;
+                    const tbody = document.getElementById('results-table-body');
+                    tbody.innerHTML = '';
+                    data.predictions.forEach(row => {
+                        const tr = document.createElement('tr');
+                        tr.style.borderBottom = '1px solid rgba(255,255,255,0.05)';
+                        tr.innerHTML = `
+                        <td style="padding:0.8rem">${row.id}</td>
+                        <td style="padding:0.8rem">${row.temperature}</td>
+                        <td style="padding:0.8rem">${row.energy}</td>
+                        <td style="padding:0.8rem; color:#0f0">${row.predicted_next}</td>
+                        <td style="padding:0.8rem; color:${row.is_anomaly ? 'red' : 'inherit'}">${row.risk_score}</td>
                     `;
+                        tbody.appendChild(tr);
+                    });
+                    logSystemEvent(`[UPLOAD] Analysis Complete. ${data.summary.anomalies_found} anomalies.`);
+                })
+                .catch(e => {
+                    console.error(e);
+                    alert('Upload failed: ' + e);
+                    logSystemEvent(`[UPLOAD] Failed: ${e}`, 'error');
+                })
+                .finally(() => {
+                    const btn = document.querySelector('button[onclick="uploadData()"]');
+                    btn.textContent = 'Analyze Data';
+                    btn.disabled = false;
                 });
+        }
+        function exportData() {
+            const tbody = document.getElementById('results-table-body');
+            if (!tbody || tbody.children.length === 0) {
+                alert('No data to export. Please analyze a CSV first.');
+                return;
+            }
+            let csvContent = "data:text/csv;charset=utf-8,ID,Temperature,Energy,Predicted,Risk\n";
+            Array.from(tbody.children).forEach(row => {
+                const cols = Array.from(row.children).map(td => td.textContent);
+                csvContent += cols.join(",") + "\r\n";
             });
+            const encodedUri = encodeURI(csvContent);
+            const link = document.createElement("a");
+            link.setAttribute("href", encodedUri);
+            link.setAttribute("download", "prediction_report.csv");
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            logSystemEvent(`[SYSTEM] Report exported successfully.`);
         }
         function addChatMessage(type, text) {
             const container = document.getElementById('chat-messages');
             const msgDiv = document.createElement('div');
             container.appendChild(msgDiv);
             container.scrollTop = container.scrollHeight;
         }
         function handleChatKeypress(e) {
             if (e.key === 'Enter') sendChatMessage();
         }
         // ============================================================================
         // BUTTON HANDLERS
         // ============================================================================
         function startMonitoring() {
             alert('🔥 Real-time monitoring activated!');
         }
         function activateAI() {
             document.getElementById('chat-input').focus();
         }
         // ============================================================================
         // CHARTS INITIALIZATION
         // ============================================================================
         window.addEventListener('load', () => {
             initCharts();
         });
         function initCharts() {
             const ctx1 = document.getElementById('tempChart').getContext('2d');
             tempChart = new Chart(ctx1, {
                 type: 'line',
                 data: {
+                    labels: Array.from({ length: maxDataPoints }, (_, i) => i),
                     datasets: [{
                         label: 'Temperature (°C)',
                         data: tempData,
                     }
                 }
             });
             const ctx2 = document.getElementById('energyChart').getContext('2d');
             energyChart = new Chart(ctx2, {
                 type: 'bar',
         }
     </script>
 </body>
+</html>