Spaces:

mgbam
/

CryptoSentinel_AI

Sleeping

App Files Files Community

mgbam commited on Jul 16

Commit

8c8b0ba

verified ·

1 Parent(s): 9b0536f

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +48 -82

static/index.html CHANGED Viewed

@@ -5,119 +5,85 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sentinel Arbitrage Engine</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
     <style>
         :root { font-family: 'SF Mono', 'Consolas', 'Menlo', monospace; }
-        body { background-color: #111927; color: #E5E7EB; font-size: 14px; margin: 0; padding: 1rem; }
-        .container { max-width: 1280px; margin: 0 auto; }
-        header { text-align: center; margin-bottom: 1.5rem; }
-        h1 { color: #38BDF8; margin-bottom: 0; }
-        .status-bar { font-size: 12px; color: #9CA3AF; text-align: right; margin-bottom: 1rem; }
-        .status-online { color: #34D399; } .status-offline { color: #F87171; }
         table { width: 100%; border-collapse: collapse; }
         th { background-color: #374151; text-align: left; position: sticky; top: 0; }
         td, th { padding: 0.75rem 1rem; border-bottom: 1px solid #374151; vertical-align: middle; }
         .buy { color: #34D399; } .sell { color: #F87171; }
         .risk-low { color: #34D399; } .risk-medium { color: #FBBF24; } .risk-high { color: #F87171; }
         tbody tr { animation: fadeIn 0.5s ease-out; }
         @keyframes fadeIn { from { background-color: rgba(52, 211, 153, 0.2); } to { background-color: transparent; } }
-        .asset-cell { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
-        .asset-logo { width: 24px; height: 24px; }
-        .asset-cell strong { color: inherit; text-decoration: none; font-weight: bold; }
     </style>
 </head>
 <body>
     <main class="container">
         <header><h1>Sentinel Arbitrage Engine</h1></header>
-        <div class="status-bar">
-            Engine Status: <span id="status-light" class="status-offline">CONNECTING...</span> | Last Signal: <span id="last-update-time">--:--:--</span>
         </div>
-        <article>
-            <table>
-                <thead>
-                    <tr>
-                        <th>Pair</th>
-                        <th>Oracle 1 (Pyth)</th>
-                        <th>Oracle 2 (Agg.)</th>
-                        <th>Discrepancy</th>
-                        <th>AI Risk</th>
-                        <th>AI Strategy</th>
-                    </tr>
-                </thead>
-                <tbody id="opportunities-table">
-                    <tr id="placeholder-row"><td colspan="6" style="text-align:center; padding: 2rem;">Initializing signal stream...</td></tr>
-                </tbody>
-            </table>
-        </article>
     </main>
     <script>
-        const ASSET_LOGOS = {
-            'BTC': 'https://s2.coinmarketcap.com/static/img/coins/64x64/1.png',
-            'ETH': 'https://s2.coinmarketcap.com/static/img/coins/64x64/1027.png',
-            'SOL': 'https://s2.coinmarketcap.com/static/img/coins/64x64/5426.png',
-            'XRP': 'https://s2.coinmarketcap.com/static/img/coins/64x64/52.png',
-            'DOGE': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/74.png' },
-            'ADA': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/2010.png' },
-            'AVAX': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png' },
-            'LINK': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/1975.png' },
-            'DOT': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/6636.png' },
-            'MATIC': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/3890.png' }
-        };
-        const statusLight = document.getElementById('status-light');
         const opportunitiesTable = document.getElementById('opportunities-table');
-        const lastUpdateTime = document.getElementById('last-update-time');
-        async function connectToStream() {
-            try {
-                const response = await fetch('/api/signals/stream');
-                statusLight.textContent = 'ONLINE';
-                statusLight.className = 'status-online';
-                document.getElementById('placeholder-row')?.remove();
-                const reader = response.body.getReader();
-                const decoder = new TextDecoder();
-                while (true) {
-                    const { value, done } = await reader.read();
-                    if (done) break;
-                    const chunk = decoder.decode(value, { stream: true });
-                    const lines = chunk.split('\n').filter(line => line.trim() !== '');
-                    for (const line of lines) {
-                        try {
-                            const signal = JSON.parse(line);
-                            renderSignal(signal);
-                        } catch (e) {
-                            console.error("Failed to parse signal line:", line, e);
-                        }
-                    }
-                }
-            } catch (error) {
-                console.error("Stream connection failed:", error);
-                statusLight.textContent = 'OFFLINE';
-                statusLight.className = 'status-offline';
-                setTimeout(connectToStream, 5000); // Retry after 5 seconds
-            }
-        }
-        function renderSignal(signal) {
             const newRow = opportunitiesTable.insertRow(0);
             const assetInfo = ASSET_LOGOS[signal.asset] || { logo: '' };
             newRow.innerHTML = `
                 <td><div class="asset-cell"><img src="${assetInfo.logo}" class="asset-logo"><strong>${signal.asset}/USD</strong></div></td>
-                <td><span class="${signal.pyth_price < signal.chainlink_price ? 'buy' : 'sell'}">${signal.pyth_price.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}</span></td>
-                <td><span class="${signal.pyth_price > signal.chainlink_price ? 'buy' : 'sell'}">${signal.chainlink_price.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}</span></td>
                 <td><strong>${signal.spread_pct.toFixed(3)}%</strong></td>
                 <td><span class="risk-${signal.risk.toLowerCase()}">${signal.risk}</span></td>
                 <td>${signal.strategy}</td>
             `;
-            lastUpdateTime.textContent = new Date(signal.timestamp).toLocaleTimeString('en-US');
-        }
-        connectToStream();
     </script>
 </body>
 </html>

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sentinel Arbitrage Engine</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
     <style>
         :root { font-family: 'SF Mono', 'Consolas', 'Menlo', monospace; }
+        body { background-color: #111927; color: #E5E7EB; font-size: 14px; margin: 0; }
+        .container { max-width: 1400px; margin: 1rem auto; padding: 0 1rem; }
+        header h1 { color: #38BDF8; margin-bottom: 0; text-align: center; }
+        .grid-container { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }
         table { width: 100%; border-collapse: collapse; }
         th { background-color: #374151; text-align: left; position: sticky; top: 0; }
         td, th { padding: 0.75rem 1rem; border-bottom: 1px solid #374151; vertical-align: middle; }
         .buy { color: #34D399; } .sell { color: #F87171; }
         .risk-low { color: #34D399; } .risk-medium { color: #FBBF24; } .risk-high { color: #F87171; }
+        .log-panel { background-color: #1F2937; border: 1px solid #374151; border-radius: 0.5rem; height: 60vh; overflow-y: scroll; font-size: 12px; padding: 1rem; }
+        .log-panel p { margin: 0; padding: 0.25rem 0; border-bottom: 1px solid #2b3544; }
+        .log-panel p:first-child { color: #38BDF8; font-weight: bold; }
+        .asset-cell { display: flex; align-items: center; gap: 10px; }
+        .asset-logo { width: 24px; height: 24px; }
         tbody tr { animation: fadeIn 0.5s ease-out; }
         @keyframes fadeIn { from { background-color: rgba(52, 211, 153, 0.2); } to { background-color: transparent; } }
     </style>
 </head>
 <body>
     <main class="container">
         <header><h1>Sentinel Arbitrage Engine</h1></header>
+        <div class="grid-container">
+            <section id="signal-section">
+                <article>
+                    <table>
+                        <thead><tr><th>Pair</th><th>Oracle 1 (Pyth)</th><th>Oracle 2 (Agg.)</th><th>Discrepancy</th><th>AI Risk</th><th>AI Strategy</th></tr></thead>
+                        <tbody id="opportunities-table">
+                            <tr id="placeholder-row"><td colspan="6" style="text-align:center; padding: 2rem;">Awaiting first signal...</td></tr>
+                        </tbody>
+                    </table>
+                </article>
+            </section>
+            <section id="log-section">
+                <article>
+                    <header>Live Engine Logs</header>
+                    <div class="log-panel" id="log-container">
+                        <p>Connecting to engine...</p>
+                    </div>
+                </article>
+            </section>
         </div>
     </main>
     <script>
+        const ASSET_LOGOS = {'BTC': 'https://s2.coinmarketcap.com/static/img/coins/64x64/1.png','ETH': 'https://s2.coinmarketcap.com/static/img/coins/64x64/1027.png','SOL': 'https://s2.coinmarketcap.com/static/img/coins/64x64/5426.png','XRP': 'https://s2.coinmarketcap.com/static/img/coins/64x64/52.png','DOGE': 'https://s2.coinmarketcap.com/static/img/coins/64x64/74.png','ADA': 'https://s2.coinmarketcap.com/static/img/coins/64x64/2010.png','AVAX': 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png','LINK': 'https://s2.coinmarketcap.com/static/img/coins/64x64/1975.png','DOT': 'https://s2.coinmarketcap.com/static/img/coins/64x64/6636.png','MATIC': 'https://s2.coinmarketcap.com/static/img/coins/64x64/3890.png'};
+        const socket = io();
         const opportunitiesTable = document.getElementById('opportunities-table');
+        const logContainer = document.getElementById('log-container');
+        socket.on('connect', () => { logContainer.innerHTML = '<p>✅ Connection Established. Engine is starting...</p>'; });
+        socket.on('disconnect', () => { addLog('🔥 Engine Disconnected.'); });
+        socket.on('log_message', (msg) => { addLog(msg); });
+        socket.on('new_signal', (signal) => {
+            document.getElementById('placeholder-row')?.remove();
             const newRow = opportunitiesTable.insertRow(0);
             const assetInfo = ASSET_LOGOS[signal.asset] || { logo: '' };
             newRow.innerHTML = `
                 <td><div class="asset-cell"><img src="${assetInfo.logo}" class="asset-logo"><strong>${signal.asset}/USD</strong></div></td>
+                <td><span class="${signal.pyth_price < signal.chainlink_price ? 'buy' : 'sell'}">${signal.pyth_price.toLocaleString('en-US',{style:'currency',currency:'USD'})}</span></td>
+                <td><span class="${signal.pyth_price > signal.chainlink_price ? 'buy' : 'sell'}">${signal.chainlink_price.toLocaleString('en-US',{style:'currency',currency:'USD'})}</span></td>
                 <td><strong>${signal.spread_pct.toFixed(3)}%</strong></td>
                 <td><span class="risk-${signal.risk.toLowerCase()}">${signal.risk}</span></td>
                 <td>${signal.strategy}</td>
             `;
+        });
+        function addLog(message) {
+            const logEntry = document.createElement('p');
+            logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
+            logContainer.prepend(logEntry);
+            if (logContainer.children.length > 100) {
+                logContainer.lastChild.remove();
+            }
+        }
     </script>
 </body>
 </html>