Spaces:

Alvin3y1
/

test

Sleeping

App Files Files Community

Alvin3y1 commited on 13 days ago

Commit

deb82b2

verified ·

1 Parent(s): e5d67bc

Update app.py

Browse files

Files changed (1) hide show

app.py +357 -193

app.py CHANGED Viewed

@@ -3,14 +3,13 @@ import json
 import logging
 import time
 import bisect
-import random
 from aiohttp import web
 import websockets
 # --- Configuration ---
 SYMBOL_KRAKEN = "BTC/USD"
 PORT = 7860
-HISTORY_LENGTH = 300
 # --- Logging ---
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
@@ -19,13 +18,13 @@ logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
 market_state = {
     "bids": {},
     "asks": {},
-    "history": [],
     "current_mid": 0.0,
     "prev_mid": 0.0,
     "ready": False
 }
-# --- AI Logic Helper (Prediction & S/R) ---
 def analyze_structure(diff_x, diff_y, current_mid):
     """
     Analyzes the Net Liquidity Curve to find Support, Resistance, and Projected Trend.
@@ -33,18 +32,16 @@ def analyze_structure(diff_x, diff_y, current_mid):
     if not diff_y or len(diff_y) < 5:
         return None
-    # 1. Momentum Projection (Weighted average of the whole book)
-    # If the book is net positive, price wants to go up.
-    net_total = diff_y[-1] # Cumulative sum at max depth
-    # Scaling factor: heavily damped to prevent unrealistic predictions
-    momentum_shift = net_total * 0.5
     projected_price = current_mid + momentum_shift
-    # 2. Find Structural Reversals (Zero Crossings)
     support_level = None
     resistance_level = None
-    # We look at the 'Near' book (first 50% of depth) for immediate reversal levels
     scan_limit = len(diff_y) // 2
     for i in range(1, scan_limit):
@@ -52,15 +49,11 @@ def analyze_structure(diff_x, diff_y, current_mid):
         curr_val = diff_y[i]
         dist = diff_x[i]
-        # Case A: Positive -> Negative (The "Ceiling")
-        # Buyers were in control, but suddenly Sellers take over at this distance.
-        # This implies a Resistance Wall at (Mid + Distance).
         if prev_val > 0 and curr_val < 0 and resistance_level is None:
             resistance_level = current_mid + dist
-        # Case B: Negative -> Positive (The "Floor")
-        # Sellers were in control, but suddenly Buyers take over at this distance.
-        # This implies a Support Wall at (Mid - Distance).
         if prev_val < 0 and curr_val > 0 and support_level is None:
             support_level = current_mid - dist
@@ -71,214 +64,382 @@ def analyze_structure(diff_x, diff_y, current_mid):
         "net_score": net_total
     }
-# --- HTML Frontend ---
 HTML_PAGE = f"""
 <!DOCTYPE html>
-<html>
 <head>
-    <title>BTC-USD Predictive Dashboard</title>
     <script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
     <style>
