Spaces:

jhub123
/

chromatic-canvas-delight

Running

App Files Files Community

jhub123 commited on Oct 31

Commit

3388264

verified ·

1 Parent(s): ac725f6

i want to see the actual predictions and charts

Browse files

Files changed (3) hide show

backend/app.py +32 -11
pair-details.html +215 -37
script.js +18 -7

backend/app.py CHANGED Viewed

@@ -110,20 +110,41 @@ async def create_order():
     """Place new order"""
     # TODO: Implement Binance API integration with risk checks
     return {"status": "success", "message": "Order placed"}
 @app.get("/api/signal/{symbol}", dependencies=[Depends(get_api_key)])
 async def get_signal(symbol: str, timeframe: str = "5m"):
     """Get model prediction for symbol"""
-    # TODO: Implement ML model prediction
-    return {
-        "symbol": symbol,
-        "timeframe": timeframe,
-        "prob_up": 0.67,
-        "prob_down": 0.33,
-        "confidence": 0.82,
-        "advice": "long_bias"
-    }
 @app.get("/api/risk/check", dependencies=[Depends(get_api_key)])
 async def risk_check():
     """Check if trade passes risk parameters"""

     """Place new order"""
     # TODO: Implement Binance API integration with risk checks
     return {"status": "success", "message": "Order placed"}
 @app.get("/api/signal/{symbol}", dependencies=[Depends(get_api_key)])
 async def get_signal(symbol: str, timeframe: str = "5m"):
     """Get model prediction for symbol"""
+    try:
+        # Get latest klines from Binance
+        binance = BinanceAdapter()
+        klines = binance.get_klines(
+            symbol=symbol,
+            interval=timeframe,
+            limit=100
+        )
+        # Format candles for model
+        candles = [{
+            "open": float(k[1]),
+            "high": float(k[2]),
+            "low": float(k[3]),
+            "close": float(k[4]),
+            "volume": float(k[5]),
+            "timestamp": k[0]
+        } for k in klines]
+        # Get prediction from model
+        return await model_router.get_signal(symbol, candles)
+    except Exception as e:
+        logger.error(f"Error generating signal: {e}")
+        return {
+            "symbol": symbol,
+            "timeframe": timeframe,
+            "prob_up": 0.5,
+            "prob_down": 0.5,
+            "confidence": 0,
+            "advice": "neutral"
+        }
 @app.get("/api/risk/check", dependencies=[Depends(get_api_key)])
 async def risk_check():
     """Check if trade passes risk parameters"""

pair-details.html CHANGED Viewed

@@ -5,8 +5,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CryptoPilot Pro - Trading Pair</title>
     <link rel="stylesheet" href="style.css">
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body class="bg-gray-50 min-h-screen">
@@ -88,76 +100,242 @@
     </main>
     <custom-footer></custom-footer>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
     <script src="script.js"></script>
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
             feather.replace();
-            loadPairData();
         });
         async function loadPairData() {
             const params = new URLSearchParams(window.location.search);
             const pair = params.get('pair') || 'BTC/USDT';
             document.getElementById('pair-title').textContent = pair;
             try {
-                // Fetch pair data (simulated)
-                const response = await fetch(`/api/signal/${pair.split('/')[0]}`);
-                const data = await response.json();
-                // Update UI
-                document.getElementById('current-price').textContent = `$${(Math.random() * 10000).toFixed(2)}`;
-                document.getElementById('up-prob').textContent = `${Math.round(data.prob_up * 100)}%`;
-                document.getElementById('down-prob').textContent = `${Math.round(data.prob_down * 100)}%`;
-                document.getElementById('up-progress').style.width = `${data.prob_up * 100}%`;
-                document.getElementById('down-progress').style.width = `${data.prob_down * 100}%`;
-                document.getElementById('trading-advice').textContent = data.advice.replace('_', ' ').toUpperCase();
-                // Update chart
-                updateChart(pair);
                 // Update predictions table
-                updatePredictionsTable(pair);
             } catch (error) {
                 console.error('Error loading pair data:', error);
             }
         }
-        function updateChart(pair) {
             const ctx = document.getElementById('price-chart').getContext('2d');
-            const labels = [];
-            const data = [];
-            let currentPrice = 50000;
-            for (let i = 30; i >= 0; i--) {
-                labels.push(`${i}m`);
-                currentPrice += (Math.random() - 0.5) * 100;
-                data.push(currentPrice);
-            }
-            new Chart(ctx, {
-                type: 'line',
                 data: {
                     labels: labels,
                     datasets: [{
                         label: `${pair} Price`,
-                        data: data,
-                        borderColor: '#6366f1',
-                        tension: 0.1,
-                        fill: false
                     }]
                 },
                 options: {
                     responsive: true,
-                    maintainAspectRatio: false
                 }
-            });
         }
