Update app.py

app.py

@@ -11,7 +11,7 @@ from sklearn.ensemble import RandomForestRegressor
 SYMBOL_KRAKEN = "BTC/USD"
 PORT = 7860
 BROADCAST_RATE = 1.0
-PREDICTION_HORIZON = 100
+PREDICTION_HORIZON = 60
 
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
 
@@ -36,15 +36,11 @@ def calculate_indicators(candles):
         df[c] = df[c].astype(float)
 
     df['ema'] = df['close'].ewm(span=20, adjust=False).mean()
-    df['ema_fast'] = df['close'].ewm(span=9, adjust=False).mean()
-    df['ema_slow'] = df['close'].ewm(span=50, adjust=False).mean()
-    
     df['sma20'] = df['close'].rolling(window=20).mean()
     df['std'] = df['close'].rolling(window=20).std()
     df['bb_upper'] = df['sma20'] + (df['std'] * 2)
     df['bb_lower'] = df['sma20'] - (df['std'] * 2)
-    df['bb_mid'] = df['sma20']
-
+    
     delta = df['close'].diff()
     gain = (delta.where(delta > 0, 0)).rolling(window=14).mean()
     loss = (-delta.where(delta < 0, 0)).rolling(window=14).mean()
@@ -60,26 +56,20 @@ def calculate_indicators(candles):
     low_min = df['low'].rolling(window=14).min()
     high_max = df['high'].rolling(window=14).max()
     df['stoch_k'] = 100 * ((df['close'] - low_min) / (high_max - low_min))
-    df['stoch_d'] = df['stoch_k'].rolling(window=3).mean()
-
+    
     df['tr0'] = abs(df['high'] - df['low'])
     df['tr1'] = abs(df['high'] - df['close'].shift())
     df['tr2'] = abs(df['low'] - df['close'].shift())
     df['tr'] = df[['tr0', 'tr1', 'tr2']].max(axis=1)
     df['atr'] = df['tr'].rolling(window=14).mean()
 
-    df['obv'] = (np.sign(df['close'].diff()) * df['volume']).fillna(0).cumsum()
-
     df['tp'] = (df['high'] + df['low'] + df['close']) / 3
     df['vwap'] = (df['tp'] * df['volume']).cumsum() / df['volume'].cumsum()
     
     return df
 
 def train_model(df):
-    logging.info("Training ML Model...")
-    
-    feature_cols = ['close', 'ema', 'bb_upper', 'bb_lower', 'rsi', 'macd', 'stoch_k', 'atr', 'obv', 'vwap']
-    
+    feature_cols = ['close', 'ema', 'bb_upper', 'bb_lower', 'rsi', 'macd', 'stoch_k', 'atr', 'vwap']
     data = df.dropna().copy()
     
     future_shifts = {}
@@ -95,23 +85,20 @@ def train_model(df):
     data = data.dropna()
 
     if len(data) < 100:
-        logging.warning("Not enough data to train model yet.")
         return None
 
     X = data[feature_cols].values
     y = data[targets].values
 
-    model = RandomForestRegressor(n_estimators=50, max_depth=10, n_jobs=-1, random_state=42)
+    model = RandomForestRegressor(n_estimators=30, max_depth=8, n_jobs=-1, random_state=42)
     model.fit(X, y)
-    
-    logging.info(f"Model Trained on {len(X)} samples.")
     return model
 
 def get_prediction(df, model):
     if model is None:
         return []
     
-    feature_cols = ['close', 'ema', 'bb_upper', 'bb_lower', 'rsi', 'macd', 'stoch_k', 'atr', 'obv', 'vwap']
+    feature_cols = ['close', 'ema', 'bb_upper', 'bb_lower', 'rsi', 'macd', 'stoch_k', 'atr', 'vwap']
     last_row = df.iloc[[-1]][feature_cols]
     
     if last_row.isnull().values.any():
@@ -147,21 +134,21 @@ def process_market_data():
     predictions = []
     try:
         predictions = get_prediction(df, market_state['model'])
-    except Exception as e:
-        logging.error(f"Prediction failed: {e}")
+    except Exception:
+        pass
 
     df_clean = df.replace([np.inf, -np.inf], np.nan)
+    df_clean = df_clean.astype(object).where(pd.notnull(df_clean), None)
     
-    last_close = float(df_clean['close'].iloc[-1]) if len(df_clean) > 0 else 0
-    first_close = float(df_clean['close'].iloc[0]) if len(df_clean) > 0 else 0
+    last_close = float(df['close'].iloc[-1]) if len(df) > 0 else 0
+    first_close = float(df['close'].iloc[0]) if len(df) > 0 else 0
     price_change = ((last_close - first_close) / first_close * 100) if first_close > 0 else 0
     
     market_state['last_price'] = last_close
     market_state['price_change'] = price_change
     
