| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8" /> |
| <title>NexusGraph AI Analytics</title> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> |
|
|
| <style> |
| :root { |
| --bg: radial-gradient(1200px 600px at top, #e0e7ff 0%, #f8fafc 60%); |
| --card: rgba(255, 255, 255, 0.9); |
| --border: rgba(15, 23, 42, 0.08); |
| --primary: #4f46e5; |
| --secondary: #0ea5e9; |
| --text: #0f172a; |
| --muted: #64748b; |
| --success: #16a34a; |
| --error: #dc2626; |
| } |
| |
| [data-theme="dark"] { |
| --bg: radial-gradient(1200px 600px at top, #1e1b4b 0%, #0f172a 60%); |
| --card: rgba(30, 41, 59, 0.9); |
| --border: rgba(148, 163, 184, 0.1); |
| --primary: #818cf8; |
| --secondary: #38bdf8; |
| --text: #f1f5f9; |
| --muted: #94a3b8; |
| --success: #4ade80; |
| --error: #f87171; |
| } |
| |
| * { |
| box-sizing: border-box; |
| font-family: Inter, sans-serif; |
| } |
| |
| body { |
| margin: 0; |
| min-height: 100vh; |
| background: var(--bg); |
| padding: 40px 16px; |
| color: var(--text); |
| transition: background 0.3s ease, color 0.3s ease; |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| .header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 32px; |
| } |
| |
| h1 { |
| font-size: 2.2rem; |
| margin: 0; |
| font-weight: 700; |
| background: linear-gradient(135deg, #4f46e5, #06b6d4); |
| background-clip: text; |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
| |
| .back-btn { |
| padding: 10px 20px; |
| background: var(--primary); |
| color: white; |
| text-decoration: none; |
| border-radius: 12px; |
| font-weight: 600; |
| transition: transform 0.2s ease; |
| } |
| |
| .back-btn:hover { |
| transform: translateY(-2px); |
| } |
| |
| .stats-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); |
| gap: 20px; |
| margin-bottom: 32px; |
| } |
| |
| .stat-card { |
| background: var(--card); |
| backdrop-filter: blur(16px); |
| border-radius: 18px; |
| padding: 24px; |
| border: 1px solid var(--border); |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); |
| } |
| |
| .stat-label { |
| font-size: 0.85rem; |
| color: var(--muted); |
| margin-bottom: 8px; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
| |
| .stat-value { |
| font-size: 2.5rem; |
| font-weight: 700; |
| color: var(--primary); |
| } |
| |
| .card { |
| background: var(--card); |
| backdrop-filter: blur(16px); |
| border-radius: 18px; |
| padding: 28px; |
| border: 1px solid var(--border); |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); |
| margin-bottom: 24px; |
| } |
| |
| .card h2 { |
| margin-top: 0; |
| margin-bottom: 20px; |
| font-size: 1.3rem; |
| } |
| |
| table { |
| width: 100%; |
| border-collapse: collapse; |
| } |
| |
| th, |
| td { |
| text-align: left; |
| padding: 12px; |
| border-bottom: 1px solid var(--border); |
| } |
| |
| th { |
| font-weight: 600; |
| color: var(--muted); |
| font-size: 0.85rem; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
| |
| .badge { |
| display: inline-block; |
| padding: 4px 10px; |
| border-radius: 12px; |
| font-size: 0.75rem; |
| font-weight: 600; |
| } |
| |
| .badge-success { |
| background: #dcfce7; |
| color: #166534; |
| } |
| |
| .badge-error { |
| background: #fee2e2; |
| color: #991b1b; |
| } |
| |
| .theme-toggle { |
| position: fixed; |
| top: 20px; |
| right: 20px; |
| background: var(--card); |
| border: 1px solid var(--border); |
| border-radius: 12px; |
| padding: 10px; |
| cursor: pointer; |
| font-size: 1.4rem; |
| transition: transform 0.2s ease; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
| } |
| |
| .theme-toggle:hover { |
| transform: scale(1.1); |
| } |
| |
| .empty-state { |
| text-align: center; |
| padding: 60px 20px; |
| color: var(--muted); |
| } |
| </style> |
| </head> |
|
|
| <body> |
| <button class="theme-toggle" onclick="toggleTheme()" title="Toggle dark mode">🌙</button> |
|
|
| <div class="container"> |
| <div class="header"> |
| <h1>📊 Analytics Dashboard</h1> |
| <a href="/" class="back-btn">← Back to RAG</a> |
| </div> |
|
|
| <div id="stats-container"> |
| <div class="empty-state"> |
| <h2>Loading analytics...</h2> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| // ===== THEME TOGGLE ===== |
| function toggleTheme() { |
| const html = document.documentElement; |
| const currentTheme = html.getAttribute('data-theme'); |
| const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; |
| |
| html.setAttribute('data-theme', newTheme); |
| localStorage.setItem('theme', newTheme); |
| |
| const btn = document.querySelector('.theme-toggle'); |
| btn.textContent = newTheme === 'dark' ? '☀️' : '🌙'; |
| } |
| |
| // Load saved theme |
| (function () { |
| const savedTheme = localStorage.getItem('theme') || 'light'; |
| document.documentElement.setAttribute('data-theme', savedTheme); |
| const btn = document.querySelector('.theme-toggle'); |
| if (btn) btn.textContent = savedTheme === 'dark' ? '☀️' : '🌙'; |
| })(); |
| |
| // ===== LOAD ANALYTICS ===== |
| async function loadAnalytics() { |
| try { |
| const res = await fetch('/analytics'); |
| |
| const data = await res.json(); |
| |
| if (data.total_queries === 0) { |
| document.getElementById('stats-container').innerHTML = ` |
| <div class="empty-state"> |
| <h2>No data yet</h2> |
| <p>Start asking questions to see analytics!</p> |
| </div> |
| `; |
| return; |
| } |
| |
| const html = ` |
| <div class="stats-grid"> |
| <div class="stat-card"> |
| <div class="stat-label">Total Queries</div> |
| <div class="stat-value">${data.total_queries}</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-label">Knowledge Rate</div> |
| <div class="stat-value">${data.knowledge_rate}%</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-label">Avg Confidence</div> |
| <div class="stat-value">${(data.avg_confidence * 100).toFixed(0)}%</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-label">Unknown Queries</div> |
| <div class="stat-value" style="color: var(--error)">${data.unknown_count}</div> |
| </div> |
| </div> |
| |
| <div class="card"> |
| <h2>Recent Queries</h2> |
| <table> |
| <thead> |
| <tr> |
| <th>Query</th> |
| <th>Confidence</th> |
| <th>Status</th> |
| </tr> |
| </thead> |
| <tbody> |
| ${data.top_queries.map(q => ` |
| <tr> |
| <td>${q.query}</td> |
| <td>${(q.confidence * 100).toFixed(0)}%</td> |
| <td> |
| <span class="badge ${q.answer_known ? 'badge-success' : 'badge-error'}"> |
| ${q.answer_known ? 'Known' : 'Unknown'} |
| </span> |
| </td> |
| </tr> |
| `).join('')} |
| </tbody> |
| </table> |
| </div> |
| |
| ${data.recent_unknown.length > 0 ? ` |
| <div class="card"> |
| <h2>Recent "I Don't Know" Queries</h2> |
| <table> |
| <thead> |
| <tr> |
| <th>Query</th> |
| <th>Time</th> |
| </tr> |
| </thead> |
| <tbody> |
| ${data.recent_unknown.map(q => ` |
| <tr> |
| <td>${q.query}</td> |
| <td>${q.timestamp}</td> |
| </tr> |
| `).join('')} |
| </tbody> |
| </table> |
| </div> |
| ` : ''} |
| `; |
| |
| document.getElementById('stats-container').innerHTML = html; |
| } catch (e) { |
| document.getElementById('stats-container').innerHTML = ` |
| <div class="empty-state"> |
| <h2>Error loading analytics</h2> |
| <p>${e.message}</p> |
| </div> |
| `; |
| } |
| } |
| |
| // Load on page load |
| loadAnalytics(); |
| </script> |
| </body> |
|
|
| </html> |
