Spaces:

Alvin3y1
/

test

Sleeping

App Files Files Community

Alvin3y1 commited on 15 days ago

Commit

13ec341

verified ·

1 Parent(s): 5a89d96

Update app.py

Browse files

Files changed (1) hide show

app.py +116 -161

app.py CHANGED Viewed

@@ -6,10 +6,11 @@ from aiohttp import web
 import websockets
 # --- Configuration ---
-SYMBOL_KRAKEN = "BTC/USD"
 PORT = 7860
 HISTORY_LENGTH = 300
-DEPTH_LIMIT = 400  # How many order book levels to process
 # --- Logging ---
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
@@ -28,24 +29,22 @@ HTML_PAGE = f"""
 <!DOCTYPE html>
 <html>
 <head>
-    <title>BTC-USD Tri-View</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: sans-serif; overflow: hidden; }}
-        /* Layout: 50% Depth, 25% Ratio, 25% Price */
         #depth-chart {{ width: 100vw; height: 50vh; }}
         #ratio-chart {{ width: 100vw; height: 25vh; border-top: 1px solid #333; }}
         #price-chart {{ width: 100vw; height: 25vh; border-top: 1px solid #333; }}
-        #status {{ position: absolute; top: 10px; left: 60px; z-index: 10; font-size: 14px; background: rgba(0,0,0,0.7); padding: 5px 10px; border-radius: 4px; pointer-events: none; border: 1px solid #333; }}
         .green {{ color: #00e676; }}
         .red {{ color: #ff1744; }}
-        .blue {{ color: #29b6f6; }}
     </style>
 </head>
 <body>
-    <div id="status">Connecting...</div>
     <div id="depth-chart"></div>
     <div id="ratio-chart"></div>
     <div id="price-chart"></div>
@@ -56,9 +55,7 @@ HTML_PAGE = f"""
         const priceDiv = document.getElementById('price-chart');
         const statusDiv = document.getElementById('status');
