Spaces:

nbroad
/

compare-hf-inference-providers

Running

App Files Files Community

nbroad commited on Jun 26

Commit

a4e6d46

verified ·

1 Parent(s): c52a04e

Upload templates/dashboard.html with huggingface_hub

Browse files

Files changed (1) hide show

templates/dashboard.html +784 -0

templates/dashboard.html ADDED Viewed

	@@ -0,0 +1,784 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Inference Provider Dashboard</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <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%);
+            min-height: 100vh;
+            padding: 10px;
+            margin: 0;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+            max-height: calc(100vh - 20px);
+            display: flex;
+            flex-direction: column;
+        }
+        .header {
+            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+            color: white;
+            padding: 20px;
+            text-align: center;
+            flex-shrink: 0;
+        }
+        .header h1 {
+            font-size: 2rem;
+            font-weight: 300;
+            margin-bottom: 5px;
+        }
+        .header p {
+            font-size: 1rem;
+            opacity: 0.9;
+        }
+        .controls {
+            padding: 15px 20px;
+            background: #f8f9fa;
+            border-bottom: 1px solid #e9ecef;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-shrink: 0;
+        }
+        .refresh-btn {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 25px;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        .refresh-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+        }
+        .refresh-btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+        .last-updated {
+            color: #6c757d;
+            font-size: 0.9rem;
+        }
+        .content {
+            padding: 20px;
+            flex: 1;
+            overflow-y: auto;
+            display: grid;
+            grid-template-columns: 1fr;
+            grid-template-rows: auto auto auto 1fr;
+            gap: 15px;
+            max-height: calc(100vh - 200px);
+        }
+        .stats-row {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 15px;
+            margin-bottom: 0;
+        }
+        .stat-card {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 15px;
+            border-radius: 10px;
+            text-align: center;
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
+        }
+        .stat-card h3 {
+            font-size: 1.5rem;
+            margin-bottom: 3px;
+        }
+        .stat-card p {
+            opacity: 0.9;
+            font-size: 0.9rem;
+        }
+        .chart-container {
+            background: white;
+            border-radius: 10px;
+            padding: 20px;
+            margin: 0 20px;
+            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+            display: flex;
+            flex-direction: column;
+        }
+        .chart-container h2 {
+            margin-bottom: 15px;
+            color: #333;
+            font-weight: 600;
+            font-size: 1.2rem;
+        }
+        .chart-wrapper {
+            flex: 1;
+            position: relative;
+            min-height: 350px;
+        }
+        /* Enhanced chart legend styling */
+        .chart-container canvas {
+            cursor: crosshair;
+        }
+        /* Add a subtle instruction text */
+        .chart-instructions {
+            font-size: 0.8rem;
+            color: #6c757d;
+            text-align: center;
+            margin-top: 8px;
+            font-style: italic;
+        }
+        .table-container {
+            background: white;
+            border-radius: 10px;
+            padding: 20px;
+            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+            overflow: auto;
+            display: flex;
+            flex-direction: column;
+        }
+        .table-container h2 {
+            margin-bottom: 15px;
+            color: #333;
+            font-weight: 600;
+            font-size: 1.2rem;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 0.9rem;
+        }
+        th, td {
+            padding: 10px 12px;
+            text-align: left;
+            border-bottom: 1px solid #e9ecef;
+        }
+        th {
+            background: #f8f9fa;
+            font-weight: 600;
+            color: #495057;
+            position: sticky;
+            top: 0;
+        }
+        tr:hover {
+            background: #f8f9fa;
+        }
+        .loading {
+            text-align: center;
+            padding: 20px;
+            color: #6c757d;
+        }
+        .spinner {
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid #667eea;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 15px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .error {
+            background: #f8d7da;
+            border: 1px solid #f5c6cb;
+            color: #721c24;
+            padding: 15px;
+            border-radius: 10px;
+            margin: 15px 20px;
+        }
+        @media (max-width: 1024px) {
+            .chart-container {
+                margin: 0 10px;
+            }
+            .chart-wrapper {
+                min-height: 300px;
+            }
+            .error {
+                margin: 15px 10px;
+            }
+        }
+        @media (max-width: 768px) {
+            body {
+                padding: 5px;
+            }
+            .container {
+                max-height: calc(100vh - 10px);
+                border-radius: 10px;
+            }
+            .controls {
+                flex-direction: column;
+                gap: 10px;
+                padding: 10px 15px;
+            }
+            .header {
+                padding: 15px;
+            }
+            .header h1 {
+                font-size: 1.5rem;
+            }
+            .content {
+                padding: 15px;
+                gap: 10px;
+                max-height: calc(100vh - 160px);
+            }
+            .stats-row {
+                grid-template-columns: 1fr;
+                gap: 10px;
+            }
+            .stat-card {
+                padding: 12px;
+            }
+            .chart-container {
+                margin: 0 5px;
+            }
+            .chart-wrapper {
+                min-height: 250px;
+            }
+            .error {
+                margin: 15px 5px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>Inference Provider Dashboard</h1>
+            <p>Compare monthly requests across different AI inference providers</p>
+        </div>
+        <div class="controls">
+            <div class="last-updated" id="lastUpdated">Loading...</div>
+            <button class="refresh-btn" id="refreshBtn" onclick="refreshData()">
+                Refresh Data
+            </button>
+        </div>
+        <div class="content">
+            <div id="loading" class="loading">
+                <div class="spinner"></div>
+                <p>Loading provider data...</p>
+            </div>
+            <div id="error" class="error" style="display: none;">
+                <strong>Error:</strong> <span id="errorMessage"></span>
+            </div>
+            <div id="content" style="display: none;">
+                <div class="stats-row" id="statsRow">
+                    <!-- Stats cards will be populated here -->
+                </div>
+                <div class="chart-container">
+                    <h2>Monthly Requests Comparison</h2>
+                    <div class="chart-wrapper">
+                        <canvas id="requestsChart"></canvas>
+                    </div>
+                </div>
+                <div class="chart-container">
+                    <h2>Historical Trends (Last 48 Hours)</h2>
+                    <div class="chart-wrapper">
+                        <canvas id="historicalChart"></canvas>
+                    </div>
+                    <div class="chart-instructions">
+                        Hover for detailed coordinates • Click legend items to show/hide providers
+                    </div>
+                </div>
+                <div class="table-container">
+                    <h2>Provider Details</h2>
+                    <table id="providersTable">
+                        <thead>
+                            <tr>
+                                <th>Provider</th>
+                                <th>Monthly Requests</th>
+                                <th>HuggingFace Profile</th>
+                            </tr>
+                        </thead>
+                        <tbody id="tableBody">
+                            <!-- Table rows will be populated here -->
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
+    <script>
+        let chart = null;
+        let historicalChart = null;
+        async function fetchProviderData() {
+            try {
+                const response = await fetch('/api/providers');
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                return await response.json();
+            } catch (error) {
+                console.error('Error fetching data:', error);
+                throw error;
+            }
+        }
+        async function fetchHistoricalData() {
+            try {
+                const response = await fetch('/api/historical');
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                return await response.json();
+            } catch (error) {
+                console.error('Error fetching historical data:', error);
+                return { historical_data: {}, error: 'Failed to load historical data' };
+            }
+        }
+        function showError(message) {
+            document.getElementById('loading').style.display = 'none';
+            document.getElementById('content').style.display = 'none';
+            document.getElementById('error').style.display = 'block';
+            document.getElementById('errorMessage').textContent = message;
+        }
+        function formatNumber(num) {
+            if (num >= 1000000) {
+                return (num / 1000000).toFixed(1) + 'M';
+            } else if (num >= 1000) {
+                return (num / 1000).toFixed(1) + 'K';
+            }
+            return num.toString();
+        }
+        function updateStats(data) {
+            const statsRow = document.getElementById('statsRow');
+            const totalRequests = data.providers.reduce((sum, provider) => sum + provider.monthly_requests_int, 0);
+            const topProvider = data.providers[0];
+            // Use requestAnimationFrame for smooth DOM updates
+            requestAnimationFrame(() => {
+                statsRow.innerHTML = `
+                    <div class="stat-card">
+                        <h3>${data.total_providers}</h3>
+                        <p>Total Providers</p>
+                    </div>
+                    <div class="stat-card">
+                        <h3>${formatNumber(totalRequests)}</h3>
+                        <p>Total Monthly Requests</p>
+                    </div>
+                    <div class="stat-card">
+                        <h3>${topProvider.provider}</h3>
+                        <p>Top Provider</p>
+                    </div>
+                `;
+            });
+        }
+        function updateChart(data) {
+            const ctx = document.getElementById('requestsChart').getContext('2d');
+            if (chart) {
+                chart.destroy();
+            }
+            // Use the same color mapping as the line chart
+            const providerColors = {
+                'fireworks-ai': '#6830E0',
+                'nebius': '#D9FE00',
+                'novita': '#26D57A',
+                'fal': '#D9304D',
+                'togethercomputer': '#0F6FFF',
+                'groq': '#FF6B6B',
+                'cerebras': '#4ECDC4',
+                'sambanovasystems': '#45B7D1',
+                'replicate': '#96CEB4',
+                'Hyperbolic': '#FFEAA7',
+                'featherless-ai': '#DDA0DD',
+                'CohereLabs': '#98D8C8',
+                'nscale': '#F7DC6F'
+            };
+            const labels = data.providers.map(p => p.provider);
+            const values = data.providers.map(p => p.monthly_requests_int);
+            // Map colors to match providers
+            const backgroundColors = data.providers.map(p => {
+                const color = providerColors[p.provider] || '#667eea';
+                return color + '80'; // Add transparency
+            });
+            const borderColors = data.providers.map(p => {
+                return providerColors[p.provider] || '#667eea';
+            });
+            chart = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: 'Monthly Requests',
+                        data: values,
+                        backgroundColor: backgroundColors,
+                        borderColor: borderColors,
+                        borderWidth: 1,
+                        borderRadius: 5
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    animation: {
+                        duration: 300
+                    },
+                    interaction: {
+                        intersect: false,
+                        mode: 'index'
+                    },
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    },
+                    scales: {
+                        x: {
+                            grid: {
+                                display: false
+                            }
+                        },
+                        y: {
+                            beginAtZero: true,
+                            grid: {
+                                color: 'rgba(0, 0, 0, 0.05)'
+                            },
+                            ticks: {
+                                maxTicksLimit: 6,
+                                callback: function(value) {
+                                    return formatNumber(value);
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        function updateHistoricalChart(historicalData) {
+            const ctx = document.getElementById('historicalChart').getContext('2d');
+            if (historicalChart) {
+                historicalChart.destroy();
+            }
+            // Create datasets for each provider
+            const datasets = [];
+            // Specific color mapping for inference providers
+            const providerColors = {
+                'fireworks-ai': '#6830E0',
+                'nebius': '#D9FE00',
+                'novita': '#26D57A',
+                'fal': '#D9304D',
+                'togethercomputer': '#0F6FFF',
+                // Additional colors for other providers
+                'groq': '#FF6B6B',
+                'cerebras': '#4ECDC4',
+                'sambanovasystems': '#45B7D1',
+                'replicate': '#96CEB4',
+                'Hyperbolic': '#FFEAA7',
+                'featherless-ai': '#DDA0DD',
+                'CohereLabs': '#98D8C8',
+                'nscale': '#F7DC6F'
+            };
+            for (const [provider, data] of Object.entries(historicalData)) {
+                if (data && data.length > 0) {
+                    const providerColor = providerColors[provider] || '#667eea'; // fallback color
+                    datasets.push({
+                        label: provider,
+                        data: data,
+                        borderColor: providerColor,
+                        backgroundColor: providerColor + '20',
+                        borderWidth: 2,
+                        fill: false,
+                        tension: 0.4,
+                        pointRadius: 3,
+                        pointHoverRadius: 6,
+                        pointBackgroundColor: providerColor,
+                        pointBorderColor: '#ffffff',
+                        pointBorderWidth: 2,
+                        pointHoverBackgroundColor: '#ffffff',
+                        pointHoverBorderColor: providerColor,
+                        pointHoverBorderWidth: 3
+                    });
+                }
+            }
+            historicalChart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    datasets: datasets
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    animation: {
+                        duration: 300
+                    },
+                    interaction: {
+                        intersect: false,
+                        mode: 'index'
+                    },
+                    plugins: {
+                        legend: {
+                            display: true,
+                            position: 'top',
+                            labels: {
+                                boxWidth: 12,
+                                padding: 15,
+                                usePointStyle: true,
+                                generateLabels: function(chart) {
+                                    const original = Chart.defaults.plugins.legend.labels.generateLabels;
+                                    const labels = original.call(this, chart);
+                                    // Add click handlers and visual feedback
+                                    labels.forEach(label => {
+                                        label.fillStyle = label.strokeStyle;
+                                    });
+                                    return labels;
+                                }
+                            },
+                            onClick: function(event, legendItem, legend) {
+                                const index = legendItem.datasetIndex;
+                                const chart = legend.chart;
+                                const meta = chart.getDatasetMeta(index);
+                                // Toggle visibility
+                                meta.hidden = meta.hidden === null ? !chart.data.datasets[index].hidden : null;
+                                // Update legend appearance
+                                const legendItems = legend.legendItems;
+                                if (legendItems && legendItems[index]) {
+                                    legendItems[index].fillStyle = meta.hidden ?
+                                        'rgba(128, 128, 128, 0.4)' :
+                                        chart.data.datasets[index].borderColor;
+                                    legendItems[index].strokeStyle = meta.hidden ?
+                                        'rgba(128, 128, 128, 0.4)' :
+                                        chart.data.datasets[index].borderColor;
+                                }
+                                chart.update();
+                            }
+                        },
+                        tooltip: {
+                            mode: 'nearest',
+                            intersect: false,
+                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                            titleColor: 'white',
+                            bodyColor: 'white',
+                            borderColor: 'rgba(255, 255, 255, 0.2)',
+                            borderWidth: 1,
+                            cornerRadius: 8,
+                            padding: 12,
+                            displayColors: true,
+                            callbacks: {
+                                title: function(tooltipItems) {
+                                    if (tooltipItems.length > 0) {
+                                        const date = new Date(tooltipItems[0].parsed.x);
+                                        return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
+                                    }
+                                    return '';
+                                },
+                                label: function(context) {
+                                    const provider = context.dataset.label;
+                                    const value = formatNumber(context.parsed.y);
+                                    const date = new Date(context.parsed.x);
+                                    const timeStr = date.toLocaleTimeString();
+                                    return [
+                                        `Provider: ${provider}`,
+                                        `Requests: ${value}`,
+                                        `Time: ${timeStr}`,
+                                        `Coordinates: (${date.toLocaleDateString()}, ${context.parsed.y})`
+                                    ];
+                                },
+                                afterBody: function(tooltipItems) {
+                                    return 'Click legend to toggle provider visibility';
+                                }
+                            }
+                        }
+                    },
+                    scales: {
+                        x: {
+                            type: 'time',
+                            time: {
+                                unit: 'hour',
+                                displayFormats: {
+                                    hour: 'MMM dd HH:mm'
+                                }
+                            },
+                            title: {
+                                display: true,
+                                text: 'Time'
+                            },
+                            grid: {
+                                color: 'rgba(0, 0, 0, 0.05)'
+                            }
+                        },
+                        y: {
+                            beginAtZero: true,
+                            title: {
+                                display: true,
+                                text: 'Monthly Requests'
+                            },
+                            grid: {
+                                color: 'rgba(0, 0, 0, 0.05)'
+                            },
+                            ticks: {
+                                maxTicksLimit: 6,
+                                callback: function(value) {
+                                    return formatNumber(value);
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        function updateTable(data) {
+            const tableBody = document.getElementById('tableBody');
+            const rows = data.providers.map(provider => `
+                <tr>
+                    <td><strong>${provider.provider}</strong></td>
+                    <td>${formatNumber(provider.monthly_requests_int)}</td>
+                    <td><a href="https://huggingface.co/${provider.provider}" target="_blank">View Profile</a></td>
+                </tr>
+            `).join('');
+            // Use requestAnimationFrame for smooth DOM updates
+            requestAnimationFrame(() => {
+                tableBody.innerHTML = rows;
+            });
+        }
+        async function loadData() {
+            try {
+                const loadingEl = document.getElementById('loading');
+                const contentEl = document.getElementById('content');
+                const errorEl = document.getElementById('error');
+                loadingEl.style.display = 'block';
+                contentEl.style.display = 'none';
+                errorEl.style.display = 'none';
+                // Fetch both current and historical data
+                const [data, historicalData] = await Promise.all([
+                    fetchProviderData(),
+                    fetchHistoricalData()
+                ]);
+                // Batch DOM updates using requestAnimationFrame
+                requestAnimationFrame(() => {
+                    loadingEl.style.display = 'none';
+                    contentEl.style.display = 'block';
+                    document.getElementById('lastUpdated').textContent = `Last updated: ${data.last_updated}`;
+                });
+                // Update components
+                updateStats(data);
+                updateChart(data);
+                updateTable(data);
+                updateHistoricalChart(historicalData.historical_data || {});
+            } catch (error) {
+                showError('Failed to load provider data. Please try again.');
+            }
+        }
+        async function refreshData() {
+            const refreshBtn = document.getElementById('refreshBtn');
+            refreshBtn.disabled = true;
+            refreshBtn.textContent = 'Refreshing...';
+            try {
+                await loadData();
+            } finally {
+                // Small delay to prevent rapid clicking
+                setTimeout(() => {
+                    refreshBtn.disabled = false;
+                    refreshBtn.textContent = 'Refresh Data';
+                }, 100);
+            }
+        }
+        // Load data when page loads
+        document.addEventListener('DOMContentLoaded', loadData);
+        // Auto-refresh every 10 minutes (reduced from 5 to improve performance)
+        setInterval(loadData, 10 * 60 * 1000);
+    </script>
+</body>
+</html>