|
|
<!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/[email protected]/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> |
|
|
|
