Spaces:

Really-amin
/

Datasourceforcryptocurrency

Running

File size: 14,509 Bytes

d6d843f

<!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>
    <!-- API Configuration -->
    <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&#10;ETH is weak today&#10;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>
        // Use the CONFIG object from config.js
        const API_BASE = CONFIG.API_BASE;
        const fetchJSON = CONFIG.fetchJSON;
        const postJSON = CONFIG.postJSON;

        // Display environment info
        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}`;
            }
        }

        // Auto-load health and environment info on page load
        window.addEventListener('load', () => {
            updateEnvironmentInfo();
            loadHealth();
        });
    </script>
</body>
</html>