Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Duck.ai API Dashboard</title> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { background: #0f1117; color: #e0e0e0; font-family: 'Segoe UI', sans-serif; padding: 20px; } | |
| h1 { text-align: center; color: #4fc3f7; margin-bottom: 24px; font-size: 1.6rem; } | |
| .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } | |
| .card { background: #1e2130; border-radius: 12px; padding: 20px; border: 1px solid #2a2d3e; } | |
| .card .label { font-size: 0.8rem; color: #888; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; } | |
| .card .value { font-size: 2rem; font-weight: bold; } | |
| .card .value.green { color: #69f0ae; } | |
| .card .value.blue { color: #4fc3f7; } | |
| .card .value.orange { color: #ffb74d; } | |
| .card .value.red { color: #ef5350; } | |
| .card .value.purple { color: #ce93d8; } | |
| .section { background: #1e2130; border-radius: 12px; padding: 20px; margin-bottom: 20px; border: 1px solid #2a2d3e; } | |
| .section h2 { color: #4fc3f7; margin-bottom: 16px; font-size: 1rem; } | |
| table { width: 100%; border-collapse: collapse; } | |
| th { text-align: right; padding: 10px; background: #252840; color: #aaa; font-size: 0.8rem; } | |
| td { padding: 10px; border-bottom: 1px solid #2a2d3e; font-size: 0.9rem; } | |
| .badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; } | |
| .badge.busy { background: #ef535020; color: #ef5350; border: 1px solid #ef535050; } | |
| .badge.free { background: #69f0ae20; color: #69f0ae; border: 1px solid #69f0ae50; } | |
| .bar-wrap { background: #252840; border-radius: 20px; height: 10px; overflow: hidden; margin-top: 6px; } | |
| .bar { height: 100%; border-radius: 20px; transition: width 0.5s; background: linear-gradient(90deg, #4fc3f7, #69f0ae); } | |
| .bar.warn { background: linear-gradient(90deg, #ffb74d, #ef5350); } | |
| .log-box { background: #0d1117; border-radius: 8px; padding: 14px; font-family: monospace; font-size: 0.8rem; | |
| height: 220px; overflow-y: auto; color: #ccc; border: 1px solid #2a2d3e; } | |
| .log-box .ok { color: #69f0ae; } | |
| .log-box .err { color: #ef5350; } | |
| .log-box .info { color: #4fc3f7; } | |
| .log-box .warn { color: #ffb74d; } | |
| .refresh-badge { text-align: center; color: #555; font-size: 0.75rem; margin-top: 10px; } | |
| .chart-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } | |
| canvas { background: #141720; border-radius: 8px; border: 1px solid #2a2d3e; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>🦆 Duck.ai API — لوحة المراقبة</h1> | |
| <!-- KPI Cards --> | |
| <div class="grid"> | |
| <div class="card"> | |
| <div class="label">إجمالي الطلبات</div> | |
| <div class="value blue" id="total_req">—</div> | |
| </div> | |
| <div class="card"> | |
| <div class="label">طلبات اليوم</div> | |
| <div class="value green" id="today_req">—</div> | |
| </div> | |
| <div class="card"> | |
| <div class="label">مرفوضة (Queue Full)</div> | |
| <div class="value red" id="rejected">—</div> | |
| </div> | |
| <div class="card"> | |
| <div class="label">Workers حرة</div> | |
| <div class="value green" id="workers_free">—</div> | |
| </div> | |
| <div class="card"> | |
| <div class="label">Workers مشغولة</div> | |
| <div class="value orange" id="workers_busy">—</div> | |
| </div> | |
| <div class="card"> | |
| <div class="label">RAM المستخدم</div> | |
| <div class="value purple" id="ram_used">—</div> | |
| </div> | |
| <div class="card"> | |
| <div class="label">RAM الكلي</div> | |
| <div class="value blue" id="ram_total">—</div> | |
| </div> | |
| <div class="card"> | |
| <div class="label">CPU %</div> | |
| <div class="value orange" id="cpu">—</div> | |
| </div> | |
| </div> | |
| <!-- Workers Table --> | |
| <div class="section"> | |
| <h2>⚙️ حالة Workers</h2> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Worker</th> | |
| <th>الحالة</th> | |
| <th>إجمالي الطلبات</th> | |
| <th>حتى التجديد</th> | |
| <th>شريط التقدم</th> | |
| </tr> | |
| </thead> | |
| <tbody id="workers_table"></tbody> | |
| </table> | |
| </div> | |
| <!-- Charts --> | |
| <div class="chart-wrap" style="margin-bottom:20px;"> | |
| <div class="section" style="margin:0;"> | |
| <h2>📈 الطلبات (آخر 60 دقيقة)</h2> | |
| <canvas id="reqChart" height="120"></canvas> | |
| </div> | |
| <div class="section" style="margin:0;"> | |
| <h2>💾 RAM % (آخر 60 دقيقة)</h2> | |
| <canvas id="ramChart" height="120"></canvas> | |
| </div> | |
| </div> | |
| <!-- Live Log --> | |
| <div class="section"> | |
| <h2>📋 السجل المباشر</h2> | |
| <div class="log-box" id="log_box"></div> | |
| </div> | |
| <div class="refresh-badge">يتجدد كل <span id="interval_val">5</span> ثوان • آخر تحديث: <span id="last_update">—</span></div> | |
| <script> | |
| const REFRESH = 5000; | |
| let reqHistory = Array(60).fill(0); | |
| let ramHistory = Array(60).fill(0); | |
| let logs = []; | |
| let lastTotal = 0; | |
| const todayKey = () => new Date().toISOString().slice(0,10); | |
| let todayCount = parseInt(localStorage.getItem('today_' + todayKey()) || '0'); | |
| let lastDay = localStorage.getItem('last_day') || todayKey(); | |
| async function fetchData() { | |
| try { | |
| const r = await fetch('/health'); | |
| const d = await r.json(); | |
| // KPIs | |
| document.getElementById('total_req').textContent = d.total_requests ?? '—'; | |
| document.getElementById('rejected').textContent = d.rejected_requests ?? 0; | |
| document.getElementById('workers_free').textContent = d.workers_free ?? '—'; | |
| document.getElementById('workers_busy').textContent = d.workers_busy ?? '—'; | |
| if (d.ram) { | |
| document.getElementById('ram_used').textContent = d.ram.used_gb + ' GB'; | |
| document.getElementById('ram_total').textContent = d.ram.total_gb + ' GB'; | |
| } | |
| if (d.cpu !== undefined) { | |
| document.getElementById('cpu').textContent = d.cpu + '%'; | |
| } | |
| // Today counter | |
| const diff = (d.total_requests ?? 0) - lastTotal; | |
| if (diff > 0) { | |
| if (lastDay !== todayKey()) { | |
| todayCount = 0; | |
| lastDay = todayKey(); | |
| localStorage.setItem('last_day', lastDay); | |
| } | |
| todayCount += diff; | |
| localStorage.setItem('today_' + todayKey(), todayCount); | |
| lastTotal = d.total_requests ?? 0; | |
| } | |
| document.getElementById('today_req').textContent = todayCount; | |
| // Workers table | |
| const tbody = document.getElementById('workers_table'); | |
| tbody.innerHTML = ''; | |
| (d.workers || []).forEach(w => { | |
| const pct = Math.round(((30 - w.requests_until_rotation) / 30) * 100); | |
| const warn = pct > 80 ? 'warn' : ''; | |
| tbody.innerHTML += ` | |
| <tr> | |
| <td>W${w.id}</td> | |
| <td><span class="badge ${w.busy ? 'busy' : 'free'}">${w.busy ? '🔴 مشغول' : '🟢 حر'}</span></td> | |
| <td>${w.total_requests}</td> | |
| <td>${w.requests_until_rotation}</td> | |
| <td style="width:160px"> | |
| <div class="bar-wrap"><div class="bar ${warn}" style="width:${pct}%"></div></div> | |
| </td> | |
| </tr>`; | |
| }); | |
| // History | |
| reqHistory.push(diff > 0 ? diff : 0); reqHistory.shift(); | |
| if (d.ram) { ramHistory.push(d.ram.percent); ramHistory.shift(); } | |
| drawChart('reqChart', reqHistory, '#4fc3f7'); | |
| drawChart('ramChart', ramHistory, '#ce93d8', 100); | |
| // Log | |
| addLog(`✓ total=${d.total_requests} | free=${d.workers_free} | busy=${d.workers_busy}`, 'ok'); | |
| document.getElementById('last_update').textContent = new Date().toLocaleTimeString('ar-EG'); | |
| } catch(e) { | |
| addLog('❌ فشل الاتصال: ' + e.message, 'err'); | |
| } | |
| } | |
| function addLog(msg, cls='info') { | |
| const now = new Date().toLocaleTimeString('ar-EG'); | |
| logs.unshift(`<span class="${cls}">[${now}] ${msg}</span>`); | |
| if (logs.length > 80) logs.pop(); | |
| document.getElementById('log_box').innerHTML = logs.join('<br>'); | |
| } | |
| function drawChart(id, data, color, maxVal = null) { | |
| const canvas = document.getElementById(id); | |
| const ctx = canvas.getContext('2d'); | |
| canvas.width = canvas.offsetWidth; | |
| canvas.height = 120; | |
| const W = canvas.width, H = canvas.height; | |
| const max = maxVal ?? (Math.max(...data, 1)); | |
| ctx.clearRect(0,0,W,H); | |
| // grid lines | |
| ctx.strokeStyle = '#2a2d3e'; ctx.lineWidth = 1; | |
| [0.25, 0.5, 0.75].forEach(f => { | |
| ctx.beginPath(); ctx.moveTo(0, H*f); ctx.lineTo(W, H*f); ctx.stroke(); | |
| }); | |
| // area | |
| const step = W / (data.length - 1); | |
| ctx.beginPath(); | |
| data.forEach((v, i) => { | |
| const x = i * step, y = H - (v / max) * (H - 10) - 5; | |
| i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); | |
| }); | |
| ctx.strokeStyle = color; ctx.lineWidth = 2; ctx.stroke(); | |
| ctx.lineTo(W, H); ctx.lineTo(0, H); ctx.closePath(); | |
| ctx.fillStyle = color + '22'; ctx.fill(); | |
| } | |
| document.getElementById('interval_val').textContent = REFRESH / 1000; | |
| fetchData(); | |
| setInterval(fetchData, REFRESH); | |
| </script> | |
| </body> | |
| </html> |