| <!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>
|
|
|
