Spaces:
Sleeping
Sleeping
| <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"> | |
| <!-- Sidebar Navigation --> | |
| <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 Content Area --> | |
| <main class="main-area"> | |
| <!-- Top Bar with Status --> | |
| <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"> | |
| <!-- ========== OVERVIEW PAGE ========== --> | |
| <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> | |
| <!-- Market Stats Cards --> | |
| <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"> | |
| <!-- Top Coins Table --> | |
| <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> | |
| <!-- Sentiment Chart --> | |
| <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> | |
| <!-- ========== MARKET PAGE ========== --> | |
| <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> | |
| <!-- Coin Detail Drawer --> | |
| <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> | |
| <!-- ========== CHART LAB PAGE ========== --> | |
| <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> | |
| <!-- ========== AI ADVISOR PAGE ========== --> | |
| <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> | |
| <!-- ========== NEWS PAGE ========== --> | |
| <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> | |
| <!-- ========== PROVIDERS PAGE ========== --> | |
| <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> | |
| <!-- ========== DATASETS & MODELS PAGE ========== --> | |
| <section id="page-datasets" class="page"> | |
| <div class="section-header"> | |
| <h2 class="section-title">HuggingFace Datasets & Models</h2> | |
| </div> | |
| <div class="grid-two"> | |
| <!-- Datasets --> | |
| <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> | |
| <!-- Models --> | |
| <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> | |
| <!-- Model Test Form --> | |
| <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> | |
| <!-- ========== API EXPLORER PAGE ========== --> | |
| <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> | |
| <!-- ========== DIAGNOSTICS PAGE ========== --> | |
| <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;"> | |
| <!-- Populated by JS --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ========== SETTINGS PAGE ========== --> | |
| <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> | |
| <!-- Load App JS as ES6 Module --> | |
| <script type="module" src="static/js/app.js"></script> | |
| </body> | |
| </html> | |