Spaces:

Alvin3y1
/

test

Sleeping

App Files Files Community

Alvin3y1 commited on 13 days ago

Commit

6dbbeb8

verified ·

1 Parent(s): 7252530

Update app.py

Browse files

Files changed (1) hide show

app.py +106 -64

app.py CHANGED Viewed

@@ -58,7 +58,7 @@ def analyze_structure(diff_x, diff_y, current_mid):
         "net_score": net_total
     }
-# --- HTML Frontend (Fixed CDN & Logic) ---
 HTML_PAGE = f"""
 <!DOCTYPE html>
 <html lang="en">
@@ -66,9 +66,8 @@ HTML_PAGE = f"""
     <meta charset="UTF-8">
     <title>AI Liquidity Dashboard | {SYMBOL_KRAKEN}</title>
-    <!-- FIXED: Pinned version 4.1.1 to ensure API compatibility -->
     <script src="https://unpkg.com/lightweight-charts@4.1.1/dist/lightweight-charts.standalone.production.js"></script>
-    <script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
     <style>
         :root {{
@@ -90,7 +89,8 @@ HTML_PAGE = f"""
         .panel-header {{ padding: 8px 12px; background: #0f1116; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: bold; display: flex; justify-content: space-between; color: var(--accent-green); }}
-        #tv-chart, #depth-chart {{ flex: 1; width: 100%; position: relative; }}
         .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; }}
@@ -120,14 +120,19 @@ HTML_PAGE = f"""
     </div>
     <div class="grid-container">
         <div id="p-price" class="panel">
             <div class="panel-header"><span>BTC/USD Price Action</span><span id="live-price">---</span></div>
-            <div id="tv-chart"></div>
         </div>
         <div id="p-depth" class="panel">
-            <div class="panel-header"><span>Liquidity Structure</span><span>DEPTH 300</span></div>
-            <div id="depth-chart"></div>
         </div>
         <div id="p-stats" class="panel">
             <div class="panel-header">ANALYTICS ENGINE</div>
             <div class="stats-content">
@@ -154,7 +159,7 @@ HTML_PAGE = f"""
     </div>
     <script>
-        // Global Error Handler
         window.onerror = function(msg, url, lineNo, columnNo, error) {{
             const errDiv = document.getElementById('error-log');
             errDiv.innerHTML += `ERROR: ${{msg}} (Line: ${{lineNo}})<br>`;
@@ -176,40 +181,64 @@ HTML_PAGE = f"""
                 logs: document.getElementById('term-logs')
             }};
-            // --- 1. SETUP LIGHTWEIGHT CHART ---
-            if (typeof LightweightCharts === 'undefined') throw new Error("Chart Library not loaded");
-            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' }} }},
-                timeScale: {{ timeVisible: true, secondsVisible: true, borderColor: '#2d3842' }},
                 rightPriceScale: {{ borderColor: '#2d3842' }},
-            }});
-            const lineSeries = chart.addLineSeries({{ color: '#2962FF', lineWidth: 2 }});
-            const predSeries = chart.addLineSeries({{ color: '#ff9800', lineWidth: 2, lineStyle: 2 }}); // Dotted
-            let supportLine = null;
-            let resistanceLine = null;
             // Resize Logic
             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 ---
