Upload templates/dashboard.html with huggingface_hub

templates/dashboard.html

@@ -204,8 +204,10 @@
 
         .matrix-cell {
             text-align: center;
-            padding: 8px;
-            min-width: 100px;
+            padding: 4px 2px;
+            min-width: 60px;
+            max-width: 60px;
+            font-size: 0.8rem;
         }
 
         .matrix-cell.supported {
@@ -225,7 +227,11 @@
             z-index: 5;
             border-right: 2px solid #dee2e6;
             font-family: monospace;
-            font-size: 0.85rem;
+            font-size: 0.75rem;
+            max-width: 250px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
 
         .total-cell {
@@ -399,12 +405,12 @@
                         <p>Loading models data...</p>
                     </div>
                     <div style="overflow-x: auto;">
-                        <table id="modelsTable" style="min-width: 1200px;">
+                        <table id="modelsTable" style="width: 100%; table-layout: fixed;">
                             <thead>
                                 <tr id="modelsTableHeader">
-                                    <th style="min-width: 300px; position: sticky; left: 0; background: #f8f9fa; z-index: 10;">Model ID</th>
+                                    <th style="width: 250px; 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>
+                                    <th style="width: 60px;">Total</th>
                                 </tr>
                             </thead>
                             <tbody id="modelsTableBody">
@@ -840,16 +846,34 @@
             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('');
+            // Create shorter provider names for column headers
+            const providerShortNames = {
+                'togethercomputer': 'Together',
+                'fireworks-ai': 'Fireworks',
+                'nebius': 'Nebius',
+                'fal': 'FAL',
+                'groq': 'Groq',
+                'cerebras': 'Cerebras',
+                'sambanovasystems': 'SambaNova',
+                'replicate': 'Replicate',
+                'novita': 'Novita',
+                'Hyperbolic': 'Hyperbolic',
+                'featherless-ai': 'Featherless',
+                'CohereLabs': 'Cohere',
+                'nscale': 'NScale'
+            };
+
+            // Build header with provider columns using shorter names
+            const providerHeaders = providers.map(provider => {
+                const shortName = providerShortNames[provider] || provider;
+                return `<th class="matrix-cell" style="width: 60px; font-size: 0.7rem; padding: 2px;" title="${provider}">${shortName}</th>`;
+            }).join('');
             
             // Update header
             const headerHtml = `
-                <th style="min-width: 300px; position: sticky; left: 0; background: #f8f9fa; z-index: 10;">Model ID</th>
+                <th style="width: 250px; position: sticky; left: 0; background: #f8f9fa; z-index: 10;">Model ID</th>
                 ${providerHeaders}
-                <th style="min-width: 80px;" class="total-cell">Total</th>
+                <th style="width: 60px;" class="total-cell">Total</th>
             `;
 
             // Build matrix rows
@@ -968,8 +992,62 @@
             }
         }
 
+        // Disable browser back/forward navigation gestures to prevent accidental navigation during scrolling
+        function disableNavigationGestures() {
+            // Prevent horizontal swipe gestures from triggering browser navigation
+            let startX = 0;
+            let startY = 0;
+            
+            document.addEventListener('touchstart', function(e) {
+                startX = e.touches[0].clientX;
+                startY = e.touches[0].clientY;
+            }, { passive: false });
+            
+            document.addEventListener('touchmove', function(e) {
+                if (e.touches.length > 1) return; // Multi-touch, allow default
+                
+                const deltaX = Math.abs(e.touches[0].clientX - startX);
+                const deltaY = Math.abs(e.touches[0].clientY - startY);
+                
+                // If horizontal movement is significant and greater than vertical, prevent default
+                if (deltaX > 10 && deltaX > deltaY) {
+                    e.preventDefault();
+                }
+            }, { passive: false });
+            
+            // Also prevent mouse wheel horizontal scrolling from triggering navigation
+            document.addEventListener('wheel', function(e) {
+                // Only prevent if we're scrolling horizontally and near the edge of a scrollable container
+                if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+                    const target = e.target.closest('.table-container, [style*="overflow"]');
+                    if (target) {
+                        e.stopPropagation();
+                    }
+                }
+            }, { passive: false });
+            
+            // Prevent browser back/forward keyboard shortcuts when focused on the app
+            document.addEventListener('keydown', function(e) {
+                // Prevent Alt+Left/Right (Windows) and Cmd+Left/Right (Mac) browser navigation
+                if ((e.altKey && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) ||
+                    (e.metaKey && (e.key === 'ArrowLeft' || e.key === 'ArrowRight'))) {
+                    e.preventDefault();
+                }
+                
+                // Prevent Backspace navigation when not in input fields
+                if (e.key === 'Backspace' && 
+                    !['INPUT', 'TEXTAREA'].includes(e.target.tagName) && 
+                    !e.target.isContentEditable) {
+                    e.preventDefault();
+                }
+            });
+        }
+
         // Load data when page loads
-        document.addEventListener('DOMContentLoaded', loadData);
+        document.addEventListener('DOMContentLoaded', function() {
+            disableNavigationGestures();
+            loadData();
+        });
 
         // Auto-refresh every 10 minutes (reduced from 5 to improve performance)
         setInterval(loadData, 10 * 60 * 1000);