Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Crypto Monitor HF - Unified Dashboard</title> | |
| <link rel="stylesheet" href="static/css/design-tokens.css" /> | |
| <link rel="stylesheet" href="static/css/design-system.css" /> | |
| <link rel="stylesheet" href="static/css/dashboard.css" /> | |
| <link rel="stylesheet" href="static/css/pro-dashboard.css" /> | |
| <link rel="stylesheet" href="static/css/modern-dashboard.css" /> | |
| <link rel="stylesheet" href="static/css/glassmorphism.css" /> | |
| <link rel="stylesheet" href="static/css/light-minimal-theme.css" /> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js" defer></script> | |
| <script src="static/js/animations.js" defer></script> | |
| <script src="static/js/menu-system.js" defer></script> | |
| <script src="static/js/huggingface-integration.js" defer></script> | |
| </head> | |
| <body data-theme="light"> | |
| <div class="app-shell"> | |
| <aside class="sidebar sidebar-modern"> | |
| <div class="brand brand-modern"> | |
| <div class="brand-icon"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="1.5" /> | |
| <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="1.5" /> | |
| <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="1.5" /> | |
| </svg> | |
| </div> | |
| <div class="brand-text"> | |
| <strong>Crypto Monitor HF</strong> | |
| <span class="env-pill"> | |
| <svg width="10" height="10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="1.5" /> | |
| </svg> | |
| HF Space | |
| </span> | |
| </div> | |
| </div> | |
| <nav class="nav nav-modern"> | |
| <button class="nav-button nav-button-modern active" data-nav="page-overview"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| <path d="M9 22V12h6v10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| <span>Overview</span> | |
| </button> | |
| <button class="nav-button nav-button-modern" data-nav="page-market"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M3 3v18h18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> | |
| <path d="M7 10l4-4 4 4 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| <span>Market</span> | |
| </button> | |
| <button class="nav-button nav-button-modern" data-nav="page-chart"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M3 3v18h18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> | |
| <path d="M7 16l4-4 4 4 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| <span>Chart Lab</span> | |
| </button> | |
| <button class="nav-button nav-button-modern" data-nav="page-ai"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| <span>Sentiment & AI</span> | |
| </button> | |
| <button class="nav-button nav-button-modern" data-nav="page-news"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M4 19.5A2.5 2.5 0 016.5 17H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| <path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| <span>News</span> | |
| </button> | |
| <button class="nav-button nav-button-modern" data-nav="page-providers"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/> | |
| <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> | |
| </svg> | |
| <span>Providers</span> | |
| </button> | |
| <button class="nav-button nav-button-modern" data-nav="page-api"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| <span>API Explorer</span> | |
| </button> | |
| <button class="nav-button nav-button-modern" data-nav="page-debug"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/> | |
| <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> | |
| </svg> | |
| <span>Diagnostics</span> | |
| </button> | |
| <button class="nav-button nav-button-modern" data-nav="page-datasets"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| <span>Datasets & Models</span> | |
| </button> | |
| <button class="nav-button nav-button-modern" data-nav="page-settings"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/> | |
| <path d="M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> | |
| </svg> | |
| <span>Settings</span> | |
| </button> | |
| </nav> | |
| <div class="sidebar-footer"> | |
| <div class="footer-badge"> | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| Unified Intelligence Console | |
| </div> | |
| </div> | |
| </aside> | |
| <main class="main-area"> | |
| <header class="modern-header"> | |
| <div style="display: flex; align-items: center; justify-content: space-between; width: 100%; flex-wrap: wrap; gap: 16px;"> | |
| <div> | |
| <h1 style="margin: 0; font-size: 1.75rem; font-weight: 800; background: linear-gradient(135deg, #00D4FF, #8B5CF6, #EC4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Unified Intelligence Dashboard</h1> | |
| <p class="text-muted" style="margin: 4px 0 0 0; font-size: 0.875rem;">Live market telemetry, AI signals, diagnostics, and provider health.</p> | |
| </div> | |
| <div class="status-group" style="display: flex; gap: 12px; align-items: center; position: relative;"> | |
| <div class="status-pill" data-api-health data-state="warn" style="padding: 8px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);"> | |
| <span class="status-dot"></span> | |
| <span>checking</span> | |
| </div> | |
| <div class="status-pill" data-ws-status data-state="warn" style="padding: 8px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);"> | |
| <span class="status-dot"></span> | |
| <span>connecting</span> | |
| </div> | |
| <button class="button-3d" data-menu-trigger="theme-menu" style="padding: 8px 16px; position: relative;"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/> | |
| <path d="M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> | |
| </svg> | |
| </button> | |
| <div class="menu-dropdown" data-menu="theme-menu" style="display: none; top: 100%; right: 0; margin-top: 8px;"> | |
| <div class="menu-item" data-action="theme-light"> | |
| <span>☀️ Light Theme</span> | |
| </div> | |
| <div class="menu-item" data-action="theme-dark"> | |
| <span>🌙 Dark Theme</span> | |
| </div> | |
| <div class="menu-separator"></div> | |
| <div class="menu-item" data-action="settings"> | |
| <span>⚙️ Settings</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="header-crypto-list" data-header-crypto-list style="margin-top: 16px; width: 100%;"> | |
| <!-- Crypto list will be populated by JavaScript --> | |
| </div> | |
| </header> | |
| <div class="page-container"> | |
| <section id="page-overview" class="page active"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Global Overview</h2> | |
| <span class="chip">Powered by /api/market/stats</span> | |
| </div> | |
| <div class="stats-grid" data-overview-stats></div> | |
| <div class="grid-two"> | |
| <div class="glass-card"> | |
| <div class="section-header"> | |
| <h3>Top Coins</h3> | |
| <span class="text-muted">Market movers</span> | |
| </div> | |
| <div class="table-wrapper"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>#</th> | |
| <th>Symbol</th> | |
| <th>Name</th> | |
| <th>Price</th> | |
| <th>24h %</th> | |
| <th>Volume</th> | |
| <th>Market Cap</th> | |
| </tr> | |
| </thead> | |
| <tbody data-top-coins-body></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="glass-card"> | |
| <div class="section-header"> | |
| <h3>Global Sentiment</h3> | |
| <span class="text-muted">CryptoBERT stack</span> | |
| </div> | |
| <canvas id="sentiment-chart" height="220"></canvas> | |
| </div> | |
| </div> | |
| <div class="glass-card" style="margin-top: 24px;"> | |
| <div class="section-header"> | |
| <h3>Backend Information</h3> | |
| <span class="text-muted">System Status</span> | |
| </div> | |
| <div data-backend-info class="backend-info-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 16px;"> | |
| <div class="backend-info-item"> | |
| <span class="info-label">API Status</span> | |
| <span class="info-value" data-api-status>Checking...</span> | |
| </div> | |
| <div class="backend-info-item"> | |
| <span class="info-label">WebSocket</span> | |
| <span class="info-value" data-ws-status>Connecting...</span> | |
| </div> | |
| <div class="backend-info-item"> | |
| <span class="info-label">Providers</span> | |
| <span class="info-value" data-providers-count>—</span> | |
| </div> | |
| <div class="backend-info-item"> | |
| <span class="info-label">Last Update</span> | |
| <span class="info-value" data-last-update>—</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="page-market" class="page"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Market Intelligence</h2> | |
| <div class="controls-bar"> | |
| <div class="input-chip"> | |
| <svg viewBox="0 0 24 24" width="16" height="16"><path d="M21 20l-5.6-5.6A6.5 6.5 0 1 0 15.4 16L21 21zM5 10.5a5.5 5.5 0 1 1 11 0a5.5 5.5 0 0 1-11 0z" fill="currentColor"/></svg> | |
| <input type="text" placeholder="Search symbol" data-market-search /> | |
| </div> | |
| <div class="input-chip"> | |
| Timeframe: | |
| <button class="ghost" data-timeframe="1d">1D</button> | |
| <button class="ghost active" data-timeframe="7d">7D</button> | |
| <button class="ghost" data-timeframe="30d">30D</button> | |
| </div> | |
| <label class="input-chip"> Live updates | |
| <div class="toggle"> | |
| <input type="checkbox" data-live-toggle /> | |
| <span></span> | |
| </div> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="glass-card"> | |
| <div class="table-wrapper"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>#</th> | |
| <th>Symbol</th> | |
| <th>Name</th> | |
| <th>Price</th> | |
| <th>24h %</th> | |
| <th>Volume</th> | |
| <th>Market Cap</th> | |
| </tr> | |
| </thead> | |
| <tbody data-market-body></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="drawer" data-market-drawer> | |
| <button class="ghost" data-close-drawer>Close</button> | |
| <h3 data-drawer-symbol>—</h3> | |
| <div data-drawer-stats></div> | |
| <div class="glass-card" data-chart-wrapper> | |
| <canvas id="market-detail-chart" height="180"></canvas> | |
| </div> | |
| <div class="glass-card"> | |
| <h4>Related Headlines</h4> | |
| <div data-drawer-news></div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="page-chart" class="page"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Chart Lab - TradingView Style</h2> | |
| <div class="controls-bar"> | |
| <select data-chart-symbol style="padding: 8px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-primary);"> | |
| <option value="BTC">BTC</option> | |
| <option value="ETH">ETH</option> | |
| <option value="SOL">SOL</option> | |
| <option value="BNB">BNB</option> | |
| <option value="ADA">ADA</option> | |
| <option value="DOT">DOT</option> | |
| <option value="MATIC">MATIC</option> | |
| <option value="AVAX">AVAX</option> | |
| </select> | |
| <div class="chart-toolbar"> | |
| <button class="chart-timeframe-btn active" data-chart-timeframe="1d">1D</button> | |
| <button class="chart-timeframe-btn" data-chart-timeframe="7d">7D</button> | |
| <button class="chart-timeframe-btn" data-chart-timeframe="30d">30D</button> | |
| <button class="chart-timeframe-btn" data-chart-timeframe="90d">90D</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tradingview-chart-container glass-vibrant"> | |
| <div class="chart-toolbar"> | |
| <div class="chart-indicators"> | |
| <label class="chart-indicator-toggle"> | |
| <input type="checkbox" data-indicator="MA20" checked /> | |
| <span>MA 20</span> | |
| </label> | |
| <label class="chart-indicator-toggle"> | |
| <input type="checkbox" data-indicator="MA50" /> | |
| <span>MA 50</span> | |
| </label> | |
| <label class="chart-indicator-toggle"> | |
| <input type="checkbox" data-indicator="RSI" /> | |
| <span>RSI</span> | |
| </label> | |
| <label class="chart-indicator-toggle"> | |
| <input type="checkbox" data-indicator="Volume" checked /> | |
| <span>Volume</span> | |
| </label> | |
| </div> | |
| </div> | |
| <canvas id="chart-lab-canvas" height="400"></canvas> | |
| </div> | |
| <div class="glass-card glass-vibrant" style="margin-top: 24px;"> | |
| <div class="controls-bar" style="margin-bottom: 16px;"> | |
| <button class="primary" data-run-analysis style="background: linear-gradient(135deg, #00D4FF, #8B5CF6);">Analyze Chart with AI</button> | |
| </div> | |
| <div data-ai-insights class="ai-insights"></div> | |
| </div> | |
| </section> | |
| <section id="page-ai" class="page"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Sentiment & AI Advisor</h2> | |
| </div> | |
| <div class="glass-card"> | |
| <form data-ai-form class="ai-form"> | |
| <div class="grid-two"> | |
| <label>Symbol | |
| <select name="symbol"> | |
| <option value="BTC">BTC</option> | |
| <option value="ETH">ETH</option> | |
| <option value="SOL">SOL</option> | |
| </select> | |
| </label> | |
| <label>Time Horizon | |
| <select name="horizon"> | |
| <option value="intraday">Intraday</option> | |
| <option value="swing" selected>Swing</option> | |
| <option value="long">Long Term</option> | |
| </select> | |
| </label> | |
| <label>Risk Profile | |
| <select name="risk"> | |
| <option value="conservative">Conservative</option> | |
| <option value="moderate" selected>Moderate</option> | |
| <option value="aggressive">Aggressive</option> | |
| </select> | |
| </label> | |
| <label>Sentiment Model | |
| <select name="model"> | |
| <option value="auto">Auto</option> | |
| <option value="crypto">CryptoBERT</option> | |
| <option value="financial">FinBERT</option> | |
| <option value="social">Twitter Sentiment</option> | |
| </select> | |
| </label> | |
| </div> | |
| <label>Context or Headline | |
| <textarea name="context" placeholder="Paste a headline or trade thesis for AI analysis"></textarea> | |
| </label> | |
| <button class="primary" type="submit">Generate Guidance</button> | |
| </form> | |
| <div class="grid-two"> | |
| <div data-ai-result class="ai-result"></div> | |
| <div data-sentiment-result></div> | |
| </div> | |
| <div class="inline-message inline-info" data-ai-disclaimer> | |
| Experimental AI output. Not financial advice. | |
| </div> | |
| </div> | |
| </section> | |
| <section id="page-news" class="page"> | |
| <div class="section-header"> | |
| <h2 class="section-title">News & Summaries</h2> | |
| </div> | |
| <div class="controls-bar"> | |
| <select data-news-range> | |
| <option value="24h">Last 24h</option> | |
| <option value="7d">7 Days</option> | |
| <option value="30d">30 Days</option> | |
| </select> | |
| <input type="text" placeholder="Search headline" data-news-search /> | |
| <input type="text" placeholder="Filter symbol (e.g. BTC)" data-news-symbol /> | |
| </div> | |
| <div class="glass-card"> | |
| <div class="table-wrapper"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Time</th> | |
| <th>Source</th> | |
| <th>Title</th> | |
| <th>Symbols</th> | |
| <th>Sentiment</th> | |
| <th>AI</th> | |
| </tr> | |
| </thead> | |
| <tbody data-news-body></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="modal-backdrop" data-news-modal> | |
| <div class="modal"> | |
| <button class="ghost" data-close-news-modal>Close</button> | |
| <div data-news-modal-content></div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="page-providers" class="page"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Provider Health</h2> | |
| <button class="ghost" data-provider-refresh>Refresh</button> | |
| </div> | |
| <div class="stats-grid" data-provider-summary></div> | |
| <div class="controls-bar"> | |
| <input type="search" placeholder="Search provider" data-provider-search /> | |
| <select data-provider-category> | |
| <option value="all">All Categories</option> | |
| <option value="market">Market Data</option> | |
| <option value="news">News</option> | |
| <option value="ai">AI</option> | |
| </select> | |
| </div> | |
| <div class="glass-card"> | |
| <div class="table-wrapper"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Name</th> | |
| <th>Category</th> | |
| <th>Status</th> | |
| <th>Latency</th> | |
| <th>Details</th> | |
| </tr> | |
| </thead> | |
| <tbody data-providers-table></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="page-api" class="page"> | |
| <div class="section-header"> | |
| <h2 class="section-title">API Explorer</h2> | |
| <span class="chip">Test live endpoints</span> | |
| </div> | |
| <div class="glass-card"> | |
| <div class="grid-two"> | |
| <label>Endpoint | |
| <select data-api-endpoint></select> | |
| </label> | |
| <label>Method | |
| <select data-api-method> | |
| <option value="GET">GET</option> | |
| <option value="POST">POST</option> | |
| </select> | |
| </label> | |
| <label>Query Params | |
| <input type="text" placeholder="limit=10&symbol=BTC" data-api-params /> | |
| </label> | |
| <label>Body (JSON) | |
| <textarea data-api-body placeholder='{ "text": "Bitcoin" }'></textarea> | |
| </label> | |
| </div> | |
| <p class="text-muted">Path: <span data-api-path></span> — <span data-api-description></span></p> | |
| <button class="primary" data-api-send>Send Request</button> | |
| <div class="inline-message" data-api-meta>Ready</div> | |
| <pre data-api-response class="api-response"></pre> | |
| </div> | |
| </section> | |
| <section id="page-debug" class="page"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Diagnostics</h2> | |
| <button class="ghost" data-refresh-health>Refresh</button> | |
| </div> | |
| <div class="stats-grid"> | |
| <div class="glass-card"> | |
| <h3>API Health</h3> | |
| <div class="stat-value" data-health-status>—</div> | |
| </div> | |
| <div class="glass-card"> | |
| <h3>Providers</h3> | |
| <div data-providers class="grid-two"></div> | |
| </div> | |
| </div> | |
| <div class="grid-two"> | |
| <div class="glass-card"> | |
| <h4>Request Log</h4> | |
| <div class="table-wrapper log-table"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Time</th> | |
| <th>Method</th> | |
| <th>Endpoint</th> | |
| <th>Status</th> | |
| <th>Latency</th> | |
| </tr> | |
| </thead> | |
| <tbody data-request-log></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="glass-card"> | |
| <h4>Error Log</h4> | |
| <div class="table-wrapper log-table"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Time</th> | |
| <th>Endpoint</th> | |
| <th>Message</th> | |
| </tr> | |
| </thead> | |
| <tbody data-error-log></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-card"> | |
| <h4>WebSocket Events</h4> | |
| <div class="table-wrapper log-table"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Time</th> | |
| <th>Type</th> | |
| <th>Detail</th> | |
| </tr> | |
| </thead> | |
| <tbody data-ws-log></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="page-datasets" class="page"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Datasets & Models</h2> | |
| </div> | |
| <div class="grid-two"> | |
| <div class="glass-card"> | |
| <h3>Datasets</h3> | |
| <div class="table-wrapper"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Name</th> | |
| <th>Records</th> | |
| <th>Updated</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody data-datasets-body></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="glass-card"> | |
| <h3>Models</h3> | |
| <div class="table-wrapper"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Name</th> | |
| <th>Task</th> | |
| <th>Status</th> | |
| <th>Notes</th> | |
| </tr> | |
| </thead> | |
| <tbody data-models-body></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-card"> | |
| <h4>Test a Model</h4> | |
| <form data-model-test-form class="grid-two"> | |
| <label>Model | |
| <select data-model-select name="model"></select> | |
| </label> | |
| <label>Input | |
| <textarea name="input" placeholder="Type a prompt"></textarea> | |
| </label> | |
| <button class="primary" type="submit">Run Test</button> | |
| </form> | |
| <div data-model-test-output></div> | |
| </div> | |
| <div class="modal-backdrop" data-dataset-modal> | |
| <div class="modal"> | |
| <button class="ghost" data-close-dataset-modal>Close</button> | |
| <div data-dataset-modal-content></div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="page-settings" class="page"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Settings</h2> | |
| </div> | |
| <div class="glass-card"> | |
| <div class="grid-two"> | |
| <label class="input-chip">Light Theme | |
| <div class="toggle"> | |
| <input type="checkbox" data-theme-toggle /> | |
| <span></span> | |
| </div> | |
| </label> | |
| <label>Market Refresh (sec) | |
| <input type="number" min="15" step="5" data-market-interval /> | |
| </label> | |
| <label>News Refresh (sec) | |
| <input type="number" min="30" step="10" data-news-interval /> | |
| </label> | |
| <label class="input-chip">Compact Layout | |
| <div class="toggle"> | |
| <input type="checkbox" data-layout-toggle /> | |
| <span></span> | |
| </div> | |
| </label> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| </div> | |
| <script type="module" src="static/js/app.js"></script> | |
| </body> | |
| </html> | |