-    full_data = df_clean.where(pd.notnull(df_clean), None).to_dict('records')
-    
-    last_row = df_clean.iloc[-1] if len(df_clean) > 0 else {}
+    full_data = df_clean.to_dict('records')
+    last_row = df.iloc[-1] if len(df) > 0 else {}
     
     return {
         "data": full_data,
@@ -169,10 +156,10 @@ def process_market_data():
         "stats": {
             "price": last_close,
             "change": round(price_change, 2),
-            "rsi": round(float(last_row.get('rsi', 0)), 1) if pd.notna(last_row.get('rsi')) else 0,
-            "macd": round(float(last_row.get('macd', 0)), 2) if pd.notna(last_row.get('macd')) else 0,
-            "atr": round(float(last_row.get('atr', 0)), 2) if pd.notna(last_row.get('atr')) else 0,
-            "volume": round(float(last_row.get('volume', 0)), 2) if pd.notna(last_row.get('volume')) else 0
+            "rsi": round(float(last_row.get('rsi')), 1) if pd.notna(last_row.get('rsi')) else 0,
+            "macd": round(float(last_row.get('macd')), 2) if pd.notna(last_row.get('macd')) else 0,
+            "atr": round(float(last_row.get('atr')), 2) if pd.notna(last_row.get('atr')) else 0,
+            "volume": round(float(last_row.get('volume')), 2) if pd.notna(last_row.get('volume')) else 0
         }
     }
 