-            Plotly.newPlot('depth-chart', [], {{
-                paper_bgcolor: '#12141a', plot_bgcolor: '#12141a',
-                font: {{ color: '#888', family: 'monospace' }},
-                margin: {{ t: 10, b: 30, l: 40, r: 20 }},
-                xaxis: {{ gridcolor: '#1f2833' }}, yaxis: {{ gridcolor: '#1f2833' }},
-                showlegend: false
-            }}, {{ responsive: true, displayModeBar: false }});
-            // --- 3. HELPERS ---
             function log(msg, type='neutral') {{
                 const div = document.createElement('div');
                 div.className = 'log-line';
@@ -219,20 +248,19 @@ HTML_PAGE = f"""
                 if (dom.logs.children.length > 20) dom.logs.removeChild(dom.logs.lastChild);
             }}
-            // --- 4. MAIN LOOP ---
             async function fetchData() {{
                 try {{
                     const res = await fetch('/data?t=' + Date.now());
                     const data = await res.json();
                     if (data.error) {{
-                        dom.status.innerText = "Processing Market Data...";
                         return;
                     }}
                     dom.loader.style.display = 'none';
-                    // Update Price Chart
                     const uniqueHistory = [];
                     const seen = new Set();
                     data.history.forEach(d => {{
@@ -241,38 +269,37 @@ HTML_PAGE = f"""
                     }});
                     if (uniqueHistory.length > 0) {{
-                        lineSeries.setData(uniqueHistory);
                         const last = uniqueHistory[uniqueHistory.length - 1];
                         dom.price.innerText = last.value.toLocaleString(undefined, {{minimumFractionDigits: 2}});
                         if (data.analysis) {{
                             const {{ projected, support, resistance, net_score }} = data.analysis;
-                            // Prediction
                             predSeries.setData([last, {{ time: last.time + 60, value: projected }}]);
                             dom.projVal.innerText = projected.toFixed(0);
-                            // S/R Lines
                             if (support) {{
                                 dom.supVal.innerText = support.toFixed(0);
-                                if (!supportLine) supportLine = lineSeries.createPriceLine({{ price: support, color: '#00e676', 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', title: 'RES' }});
                                 else resistanceLine.applyOptions({{ price: resistance }});
                             }} else {{
                                 dom.resVal.innerText = '---';
-                                if (resistanceLine) {{ lineSeries.removePriceLine(resistanceLine); resistanceLine = null; }}
                             }}
-                            // Score Meter
                             dom.scoreVal.innerText = net_score.toFixed(1);
                             dom.scoreVal.className = net_score > 0 ? "stat-value green" : "stat-value red";
                             let barW = Math.min(Math.abs(net_score)*2, 50);
@@ -280,29 +307,46 @@ HTML_PAGE = f"""
                             dom.scoreBar.style.left = net_score > 0 ? '50%' : (50 - barW) + '%';
                             dom.scoreBar.style.background = net_score > 0 ? '#66fcf1' : '#ff3b3b';
-                            // Random Logs
                             if (Math.random() > 0.98) {{
-                                if (net_score > 30) log("Significant Bullish flow detected", 'bull');
-                                else if (net_score < -30) log("Significant Bearish flow detected", 'bear');
                             }}
                         }}
                     }}
-                    // Update Depth Chart
-                    const trace = {{ x: data.diff.x, y: data.diff.y, type: 'scatter', fill: 'tozeroy', line: {{color: '#e040fb'}} }};
-                    Plotly.react('depth-chart', [trace], {{
-                        paper_bgcolor: '#12141a', plot_bgcolor: '#12141a',
-                        font: {{ color: '#888' }}, margin: {{ t: 10, b: 20, l: 30, r: 10 }},
-                        xaxis: {{ showgrid: false, title: '' }},
-                        yaxis: {{ showgrid: true, gridcolor: '#333' }},
-                        shapes: [{{ type: 'line', x0: 0, x1: 1, xref: 'paper', y0: 0, y1: 0, line: {{color: '#555'}} }}]
-                    }}, {{ displayModeBar: false }});
                 }} catch (e) {{
-                    console.error("Fetch loop error:", e);
                 }}
             }}
             setInterval(fetchData, 1000);
         }});
     </script>
@@ -346,8 +390,7 @@ async def kraken_worker():
                             market_state['ready'] = True
                             now = time.time()
-                            # Throttle history (250ms)
-                            if not market_state['history'] or (now - market_state['history'][-1]['t'] > 0.25):
                                 market_state['history'].append({'t': now, 'p': mid})
                                 if len(market_state['history']) > HISTORY_LENGTH:
                                     market_state['history'].pop(0)
@@ -365,7 +408,6 @@ async def handle_data(request):
     mid = market_state['current_mid']
-    # Snapshot
     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]

         "net_score": net_total
     }
+# --- HTML Frontend ---
 HTML_PAGE = f"""
 <!DOCTYPE html>
 <html lang="en">
     <meta charset="UTF-8">
     <title>AI Liquidity Dashboard | {SYMBOL_KRAKEN}</title>
+    <!-- Pinned Version for Stability -->
     <script src="https://unpkg.com/lightweight-charts@4.1.1/dist/lightweight-charts.standalone.production.js"></script>
     <style>
         :root {{
         .panel-header {{ padding: 8px 12px; background: #0f1116; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: bold; display: flex; justify-content: space-between; color: var(--accent-green); }}
+        #tv-price, #tv-depth {{ flex: 1; width: 100%; position: relative; }}
         .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; }}
     </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">---</span></div>
+            <div id="tv-price"></div>
         </div>
+        <!-- Depth Chart Panel (Now using Lightweight Charts) -->
         <div id="p-depth" class="panel">
+            <div class="panel-header"><span>Net Liquidity (Green=Bids, Red=Asks)</span><span>DEPTH 300</span></div>
+            <div id="tv-depth"></div>
         </div>
+        <!-- Analytics Panel -->
         <div id="p-stats" class="panel">
             <div class="panel-header">ANALYTICS ENGINE</div>
             <div class="stats-content">
     </div>
     <script>
+        // --- ERROR HANDLING ---
         window.onerror = function(msg, url, lineNo, columnNo, error) {{
             const errDiv = document.getElementById('error-log');
             errDiv.innerHTML += `ERROR: ${{msg}} (Line: ${{lineNo}})<br>`;
                 logs: document.getElementById('term-logs')
             }};
+            // --- CHART CONFIGURATION ---
+            const chartOptionsCommon = {{
                 layout: {{ background: {{ type: 'solid', color: '#12141a' }}, textColor: '#888' }},
                 grid: {{ vertLines: {{ color: '#1f2833' }}, horzLines: {{ color: '#1f2833' }} }},
                 rightPriceScale: {{ borderColor: '#2d3842' }},
+                timeScale: {{ borderColor: '#2d3842' }},
+            }};
+            // 1. PRICE CHART
+            const priceContainer = document.getElementById('tv-price');
+            const priceChart = LightweightCharts.createChart(priceContainer, {{
+                ...chartOptionsCommon,
+                timeScale: {{ timeVisible: true, secondsVisible: true }},
+            }});
+            const priceSeries = priceChart.addLineSeries({{ color: '#2962FF', lineWidth: 2 }});
+            const predSeries = priceChart.addLineSeries({{ color: '#ff9800', lineWidth: 2, lineStyle: 2 }});
+            let supportLine = null, resistanceLine = null;
+            // 2. DEPTH CHART (Hacked for Non-Time Series)
+            const depthContainer = document.getElementById('tv-depth');
+            const depthChart = LightweightCharts.createChart(depthContainer, {{
+                ...chartOptionsCommon,
+                timeScale: {{
+                    // Override formatted date to just show raw distance
+                    tickMarkFormatter: (time) => parseFloat(time).toFixed(0),
+                }},
+                localization: {{
+                    // Override tooltip formatter
+                    timeFormatter: (time) => 'Dist: $' + parseFloat(time).toFixed(2),
+                }}
+            }});
+            // We use two Area series: one for Positive (Green), one for Negative (Red)
+            const bullSeries = depthChart.addAreaSeries({{
+                topColor: 'rgba(102, 252, 241, 0.4)',
+                bottomColor: 'rgba(102, 252, 241, 0.0)',
+                lineColor: '#66fcf1', lineWidth: 2
+            }});
+            const bearSeries = depthChart.addAreaSeries({{
+                topColor: 'rgba(255, 59, 59, 0.4)',
+                bottomColor: 'rgba(255, 59, 59, 0.0)',
+                lineColor: '#ff3b3b', lineWidth: 2
+            }});
             // Resize Logic
             new ResizeObserver(entries => {{
+                for (let entry of entries) {{
+                    if (entry.target === priceContainer) priceChart.applyOptions({{ width: entry.contentRect.width, height: entry.contentRect.height }});
+                    if (entry.target === depthContainer) depthChart.applyOptions({{ width: entry.contentRect.width, height: entry.contentRect.height }});
+                }}
+            }}).observe(priceContainer);
+            new ResizeObserver(entries => {{
+                for (let entry of entries) {{
+                     if (entry.target === depthContainer) depthChart.applyOptions({{ width: entry.contentRect.width, height: entry.contentRect.height }});
+                }}
+            }}).observe(depthContainer);
+            // --- HELPERS ---
             function log(msg, type='neutral') {{
                 const div = document.createElement('div');
                 div.className = 'log-line';
                 if (dom.logs.children.length > 20) dom.logs.removeChild(dom.logs.lastChild);
             }}
+            // --- DATA LOOP ---
             async function fetchData() {{
                 try {{
                     const res = await fetch('/data?t=' + Date.now());
                     const data = await res.json();
                     if (data.error) {{
+                        dom.status.innerText = "Synchronizing Market State...";
                         return;
                     }}
                     dom.loader.style.display = 'none';
+                    // -- UPDATE PRICE CHART --
                     const uniqueHistory = [];
                     const seen = new Set();
                     data.history.forEach(d => {{
                     }});
                     if (uniqueHistory.length > 0) {{
+                        priceSeries.setData(uniqueHistory);
                         const last = uniqueHistory[uniqueHistory.length - 1];
                         dom.price.innerText = last.value.toLocaleString(undefined, {{minimumFractionDigits: 2}});
                         if (data.analysis) {{
                             const {{ projected, support, resistance, net_score }} = data.analysis;
+                            // Projection
                             predSeries.setData([last, {{ time: last.time + 60, value: projected }}]);
                             dom.projVal.innerText = projected.toFixed(0);
+                            // S/R Lines (Using createPriceLine)
                             if (support) {{
                                 dom.supVal.innerText = support.toFixed(0);
+                                if (!supportLine) supportLine = priceSeries.createPriceLine({{ price: support, color: '#00e676', title: 'SUP' }});
                                 else supportLine.applyOptions({{ price: support }});
                             }} else {{
                                 dom.supVal.innerText = '---';
+                                if (supportLine) {{ priceSeries.removePriceLine(supportLine); supportLine = null; }}
                             }}
                             if (resistance) {{
                                 dom.resVal.innerText = resistance.toFixed(0);
+                                if (!resistanceLine) resistanceLine = priceSeries.createPriceLine({{ price: resistance, color: '#ff1744', title: 'RES' }});
                                 else resistanceLine.applyOptions({{ price: resistance }});
                             }} else {{
                                 dom.resVal.innerText = '---';
+                                if (resistanceLine) {{ priceSeries.removePriceLine(resistanceLine); resistanceLine = null; }}
                             }}
+                            // Meter & Logs
                             dom.scoreVal.innerText = net_score.toFixed(1);
                             dom.scoreVal.className = net_score > 0 ? "stat-value green" : "stat-value red";
                             let barW = Math.min(Math.abs(net_score)*2, 50);
                             dom.scoreBar.style.left = net_score > 0 ? '50%' : (50 - barW) + '%';
                             dom.scoreBar.style.background = net_score > 0 ? '#66fcf1' : '#ff3b3b';
                             if (Math.random() > 0.98) {{
+                                if (net_score > 40) log("Strong Buyers Detected", 'bull');
+                                else if (net_score < -40) log("Strong Sellers Detected", 'bear');
                             }}
                         }}
                     }}
+                    // -- UPDATE DEPTH CHART --
+                    // Map diff_x (distance) to 'time', diff_y to 'value'
+                    // Split into Bull (Positive) and Bear (Negative) series
+                    if (data.diff && data.diff.x.length > 0) {{
+                        const bullData = [];
+                        const bearData = [];
+                        for (let i = 0; i < data.diff.x.length; i++) {{
+                            const xVal = data.diff.x[i]; // Distance
+                            const yVal = data.diff.y[i]; // Net Volume
+                            // Ensure strictly unique and ascending (already guaranteed by logic, but safe to cast)
+                            // We use xVal as 'time'
+                            if (yVal >= 0) {{
+                                bullData.push({{ time: xVal, value: yVal }});
+                                bearData.push({{ time: xVal, value: 0 }}); // Clamp other series to 0
+                            }} else {{
+                                bullData.push({{ time: xVal, value: 0 }});
+                                bearData.push({{ time: xVal, value: yVal }});
+                            }}
+                        }}
+                        bullSeries.setData(bullData);
+                        bearSeries.setData(bearData);
+                        depthChart.timeScale().fitContent();
+                    }}
                 }} catch (e) {{
+                    console.error(e);
                 }}
             }}
             setInterval(fetchData, 1000);
         }});
     </script>
                             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)
     mid = market_state['current_mid']
     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]