Upload templates/dashboard.html with huggingface_hub

templates/dashboard.html

@@ -202,6 +202,37 @@
             background: #f8f9fa;
         }
 
+        .matrix-cell {
+            text-align: center;
+            padding: 8px;
+            min-width: 100px;
+        }
+
+        .matrix-cell.supported {
+            color: #28a745;
+            font-weight: bold;
+        }
+
+        .matrix-cell.not-supported {
+            color: #dc3545;
+            font-weight: bold;
+        }
+
+        .model-id-cell {
+            position: sticky;
+            left: 0;
+            background: white;
+            z-index: 5;
+            border-right: 2px solid #dee2e6;
+            font-family: monospace;
+            font-size: 0.85rem;
+        }
+
+        .total-cell {
+            font-weight: bold;
+            background: #e9ecef;
+        }
+
         .loading {
             text-align: center;
             padding: 20px;
@@ -360,6 +391,34 @@
                         </tbody>
                     </table>
                 </div>
+
+                <div class="table-container">
+                    <h2>Model Support Matrix</h2>
+                    <div id="modelsLoading" class="loading" style="display: none;">
+                        <div class="spinner"></div>
+                        <p>Loading models data...</p>
+                    </div>
+                    <div style="overflow-x: auto;">
+                        <table id="modelsTable" style="min-width: 1200px;">
+                            <thead>
+                                <tr id="modelsTableHeader">
+                                    <th style="min-width: 300px; position: sticky; left: 0; background: #f8f9fa; z-index: 10;">Model ID</th>
+                                    <!-- Provider columns will be populated here -->
+                                    <th style="min-width: 80px;">Total</th>
+                                </tr>
+                            </thead>
+                            <tbody id="modelsTableBody">
+                                <!-- Models matrix rows will be populated here -->
+                            </tbody>
+                            <tfoot id="modelsTableFoot">
+                                <!-- Totals row will be populated here -->
+                            </tfoot>
+                        </table>
+                    </div>
+                    <div id="providerLinks" style="margin-top: 20px; font-size: 0.9rem; color: #6c757d;">
+                        <!-- Provider links will be populated here -->
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -395,6 +454,19 @@
             }
         }
 
+        async function fetchModelsData() {
+            try {
+                const response = await fetch('/api/models');
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                return await response.json();
+            } catch (error) {
+                console.error('Error fetching models data:', error);
+                return { models: {}, error: 'Failed to load models data' };
+            }
+        }
+
         function showError(message) {
             document.getElementById('loading').style.display = 'none';
             document.getElementById('content').style.display = 'none';
@@ -739,20 +811,118 @@
             });
         }
 
+        function updateModelsTable(modelsData) {
+            const modelsTableBody = document.getElementById('modelsTableBody');
+            const modelsTableHeader = document.getElementById('modelsTableHeader');
+            const modelsTableFoot = document.getElementById('modelsTableFoot');
+            const modelsLoading = document.getElementById('modelsLoading');
+            
+            if (modelsData.error) {
+                const errorRow = `
+                    <tr>
+                        <td colspan="100%" style="text-align: center; color: #6c757d; font-style: italic;">
+                            ${modelsData.error === 'HF_TOKEN required for models data' ? 
+                              'HF Token required to display models data' : 
+                              'Failed to load models data'}
+                        </td>
+                    </tr>
+                `;
+                requestAnimationFrame(() => {
+                    modelsLoading.style.display = 'none';
+                    modelsTableBody.innerHTML = errorRow;
+                    modelsTableFoot.innerHTML = '';
+                });
+                return;
+            }
+
+            const providers = modelsData.providers || [];
+            const matrix = modelsData.matrix || [];
+            const providerTotals = modelsData.provider_totals || {};
+            const providerMapping = modelsData.provider_mapping || {};
+
+            // Build header with provider columns
+            const providerHeaders = providers.map(provider => 
+                `<th class="matrix-cell" style="min-width: 100px; writing-mode: vertical-rl; text-orientation: mixed;">${provider}</th>`
+            ).join('');
+            
+            // Update header
+            const headerHtml = `
+                <th style="min-width: 300px; position: sticky; left: 0; background: #f8f9fa; z-index: 10;">Model ID</th>
+                ${providerHeaders}
+                <th style="min-width: 80px;" class="total-cell">Total</th>
+            `;
+
+            // Build matrix rows
+            const matrixRows = matrix.map(row => {
+                const providerCells = providers.map(provider => {
+                    const isSupported = row.providers[provider];
+                    return `<td class="matrix-cell ${isSupported ? 'supported' : 'not-supported'}">
+                        ${isSupported ? '✓' : '✗'}
+                    </td>`;
+                }).join('');
+
+                return `
+                    <tr>
+                        <td class="model-id-cell">${row.model_id}</td>
+                        ${providerCells}
+                        <td class="matrix-cell total-cell">${row.total_providers}</td>
+                    </tr>
+                `;
+            }).join('');
+
+            // Build totals footer
+            const totalCells = providers.map(provider => 
+                `<td class="matrix-cell total-cell">${providerTotals[provider] || 0}</td>`
+            ).join('');
+            
+            const footerHtml = `
+                <tr>
+                    <td class="model-id-cell total-cell">Total Models</td>
+                    ${totalCells}
+                    <td class="matrix-cell total-cell">${modelsData.total_models || 0}</td>
+                </tr>
+            `;
+
+            // Generate provider links
+            const providerLinksDiv = document.getElementById('providerLinks');
+            const providerLinksHtml = providers
+                .filter(provider => providerMapping[provider]) // Only show providers with inference mapping
+                .map(provider => {
+                    const inferenceProvider = providerMapping[provider];
+                    const url = `https://huggingface.co/models?inference_provider=${inferenceProvider}&sort=trending`;
+                    return `<strong>${provider}:</strong> To see all supported models, <a href="${url}" target="_blank" style="color: #667eea;">click here</a>`;
+                })
+                .join('<br>');
+
+            // Use requestAnimationFrame for smooth DOM updates
+            requestAnimationFrame(() => {
+                modelsLoading.style.display = 'none';
+                modelsTableHeader.innerHTML = headerHtml;
+                modelsTableBody.innerHTML = matrixRows;
+                modelsTableFoot.innerHTML = footerHtml;
+                if (providerLinksDiv) {
+                    providerLinksDiv.innerHTML = providerLinksHtml;
+                }
+            });
+        }
+
         async function loadData() {
             try {
                 const loadingEl = document.getElementById('loading');
                 const contentEl = document.getElementById('content');
                 const errorEl = document.getElementById('error');
+                const modelsLoading = document.getElementById('modelsLoading');
 
                 loadingEl.style.display = 'block';
                 contentEl.style.display = 'none';
                 errorEl.style.display = 'none';
+                modelsLoading.style.display = 'block';
 
-                // Fetch both current and historical data
-                const [data, historicalData] = await Promise.all([
+                // Fetch current data, historical data, and models data
+                const [data, historicalData, modelsData] = await Promise.all([
                     fetchProviderData(),
-                    fetchHistoricalData()
+                    fetchHistoricalData(),
+                    fetchModelsData()
                 ]);
                 
                 // Batch DOM updates using requestAnimationFrame
@@ -767,6 +937,7 @@
                 updateChart(data);
                 updateTable(data);
                 updateHistoricalChart(historicalData);
+                updateModelsTable(modelsData);
 
                 // Update historical chart title with date range
                 const titleElement = document.getElementById('historicalChartTitle');