@@ -182,585 +169,296 @@ HTML_PAGE = """
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>BTC/USD AI Predictor</title>
+    <title>QuantAI Terminal | BTC/USD</title>
     <script src="https://unpkg.com/lightweight-charts@4.1.1/dist/lightweight-charts.standalone.production.js"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
     <style>
+        :root {
+            --bg-dark: #0b0e11;
+            --bg-panel: #151a21;
+            --accent: #2962ff;
+            --accent-glow: rgba(41, 98, 255, 0.3);
+            --up: #00e396;
+            --down: #ff004c;
+            --text-main: #eceff1;
+            --text-dim: #94a3b8;
+            --border: rgba(255, 255, 255, 0.08);
+        }
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        
         body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
-            color: #ffffff;
+            background-color: var(--bg-dark);
+            color: var(--text-main);
+            font-family: 'Inter', sans-serif;
             height: 100vh;
-            display: flex;
-            flex-direction: column;
             overflow: hidden;
+            display: grid;
+            grid-template-rows: 60px 1fr;
         }
-        
         .header {
-            background: rgba(15, 15, 25, 0.95);
-            backdrop-filter: blur(20px);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-            padding: 12px 24px;
+            background: var(--bg-panel);
+            border-bottom: 1px solid var(--border);
             display: flex;
             align-items: center;
             justify-content: space-between;
-            z-index: 100;
+            padding: 0 24px;
+            z-index: 10;
         }
-        
-        .logo-section {
+        .brand {
             display: flex;
             align-items: center;
-            gap: 16px;
-        }
-        
-        .logo {
-            font-size: 24px;
-            font-weight: 700;
-            background: linear-gradient(135deg, #00ff88 0%, #00d4ff 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            letter-spacing: -0.5px;
-        }
-        
-        .symbol-badge {
-            background: rgba(0, 255, 136, 0.1);
-            border: 1px solid rgba(0, 255, 136, 0.3);
-            padding: 6px 14px;
-            border-radius: 20px;
-            font-size: 13px;
-            font-weight: 600;
-            color: #00ff88;
-        }
-        
-        .stats-row {
-            display: flex;
-            gap: 24px;
-            align-items: center;
-        }
-        
-        .stat-item {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-end;
-        }
-        
-        .stat-label {
-            font-size: 10px;
-            color: #666;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
+            gap: 12px;
         }
-        
-        .stat-value {
-            font-size: 15px;
+        .brand-text { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 18px; color: #fff; }
+        .live-badge {
+            background: rgba(0, 227, 150, 0.15);
+            color: var(--up);
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 11px;
             font-weight: 600;
-            font-variant-numeric: tabular-nums;
-        }
-        
-        .stat-value.positive { color: #00ff88; }
-        .stat-value.negative { color: #ff4757; }
-        .stat-value.neutral { color: #ffd700; }
-        
-        .status-indicator {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            font-size: 12px;
-            color: #888;
-        }
-        
-        .status-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: #00ff88;
-            animation: pulse 2s infinite;
-        }
-        
-        .status-dot.disconnected {
-            background: #ff4757;
-            animation: none;
-        }
-        
-        @keyframes pulse {
-            0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.4); }
-            50% { opacity: 0.8; box-shadow: 0 0 0 8px rgba(0, 255, 136, 0); }
-        }
-        
-        .indicator-panel {
-            background: rgba(15, 15, 25, 0.8);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-            padding: 10px 24px;
-            display: flex;
-            gap: 32px;
-            overflow-x: auto;
-        }
-        
-        .indicator-group {
             display: flex;
             align-items: center;
-            gap: 12px;
-        }
-        
-        .indicator-label {
-            font-size: 11px;
-            color: #666;
-            text-transform: uppercase;
+            gap: 6px;
         }
+        .live-dot { width: 6px; height: 6px; background: var(--up); border-radius: 50%; animation: pulse 1.5s infinite; }
+        .live-dot.offline { background: var(--down); animation: none; }
         
-        .indicator-value {
-            font-size: 13px;
-            font-weight: 500;
-            font-variant-numeric: tabular-nums;
+        .dashboard-grid {
+            display: grid;
+            grid-template-columns: 280px 1fr;
+            height: 100%;
+            overflow: hidden;
         }
-        
-        .charts-container {
-            flex: 1;
+        .sidebar {
+            background: var(--bg-panel);
+            border-right: 1px solid var(--border);
+            padding: 20px;
             display: flex;
             flex-direction: column;
+            gap: 20px;
+        }
+        .stat-card {
+            background: rgba(255,255,255,0.02);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            padding: 16px;
+        }
+        .stat-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
+        .stat-value { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 500; }
+        .stat-value.up { color: var(--up); }
+        .stat-value.down { color: var(--down); }
+        
+        .main-view {
+            display: grid;
+            grid-template-rows: 3fr 1fr;
             position: relative;
         }
-        
-        .chart-wrapper {
-            position: relative;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-        }
-        
-        #main-chart { flex: 5; }
-        #volume-chart { flex: 1; min-height: 60px; }
-        #osc-chart { flex: 1.5; min-height: 80px; }
-        
-        .chart-label {
+        .chart-container { position: relative; width: 100%; height: 100%; }
+        .chart-overlay {
             position: absolute;
-            top: 12px;
-            left: 16px;
-            z-index: 10;
+            top: 20px;
+            left: 20px;
+            z-index: 5;
             display: flex;
-            gap: 16px;
-            font-size: 11px;
+            gap: 15px;
+            font-size: 12px;
+            font-family: 'JetBrains Mono', monospace;
             pointer-events: none;
         }
+        .legend-item { display: flex; align-items: center; gap: 6px; color: var(--text-dim); }
+        .legend-dot { width: 8px; height: 8px; border-radius: 2px; }
         
-        .chart-label span {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
-        
-        .chart-label .dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-        }
-        
-        .loading-overlay {
+        .loader-screen {
             position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(10, 10, 15, 0.95);
+            inset: 0;
+            background: var(--bg-dark);
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            z-index: 1000;
-            transition: opacity 0.5s ease;
-        }
-        
-        .loading-overlay.hidden {
-            opacity: 0;
-            pointer-events: none;
-        }
-        
-        .loader {
-            width: 50px;
-            height: 50px;
-            border: 3px solid rgba(0, 255, 136, 0.1);
-            border-top-color: #00ff88;
+            z-index: 50;
+            transition: opacity 0.3s;
+        }
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 3px solid rgba(41, 98, 255, 0.2);
+            border-top-color: var(--accent);
             border-radius: 50%;
             animation: spin 1s linear infinite;
         }
+        @keyframes spin { to { transform: rotate(360deg); } }
+        @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
         
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-        
-        .loading-text {
-            margin-top: 20px;
-            font-size: 14px;
-            color: #666;
-        }
-        
-        .prediction-badge {
-            position: absolute;
-            top: 12px;
-            right: 16px;
-            background: rgba(191, 90, 242, 0.15);
-            border: 1px solid rgba(191, 90, 242, 0.3);
+        .pred-pill {
+            background: linear-gradient(135deg, rgba(140, 0, 255, 0.2), rgba(41, 98, 255, 0.2));
+            border: 1px solid rgba(140, 0, 255, 0.4);
+            color: #d09bff;
             padding: 4px 10px;
             border-radius: 12px;
-            font-size: 10px;
-            color: #bf5af2;
-            z-index: 10;
+            font-size: 11px;
+            font-weight: 600;
         }
     </style>
 </head>
 <body>
     <div class="header">
-        <div class="logo-section">
-            <div class="logo">QuantAI</div>
-            <div class="symbol-badge">BTC/USD</div>
-        </div>
-        
-        <div class="stats-row">
-            <div class="stat-item">
-                <span class="stat-label">Price</span>
-                <span id="price" class="stat-value">$--</span>
-            </div>
-            <div class="stat-item">
-                <span class="stat-label">Change</span>
-                <span id="change" class="stat-value neutral">--%</span>
-            </div>
-            <div class="stat-item">
-                <span class="stat-label">RSI</span>
-                <span id="rsi" class="stat-value">--</span>
-            </div>
-            <div class="stat-item">
-                <span class="stat-label">ATR</span>
-                <span id="atr" class="stat-value">--</span>
-            </div>
+        <div class="brand">
+            <div style="width: 24px; height: 24px; background: var(--accent); border-radius: 6px;"></div>
+            <span class="brand-text">QuantAI Terminal</span>
         </div>
-        
-        <div class="status-indicator">
-            <div id="status-dot" class="status-dot"></div>
-            <span id="status-text">Connecting...</span>
+        <div class="live-badge">
+            <div id="status-dot" class="live-dot"></div>
+            <span id="status-text">CONNECTING</span>
         </div>
     </div>
     
-    <div class="indicator-panel">
-        <div class="indicator-group">
-            <span class="indicator-label">EMA 20</span>
-            <span id="ema-val" class="indicator-value" style="color: #2962FF">--</span>
-        </div>
-        <div class="indicator-group">
-            <span class="indicator-label">BB Upper</span>
-            <span id="bb-upper" class="indicator-value" style="color: #26a69a">--</span>
-        </div>
-        <div class="indicator-group">
-            <span class="indicator-label">BB Lower</span>
-            <span id="bb-lower" class="indicator-value" style="color: #ef5350">--</span>
-        </div>
-        <div class="indicator-group">
-            <span class="indicator-label">MACD</span>
-            <span id="macd-val" class="indicator-value">--</span>
-        </div>
-        <div class="indicator-group">
-            <span class="indicator-label">Stoch K</span>
-            <span id="stoch-val" class="indicator-value" style="color: #ff9800">--</span>
-        </div>
-        <div class="indicator-group">
-            <span class="indicator-label">Volume</span>
-            <span id="vol-val" class="indicator-value" style="color: #888">--</span>
-        </div>
-    </div>
-
-    <div class="charts-container">
-        <div class="loading-overlay" id="loading">
-            <div class="loader"></div>
-            <div class="loading-text">Loading market data...</div>
-        </div>
-        
-        <div id="main-chart" class="chart-wrapper">
-            <div class="chart-label">
-                <span><div class="dot" style="background: #00ff88"></div>Price</span>
-                <span><div class="dot" style="background: #2962FF"></div>EMA 20</span>
-                <span><div class="dot" style="background: #26a69a; opacity: 0.5"></div>Bollinger</span>
+    <div class="dashboard-grid">
+        <div class="sidebar">
+            <div class="stat-card">
+                <div class="stat-label">Market Price</div>
+                <div id="price" class="stat-value">--</div>
             </div>
-            <div class="prediction-badge">AI Forecast: 100 candles</div>
-        </div>
-        
-        <div id="volume-chart" class="chart-wrapper">
-            <div class="chart-label">
-                <span><div class="dot" style="background: #5c6bc0"></div>Volume</span>
+            <div class="stat-card">
+                <div class="stat-label">24h Change</div>
+                <div id="change" class="stat-value">--</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-label">RSI (14)</div>
+                <div id="rsi" class="stat-value">--</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-label">ATR Volatility</div>
+                <div id="atr" class="stat-value">--</div>
+            </div>
+             <div class="stat-card">
+                <div class="stat-label">AI Model Status</div>
+                <div id="model-status" style="font-size: 13px; color: var(--accent);">Active</div>
             </div>
         </div>
         
-        <div id="osc-chart" class="chart-wrapper">
-            <div class="chart-label">
-                <span><div class="dot" style="background: #9C27B0"></div>RSI</span>
-                <span><div class="dot" style="background: #26a69a"></div>MACD Hist</span>
+        <div class="main-view">
+            <div id="main-chart" class="chart-container">
+                <div class="loader-screen" id="loader">
+                    <div class="spinner"></div>
+                    <div style="margin-top:15px; font-size:12px; color: #666;">PROCESSING MARKET DATA</div>
+                </div>
+                <div class="chart-overlay">
+                    <div class="legend-item"><div class="legend-dot" style="background: #00e396"></div>Price</div>
+                    <div class="legend-item"><div class="legend-dot" style="background: #2962ff"></div>EMA 20</div>
+                    <div class="legend-item"><div class="legend-dot" style="background: #d09bff"></div>AI Forecast</div>
+                    <div class="pred-pill">RF MODEL V2</div>
+                </div>
             </div>
+            <div id="sub-chart" class="chart-container" style="border-top: 1px solid var(--border);"></div>
         </div>
     </div>
 
 <script>
-document.addEventListener('DOMContentLoaded', () => {
-    const mainEl = document.getElementById('main-chart');
-    const volEl = document.getElementById('volume-chart');
-    const oscEl = document.getElementById('osc-chart');
-    const loading = document.getElementById('loading');
-
-    const chartOptions = {
-        layout: {
-            background: { type: 'solid', color: 'transparent' },
-            textColor: '#666'
-        },
-        grid: {
-            vertLines: { color: 'rgba(255,255,255,0.03)' },
-            horzLines: { color: 'rgba(255,255,255,0.03)' }
-        },
-        timeScale: {
-            timeVisible: true,
-            secondsVisible: false,
-            borderColor: 'rgba(255,255,255,0.1)'
-        },
-        rightPriceScale: {
-            borderColor: 'rgba(255,255,255,0.1)'
-        },
-        crosshair: {
-            mode: LightweightCharts.CrosshairMode.Normal,
-            vertLine: {
-                color: 'rgba(255,255,255,0.2)',
-                labelBackgroundColor: '#1a1a2e'
-            },
-            horzLine: {
-                color: 'rgba(255,255,255,0.2)',
-                labelBackgroundColor: '#1a1a2e'
-            }
-        }
+    const upColor = '#00e396';
+    const downColor = '#ff004c';
+    const bgDark = '#0b0e11';
+    
+    const mainChartEl = document.getElementById('main-chart');
+    const subChartEl = document.getElementById('sub-chart');
+    
+    const chartOpts = {
+        layout: { background: { color: bgDark }, textColor: '#94a3b8' },
+        grid: { vertLines: { color: 'rgba(255,255,255,0.04)' }, horzLines: { color: 'rgba(255,255,255,0.04)' } },
+        timeScale: { borderColor: 'rgba(255,255,255,0.1)', timeVisible: true },
+        rightPriceScale: { borderColor: 'rgba(255,255,255,0.1)' },
+        crosshair: { mode: LightweightCharts.CrosshairMode.Normal }
     };
-
-    const mainChart = LightweightCharts.createChart(mainEl, chartOptions);
-    const volChart = LightweightCharts.createChart(volEl, chartOptions);
-    const oscChart = LightweightCharts.createChart(oscEl, chartOptions);
-
-    const candles = mainChart.addCandlestickSeries({
-        upColor: '#00ff88',
-        downColor: '#ff4757',
-        borderUpColor: '#00ff88',
-        borderDownColor: '#ff4757',
-        wickUpColor: '#00ff88',
-        wickDownColor: '#ff4757'
-    });
-
-    const ema = mainChart.addLineSeries({
-        color: '#2962FF',
-        lineWidth: 2,
-        crosshairMarkerVisible: false
-    });
-
-    const bbUpper = mainChart.addLineSeries({
-        color: 'rgba(38, 166, 154, 0.4)',
-        lineWidth: 1,
-        crosshairMarkerVisible: false
-    });
-
-    const bbLower = mainChart.addLineSeries({
-        color: 'rgba(239, 83, 80, 0.4)',
-        lineWidth: 1,
-        crosshairMarkerVisible: false
-    });
-
-    const predLine = mainChart.addLineSeries({
-        color: '#bf5af2',
-        lineWidth: 2,
-        lineStyle: LightweightCharts.LineStyle.Dashed,
-        crosshairMarkerVisible: false
-    });
-
-    const volumeSeries = volChart.addHistogramSeries({
-        priceFormat: { type: 'volume' },
-        priceScaleId: ''
-    });
-    volChart.priceScale('').applyOptions({
-        scaleMargins: { top: 0.1, bottom: 0 }
-    });
-
-    const rsi = oscChart.addLineSeries({
-        color: '#9C27B0',
-        lineWidth: 2,
-        priceScaleId: 'rsi'
-    });
-    oscChart.priceScale('rsi').applyOptions({
-        scaleMargins: { top: 0.1, bottom: 0.1 }
-    });
-
-    const macdHist = oscChart.addHistogramSeries({
-        priceScaleId: 'macd'
-    });
-    oscChart.priceScale('macd').applyOptions({
-        scaleMargins: { top: 0.6, bottom: 0 }
+    
+    const chart = LightweightCharts.createChart(mainChartEl, chartOpts);
+    const subChart = LightweightCharts.createChart(subChartEl, chartOpts);
+    
+    const candles = chart.addCandlestickSeries({
+        upColor: bgDark, downColor: downColor, borderUpColor: upColor, borderDownColor: downColor,
+        wickUpColor: upColor, wickDownColor: downColor
     });
-
-    function resizeCharts() {
-        const mainH = mainEl.clientHeight;
-        const volH = volEl.clientHeight;
-        const oscH = oscEl.clientHeight;
-        const w = mainEl.clientWidth;
-
-        mainChart.applyOptions({ width: w, height: mainH });
-        volChart.applyOptions({ width: w, height: volH });
-        oscChart.applyOptions({ width: w, height: oscH });
-    }
-
-    new ResizeObserver(resizeCharts).observe(document.body);
-    setTimeout(resizeCharts, 100);
-
-    function syncTimeScales(charts) {
-        charts.forEach((chart, i) => {
-            chart.timeScale().subscribeVisibleLogicalRangeChange(range => {
-                if (range) {
-                    charts.forEach((c, j) => {
-                        if (i !== j) c.timeScale().setVisibleLogicalRange(range);
-                    });
-                }
-            });
-        });
-    }
-    syncTimeScales([mainChart, volChart, oscChart]);
-
-    function updateStats(stats, lastData) {
-        if (stats) {
-            document.getElementById('price').textContent = '$' + stats.price.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
-            
-            const changeEl = document.getElementById('change');
-            changeEl.textContent = (stats.change >= 0 ? '+' : '') + stats.change + '%';
-            changeEl.className = 'stat-value ' + (stats.change > 0 ? 'positive' : stats.change < 0 ? 'negative' : 'neutral');
-            
-            const rsiVal = stats.rsi;
-            const rsiEl = document.getElementById('rsi');
-            rsiEl.textContent = rsiVal;
-            rsiEl.className = 'stat-value ' + (rsiVal > 70 ? 'negative' : rsiVal < 30 ? 'positive' : 'neutral');
-            
-            document.getElementById('atr').textContent = stats.atr;
-        }
-        
-        if (lastData) {
-            document.getElementById('ema-val').textContent = lastData.ema ? lastData.ema.toFixed(2) : '--';
-            document.getElementById('bb-upper').textContent = lastData.bb_upper ? lastData.bb_upper.toFixed(2) : '--';
-            document.getElementById('bb-lower').textContent = lastData.bb_lower ? lastData.bb_lower.toFixed(2) : '--';
-            
-            const macdVal = lastData.macd;
-            const macdEl = document.getElementById('macd-val');
-            if (macdVal !== null && macdVal !== undefined) {
-                macdEl.textContent = macdVal.toFixed(2);
-                macdEl.style.color = macdVal >= 0 ? '#26a69a' : '#ef5350';
-            }
-            
-            document.getElementById('stoch-val').textContent = lastData.stoch_k ? lastData.stoch_k.toFixed(1) : '--';
-            document.getElementById('vol-val').textContent = lastData.volume ? lastData.volume.toFixed(2) : '--';
-        }
-    }
-
-    function setStatus(connected) {
-        const dot = document.getElementById('status-dot');
-        const text = document.getElementById('status-text');
-        if (connected) {
-            dot.className = 'status-dot';
-            text.textContent = 'Live';
-        } else {
-            dot.className = 'status-dot disconnected';
-            text.textContent = 'Reconnecting...';
-        }
+    
+    const emaSeries = chart.addLineSeries({ color: '#2962ff', lineWidth: 2, crosshairMarkerVisible: false });
+    const predSeries = chart.addLineSeries({ color: '#d09bff', lineWidth: 2, lineStyle: 2, crosshairMarkerVisible: false });
+    
+    const rsiSeries = subChart.addLineSeries({ color: '#f9a825', lineWidth: 2, priceScaleId: 'right' });
+    const rsiLine70 = subChart.createPriceLine({ price: 70, color: 'rgba(255,255,255,0.3)', lineWidth: 1, lineStyle: 2, axisLabelVisible: false });
+    const rsiLine30 = subChart.createPriceLine({ price: 30, color: 'rgba(255,255,255,0.3)', lineWidth: 1, lineStyle: 2, axisLabelVisible: false });
+    
+    function resize() {
+        chart.applyOptions({ width: mainChartEl.clientWidth, height: mainChartEl.clientHeight });
+        subChart.applyOptions({ width: subChartEl.clientWidth, height: subChartEl.clientHeight });
     }
-
-    let hasData = false;
-
+    window.onresize = resize;
+    
+    chart.timeScale().subscribeVisibleLogicalRangeChange(range => subChart.timeScale().setVisibleLogicalRange(range));
+    subChart.timeScale().subscribeVisibleLogicalRangeChange(range => chart.timeScale().setVisibleLogicalRange(range));
+    
+    let isLoaded = false;
+    
     function connect() {
-        const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-        const ws = new WebSocket(protocol + '://' + location.host + '/ws');
+        const ws = new WebSocket((location.protocol === 'https:' ? 'wss://' : 'ws://') + location.host + '/ws');
         
-        ws.onopen = () => setStatus(true);
+        ws.onopen = () => {
+            document.getElementById('status-dot').className = 'live-dot';
+            document.getElementById('status-text').innerText = 'LIVE FEED';
+        };
+        
+        ws.onclose = () => {
+            document.getElementById('status-dot').className = 'live-dot offline';
+            document.getElementById('status-text').innerText = 'RECONNECTING';
+            setTimeout(connect, 2000);
+        };
         
-        ws.onmessage = (e) => {
+        ws.onmessage = (event) => {
             try {
-                const payload = JSON.parse(e.data);
-                if (!payload.data || payload.data.length === 0) return;
+                const msg = JSON.parse(event.data);
+                if(msg.error) return;
                 
-                const d = payload.data;
+                const data = msg.data;
+                const last = data[data.length - 1];
                 
-                const safeMap = (arr, key) => arr
-                    .filter(x => x && x.time && x[key] !== null && x[key] !== undefined && !isNaN(x[key]))
-                    .map(x => ({ time: x.time, value: x[key] }));
-
-                const candleData = d
-                    .filter(x => x && x.time && x.open && x.high && x.low && x.close)
-                    .map(x => ({
-                        time: x.time,
-                        open: x.open,
-                        high: x.high,
-                        low: x.low,
-                        close: x.close
-                    }));
-
-                if (candleData.length > 0) {
-                    candles.setData(candleData);
-                    
-                    const emaData = safeMap(d, 'ema');
-                    if (emaData.length > 0) ema.setData(emaData);
-                    
-                    const bbUpperData = safeMap(d, 'bb_upper');
-                    if (bbUpperData.length > 0) bbUpper.setData(bbUpperData);
-                    
-                    const bbLowerData = safeMap(d, 'bb_lower');
-                    if (bbLowerData.length > 0) bbLower.setData(bbLowerData);
-                    
-                    const volData = d
-                        .filter(x => x && x.time && x.volume !== null && x.volume !== undefined)
-                        .map(x => ({
-                            time: x.time,
-                            value: x.volume,
-                            color: x.close >= x.open ? 'rgba(0, 255, 136, 0.5)' : 'rgba(255, 71, 87, 0.5)'
-                        }));
-                    if (volData.length > 0) volumeSeries.setData(volData);
-                    
-                    const rsiData = safeMap(d, 'rsi');
-                    if (rsiData.length > 0) rsi.setData(rsiData);
-                    
-                    const macdData = d
-                        .filter(x => x && x.time && x.macd_hist !== null && x.macd_hist !== undefined && !isNaN(x.macd_hist))
-                        .map(x => ({
-                            time: x.time,
-                            value: x.macd_hist,
-                            color: x.macd_hist >= 0 ? '#26a69a' : '#ef5350'
-                        }));
-                    if (macdData.length > 0) macdHist.setData(macdData);
-                    
-                    if (payload.prediction && payload.prediction.length > 0) {
-                        const lastCandle = candleData[candleData.length - 1];
-                        const predData = [
-                            { time: lastCandle.time, value: lastCandle.close },
-                            ...payload.prediction.filter(p => p && p.time && p.value !== null && !isNaN(p.value))
-                        ];
-                        predLine.setData(predData);
-                    }
-                    
-                    updateStats(payload.stats, d[d.length - 1]);
-                    
-                    if (!hasData) {
-                        hasData = true;
-                        loading.classList.add('hidden');
-                        mainChart.timeScale().fitContent();
-                    }
+                const candleData = data.map(d => ({
+                    time: d.time, open: d.open, high: d.high, low: d.low, close: d.close
+                }));
+                
+                candles.setData(candleData);
+                
+                const emaData = data.filter(d => d.ema).map(d => ({ time: d.time, value: d.ema }));
+                emaSeries.setData(emaData);
+                
+                const rsiData = data.filter(d => d.rsi).map(d => ({ time: d.time, value: d.rsi }));
+                rsiSeries.setData(rsiData);
+                
+                if (msg.prediction && msg.prediction.length) {
+                    const predPoints = [{ time: last.time, value: last.close }, ...msg.prediction];
+                    predSeries.setData(predPoints);
                 }
-            } catch (err) {
-                console.error("Chart error:", err);
+                
+                document.getElementById('price').innerText = '$' + msg.stats.price.toLocaleString(undefined, {minimumFractionDigits: 2});
+                
+                const chg = msg.stats.change;
+                const chgEl = document.getElementById('change');
+                chgEl.innerText = (chg > 0 ? '+' : '') + chg + '%';
+                chgEl.className = 'stat-value ' + (chg >= 0 ? 'up' : 'down');
+                
+                document.getElementById('rsi').innerText = msg.stats.rsi;
+                document.getElementById('atr').innerText = msg.stats.atr;
+                
+                if (!isLoaded) {
+                    isLoaded = true;
+                    document.getElementById('loader').style.opacity = '0';
+                    setTimeout(() => document.getElementById('loader').remove(), 300);
+                    chart.timeScale().fitContent();
+                }
+            } catch (e) {
+                console.error(e);
             }
         };
-        
-        ws.onclose = () => {
-            setStatus(false);
-            setTimeout(connect, 2000);
-        };
-        
-        ws.onerror = () => ws.close();
     }
     
     connect();
-});
+    setTimeout(resize, 100);
 </script>
 </body>
 </html>
@@ -770,7 +468,7 @@ async def fetch_initial_data():
     try:
         async with aiohttp.ClientSession() as session:
             url = "https://api.kraken.com/0/public/OHLC?pair=XBTUSD&interval=1"
-            async with session.get(url, timeout=aiohttp.ClientTimeout(total=30)) as response:
+            async with session.get(url, timeout=30) as response:
                 if response.status == 200:
                     data = await response.json()
                     if 'result' in data:
@@ -778,131 +476,83 @@ async def fetch_initial_data():
                             if key != 'last':
                                 raw = data['result'][key]
                                 market_state['ohlc_history'] = [
-                                    {
-                                        'time': int(c[0]),
-                                        'open': float(c[1]),
-                                        'high': float(c[2]),
-                                        'low': float(c[3]),
-                                        'close': float(c[4]),
-                                        'volume': float(c[6])
-                                    }
+                                    {'time': int(c[0]), 'open': float(c[1]), 'high': float(c[2]), 'low': float(c[3]), 'close': float(c[4]), 'volume': float(c[6])}
                                     for c in raw[-720:]
                                 ]
                                 market_state['ready'] = True
-                                logging.info(f"Loaded {len(market_state['ohlc_history'])} initial candles")
-                                return True
-    except Exception as e:
-        logging.error(f"Initial data fetch error: {e}")
-    return False
+    except Exception:
+        pass
 
-async def kraken_rest_worker():
+async def worker_kraken():
     await fetch_initial_data()
-    
     while True:
         try:
             async with aiohttp.ClientSession() as session:
                 url = "https://api.kraken.com/0/public/OHLC?pair=XBTUSD&interval=1"
-                async with session.get(url, timeout=aiohttp.ClientTimeout(total=30)) as response:
+                async with session.get(url, timeout=10) as response:
                     if response.status == 200:
                         data = await response.json()
-                        if 'result' in data:
-                            for key in data['result']:
-                                if key != 'last':
-                                    raw = data['result'][key]
-                                    new_candles = [
-                                        {
-                                            'time': int(c[0]),
-                                            'open': float(c[1]),
-                                            'high': float(c[2]),
-                                            'low': float(c[3]),
-                                            'close': float(c[4]),
-                                            'volume': float(c[6])
-                                        }
-                                        for c in raw[-10:]
-                                    ]
-                                    
-                                    if market_state['ohlc_history']:
-                                        existing_times = {c['time'] for c in market_state['ohlc_history']}
-                                        for nc in new_candles:
-                                            if nc['time'] in existing_times:
-                                                for i, ec in enumerate(market_state['ohlc_history']):
-                                                    if ec['time'] == nc['time']:
-                                                        market_state['ohlc_history'][i] = nc
-                                                        break
-                                            else:
-                                                market_state['ohlc_history'].append(nc)
-                                        
-                                        market_state['ohlc_history'].sort(key=lambda x: x['time'])
-                                        
-                                        if len(market_state['ohlc_history']) > 800:
-                                            market_state['ohlc_history'] = market_state['ohlc_history'][-800:]
-                                    
-                                    market_state['ready'] = True
-                                    break
-        except Exception as e:
-            logging.warning(f"REST update error: {e}")
-        
-        await asyncio.sleep(5)
+                        for key in data['result']:
+                            if key != 'last':
+                                raw = data['result'][key]
+                                new_candles = [
+                                    {'time': int(c[0]), 'open': float(c[1]), 'high': float(c[2]), 'low': float(c[3]), 'close': float(c[4]), 'volume': float(c[6])}
+                                    for c in raw[-5:]
+                                ]
+                                current_times = {c['time'] for c in market_state['ohlc_history']}
+                                for c in new_candles:
+                                    if c['time'] not in current_times:
+                                        market_state['ohlc_history'].append(c)
+                                    else:
+                                        for i, exist in enumerate(market_state['ohlc_history']):
+                                            if exist['time'] == c['time']:
+                                                market_state['ohlc_history'][i] = c
+                                market_state['ohlc_history'] = market_state['ohlc_history'][-800:]
+                                market_state['ready'] = True
+        except Exception:
+            pass
+        await asyncio.sleep(10)
 
-async def broadcast_worker():
+async def worker_broadcast():
     while True:
         if connected_clients and market_state['ready']:
             payload = process_market_data()
             if payload and "data" in payload:
                 msg = json.dumps(payload)
-                disconnected = set()
-                for ws in connected_clients:
+                for ws in list(connected_clients):
                     try:
                         await ws.send_str(msg)
                     except Exception:
-                        disconnected.add(ws)
-                connected_clients.difference_update(disconnected)
+                        connected_clients.discard(ws)
         await asyncio.sleep(BROADCAST_RATE)
 
-async def websocket_handler(request):
+async def ws_handler(request):
     ws = web.WebSocketResponse()
     await ws.prepare(request)
     connected_clients.add(ws)
-    logging.info(f"Client connected. Total: {len(connected_clients)}")
     try:
-        async for msg in ws:
-            pass
+        async for msg in ws: pass
     finally:
         connected_clients.discard(ws)
-        logging.info(f"Client disconnected. Total: {len(connected_clients)}")
     return ws
 
-async def handle_index(request):
+async def idx_handler(request):
     return web.Response(text=HTML_PAGE, content_type='text/html')
 
-async def handle_health(request):
-    return web.json_response({
-        "status": "ok",
-        "ready": market_state['ready'],
-        "candles": len(market_state['ohlc_history']),
-        "clients": len(connected_clients)
-    })
-
 async def main():
     app = web.Application()
-    app.router.add_get('/', handle_index)
-    app.router.add_get('/ws', websocket_handler)
-    app.router.add_get('/health', handle_health)
-    
-    asyncio.create_task(kraken_rest_worker())
-    asyncio.create_task(broadcast_worker())
-    
+    app.add_routes([web.get('/', idx_handler), web.get('/ws', ws_handler)])
+    asyncio.create_task(worker_kraken())
+    asyncio.create_task(worker_broadcast())
     runner = web.AppRunner(app)
     await runner.setup()
     site = web.TCPSite(runner, '0.0.0.0', PORT)
     await site.start()
-    
-    logging.info(f"Server running at http://localhost:{PORT}")
-    
+    logging.info(f"http://localhost:{PORT}")
     await asyncio.Event().wait()
 
 if __name__ == "__main__":
     try:
         asyncio.run(main())
     except KeyboardInterrupt:
-        logging.info("Shutting down...")
+        pass