-        function updatePredictionsTable(pair) {
             const table = document.getElementById('predictions-table');
             const predictions = [
                 { time: '5m ago', prediction: 'UP', actual: 'UP', confidence: '85%' },

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CryptoPilot Pro - Trading Pair</title>
     <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com">
+    </script>
+    <style>
+        #volume-chart {
+            height: 100px;
+            width: 100%;
+            margin-top: 1rem;
+        }
+        .chart-container {
+            position: relative;
+            height: 400px;
+        }
+    </style>
+<script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body class="bg-gray-50 min-h-screen">
     </main>
     <custom-footer></custom-footer>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
     <script src="script.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     <script>
+        // Binance API endpoints
+        const BINANCE_API = {
+            klines: 'https://api.binance.com/api/v3/klines',
+            ticker: 'https://api.binance.com/api/v3/ticker/24hr'
+        };
+        document.addEventListener('DOMContentLoaded', async () => {
             feather.replace();
+            await loadPairData();
+            initRealTimeUpdates();
         });
         async function loadPairData() {
             const params = new URLSearchParams(window.location.search);
             const pair = params.get('pair') || 'BTC/USDT';
+            const symbol = pair.replace('/', '');
             document.getElementById('pair-title').textContent = pair;
             try {
+                // Get latest price and 24h change
+                const [tickerRes, klinesRes] = await Promise.all([
+                    axios.get(`${BINANCE_API.ticker}?symbol=${symbol}`),
+                    axios.get(`${BINANCE_API.klines}?symbol=${symbol}&interval=5m&limit=100`)
+                ]);
+                const ticker = tickerRes.data;
+                const klines = klinesRes.data;
+                // Update price display
+                const currentPrice = parseFloat(ticker.lastPrice);
+                const priceChange = parseFloat(ticker.priceChangePercent);
+                document.getElementById('current-price').textContent = `${currentPrice.toFixed(2)}`;
+                const changeElement = document.getElementById('price-change');
+                changeElement.textContent = `${priceChange.toFixed(2)}% (${parseFloat(ticker.priceChange).toFixed(2)})`;
+                changeElement.className = priceChange >= 0 ? 'text-sm text-green-600' : 'text-sm text-red-600';
+                // Update chart with real data
+                updateChart(klines, pair);
+                // Get prediction from our API
+                const signalRes = await fetch(`/api/signal/${symbol}`);
+                const signal = await signalRes.json();
+                // Update prediction UI
+                document.getElementById('up-prob').textContent = `${Math.round(signal.prob_up * 100)}%`;
+                document.getElementById('down-prob').textContent = `${Math.round(signal.prob_down * 100)}%`;
+                document.getElementById('up-progress').style.width = `${signal.prob_up * 100}%`;
+                document.getElementById('down-progress').style.width = `${signal.prob_down * 100}%`;
+                document.getElementById('trading-advice').textContent = signal.advice.replace('_', ' ').toUpperCase();
+                document.getElementById('trading-advice').className =
+                    signal.advice === 'long_bias' ? 'text-green-800' :
+                    signal.advice === 'short_bias' ? 'text-red-800' : 'text-blue-800';
                 // Update predictions table
+                updatePredictionsTable(symbol);
             } catch (error) {
                 console.error('Error loading pair data:', error);
             }
         }
+        function initRealTimeUpdates() {
+            // Update price every 5 seconds
+            setInterval(async () => {
+                const pair = new URLSearchParams(window.location.search).get('pair') || 'BTC/USDT';
+                const symbol = pair.replace('/', '');
+                try {
+                    const res = await axios.get(`${BINANCE_API.ticker}?symbol=${symbol}`);
+                    const ticker = res.data;
+                    const currentPrice = parseFloat(ticker.lastPrice);
+                    document.getElementById('current-price').textContent = `${currentPrice.toFixed(2)}`;
+                } catch (error) {
+                    console.error('Error updating price:', error);
+                }
+            }, 5000);
+        }
+        function updateChart(klines, pair) {
             const ctx = document.getElementById('price-chart').getContext('2d');
+            // Process klines data
+            const labels = klines.map(k => new Date(k[0]).toLocaleTimeString());
+            const closes = klines.map(k => parseFloat(k[4]));
+            const volumes = klines.map(k => parseFloat(k[5]));
+            // Create main price chart
+            const priceChart = new Chart(ctx, {
+                type: 'candlestick',
                 data: {
                     labels: labels,
                     datasets: [{
                         label: `${pair} Price`,
+                        data: klines.map(k => ({
+                            x: new Date(k[0]),
+                            o: parseFloat(k[1]),
+                            h: parseFloat(k[2]),
+                            l: parseFloat(k[3]),
+                            c: parseFloat(k[4])
+                        })),
+                        color: {
+                            up: '#10b981',
+                            down: '#ef4444',
+                            unchanged: '#9ca3af',
+                        }
                     }]
                 },
                 options: {
                     responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        x: {
+                            type: 'time',
+                            time: {
+                                unit: 'hour'
+                            }
+                        },
+                        y: {
+                            position: 'right',
+                            ticks: {
+                                callback: function(value) {
+                                    return '
+        async function updatePredictionsTable(symbol) {
+            try {
+                // In a real app, this would come from your backend API
+                const predictions = await fetchHistoricalPredictions(symbol);
+                const table = document.getElementById('predictions-table');
+                table.innerHTML = predictions.map(pred => {
+                    const time = new Date(pred.timestamp).toLocaleTimeString();
+                    const isCorrect = pred.prediction === pred.actual;
+                    return `
+                        <tr class="border-b">
+                            <td class="px-4 py-3">${time}</td>
+                            <td class="px-4 py-3 font-semibold ${pred.prediction === 'UP' ? 'text-green-600' : 'text-red-600'}">
+                                ${pred.prediction}
+                            </td>
+                            <td class="px-4 py-3 font-semibold ${pred.actual === 'UP' ? 'text-green-600' : 'text-red-600'}">
+                                ${pred.actual} ${isCorrect ? '✓' : '✗'}
+                            </td>
+                            <td class="px-4 py-3">
+                                <div class="w-full bg-gray-200 rounded-full h-2.5">
+                                    <div class="h-2.5 rounded-full ${isCorrect ? 'bg-green-600' : 'bg-red-600'}"
+                                         style="width: ${pred.confidence}%"></div>
+                                </div>
+                                <span class="text-xs">${pred.confidence}%</span>
+                            </td>
+                        </tr>
+                    `;
+                }).join('');
+            } catch (error) {
+                console.error('Error loading predictions:', error);
+            }
+        }
+        async function fetchHistoricalPredictions(symbol) {
+            // Mock data - replace with actual API call to your backend
+            return [
+                {
+                    timestamp: Date.now() - 300000,
+                    prediction: 'UP',
+                    actual: 'UP',
+                    confidence: 85
+                },
+                {
+                    timestamp: Date.now() - 600000,
+                    prediction: 'DOWN',
+                    actual: 'UP',
+                    confidence: 72
+                },
+                {
+                    timestamp: Date.now() - 900000,
+                    prediction: 'UP',
+                    actual: 'UP',
+                    confidence: 91
                 }
+            ];
         }
+</script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+</body>
+</html> + value.toFixed(2);
+                                }
+                            }
+                        }
+                    },
+                    plugins: {
+                        tooltip: {
+                            callbacks: {
+                                label: function(context) {
+                                    return [
+                                        `Open: ${context.raw.o.toFixed(2)}`,
+                                        `High: ${context.raw.h.toFixed(2)}`,
+                                        `Low: ${context.raw.l.toFixed(2)}`,
+                                        `Close: ${context.raw.c.toFixed(2)}`
+                                    ];
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+            // Add volume chart below
+            const volumeCtx = document.createElement('canvas');
+            volumeCtx.id = 'volume-chart';
+            document.querySelector('#price-chart').parentNode.appendChild(volumeCtx);
+            new Chart(volumeCtx, {
+                type: 'bar',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: 'Volume',
+                        data: volumes,
+                        backgroundColor: klines.map((k, i) =>
+                            parseFloat(k[4]) > parseFloat(k[1]) ? '#10b981' : '#ef4444'
+                        )
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        x: {
+                            display: false
+                        }
+                    }
+                }
+            });
+        }
+function updatePredictionsTable(pair) {
             const table = document.getElementById('predictions-table');
             const predictions = [
                 { time: '5m ago', prediction: 'UP', actual: 'UP', confidence: '85%' },

script.js CHANGED Viewed

@@ -50,18 +50,29 @@ function updateAccountDisplay(accountData) {
 }
 async function fetchSignal(symbol) {
     try {
-        // Simulate API call with mock data
         return {
             symbol: symbol,
             timeframe: "5m",
-            prob_up: Math.random(),
-            prob_down: 1 - Math.random(),
-            confidence: Math.random(),
-            advice: ["long_bias", "short_bias", "neutral"][Math.floor(Math.random() * 3)]
         };
     } catch (error) {
-        console.error('Error fetching signal:', error);
-        return null;
     }
 }
 function initTradingUI() {

 }
 async function fetchSignal(symbol) {
     try {
+        const response = await fetch(`/api/signal/${symbol}`);
+        if (!response.ok) throw new Error('API request failed');
+        return await response.json();
+    } catch (error) {
+        console.error('Error fetching signal:', error);
         return {
             symbol: symbol,
             timeframe: "5m",
+            prob_up: 0.5,
+            prob_down: 0.5,
+            confidence: 0,
+            advice: "neutral"
         };
+    }
+}
+async function fetchBinanceKlines(symbol, interval='5m', limit=100) {
+    try {
+        const response = await axios.get(`https://api.binance.com/api/v3/klines?symbol=${symbol}&interval=${interval}&limit=${limit}`);
+        return response.data;
     } catch (error) {
+        console.error('Error fetching klines:', error);
+        return [];
     }
 }
 function initTradingUI() {