-        body {{ margin: 0; padding: 0; background-color: #0e0e0e; color: #ccc; font-family: 'Courier New', monospace; overflow: hidden; }}
-        #container {{ display: flex; flex-direction: column; height: 100vh; width: 100vw; }}
-        #row-top {{ flex: 1; display: flex; width: 100%; border-bottom: 1px solid #333; }}
-        #row-bot {{ flex: 1; display: flex; width: 100%; }}
-        .col {{ width: 50%; height: 100%; border-right: 1px solid #333; position: relative; }}
-        .col-ai {{ width: 50%; height: 100%; background-color: #050505; display: flex; flex-direction: column; padding: 10px; overflow-y: auto; }}
-        .terminal-header {{ color: #00bcd4; font-weight: bold; border-bottom: 1px dashed #333; padding-bottom: 5px; margin-bottom: 10px; }}
-        .log-entry {{ margin-bottom: 8px; font-size: 13px; border-left: 3px solid transparent; padding-left: 8px; }}
-        .log-time {{ color: #555; font-size: 11px; margin-right: 8px; }}
-        .bullish {{ border-left-color: #00e676; color: #e8f5e9; }}
-        .bearish {{ border-left-color: #ff1744; color: #ffebee; }}
-        .neutral {{ border-left-color: #999; color: #ccc; }}
-        .chart {{ width: 100%; height: 100%; }}
-        #status {{ position: absolute; top: 10px; left: 60px; z-index: 100; font-size: 14px; background: rgba(0,0,0,0.8); padding: 5px 10px; border-radius: 4px; border: 1px solid #333; }}
-        .green {{ color: #00e676; }}
-        .red {{ color: #ff1744; }}
     </style>
 </head>
 <body>
-    <div id="status">Initializing AI Model...</div>
-    <div id="container">
-        <!-- ROW 1 -->
-        <div id="row-top">
-            <div class="col">
-                <!-- PRICE + PREDICTION -->
-                <div id="price-chart" class="chart"></div>
-            </div>
-            <div class="col">
-                <div id="vol-chart" class="chart"></div>
             </div>
         </div>
-        <!-- ROW 2 -->
-        <div id="row-bot">
-            <div class="col">
-                <div id="diff-chart" class="chart"></div>
             </div>
-            <div class="col-ai">
-                <div class="terminal-header">> PREDICTIVE ANALYTICS ENGINE</div>
-                <div id="terminal-logs"></div>
             </div>
         </div>
     </div>
     <script>
-        const priceDiv = document.getElementById('price-chart');
-        const volDiv = document.getElementById('vol-chart');
-        const diffDiv = document.getElementById('diff-chart');
-        const termLogs = document.getElementById('terminal-logs');
-        const statusDiv = document.getElementById('status');
-        let initPrice = false, initVol = false, initDiff = false;
-        let lastLogText = "";
-        const commonConfig = {{ responsive: true, displayModeBar: false }};
-        const commonLayout = {{
-            paper_bgcolor: '#0e0e0e',
-            plot_bgcolor: '#0e0e0e',
-            font: {{ color: '#aaa', family: 'Courier New' }},
-            margin: {{ t: 30, b: 25, l: 45, r: 20 }},
             showlegend: false,
-            xaxis: {{ gridcolor: '#222' }},
-            yaxis: {{ gridcolor: '#222' }}
         }};
-        function addLog(text, type) {{
-            if (text === lastLogText) return;
-            lastLogText = text;
             const div = document.createElement('div');
-            div.className = `log-entry ${{type}}`;
-            div.innerHTML = `<span class="log-time">${{new Date().toLocaleTimeString()}}</span> ${{text}}`;
-            termLogs.prepend(div);
-            if (termLogs.children.length > 15) termLogs.removeChild(termLogs.lastChild);
         }}
-        async function updateCharts() {{
             try {{
                 const res = await fetch('/data');
                 const data = await res.json();
-                if (data.error) {{
-                    statusDiv.innerHTML = "Waiting for data...";
-                    return;
-                }}
-                statusDiv.innerHTML = `Mid: <span class="${{data.mid >= data.prev_mid ? 'green' : 'red'}}">$${{data.mid.toLocaleString(undefined, {{minimumFractionDigits: 2}})}}</span>`;
-                // --- 1. PRICE CHART WITH PREDICTION & S/R LINES ---
-                // Historical Price Trace
-                const historyX = data.history.map(d => new Date(d.t*1000));
-                const historyY = data.history.map(d => d.p);
-                const tracePrice = {{ x: historyX, y: historyY, type: 'scatter', mode:'lines', line: {{color: '#29b6f6', width: 2}}, name: 'Price' }};
-                // Future Projection Trace
-                let traceProj = {{}};
-                const lastTime = historyX[historyX.length-1];
-                if (data.analysis && lastTime) {{
-                    const futureTime = new Date(lastTime.getTime() + 60000); // +1 min
-                    traceProj = {{
-                        x: [lastTime, futureTime],
-                        y: [historyY[historyY.length-1], data.analysis.projected],
-                        type: 'scatter', mode: 'lines',
-                        line: {{color: '#ff9800', width: 2, dash: 'dot'}},
-                        name: 'Forecast'
-                    }};
-                }}
-                // Support & Resistance Shapes
-                const shapes = [];
-                let logMsg = "";
-                let logType = "neutral";
                 if (data.analysis) {{
-                    // Support Line (Green)
-                    if (data.analysis.support) {{
-                        shapes.push({{
-                            type: 'line', x0: historyX[0], x1: lastTime,
-                            y0: data.analysis.support, y1: data.analysis.support,
-                            line: {{color: '#00e676', width: 1, dash: 'dash'}}
-                        }});
-                        // Add Annotation via Layout? keeping it simple with shapes for now
-                    }}
-                    // Resistance Line (Red)
-                    if (data.analysis.resistance) {{
-                        shapes.push({{
-                            type: 'line', x0: historyX[0], x1: lastTime,
-                            y0: data.analysis.resistance, y1: data.analysis.resistance,
-                            line: {{color: '#ff1744', width: 1, dash: 'dash'}}
-                        }});
                     }}
-                    // AI Commentary Logic based on Prediction
-                    const net = data.analysis.net_score;
-                    if (data.analysis.support && !data.analysis.resistance) {{
-                        logMsg = `🧱 <b>FLOOR DETECTED:</b> Strong Support at $${{data.analysis.support.toFixed(0)}}. Price expected to bounce.`;
-                        logType = "bullish";
-                    }} else if (!data.analysis.support && data.analysis.resistance) {{
-                        logMsg = `🧱 <b>CEILING DETECTED:</b> Resistance at $${{data.analysis.resistance.toFixed(0)}}. Upside capped.`;
-                        logType = "bearish";
-                    }} else if (net > 30) {{
-                        logMsg = `🚀 <b>MOMENTUM:</b> Liquidity is purely Bullish. Target: $${{data.analysis.projected.toFixed(0)}}`;
-                        logType = "bullish";
-                    }} else if (net < -30) {{
-                        logMsg = `📉 <b>MOMENTUM:</b> Liquidity is purely Bearish. Target: $${{data.analysis.projected.toFixed(0)}}`;
-                        logType = "bearish";
                     }} else {{
-                        logMsg = `⚖️ <b>RANGE BOUND:</b> Price stuck between flows.`;
                     }}
-                }}
-                if (logMsg) addLog(logMsg, logType);
-                const priceLayout = {{
-                    ...commonLayout,
-                    title: '<b>Price Analysis & Forecast</b>',
-                    xaxis: {{type:'date', gridcolor:'#222'}},
-                    shapes: shapes
-                }};
-                if (!initPrice) {{ Plotly.newPlot(priceDiv, [tracePrice, traceProj], priceLayout, commonConfig); initPrice = true; }}
-                else {{ Plotly.react(priceDiv, [tracePrice, traceProj], priceLayout, commonConfig); }}
-                // --- 2. VOLUME CHART ---
-                const tracesVol = [
-                    {{ x: data.vol.dist_bids, y: data.vol.vol_bids, type: 'scatter', name: 'Bids', line: {{color: '#00e676'}} }},
-                    {{ x: data.vol.dist_asks, y: data.vol.vol_asks, type: 'scatter', name: 'Ask', line: {{color: '#ff1744'}} }}
-                ];
-                if (!initVol) {{ Plotly.newPlot(volDiv, tracesVol, {{ ...commonLayout, title: '<b>Cumulative Volume</b>', xaxis: {{title:'Distance ($)'}} }}, commonConfig); initVol = true; }}
-                else {{ Plotly.react(volDiv, tracesVol, {{ ...commonLayout, title: '<b>Cumulative Volume</b>', xaxis: {{title:'Distance ($)'}} }}, commonConfig); }}
-                // --- 3. NET DIFFERENCE ---
-                const traceDiff = {{ x: data.diff.x, y: data.diff.y, type: 'scatter', mode: 'lines', fill: 'tozeroy', line: {{color: '#e040fb', width: 2}} }};
-                // Add Zero Line
-                const diffLayout = {{
-                    ...commonLayout,
-                    title: '<b>Net Liquidity (Bids - Asks)</b>',
-                    xaxis: {{title:'Distance ($)'}},
-                    shapes: [{{ type: 'line', x0: 0, x1: 1, xref: 'paper', y0: 0, y1: 0, line: {{color: '#666', width: 1}} }}]
                 }};
-                if (!initDiff) {{ Plotly.newPlot(diffDiv, [traceDiff], diffLayout, commonConfig); initDiff = true; }}
-                else {{ Plotly.react(diffDiv, [traceDiff], diffLayout, commonConfig); }}
-            }} catch (e) {{ console.error("Fetch error:", e); }}
         }}
-        setInterval(updateCharts, 1000);
     </script>
 </body>
 </html>
@@ -302,10 +463,12 @@ async def kraken_worker():
                     if channel == "book":
                         for item in data_entries:
                             for bid in item.get('bids', []):
                                 q, p = float(bid['qty']), float(bid['price'])
                                 if q == 0: market_state['bids'].pop(p, None)
                                 else: market_state['bids'][p] = q
                             for ask in item.get('asks', []):
                                 q, p = float(ask['qty']), float(ask['price'])
                                 if q == 0: market_state['asks'].pop(p, None)
@@ -314,12 +477,14 @@ async def kraken_worker():
                         if market_state['bids'] and market_state['asks']:
                             best_bid = max(market_state['bids'].keys())
                             best_ask = min(market_state['asks'].keys())
-                            market_state['prev_mid'] = market_state['current_mid']
                             mid = (best_bid + best_ask) / 2
                             market_state['current_mid'] = mid
                             market_state['ready'] = True
                             now = time.time()
                             if not market_state['history'] or (now - market_state['history'][-1]['t'] > 0.5):
                                 market_state['history'].append({'t': now, 'p': mid})
                                 if len(market_state['history']) > HISTORY_LENGTH:
@@ -338,11 +503,11 @@ async def handle_data(request):
     mid = market_state['current_mid']
-    # --- Prepare Data ---
     raw_bids = sorted(market_state['bids'].items(), key=lambda x: -x[0])[:300]
     raw_asks = sorted(market_state['asks'].items(), key=lambda x: x[0])[:300]
-    # Calculate Distances
     d_b_x, d_b_y, cum = [], [], 0
     for p, q in raw_bids:
         d = mid - p
@@ -357,15 +522,16 @@ async def handle_data(request):
             cum += q
             d_a_x.append(d); d_a_y.append(cum)
-    # --- Calculate Net Liquidity Array (Diff) ---
     diff_x, diff_y = [], []
     if d_b_x and d_a_x:
         max_dist = min(d_b_x[-1], d_a_x[-1])
         step_size = max_dist / 100
         steps = [i * step_size for i in range(1, 101)]
         for s in steps:
             idx_b = bisect.bisect_right(d_b_x, s)
             vol_b = d_b_y[idx_b-1] if idx_b > 0 else 0
@@ -373,18 +539,16 @@ async def handle_data(request):
             vol_a = d_a_y[idx_a-1] if idx_a > 0 else 0
             diff_x.append(s)
-            diff_y.append(vol_b - vol_a)
-    # --- Run AI Analysis ---
     analysis = analyze_structure(diff_x, diff_y, mid)
     return web.json_response({
         "mid": mid,
-        "prev_mid": market_state['prev_mid'],
-        "vol": { "dist_bids": d_b_x, "vol_bids": d_b_y, "dist_asks": d_a_x, "vol_asks": d_a_y },
         "diff": { "x": diff_x, "y": diff_y },
-        "analysis": analysis,
-        "history": market_state['history']
     })
 async def start_background(app):
@@ -407,7 +571,7 @@ async def main():
     site = web.TCPSite(runner, '0.0.0.0', PORT)
     await site.start()
-    print(f"🚀 BTC-USD Predictive Dashboard: http://localhost:{PORT}")
     await asyncio.Event().wait()
 if __name__ == "__main__":

 import logging
 import time
 import bisect
 from aiohttp import web
 import websockets
 # --- Configuration ---
 SYMBOL_KRAKEN = "BTC/USD"
 PORT = 7860
+HISTORY_LENGTH = 1000  # Increased history for better charts
 # --- Logging ---
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
 market_state = {
     "bids": {},
     "asks": {},
+    "history": [], # Stores { time: int, value: float }
     "current_mid": 0.0,
     "prev_mid": 0.0,
     "ready": False
 }
+# --- AI Logic Helper ---
 def analyze_structure(diff_x, diff_y, current_mid):
     """
     Analyzes the Net Liquidity Curve to find Support, Resistance, and Projected Trend.
     if not diff_y or len(diff_y) < 5:
         return None
+    # 1. Momentum Projection
+    net_total = diff_y[-1]
+    # Damping factor
+    momentum_shift = net_total * 0.2
     projected_price = current_mid + momentum_shift
+    # 2. Find Structural Reversals
     support_level = None
     resistance_level = None
     scan_limit = len(diff_y) // 2
     for i in range(1, scan_limit):
         curr_val = diff_y[i]
         dist = diff_x[i]
+        # Resistance: Buyers (Pos) -> Sellers (Neg)
         if prev_val > 0 and curr_val < 0 and resistance_level is None:
             resistance_level = current_mid + dist
+        # Support: Sellers (Neg) -> Buyers (Pos)
         if prev_val < 0 and curr_val > 0 and support_level is None:
             support_level = current_mid - dist
         "net_score": net_total
     }
+# --- Improved HTML Frontend ---
 HTML_PAGE = f"""
 <!DOCTYPE html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <title>AI Liquidity Dashboard | {SYMBOL_KRAKEN}</title>
+    <!-- TradingView Lightweight Charts -->
+    <script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
+    <!-- Plotly for Depth Chart -->
     <script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
     <style>
+        :root {{
+            --bg-color: #0b0c10;
+            --panel-bg: #1f2833;
+            --text-main: #c5c6c7;
+            --accent-green: #66fcf1;
+            --accent-green-dim: #45a29e;
+            --accent-red: #ff3b3b;
+            --accent-red-dim: #a82828;
+            --border: #2d3842;
+        }}
+        body {{
+            margin: 0; padding: 0;
+            background-color: var(--bg-color);
+            color: var(--text-main);
+            font-family: 'JetBrains Mono', 'Courier New', monospace;
+            overflow: hidden;
+            height: 100vh;
+            width: 100vw;
+        }}
+        /* --- GRID LAYOUT --- */
+        .grid-container {{
+            display: grid;
+            grid-template-columns: 3fr 1fr; /* Main chart 75%, Side panel 25% */
+            grid-template-rows: 2fr 1fr;    /* Top 66%, Bottom 33% */
+            gap: 4px;
+            height: 100vh;
+            padding: 4px;
+            box-sizing: border-box;
+        }}
+        .panel {{
+            background: #12141a;
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }}
+        /* Grid Areas */
+        #p-price {{ grid-column: 1 / 2; grid-row: 1 / 2; }}
+        #p-depth {{ grid-column: 1 / 2; grid-row: 2 / 3; }}
+        #p-stats {{ grid-column: 2 / 3; grid-row: 1 / 3; border-left: 2px solid var(--accent-green-dim); }}
+        /* Headers */
+        .panel-header {{
+            padding: 8px 12px;
+            background: #0f1116;
+            border-bottom: 1px solid var(--border);
+            font-size: 12px;
+            text-transform: uppercase;
+            font-weight: bold;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            color: var(--accent-green);
+        }}
+        /* --- CHART CONTAINERS --- */
+        #tv-chart {{ flex: 1; width: 100%; }}
+        #depth-chart {{ flex: 1; width: 100%; }}
+        /* --- STATS PANEL --- */
+        .stats-content {{
+            padding: 15px;
+            overflow-y: auto;
+            flex: 1;
+        }}
+        .stat-box {{
+            margin-bottom: 20px;
+            padding: 10px;
+            background: rgba(255,255,255,0.02);
+            border-radius: 4px;
+        }}
+        .stat-label {{ font-size: 11px; color: #666; display: block; margin-bottom: 4px; }}
+        .stat-value {{ font-size: 24px; font-weight: bold; }}
+        .stat-sub   {{ font-size: 12px; margin-left: 5px; }}
+        .green {{ color: var(--accent-green); }}
+        .red   {{ color: var(--accent-red); }}
+        /* --- TERMINAL --- */
+        .terminal-box {{
+            margin-top: auto;
+            font-size: 11px;
+            height: 300px;
+            overflow-y: hidden;
+            display: flex;
+            flex-direction: column;
+        }}
+        .term-header {{ border-bottom: 1px dashed #444; margin-bottom: 5px; padding-bottom: 5px; opacity: 0.7; }}
+        #term-logs {{ flex: 1; overflow-y: hidden; display: flex; flex-direction: column-reverse; }}
+        .log-line {{ margin-top: 4px; padding-left: 8px; border-left: 2px solid #333; }}
+        .log-bull {{ border-left-color: var(--accent-green); color: #e0f2f1; }}
+        .log-bear {{ border-left-color: var(--accent-red); color: #ffebee; }}
+        /* --- METER --- */
+        .meter-container {{ width: 100%; height: 6px; background: #333; border-radius: 3px; margin-top: 10px; position: relative; overflow: hidden; }}
+        .meter-bar {{ height: 100%; width: 50%; background: #555; transition: all 0.5s ease; position: absolute; left: 0; }}
+        .mid-mark {{ position: absolute; left: 50%; height: 100%; width: 2px; background: #fff; z-index: 10; }}
+        /* Load Overlay */
+        #loader {{
+            position: absolute; top:0; left:0; width:100%; height:100%;
+            background: rgba(0,0,0,0.9); z-index: 999;
+            display: flex; justify-content: center; align-items: center;
+            color: var(--accent-green); font-size: 20px;
+        }}
     </style>
 </head>
 <body>
+    <div id="loader">INITIALIZING AI MODELS...</div>
+    <div class="grid-container">
+        <!-- PRICE CHART PANEL -->
+        <div id="p-price" class="panel">
+            <div class="panel-header">
+                <span>BTC/USD Price Action</span>
+                <span id="live-price" style="color:white;">---</span>
             </div>
+            <div id="tv-chart"></div>
         </div>
+        <!-- DEPTH / LIQUIDITY PANEL -->
+        <div id="p-depth" class="panel">
+            <div class="panel-header">
+                <span>Net Liquidity Structure (Bid - Ask)</span>
+                <span style="font-size:10px; color:#666;">DEPTH 300</span>
             </div>
+            <div id="depth-chart"></div>
+        </div>
+        <!-- SIDEBAR / AI STATS -->
+        <div id="p-stats" class="panel">
+            <div class="panel-header">AI ANALYTICS ENGINE</div>
+            <div class="stats-content">
+                <!-- CURRENT SCORE -->
+                <div class="stat-box">
+                    <span class="stat-label">NET LIQUIDITY SCORE</span>
+                    <div style="display:flex; align-items:baseline;">
+                        <span id="score-val" class="stat-value">0</span>
+                    </div>
+                    <div class="meter-container">
+                        <div class="mid-mark"></div>
+                        <div id="score-bar" class="meter-bar" style="width: 0%; left: 50%;"></div>
+                    </div>
+                </div>
+                <!-- KEY LEVELS -->
+                <div class="stat-box">
+                    <span class="stat-label">DETECTED STRUCTURE</span>
+                    <div style="margin-top:8px;">
+                        <div style="display:flex; justify-content:space-between;">
+                            <span style="color:#aaa;">RESIST:</span>
+                            <span id="res-val" class="red">---</span>
+                        </div>
+                        <div style="display:flex; justify-content:space-between; margin-top:4px;">
+                            <span style="color:#aaa;">SUPPORT:</span>
+                            <span id="sup-val" class="green">---</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- PREDICTED TARGET -->
+                <div class="stat-box" style="border: 1px solid #444;">
+                    <span class="stat-label" style="color:var(--accent-green);">AI PRICE PROJECTION</span>
+                    <span id="proj-val" class="stat-value" style="font-size:20px;">---</span>
+                </div>
+                <!-- TERMINAL -->
+                <div class="terminal-box">
+                    <div class="term-header">> SYSTEM LOGS</div>
+                    <div id="term-logs"></div>
+                </div>
             </div>
         </div>
     </div>
     <script>
+        // --- 1. SETUP TRADINGVIEW LIGHTWEIGHT CHART ---
+        const chartContainer = document.getElementById('tv-chart');
+        const chart = LightweightCharts.createChart(chartContainer, {{
+            layout: {{ background: {{ type: 'solid', color: '#12141a' }}, textColor: '#888' }},
+            grid: {{ vertLines: {{ color: '#1f2833' }}, horzLines: {{ color: '#1f2833' }} }},
+            crosshair: {{ mode: LightweightCharts.CrosshairMode.Normal }},
+            rightPriceScale: {{ borderColor: '#2d3842' }},
+            timeScale: {{ borderColor: '#2d3842', timeVisible: true, secondsVisible: true }},
+        }});
+        const lineSeries = chart.addLineSeries({{
+            color: '#2962FF',
+            lineWidth: 2,
+            crosshairMarkerVisible: true,
+            lastValueVisible: false,
+            priceLineVisible: false,
+        }});
+        // Forecast Line (Dashed)
+        const predSeries = chart.addLineSeries({{
+            color: '#ff9800',
+            lineWidth: 2,
+            lineStyle: LightweightCharts.LineStyle.Dotted,
+            title: 'Forecast'
+        }});
+        // S/R Lines (Using PriceLines)
+        let supportLine = null;
+        let resistanceLine = null;
+        // Auto Resize
+        new ResizeObserver(entries => {{
+            if (entries.length === 0 || entries[0].target !== chartContainer) {{ return; }}
+            const newRect = entries[0].contentRect;
+            chart.applyOptions({{ width: newRect.width, height: newRect.height }});
+        }}).observe(chartContainer);
+        // --- 2. SETUP PLOTLY (DEPTH) ---
+        // We use Plotly here because LightweightCharts is bad at non-time-series X/Y plots
+        const depthDiv = document.getElementById('depth-chart');
+        const plotlyLayout = {{
+            paper_bgcolor: '#12141a',
+            plot_bgcolor: '#12141a',
+            font: {{ color: '#888', family: 'JetBrains Mono' }},
+            margin: {{ t: 10, b: 30, l: 40, r: 20 }},
             showlegend: false,
+            xaxis: {{ gridcolor: '#1f2833', title: 'Distance ($)' }},
+            yaxis: {{ gridcolor: '#1f2833' }}
+        }};
+        const plotlyConfig = {{ responsive: true, displayModeBar: false }};
+        Plotly.newPlot(depthDiv, [], plotlyLayout, plotlyConfig);
+        // --- 3. LOGIC & UPDATES ---
+        const dom = {{
+            price: document.getElementById('live-price'),
+            loader: document.getElementById('loader'),
+            scoreVal: document.getElementById('score-val'),
+            scoreBar: document.getElementById('score-bar'),
+            resVal: document.getElementById('res-val'),
+            supVal: document.getElementById('sup-val'),
+            projVal: document.getElementById('proj-val'),
+            logs: document.getElementById('term-logs')
         }};
+        let lastTime = 0;
+        function log(msg, type='neutral') {{
             const div = document.createElement('div');
+            div.className = `log-line ${{type === 'bull' ? 'log-bull' : type === 'bear' ? 'log-bear' : ''}}`;
+            const timeStr = new Date().toLocaleTimeString('en-US', {{hour12:false}});
+            div.innerHTML = `<span style="opacity:0.5; font-size:10px;">${{timeStr}}</span> ${{msg}}`;
+            dom.logs.prepend(div);
+            if (dom.logs.children.length > 20) dom.logs.removeChild(dom.logs.lastChild);
         }}
+        async function fetchData() {{
             try {{
                 const res = await fetch('/data');
                 const data = await res.json();
+                if (data.error) return; // Still initializing
+                dom.loader.style.display = 'none';
+                // -- A. UPDATE PRICE CHART --
+                const history = data.history.map(d => ({{ time: Math.floor(d.t), value: d.p }}));
+                // De-duplicate times for Lightweight Charts
+                const uniqueHistory = [];
+                const seenTimes = new Set();
+                history.forEach(h => {{
+                    if(!seenTimes.has(h.time)) {{ seenTimes.add(h.time); uniqueHistory.push(h); }}
+                }});
+                lineSeries.setData(uniqueHistory);
+                dom.price.innerHTML = `$${{data.mid.toLocaleString(undefined, {{minimumFractionDigits: 2}})}}`;
+                // -- B. UPDATE AI ANALYSIS --
                 if (data.analysis) {{
+                    const {{ projected, support, resistance, net_score }} = data.analysis;
+                    // 1. Prediction Line (Current Time -> Future)
+                    const lastT = uniqueHistory[uniqueHistory.length-1].time;
+                    predSeries.setData([
+                        {{ time: lastT, value: data.mid }},
+                        {{ time: lastT + 60, value: projected }} // 1 min projection
+                    ]);
+                    dom.projVal.innerHTML = `$${{projected.toLocaleString(undefined, {{maximumFractionDigits:0}})}}`;
+                    dom.projVal.style.color = projected > data.mid ? '#66fcf1' : '#ff3b3b';
+                    // 2. S/R Lines
+                    if (support) {{
+                        dom.supVal.innerText = `$${{support.toFixed(0)}}`;
+                        if (!supportLine) {{
+                            supportLine = lineSeries.createPriceLine({{
+                                price: support, color: '#00e676', lineWidth: 1, lineStyle: LightweightCharts.LineStyle.Solid, axisLabelVisible: true, title: 'SUP'
+                            }});
+                        }} else supportLine.applyOptions({{ price: support }});
+                    }} else {{
+                        dom.supVal.innerText = '---';
+                        if(supportLine) {{ lineSeries.removePriceLine(supportLine); supportLine=null; }}
                     }}
+                    if (resistance) {{
+                        dom.resVal.innerText = `$${{resistance.toFixed(0)}}`;
+                        if (!resistanceLine) {{
+                            resistanceLine = lineSeries.createPriceLine({{
+                                price: resistance, color: '#ff1744', lineWidth: 1, lineStyle: LightweightCharts.LineStyle.Solid, axisLabelVisible: true, title: 'RES'
+                            }});
+                        }} else resistanceLine.applyOptions({{ price: resistance }});
                     }} else {{
+                        dom.resVal.innerText = '---';
+                        if(resistanceLine) {{ lineSeries.removePriceLine(resistanceLine); resistanceLine=null; }}
                     }}
+                    // 3. Score Meter
+                    dom.scoreVal.innerText = net_score.toFixed(1);
+                    dom.scoreVal.className = net_score > 0 ? "stat-value green" : "stat-value red";
+                    // Meter logic: Range approx -50 to 50
+                    let barWidth = Math.min(Math.abs(net_score)*2, 50);
+                    dom.scoreBar.style.width = `${{barWidth}}%`;
+                    dom.scoreBar.style.left = net_score > 0 ? "50%" : `${{50 - barWidth}}%`;
+                    dom.scoreBar.style.backgroundColor = net_score > 0 ? "var(--accent-green)" : "var(--accent-red)";
+                    // 4. Logs
+                    if (net_score > 25 && Math.random() > 0.9) log(`High Buying Pressure detected`, 'bull');
+                    if (net_score < -25 && Math.random() > 0.9) log(`High Selling Pressure detected`, 'bear');
+                    if (support && Math.random() > 0.95) log(`Price approaching support floor`, 'bull');
+                }}
+                // -- C. UPDATE DEPTH CHART --
+                const traceDiff = {{
+                    x: data.diff.x,
+                    y: data.diff.y,
+                    type: 'scatter',
+                    mode: 'lines',
+                    fill: 'tozeroy',
+                    line: {{color: '#e040fb', width: 2}},
+                    fillcolor: 'rgba(224, 64, 251, 0.1)'
                 }};
+                // Add a zero line
+                const zeroLine = {{ type: 'line', x0: 0, x1: 1, xref: 'paper', y0: 0, y1: 0, line: {{color: '#444', width: 1}} }};
+                const layoutUpdate = {{ ...plotlyLayout, shapes: [zeroLine] }};
+                Plotly.react(depthDiv, [traceDiff], layoutUpdate, plotlyConfig);
+            }} catch (e) {{
+                console.error(e);
+            }}
         }}
+        setInterval(fetchData, 1000);
     </script>
 </body>
 </html>
                     if channel == "book":
                         for item in data_entries:
+                            # Process Bids
                             for bid in item.get('bids', []):
                                 q, p = float(bid['qty']), float(bid['price'])
                                 if q == 0: market_state['bids'].pop(p, None)
                                 else: market_state['bids'][p] = q
+                            # Process Asks
                             for ask in item.get('asks', []):
                                 q, p = float(ask['qty']), float(ask['price'])
                                 if q == 0: market_state['asks'].pop(p, None)
                         if market_state['bids'] and market_state['asks']:
                             best_bid = max(market_state['bids'].keys())
                             best_ask = min(market_state['asks'].keys())
                             mid = (best_bid + best_ask) / 2
+                            market_state['prev_mid'] = market_state['current_mid']
                             market_state['current_mid'] = mid
                             market_state['ready'] = True
                             now = time.time()
+                            # Throttle history updates slightly to prevent spamming duplicates
                             if not market_state['history'] or (now - market_state['history'][-1]['t'] > 0.5):
                                 market_state['history'].append({'t': now, 'p': mid})
                                 if len(market_state['history']) > HISTORY_LENGTH:
     mid = market_state['current_mid']
+    # Snapshot Bids/Asks
     raw_bids = sorted(market_state['bids'].items(), key=lambda x: -x[0])[:300]
     raw_asks = sorted(market_state['asks'].items(), key=lambda x: x[0])[:300]
+    # Calculate Volume at Distance (Cumulative)
     d_b_x, d_b_y, cum = [], [], 0
     for p, q in raw_bids:
         d = mid - p
             cum += q
             d_a_x.append(d); d_a_y.append(cum)
+    # Calculate Net Liquidity Curve (The "Diff" Chart)
     diff_x, diff_y = [], []
     if d_b_x and d_a_x:
         max_dist = min(d_b_x[-1], d_a_x[-1])
+        # Create interpolated steps
         step_size = max_dist / 100
         steps = [i * step_size for i in range(1, 101)]
         for s in steps:
+            # Find volume at distance 's' for bid and ask
             idx_b = bisect.bisect_right(d_b_x, s)
             vol_b = d_b_y[idx_b-1] if idx_b > 0 else 0
             vol_a = d_a_y[idx_a-1] if idx_a > 0 else 0
             diff_x.append(s)
+            diff_y.append(vol_b - vol_a) # Positive = Bullish Wall, Negative = Bearish Wall
+    # Run Analysis
     analysis = analyze_structure(diff_x, diff_y, mid)
     return web.json_response({
         "mid": mid,
+        "history": market_state['history'], # List of {t, p}
         "diff": { "x": diff_x, "y": diff_y },
+        "analysis": analysis
     })
 async def start_background(app):
     site = web.TCPSite(runner, '0.0.0.0', PORT)
     await site.start()
+    print(f"🚀 AI Dashboard: http://localhost:{PORT}")
     await asyncio.Event().wait()
 if __name__ == "__main__":