Hugging Face's logo

Spaces:
mgbam
/
CryptoSentinel_AI
Sleeping

App Files Community
CryptoSentinel_AI
File size: 4,624 Bytes 
097168d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sentinel Arbitrage Engine</title>
    <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; font-weight: 600; }
        .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; }
        td, th { padding: 0.75rem 1rem; border-bottom: 1px solid #374151; white-space: nowrap; }
        .buy { color: #34D399; } .sell { color: #F87171; }
        .risk-low { color: #34D399; } .risk-medium { color: #FBBF24; } .risk-high { color: #F87171; }
        @keyframes fadeIn { from { background-color: rgba(52, 211, 153, 0.2); } to { background-color: transparent; } }
    </style>
    <!-- The Socket.IO client library -->
    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
</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">OFFLINE</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 (Chainlink Agg.)</th>
                        <th>Discrepancy</th>
                        <th>Risk</th>
                        <th>Rationale</th>
                        <th>Strategy</th>
                    </tr>
                </thead>
                <tbody id="opportunities-table">
                    <tr id="placeholder-row"><td colspan="7" style="text-align:center; padding: 2rem;">Connecting to engine...</td></tr>
                </tbody>
            </table>
        </article>
    </main>

    <script>
        // --- THE NEW JAVASCRIPT ENGINE ---
        const socket = io();
        const statusLight = document.getElementById('status-light');
        const opportunitiesTable = document.getElementById('opportunities-table');
        const placeholderRow = document.getElementById('placeholder-row');
        const lastUpdateTime = document.getElementById('last-update-time');

        socket.on('connect', () => {
            console.log('✅ Connected to Sentinel Engine via WebSocket.');
            statusLight.textContent = 'ONLINE';
            statusLight.className = 'status-online';
            if (placeholderRow) placeholderRow.cells[0].textContent = 'Monitoring for oracle dislocations...';
        });

        socket.on('disconnect', () => {
            console.log('🔥 Disconnected from Sentinel Engine.');
            statusLight.textContent = 'OFFLINE';
            statusLight.className = 'status-offline';
        });

        socket.on('new_signal', (signal) => {
            console.log('⚡️ New Signal Received:', signal);
            if (placeholderRow) placeholderRow.remove();

            const pythClass = signal.pyth_price < signal.chainlink_price ? 'buy' : 'sell';
            const chainlinkClass = signal.pyth_price < signal.chainlink_price ? 'sell' : 'buy';

            const newRow = opportunitiesTable.insertRow(0);
            newRow.style.animation = 'fadeIn 0.7s ease-out';
            newRow.innerHTML = `
                <td><strong>BTC/USD</strong></td>
                <td><span class="${pythClass}">Pyth Network</span><br>$${signal.pyth_price.toFixed(2)}</td>
                <td><span class="${chainlinkClass}">Chainlink Agg.</span><br>$${signal.chainlink_price.toFixed(2)}</td>
                <td><strong>${signal.spread_pct.toFixed(3)}%</strong></td>
                <td><span class="risk-${signal.risk.toLowerCase()}">${signal.risk}</span></td>
                <td>${signal.rationale}</td>
                <td>${signal.strategy}</td>
            `;

            const timeStr = new Date(signal.timestamp).toLocaleTimeString('en-GB', { timeZone: 'UTC' });
            lastUpdateTime.textContent = `${timeStr} UTC`;
        });
    </script>
</body>
</html>