|
|
<!DOCTYPE html> |
|
|
<html lang="en" dir="rtl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>HF Console - Crypto API Monitor</title> |
|
|
<style> |
|
|
* { margin: 0; padding: 0; box-sizing: border-box; } |
|
|
body { |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
padding: 20px; |
|
|
direction: rtl; |
|
|
} |
|
|
.container { |
|
|
max-width: 1400px; |
|
|
margin: 0 auto; |
|
|
background: white; |
|
|
border-radius: 16px; |
|
|
padding: 30px; |
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.2); |
|
|
} |
|
|
h1 { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
margin-bottom: 10px; |
|
|
font-size: 32px; |
|
|
} |
|
|
.subtitle { color: #666; margin-bottom: 30px; } |
|
|
section { |
|
|
margin-bottom: 30px; |
|
|
padding: 20px; |
|
|
background: #f8f9fa; |
|
|
border-radius: 12px; |
|
|
border: 2px solid #e9ecef; |
|
|
} |
|
|
h3 { |
|
|
color: #333; |
|
|
margin-bottom: 15px; |
|
|
font-size: 20px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
.badge { |
|
|
display: inline-block; |
|
|
padding: 4px 12px; |
|
|
border-radius: 12px; |
|
|
font-size: 14px; |
|
|
font-weight: 600; |
|
|
} |
|
|
.badge-success { background: #d1fae5; color: #10b981; } |
|
|
.badge-warning { background: #fef3c7; color: #f59e0b; } |
|
|
.badge-info { background: #dbeafe; color: #3b82f6; } |
|
|
pre { |
|
|
background: #1e293b; |
|
|
color: #e2e8f0; |
|
|
padding: 15px; |
|
|
border-radius: 8px; |
|
|
overflow-x: auto; |
|
|
font-size: 13px; |
|
|
line-height: 1.6; |
|
|
max-height: 300px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
button { |
|
|
padding: 10px 20px; |
|
|
border: none; |
|
|
border-radius: 8px; |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
color: white; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
margin: 5px; |
|
|
} |
|
|
button:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); |
|
|
} |
|
|
button:active { transform: translateY(0); } |
|
|
input, textarea { |
|
|
width: 100%; |
|
|
padding: 10px; |
|
|
border: 2px solid #e9ecef; |
|
|
border-radius: 8px; |
|
|
font-family: inherit; |
|
|
margin: 10px 0; |
|
|
} |
|
|
input:focus, textarea:focus { |
|
|
outline: none; |
|
|
border-color: #667eea; |
|
|
} |
|
|
.list-box { |
|
|
max-height: 250px; |
|
|
overflow-y: auto; |
|
|
border: 1px solid #e9ecef; |
|
|
padding: 10px; |
|
|
background: white; |
|
|
border-radius: 8px; |
|
|
margin: 10px 0; |
|
|
} |
|
|
.list-box ul { list-style: none; } |
|
|
.list-box li { |
|
|
padding: 8px; |
|
|
border-bottom: 1px solid #f1f5f9; |
|
|
font-size: 14px; |
|
|
color: #475569; |
|
|
} |
|
|
.list-box li:last-child { border-bottom: none; } |
|
|
.vote-display { |
|
|
font-size: 24px; |
|
|
font-weight: 700; |
|
|
padding: 15px; |
|
|
background: white; |
|
|
border-radius: 8px; |
|
|
text-align: center; |
|
|
margin: 10px 0; |
|
|
} |
|
|
.vote-positive { color: #10b981; } |
|
|
.vote-negative { color: #ef4444; } |
|
|
.vote-neutral { color: #6b7280; } |
|
|
.loading { |
|
|
display: inline-block; |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
border: 3px solid #f3f4f6; |
|
|
border-top-color: #667eea; |
|
|
border-radius: 50%; |
|
|
animation: spin 0.8s linear infinite; |
|
|
} |
|
|
@keyframes spin { |
|
|
to { transform: rotate(360deg); } |
|
|
} |
|
|
.grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 20px; |
|
|
} |
|
|
</style> |
|
|
|
|
|
<script src="config.js"></script> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<h1>🤗 HuggingFace Console</h1> |
|
|
<p class="subtitle">Test HF connectivity, registry, search, and sentiment analysis</p> |
|
|
<div style="background: #f0f9ff; padding: 10px; border-radius: 8px; margin-bottom: 20px; font-size: 13px; color: #0369a1;"> |
|
|
<strong>🌐 Environment:</strong> <span id="envInfo">Loading...</span> | |
|
|
<strong>📡 API:</strong> <span id="apiInfo">Loading...</span> |
|
|
</div> |
|
|
|
|
|
<section> |
|
|
<h3> |
|
|
<span>📊 Health Status</span> |
|
|
<span class="badge badge-info" id="healthBadge">Loading...</span> |
|
|
</h3> |
|
|
<button onclick="loadHealth()">🔄 Refresh Health</button> |
|
|
<button onclick="doRefresh()">🔃 Force Registry Refresh</button> |
|
|
<pre id="healthOutput">Loading...</pre> |
|
|
</section> |
|
|
|
|
|
<div class="grid"> |
|
|
<section> |
|
|
<h3> |
|
|
<span>🤖 Models Registry</span> |
|
|
<span class="badge badge-success" id="modelsCount">0</span> |
|
|
</h3> |
|
|
<button onclick="loadModels()">Load Models</button> |
|
|
<div class="list-box" id="modelsList"> |
|
|
<p style="color: #94a3b8;">Click "Load Models" to fetch...</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section> |
|
|
<h3> |
|
|
<span>📚 Datasets Registry</span> |
|
|
<span class="badge badge-success" id="datasetsCount">0</span> |
|
|
</h3> |
|
|
<button onclick="loadDatasets()">Load Datasets</button> |
|
|
<div class="list-box" id="datasetsList"> |
|
|
<p style="color: #94a3b8;">Click "Load Datasets" to fetch...</p> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
<section> |
|
|
<h3>🔍 Search Registry (Local Snapshot)</h3> |
|
|
<input type="text" id="searchQuery" placeholder="Search query (e.g., crypto, bitcoin, sentiment)" value="crypto"> |
|
|
<button onclick="doSearch()">Search Models</button> |
|
|
<button onclick="doSearchDatasets()">Search Datasets</button> |
|
|
<div class="list-box" id="searchResults"> |
|
|
<p style="color: #94a3b8;">Enter a query and click search...</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section> |
|
|
<h3>💭 Sentiment Analysis (Local Pipeline)</h3> |
|
|
<p style="color: #666; font-size: 14px; margin-bottom: 10px;"> |
|
|
Enter text samples (one per line) to analyze crypto sentiment using local transformers |
|
|
</p> |
|
|
<textarea id="sentimentTexts" rows="5" placeholder="BTC looks strong ETH is weak today Market sentiment is bullish">BTC strong breakout |
|
|
ETH looks weak |
|
|
Crypto market is bullish today |
|
|
Bears are taking control |
|
|
Neutral market conditions</textarea> |
|
|
<button onclick="doSentiment()">🧠 Run Sentiment Analysis</button> |
|
|
<div class="vote-display" id="voteDisplay"> |
|
|
<span style="color: #94a3b8;">—</span> |
|
|
</div> |
|
|
<pre id="sentimentOutput">Results will appear here...</pre> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const API_BASE = CONFIG.API_BASE; |
|
|
const fetchJSON = CONFIG.fetchJSON; |
|
|
const postJSON = CONFIG.postJSON; |
|
|
|
|
|
|
|
|
function updateEnvironmentInfo() { |
|
|
const envType = CONFIG.IS_HUGGINGFACE_SPACES ? '🤗 HuggingFace Spaces' : |
|
|
CONFIG.IS_LOCALHOST ? '💻 Localhost' : '🌐 Custom Deployment'; |
|
|
document.getElementById('envInfo').textContent = envType; |
|
|
document.getElementById('apiInfo').textContent = CONFIG.API_BASE; |
|
|
} |
|
|
|
|
|
async function loadHealth() { |
|
|
try { |
|
|
const data = await fetchJSON(CONFIG.ENDPOINTS.HF_HEALTH); |
|
|
document.getElementById('healthOutput').textContent = JSON.stringify(data, null, 2); |
|
|
document.getElementById('healthBadge').textContent = data.ok ? '✓ Healthy' : '✗ Unhealthy'; |
|
|
document.getElementById('healthBadge').className = data.ok ? 'badge badge-success' : 'badge badge-warning'; |
|
|
} catch (err) { |
|
|
document.getElementById('healthOutput').textContent = `Error: ${err.message}`; |
|
|
document.getElementById('healthBadge').textContent = '✗ Error'; |
|
|
document.getElementById('healthBadge').className = 'badge badge-warning'; |
|
|
} |
|
|
} |
|
|
|
|
|
async function doRefresh() { |
|
|
try { |
|
|
document.getElementById('healthOutput').textContent = 'Refreshing registry...'; |
|
|
const data = await postJSON(CONFIG.ENDPOINTS.HF_REFRESH, {}); |
|
|
document.getElementById('healthOutput').textContent = JSON.stringify(data, null, 2); |
|
|
await loadHealth(); |
|
|
} catch (err) { |
|
|
document.getElementById('healthOutput').textContent = `Error: ${err.message}`; |
|
|
} |
|
|
} |
|
|
|
|
|
async function loadModels() { |
|
|
try { |
|
|
const data = await fetchJSON(`${CONFIG.ENDPOINTS.HF_REGISTRY}?kind=models`); |
|
|
const items = data.items || []; |
|
|
document.getElementById('modelsCount').textContent = items.length; |
|
|
const html = items.length > 0 |
|
|
? '<ul>' + items.slice(0, 50).map(i => `<li>🤖 ${i.id} • ${i.pipeline_tag || 'N/A'} • <small>${i.source}</small></li>`).join('') + '</ul>' |
|
|
: '<p style="color: #94a3b8;">No models found</p>'; |
|
|
document.getElementById('modelsList').innerHTML = html; |
|
|
} catch (err) { |
|
|
document.getElementById('modelsList').innerHTML = `<p style="color: #ef4444;">Error: ${err.message}</p>`; |
|
|
} |
|
|
} |
|
|
|
|
|
async function loadDatasets() { |
|
|
try { |
|
|
const data = await fetchJSON(`${CONFIG.ENDPOINTS.HF_REGISTRY}?kind=datasets`); |
|
|
const items = data.items || []; |
|
|
document.getElementById('datasetsCount').textContent = items.length; |
|
|
const html = items.length > 0 |
|
|
? '<ul>' + items.slice(0, 50).map(i => `<li>📚 ${i.id} • <small>${i.source}</small></li>`).join('') + '</ul>' |
|
|
: '<p style="color: #94a3b8;">No datasets found</p>'; |
|
|
document.getElementById('datasetsList').innerHTML = html; |
|
|
} catch (err) { |
|
|
document.getElementById('datasetsList').innerHTML = `<p style="color: #ef4444;">Error: ${err.message}</p>`; |
|
|
} |
|
|
} |
|
|
|
|
|
async function doSearch() { |
|
|
const q = document.getElementById('searchQuery').value; |
|
|
try { |
|
|
const data = await fetchJSON(`${CONFIG.ENDPOINTS.HF_SEARCH}?q=${encodeURIComponent(q)}&kind=models`); |
|
|
const items = data.items || []; |
|
|
const html = items.length > 0 |
|
|
? `<p style="color: #10b981; font-weight: 600;">Found ${items.length} models</p><ul>` + items.map(i => `<li>🤖 ${i.id}</li>`).join('') + '</ul>' |
|
|
: '<p style="color: #94a3b8;">No results found</p>'; |
|
|
document.getElementById('searchResults').innerHTML = html; |
|
|
} catch (err) { |
|
|
document.getElementById('searchResults').innerHTML = `<p style="color: #ef4444;">Error: ${err.message}</p>`; |
|
|
} |
|
|
} |
|
|
|
|
|
async function doSearchDatasets() { |
|
|
const q = document.getElementById('searchQuery').value; |
|
|
try { |
|
|
const data = await fetchJSON(`${CONFIG.ENDPOINTS.HF_SEARCH}?q=${encodeURIComponent(q)}&kind=datasets`); |
|
|
const items = data.items || []; |
|
|
const html = items.length > 0 |
|
|
? `<p style="color: #10b981; font-weight: 600;">Found ${items.length} datasets</p><ul>` + items.map(i => `<li>📚 ${i.id}</li>`).join('') + '</ul>' |
|
|
: '<p style="color: #94a3b8;">No results found</p>'; |
|
|
document.getElementById('searchResults').innerHTML = html; |
|
|
} catch (err) { |
|
|
document.getElementById('searchResults').innerHTML = `<p style="color: #ef4444;">Error: ${err.message}</p>`; |
|
|
} |
|
|
} |
|
|
|
|
|
async function doSentiment() { |
|
|
const texts = document.getElementById('sentimentTexts').value.split('\n').filter(t => t.trim()); |
|
|
if (texts.length === 0) { |
|
|
alert('Please enter at least one text sample'); |
|
|
return; |
|
|
} |
|
|
try { |
|
|
document.getElementById('voteDisplay').innerHTML = '<span class="loading"></span>'; |
|
|
document.getElementById('sentimentOutput').textContent = 'Running sentiment analysis...'; |
|
|
|
|
|
const data = await postJSON(CONFIG.ENDPOINTS.HF_RUN_SENTIMENT, { texts }); |
|
|
|
|
|
const vote = data.vote || 0; |
|
|
let voteClass = 'vote-neutral'; |
|
|
let voteEmoji = '😐'; |
|
|
if (vote > 0.2) { voteClass = 'vote-positive'; voteEmoji = '📈'; } |
|
|
else if (vote < -0.2) { voteClass = 'vote-negative'; voteEmoji = '📉'; } |
|
|
|
|
|
document.getElementById('voteDisplay').innerHTML = `<span class="${voteClass}">${voteEmoji} ${vote.toFixed(3)}</span>`; |
|
|
document.getElementById('sentimentOutput').textContent = JSON.stringify(data, null, 2); |
|
|
} catch (err) { |
|
|
document.getElementById('voteDisplay').innerHTML = '<span style="color: #ef4444;">Error</span>'; |
|
|
document.getElementById('sentimentOutput').textContent = `Error: ${err.message}`; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
window.addEventListener('load', () => { |
|
|
updateEnvironmentInfo(); |
|
|
loadHealth(); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
