| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Crypto Intelligence Hub - HF Space</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" /> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js" defer></script> |
| </head> |
| <body data-theme="dark"> |
| <div class="app-shell"> |
| |
| <aside class="sidebar"> |
| <div class="brand"> |
| <strong>Crypto Intelligence Hub</strong> |
| <span class="env-pill"> |
| <svg width="12" height="12" 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> |
| HF Space |
| </span> |
| </div> |
| <nav class="nav"> |
| <button class="nav-button active" data-nav="page-overview"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z" fill="currentColor"/></svg> |
| Overview |
| </button> |
| <button class="nav-button" data-nav="page-market"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M3 17l6-6 4 4 8-8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> |
| Market |
| </button> |
| <button class="nav-button" data-nav="page-chart"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M3 3v18h18" stroke="currentColor" stroke-width="2"/><path d="M7 10l4-4 4 4 6-6" stroke="currentColor" stroke-width="2"/></svg> |
| Chart Lab |
| </button> |
| <button class="nav-button" data-nav="page-ai"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" fill="currentColor"/><path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> |
| AI Advisor |
| </button> |
| <button class="nav-button" data-nav="page-news"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10l6 6v8a2 2 0 01-2 2z" stroke="currentColor" stroke-width="2"/><path d="M7 10h6m-6 4h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> |
| News |
| </button> |
| <button class="nav-button" data-nav="page-providers"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><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> |
| Providers |
| </button> |
| <button class="nav-button" data-nav="page-datasets"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> |
| Datasets & Models |
| </button> |
| <button class="nav-button" data-nav="page-api"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill="currentColor"/></svg> |
| API Explorer |
| </button> |
| <button class="nav-button" data-nav="page-debug"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> |
| Diagnostics |
| </button> |
| <button class="nav-button" data-nav="page-settings"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/><path d="M12 1v6m0 6v6M5 5l4 4m6 6l4 4M1 12h6m6 0h6M5 19l4-4m6-6l4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> |
| Settings |
| </button> |
| </nav> |
| <div class="sidebar-footer"> |
| <small> |
| Crypto Intelligence Hub<br /> |
| <strong>10+ HF Models</strong> • <strong>14 Datasets</strong><br /> |
| Real-time data • Ensemble sentiment |
| </small> |
| </div> |
| </aside> |
|
|
| |
| <main class="main-area"> |
| |
| <header class="topbar"> |
| <div> |
| <h1>Crypto Intelligence Dashboard</h1> |
| <p class="text-muted">Live market data, AI-powered sentiment analysis, and comprehensive crypto intelligence</p> |
| </div> |
| <div class="status-group"> |
| <div class="status-pill" data-api-health data-state="warn"> |
| <span class="status-dot"></span> |
| <span>checking</span> |
| </div> |
| <div class="status-pill" data-ws-status data-state="warn"> |
| <span class="status-dot"></span> |
| <span>connecting</span> |
| </div> |
| </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 class="glass-card stat-card"> |
| <div class="stat-label">Total Market Cap</div> |
| <div class="stat-value">Loading...</div> |
| </div> |
| <div class="glass-card stat-card"> |
| <div class="stat-label">24h Volume</div> |
| <div class="stat-value">Loading...</div> |
| </div> |
| <div class="glass-card stat-card"> |
| <div class="stat-label">BTC Dominance</div> |
| <div class="stat-value">Loading...</div> |
| </div> |
| <div class="glass-card stat-card"> |
| <div class="stat-label">Market Sentiment</div> |
| <div class="stat-value">Loading...</div> |
| </div> |
| </div> |
|
|
| <div class="grid-two"> |
| |
| <div class="glass-card"> |
| <div class="section-header"> |
| <h3>Top Coins</h3> |
| <span class="text-muted">By market cap</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> |
| <tr><td colspan="7" style="text-align:center;padding:2rem;">Loading top coins...</td></tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-card"> |
| <div class="section-header"> |
| <h3>Global Sentiment</h3> |
| <span class="text-muted">Ensemble HF models</span> |
| </div> |
| <canvas id="sentiment-chart" height="220"></canvas> |
| <div style="margin-top:1rem;font-size:0.875rem;color:var(--text-secondary);"> |
| <strong>Models used:</strong> CryptoBERT, FinBERT, Twitter Sentiment<br> |
| <strong>Method:</strong> Majority voting with confidence scoring |
| </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> |
| <button class="ghost" data-refresh-market>Refresh</button> |
| </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> |
| <th>Actions</th> |
| </tr> |
| </thead> |
| <tbody data-market-body> |
| <tr><td colspan="8" style="text-align:center;padding:2rem;">Loading market data...</td></tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
|
|
| |
| <div class="drawer" data-market-drawer style="display:none;"> |
| <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>AI Sentiment Analysis</h4> |
| <div data-drawer-sentiment></div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="page-chart" class="page"> |
| <div class="section-header"> |
| <h2 class="section-title">Chart Lab</h2> |
| <div class="controls-bar"> |
| <select data-chart-symbol> |
| <option value="BTC">Bitcoin (BTC)</option> |
| <option value="ETH">Ethereum (ETH)</option> |
| <option value="SOL">Solana (SOL)</option> |
| <option value="BNB">BNB</option> |
| <option value="XRP">Ripple (XRP)</option> |
| <option value="ADA">Cardano (ADA)</option> |
| </select> |
| <div class="input-chip"> |
| <button class="ghost active" data-chart-timeframe="7d">7D</button> |
| <button class="ghost" data-chart-timeframe="30d">30D</button> |
| <button class="ghost" data-chart-timeframe="90d">90D</button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="glass-card"> |
| <canvas id="chart-lab-canvas" height="300"></canvas> |
| </div> |
|
|
| <div class="glass-card"> |
| <h4>Technical Analysis</h4> |
| <div class="controls-bar"> |
| <label><input type="checkbox" data-indicator value="MA20" checked /> MA 20</label> |
| <label><input type="checkbox" data-indicator value="MA50" /> MA 50</label> |
| <label><input type="checkbox" data-indicator value="RSI" /> RSI</label> |
| <label><input type="checkbox" data-indicator value="Volume" /> Volume</label> |
| </div> |
| <button class="primary" data-run-analysis>🤖 Analyze with AI</button> |
| <div data-ai-insights class="ai-insights" style="margin-top:1rem;"></div> |
| </div> |
| </section> |
|
|
| |
| <section id="page-ai" class="page"> |
| <div class="section-header"> |
| <h2 class="section-title">AI-Powered Sentiment & Advisory</h2> |
| <span class="chip">Ensemble: CryptoBERT + FinBERT + Social</span> |
| </div> |
|
|
| <div class="glass-card"> |
| <h4>Sentiment Analysis</h4> |
| <form data-sentiment-form> |
| <label>Text to Analyze |
| <textarea name="text" rows="4" placeholder="Enter crypto-related text, news headline, or social media post for sentiment analysis..."></textarea> |
| </label> |
| <button class="primary" type="submit">🧠 Analyze Sentiment</button> |
| </form> |
| <div data-sentiment-result style="margin-top:1rem;"></div> |
| </div> |
|
|
| <div class="glass-card" style="margin-top:1.5rem;"> |
| <h4>AI Query Interface</h4> |
| <form data-query-form> |
| <label>Ask a Question |
| <textarea name="query" rows="3" placeholder="e.g., What is the current Bitcoin price? or Analyze Ethereum trend"></textarea> |
| </label> |
| <button class="primary" type="submit">🔍 Submit Query</button> |
| </form> |
| <div data-query-result style="margin-top:1rem;"></div> |
| </div> |
|
|
| <div class="inline-message inline-info"> |
| ⚠️ AI-generated outputs are experimental and should not be considered financial advice. |
| </div> |
| </section> |
|
|
| |
| <section id="page-news" class="page"> |
| <div class="section-header"> |
| <h2 class="section-title">News & Headlines</h2> |
| <span class="chip">With AI sentiment analysis</span> |
| </div> |
|
|
| <div class="controls-bar"> |
| <input type="text" placeholder="Search headlines..." data-news-search /> |
| <input type="text" placeholder="Filter by symbol (e.g., BTC)" data-news-symbol /> |
| <button class="ghost" data-refresh-news>Refresh</button> |
| </div> |
|
|
| <div class="glass-card"> |
| <div class="table-wrapper"> |
| <table> |
| <thead> |
| <tr> |
| <th>Title</th> |
| <th>Source</th> |
| <th>Symbols</th> |
| <th>Sentiment</th> |
| <th>Time</th> |
| <th>Actions</th> |
| </tr> |
| </thead> |
| <tbody data-news-body> |
| <tr><td colspan="6" style="text-align:center;padding:2rem;">Loading news...</td></tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="page-providers" class="page"> |
| <div class="section-header"> |
| <h2 class="section-title">API Providers</h2> |
| <span class="chip">95+ data sources</span> |
| </div> |
|
|
| <div class="glass-card"> |
| <div class="table-wrapper"> |
| <table> |
| <thead> |
| <tr> |
| <th>Provider</th> |
| <th>Category</th> |
| <th>Type</th> |
| <th>Status</th> |
| <th>Response Time</th> |
| </tr> |
| </thead> |
| <tbody data-providers-body> |
| <tr><td colspan="5" style="text-align:center;padding:2rem;">Loading providers...</td></tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="page-datasets" class="page"> |
| <div class="section-header"> |
| <h2 class="section-title">HuggingFace Datasets & Models</h2> |
| </div> |
|
|
| <div class="grid-two"> |
| |
| <div class="glass-card"> |
| <h4>📊 Crypto Datasets (14+)</h4> |
| <div class="table-wrapper"> |
| <table> |
| <thead> |
| <tr> |
| <th>Dataset</th> |
| <th>Category</th> |
| <th>Actions</th> |
| </tr> |
| </thead> |
| <tbody data-datasets-body> |
| <tr><td colspan="3" style="text-align:center;padding:1rem;">Loading...</td></tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-card"> |
| <h4>🤖 AI Models (10+)</h4> |
| <div class="table-wrapper"> |
| <table> |
| <thead> |
| <tr> |
| <th>Model</th> |
| <th>Task</th> |
| <th>Status</th> |
| </tr> |
| </thead> |
| <tbody data-models-body> |
| <tr><td colspan="3" style="text-align:center;padding:1rem;">Loading...</td></tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-card" style="margin-top:1.5rem;"> |
| <h4>🧪 Test a Model</h4> |
| <form data-model-test-form> |
| <div class="grid-two"> |
| <label>Model |
| <select name="model" data-model-select> |
| <option value="">Select a model...</option> |
| </select> |
| </label> |
| <label>Input Text |
| <textarea name="input" rows="3" placeholder="Enter text to test the model..."></textarea> |
| </label> |
| </div> |
| <button class="primary" type="submit">Run Test</button> |
| </form> |
| <div data-model-test-output style="margin-top:1rem;"></div> |
| </div> |
| </section> |
|
|
| |
| <section id="page-api" class="page"> |
| <div class="section-header"> |
| <h2 class="section-title">API Explorer</h2> |
| <span class="chip">15+ endpoints</span> |
| </div> |
|
|
| <div class="glass-card"> |
| <h4>Test Endpoint</h4> |
| <form data-api-form> |
| <div class="grid-two"> |
| <label>Endpoint |
| <select data-endpoint-select> |
| <option value="0">/api/health</option> |
| </select> |
| </label> |
| <label>Method |
| <select data-method-select> |
| <option value="GET">GET</option> |
| <option value="POST">POST</option> |
| </select> |
| </label> |
| </div> |
| <div data-api-description style="margin:0.5rem 0;font-size:0.875rem;color:var(--text-secondary);"></div> |
| <div data-api-path style="margin:0.5rem 0;font-family:monospace;font-size:0.875rem;"></div> |
| <label>Body (JSON) |
| <textarea data-body-input rows="4"></textarea> |
| </label> |
| <button class="primary" type="submit">Send Request</button> |
| </form> |
| <div data-api-response style="margin-top:1rem;"></div> |
| </div> |
| </section> |
|
|
| |
| <section id="page-debug" class="page"> |
| <div class="section-header"> |
| <h2 class="section-title">System Diagnostics</h2> |
| </div> |
|
|
| <div class="grid-two"> |
| <div class="glass-card"> |
| <h4>Health Status</h4> |
| <div data-health-info>Checking...</div> |
| </div> |
|
|
| <div class="glass-card"> |
| <h4>WebSocket Status</h4> |
| <div data-ws-info>Checking...</div> |
| </div> |
| </div> |
|
|
| <div class="glass-card" style="margin-top:1.5rem;"> |
| <h4>Request Logs</h4> |
| <div data-request-logs style="max-height:400px;overflow-y:auto;font-family:monospace;font-size:0.875rem;"> |
| |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="page-settings" class="page"> |
| <div class="section-header"> |
| <h2 class="section-title">Settings</h2> |
| </div> |
|
|
| <div class="glass-card"> |
| <h4>Display Settings</h4> |
| <div class="grid-two"> |
| <label class="input-chip">Dark Theme |
| <div class="toggle"> |
| <input type="checkbox" data-theme-toggle checked /> |
| <span></span> |
| </div> |
| </label> |
| <label class="input-chip">Compact Layout |
| <div class="toggle"> |
| <input type="checkbox" data-layout-toggle /> |
| <span></span> |
| </div> |
| </label> |
| </div> |
| </div> |
|
|
| <div class="glass-card" style="margin-top:1.5rem;"> |
| <h4>Refresh Intervals</h4> |
| <div class="grid-two"> |
| <label>Market Data (seconds) |
| <input type="number" min="10" step="5" value="30" data-market-interval /> |
| </label> |
| <label>News Feed (seconds) |
| <input type="number" min="30" step="10" value="60" data-news-interval /> |
| </label> |
| </div> |
| </div> |
|
|
| <div class="inline-message inline-info" style="margin-top:1.5rem;"> |
| Settings are stored locally in your browser. |
| </div> |
| </section> |
| </div> |
| </main> |
| </div> |
|
|
| |
| <script type="module" src="static/js/app.js"></script> |
| </body> |
| </html> |
|
|