-        let initDepth = false;
-        let initRatio = false;
-        let initPrice = false;
         async function updateCharts() {{
             try {{
@@ -66,180 +63,142 @@ HTML_PAGE = f"""
                 const data = await res.json();
                 if (data.error) {{
-                    statusDiv.innerHTML = "Waiting for data...";
                     return;
                 }}
-                // --- Header ---
-                // Calculate current imbalance ratio (end of the curve)
                 const currentRatio = data.ratios[data.ratios.length -1] || 1;
                 const ratioColor = currentRatio > 1 ? 'red' : 'green';
                 statusDiv.innerHTML = `
-                    Mid: <span class="${{data.mid >= data.prev_mid ? 'green' : 'red'}}">$${{data.mid.toLocaleString(undefined, {{minimumFractionDigits: 0}})}}</span> |
-                    Imbalance: <span class="${{ratioColor}}">${{currentRatio.toFixed(2)}}x</span>
                 `;
                 const config = {{ responsive: true, displayModeBar: false }};
                 // --- 1. DEPTH CHART ---
                 const traceBids = {{
-                    x: data.depth.bids_x,
-                    y: data.depth.bids_y,
-                    fill: 'tozeroy',
-                    type: 'scatter',
-                    mode: 'lines',
-                    name: 'Bids',
-                    line: {{color: '#00e676', width: 2}}
                 }};
                 const traceAsks = {{
-                    x: data.depth.asks_x,
-                    y: data.depth.asks_y,
-                    fill: 'tozeroy',
-                    type: 'scatter',
-                    mode: 'lines',
-                    name: 'Asks',
-                    line: {{color: '#ff1744', width: 2}}
                 }};
                 const layoutDepth = {{
-                    autosize: true,
-                    paper_bgcolor: '#0e0e0e',
-                    plot_bgcolor: '#0e0e0e',
-                    font: {{ color: '#aaa' }},
-                    showlegend: false,
-                    margin: {{ t: 30, b: 30, l: 50, r: 20 }},
-                    xaxis: {{ title: '', gridcolor: '#222' }},
-                    yaxis: {{ title: 'Cum Vol', gridcolor: '#222' }}
                 }};
-                if (!initDepth) {{
-                    Plotly.newPlot(depthDiv, [traceBids, traceAsks], layoutDepth, config);
-                    initDepth = true;
-                }} else {{
-                    Plotly.react(depthDiv, [traceBids, traceAsks], layoutDepth, config);
-                }}
-                // --- 2. RATIO CHART (Imbalance) ---
-                // X axis is simply the "Depth Step" (1 to 300)
                 const steps = Array.from({{length: data.ratios.length}}, (_, i) => i + 1);
                 const traceRatio = {{
-                    x: steps,
-                    y: data.ratios,
-                    type: 'scatter',
-                    mode: 'lines',
                     name: 'Ask/Bid Ratio',
                     line: {{ color: '#fb8c00', width: 2 }},
-                    fill: 'tozeroy'
                 }};
                 const layoutRatio = {{
-                    title: '',
-                    autosize: true,
-                    paper_bgcolor: '#0e0e0e',
-                    plot_bgcolor: '#0e0e0e',
                     font: {{ color: '#aaa', size: 10 }},
                     margin: {{ t: 10, b: 20, l: 50, r: 20 }},
-                    xaxis: {{ title: 'Order Depth (Steps away from price)', gridcolor: '#222' }},
-                    yaxis: {{
-                        title: 'Ask/Bid Ratio',
-                        gridcolor: '#222',
-                        zeroline: true,
-                        zerolinecolor: '#fff',
-                        zerolinewidth: 1
-                    }},
-                    # Draw a line at 1.0
-                    shapes: [{{
-                        type: 'line',
-                        x0: 0, x1: data.ratios.length,
-                        y0: 1, y1: 1,
-                        line: {{ color: 'white', width: 1, dash: 'dot' }}
-                    }}]
                 }};
-                if (!initRatio) {{
-                    Plotly.newPlot(ratioDiv, [traceRatio], layoutRatio, config);
-                    initRatio = true;
-                }} else {{
-                    layoutRatio.shapes[0].x1 = data.ratios.length; // Update line length
-                    Plotly.react(ratioDiv, [traceRatio], layoutRatio, config);
-                }}
                 // --- 3. PRICE CHART ---
-                const timeData = data.history.map(d => new Date(d.t * 1000));
-                const priceData = data.history.map(d => d.p);
                 const traceHistory = {{
-                    x: timeData,
-                    y: priceData,
-                    type: 'scatter',
-                    mode: 'lines',
-                    name: 'Midprice',
-                    line: {{ color: '#29b6f6', width: 2 }}
                 }};
                 const layoutPrice = {{
-                    autosize: true,
-                    paper_bgcolor: '#0e0e0e',
-                    plot_bgcolor: '#0e0e0e',
                     font: {{ color: '#aaa', size: 10 }},
                     margin: {{ t: 10, b: 30, l: 50, r: 20 }},
                     xaxis: {{ gridcolor: '#222', type: 'date' }},
-                    yaxis: {{ gridcolor: '#222', tickformat: '.0f', title: 'Price' }}
                 }};
-                if (!initPrice) {{
-                    Plotly.newPlot(priceDiv, [traceHistory], layoutPrice, config);
-                    initPrice = true;
-                }} else {{
-                    Plotly.react(priceDiv, [traceHistory], layoutPrice, config);
-                }}
-            }} catch (e) {{
-                console.error(e);
-            }}
         }}
-        setInterval(updateCharts, 500);
     </script>
 </body>
 </html>
 """
 async def kraken_worker():
     global market_state
     while True:
         try:
-            async with websockets.connect("wss://ws.kraken.com/v2") as ws:
-                logging.info(f"🔌 Connected to Kraken ({SYMBOL_KRAKEN})")
-                await ws.send(json.dumps({
-                    "method": "subscribe",
-                    "params": {"channel": "book", "symbol": [SYMBOL_KRAKEN], "depth": 500}
-                }))
                 async for message in ws:
-                    payload = json.loads(message)
-                    channel = payload.get("channel")
-                    data_entries = payload.get("data", [])
-                    if payload.get("type") == "error": continue
-                    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)
-                                else: market_state['asks'][p] = q
                         if market_state['bids'] and market_state['asks']:
                             best_bid = max(market_state['bids'].keys())
                             best_ask = min(market_state['asks'].keys())
@@ -248,14 +207,21 @@ async def kraken_worker():
                             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:
                                     market_state['history'].pop(0)
         except Exception as e:
-            logging.warning(f"⚠️ Reconnecting... {e}")
-            await asyncio.sleep(3)
 async def handle_index(request):
     return web.Response(text=HTML_PAGE, content_type='text/html')
@@ -264,62 +230,51 @@ async def handle_data(request):
     if not market_state['ready']:
         return web.json_response({"error": "Initializing..."})
-    # 1. Sort Data
-    sorted_bids = sorted(market_state['bids'].items(), key=lambda x: -x[0]) # Descending (Best Bid first)
-    sorted_asks = sorted(market_state['asks'].items(), key=lambda x: x[0])  # Ascending (Best Ask first)
-    # 2. Slice to limit
     sorted_bids = sorted_bids[:DEPTH_LIMIT]
     sorted_asks = sorted_asks[:DEPTH_LIMIT]
-    # 3. Calculate Cumulative Volumes & Ratios
-    # We must calculate ratios BEFORE reversing the bids for the visual chart
-    b_y_raw = [] # Cumulative volume for bids (Best -> Worst)
-    a_y_raw = [] # Cumulative volume for asks (Best -> Worst)
     cum = 0
     for _, q in sorted_bids:
         cum += q
         b_y_raw.append(cum)
     cum = 0
     for _, q in sorted_asks:
         cum += q
         a_y_raw.append(cum)
-    # Calculate Ratio: Cumulative Ask Vol / Cumulative Bid Vol
-    # Logic: Index 0 is the "spread", Index 100 is "deep in the book"
     ratios = []
     calc_len = min(len(b_y_raw), len(a_y_raw))
     for i in range(calc_len):
         bid_vol = b_y_raw[i]
         ask_vol = a_y_raw[i]
-        if bid_vol == 0: ratio = 1 # Prevent Div/0
-        else: ratio = ask_vol / bid_vol
         ratios.append(ratio)
-    # 4. Prepare Visual Arrays for Depth Chart
-    # For the depth chart, Bids need to be reversed (Low -> High Price) so they connect to Asks in the middle
-    b_x_visual = [p for p, q in sorted_bids]
-    b_y_visual = b_y_raw[:] # Copy
-    # Reverse for Plotly "Mountain" effect
-    b_x_visual.reverse()
     b_y_visual.reverse()
-    a_x_visual = [p for p, q in sorted_asks]
-    a_y_visual = a_y_raw # Asks are already Best -> Worst (Low -> High Price), which is correct for Right side of chart
     return web.json_response({
         "mid": market_state['current_mid'],
         "prev_mid": market_state['history'][-2]['p'] if len(market_state['history']) > 1 else market_state['current_mid'],
         "depth": {
-            "bids_x": b_x_visual, "bids_y": b_y_visual,
-            "asks_x": a_x_visual, "asks_y": a_y_visual
         },
         "ratios": ratios,
         "history": market_state['history']
@@ -336,7 +291,7 @@ async def main():
     site = web.TCPSite(runner, '0.0.0.0', PORT)
     await site.start()
-    print(f"🚀 BTC-USD Tri-View Running at http://localhost:{PORT}")
     await asyncio.Event().wait()
 if __name__ == "__main__":

 import websockets
 # --- Configuration ---
+# Kraken V1 requires 'XBT/USD', not 'BTC/USD'
+SYMBOL_KRAKEN = "XBT/USD"
 PORT = 7860
 HISTORY_LENGTH = 300
+DEPTH_LIMIT = 500
 # --- Logging ---
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
 <!DOCTYPE html>
 <html>
 <head>
+    <title>BTC-USD Live Analytics</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: sans-serif; overflow: hidden; }}
         #depth-chart {{ width: 100vw; height: 50vh; }}
         #ratio-chart {{ width: 100vw; height: 25vh; border-top: 1px solid #333; }}
         #price-chart {{ width: 100vw; height: 25vh; border-top: 1px solid #333; }}
+        #status {{ position: absolute; top: 10px; left: 60px; z-index: 10; font-size: 14px; background: rgba(0,0,0,0.8); padding: 5px 10px; border-radius: 4px; pointer-events: none; border: 1px solid #444; }}
         .green {{ color: #00e676; }}
         .red {{ color: #ff1744; }}
     </style>
 </head>
 <body>
+    <div id="status">Waiting for stream...</div>
     <div id="depth-chart"></div>
     <div id="ratio-chart"></div>
     <div id="price-chart"></div>
         const priceDiv = document.getElementById('price-chart');
         const statusDiv = document.getElementById('status');
+        let initDepth = false, initRatio = false, initPrice = false;
         async function updateCharts() {{
             try {{
                 const data = await res.json();
                 if (data.error) {{
+                    statusDiv.innerHTML = "Initializing Kraken Stream...";
                     return;
                 }}
+                // --- Header Stats ---
                 const currentRatio = data.ratios[data.ratios.length -1] || 1;
                 const ratioColor = currentRatio > 1 ? 'red' : 'green';
+                const ratioText = currentRatio > 1 ? 'Bearish (Sell Wall)' : 'Bullish (Buy Support)';
                 statusDiv.innerHTML = `
+                    <b>BTC/USD</b> |
+                    Price: <span class="${{data.mid >= data.prev_mid ? 'green' : 'red'}}">$${{data.mid.toLocaleString(undefined, {{minimumFractionDigits: 1}})}}</span> |
+                    Imbalance: <span class="${{ratioColor}}">${{currentRatio.toFixed(2)}}x (${{ratioText}})</span>
                 `;
                 const config = {{ responsive: true, displayModeBar: false }};
                 // --- 1. DEPTH CHART ---
                 const traceBids = {{
+                    x: data.depth.bids_x, y: data.depth.bids_y,
+                    fill: 'tozeroy', type: 'scatter', mode: 'lines',
+                    name: 'Bids', line: {{color: '#00e676', width: 2}}
                 }};
                 const traceAsks = {{
+                    x: data.depth.asks_x, y: data.depth.asks_y,
+                    fill: 'tozeroy', type: 'scatter', mode: 'lines',
+                    name: 'Asks', line: {{color: '#ff1744', width: 2}}
                 }};
                 const layoutDepth = {{
+                    autosize: true, paper_bgcolor: '#0e0e0e', plot_bgcolor: '#0e0e0e',
+                    font: {{ color: '#aaa' }}, showlegend: false,
+                    margin: {{ t: 30, b: 20, l: 50, r: 20 }},
+                    xaxis: {{ showgrid: true, gridcolor: '#222' }},
+                    yaxis: {{ title: 'Cumulative Vol', gridcolor: '#222' }}
                 }};
+                if (!initDepth) {{ Plotly.newPlot(depthDiv, [traceBids, traceAsks], layoutDepth, config); initDepth = true; }}
+                else {{ Plotly.react(depthDiv, [traceBids, traceAsks], layoutDepth, config); }}
+                // --- 2. RATIO CHART ---
                 const steps = Array.from({{length: data.ratios.length}}, (_, i) => i + 1);
                 const traceRatio = {{
+                    x: steps, y: data.ratios,
+                    type: 'scatter', mode: 'lines',
                     name: 'Ask/Bid Ratio',
                     line: {{ color: '#fb8c00', width: 2 }},
+                    fill: 'tozeroy'
                 }};
                 const layoutRatio = {{
+                    autosize: true, paper_bgcolor: '#0e0e0e', plot_bgcolor: '#0e0e0e',
                     font: {{ color: '#aaa', size: 10 }},
                     margin: {{ t: 10, b: 20, l: 50, r: 20 }},
+                    xaxis: {{ title: 'Depth Steps', gridcolor: '#222' }},
+                    yaxis: {{ title: 'Imbalance Ratio', gridcolor: '#222' }},
+                    shapes: [{{ type: 'line', x0: 0, x1: data.ratios.length, y0: 1, y1: 1, line: {{ color: 'white', width: 1, dash: 'dot' }} }}]
                 }};
+                if (!initRatio) {{ Plotly.newPlot(ratioDiv, [traceRatio], layoutRatio, config); initRatio = true; }}
+                else {{ layoutRatio.shapes[0].x1 = data.ratios.length; Plotly.react(ratioDiv, [traceRatio], layoutRatio, config); }}
                 // --- 3. PRICE CHART ---
                 const traceHistory = {{
+                    x: data.history.map(d => new Date(d.t * 1000)),
+                    y: data.history.map(d => d.p),
+                    type: 'scatter', mode: 'lines',
+                    name: 'Price', line: {{ color: '#29b6f6', width: 2 }}
                 }};
                 const layoutPrice = {{
+                    autosize: true, paper_bgcolor: '#0e0e0e', plot_bgcolor: '#0e0e0e',
                     font: {{ color: '#aaa', size: 10 }},
                     margin: {{ t: 10, b: 30, l: 50, r: 20 }},
                     xaxis: {{ gridcolor: '#222', type: 'date' }},
+                    yaxis: {{ gridcolor: '#222', tickformat: '.1f', title: 'Mid Price' }}
                 }};
+                if (!initPrice) {{ Plotly.newPlot(priceDiv, [traceHistory], layoutPrice, config); initPrice = true; }}
+                else {{ Plotly.react(priceDiv, [traceHistory], layoutPrice, config); }}
+            }} catch (e) {{ console.error(e); }}
         }}
+        setInterval(updateCharts, 1000);
     </script>
 </body>
 </html>
 """
 async def kraken_worker():
+    """Connects to Standard Kraken V1 API (More Reliable)"""
     global market_state
     while True:
         try:
+            # Note: Using V1 Endpoint
+            async with websockets.connect("wss://ws.kraken.com") as ws:
+                logging.info(f"🔌 Connected to Kraken V1 ({SYMBOL_KRAKEN})")
+                # V1 Subscribe Message
+                sub_msg = {
+                    "event": "subscribe",
+                    "pair": [SYMBOL_KRAKEN],
+                    "subscription": {"name": "book", "depth": 1000}
+                }
+                await ws.send(json.dumps(sub_msg))
                 async for message in ws:
+                    data = json.loads(message)
+                    # V1 sends lists for data, dicts for events.
+                    # [CHANNEL_ID, DATA_DICT, CHANNEL_NAME, PAIR]
+                    if isinstance(data, list):
+                        payload = data[1]
+                        # Snapshot or Update?
+                        # Snapshot has keys "bs" (bids snapshot) and "as" (asks snapshot)
+                        if "bs" in payload or "as" in payload:
+                            # logging.info("Received Snapshot")
+                            for bid in payload.get("bs", []):
+                                price, qty = float(bid[0]), float(bid[1])
+                                market_state['bids'][price] = qty
+                            for ask in payload.get("as", []):
+                                price, qty = float(ask[0]), float(ask[1])
+                                market_state['asks'][price] = qty
+                        # Updates have keys "b" (bids) or "a" (asks)
+                        else:
+                            for bid in payload.get("b", []):
+                                price, qty = float(bid[0]), float(bid[1])
+                                if qty == 0: market_state['bids'].pop(price, None)
+                                else: market_state['bids'][price] = qty
+                            for ask in payload.get("a", []):
+                                price, qty = float(ask[0]), float(ask[1])
+                                if qty == 0: market_state['asks'].pop(price, None)
+                                else: market_state['asks'][price] = qty
+                        # --- Calculation Trigger ---
                         if market_state['bids'] and market_state['asks']:
                             best_bid = max(market_state['bids'].keys())
                             best_ask = min(market_state['asks'].keys())
                             market_state['ready'] = True
                             now = time.time()
+                            # Throttle history update to ~200ms
+                            if not market_state['history'] or (now - market_state['history'][-1]['t'] > 0.2):
                                 market_state['history'].append({'t': now, 'p': mid})
                                 if len(market_state['history']) > HISTORY_LENGTH:
                                     market_state['history'].pop(0)
+                    elif isinstance(data, dict):
+                        if data.get("event") == "heartbeat":
+                            continue
+                        if data.get("event") == "systemStatus":
+                            logging.info(f"System Status: {data.get('status')}")
         except Exception as e:
+            logging.warning(f"⚠️ Connection error: {e}. Retrying in 5s...")
+            await asyncio.sleep(5)
 async def handle_index(request):
     return web.Response(text=HTML_PAGE, content_type='text/html')
     if not market_state['ready']:
         return web.json_response({"error": "Initializing..."})
+    # Sort
+    sorted_bids = sorted(market_state['bids'].items(), key=lambda x: -x[0])
+    sorted_asks = sorted(market_state['asks'].items(), key=lambda x: x[0])
+    # Slice
     sorted_bids = sorted_bids[:DEPTH_LIMIT]
     sorted_asks = sorted_asks[:DEPTH_LIMIT]
+    # Cumulative Calc
+    b_y_raw = []
     cum = 0
     for _, q in sorted_bids:
         cum += q
         b_y_raw.append(cum)
+    a_y_raw = []
     cum = 0
     for _, q in sorted_asks:
         cum += q
         a_y_raw.append(cum)
+    # Ratio Calc
     ratios = []
     calc_len = min(len(b_y_raw), len(a_y_raw))
     for i in range(calc_len):
         bid_vol = b_y_raw[i]
         ask_vol = a_y_raw[i]
+        ratio = ask_vol / bid_vol if bid_vol > 0 else 1
         ratios.append(ratio)
+    # Visual Prep
+    b_x = [p for p, q in sorted_bids]
+    # Reverse bids for Plotly
+    b_x.reverse()
+    b_y_visual = b_y_raw[:]
     b_y_visual.reverse()
+    a_x = [p for p, q in sorted_asks]
     return web.json_response({
         "mid": market_state['current_mid'],
         "prev_mid": market_state['history'][-2]['p'] if len(market_state['history']) > 1 else market_state['current_mid'],
         "depth": {
+            "bids_x": b_x, "bids_y": b_y_visual,
+            "asks_x": a_x, "asks_y": a_y_raw
         },
         "ratios": ratios,
         "history": market_state['history']
     site = web.TCPSite(runner, '0.0.0.0', PORT)
     await site.start()
+    print(f"🚀 Live at http://localhost:{PORT}")
     await asyncio.Event().wait()
 if __name__ == "__main__":