Spaces:

vectorplasticity
/

openrouter-models-display

Sleeping

App Files Files Community

vectorplasticity commited on Apr 12

Commit

e1e24cf

verified ·

1 Parent(s): d46c341

Upload templates/index.html with huggingface_hub

Browse files

Files changed (1) hide show

templates/index.html +340 -196

templates/index.html CHANGED Viewed

@@ -3,329 +3,473 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>OpenRouter Models</title>
     <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
             min-height: 100vh;
-            color: #e0e0e0;
         }
         .container {
             max-width: 1400px;
             margin: 0 auto;
-            padding: 2rem;
         }
         header {
             text-align: center;
-            margin-bottom: 3rem;
-            padding: 2rem;
-            background: rgba(255,255,255,0.05);
-            border-radius: 20px;
-            backdrop-filter: blur(10px);
             border: 1px solid rgba(255,255,255,0.1);
         }
-        h1 {
             font-size: 2.5rem;
-            margin-bottom: 0.5rem;
-            background: linear-gradient(135deg, #00d4ff, #7b2cbf);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         }
-        .subtitle {
-            color: #888;
             font-size: 1.1rem;
         }
         .controls {
             display: flex;
-            gap: 1rem;
-            margin-bottom: 2rem;
             flex-wrap: wrap;
             align-items: center;
         }
         .search-box {
             flex: 1;
-            min-width: 300px;
-            padding: 1rem 1.5rem;
-            border: none;
-            border-radius: 12px;
-            background: rgba(255,255,255,0.1);
-            color: white;
             font-size: 1rem;
-            outline: none;
-            transition: all 0.3s;
         }
-        .search-box:focus {
-            background: rgba(255,255,255,0.15);
-            box-shadow: 0 0 20px rgba(0,212,255,0.3);
         }
-        .search-box::placeholder { color: #888; }
         .btn {
-            padding: 1rem 1.5rem;
             border: none;
-            border-radius: 12px;
             cursor: pointer;
-            font-size: 0.9rem;
             font-weight: 600;
-            transition: all 0.3s;
             text-decoration: none;
             display: inline-flex;
             align-items: center;
-            gap: 0.5rem;
         }
         .btn-primary {
-            background: linear-gradient(135deg, #00d4ff, #7b2cbf);
             color: white;
         }
         .btn-secondary {
-            background: rgba(255,255,255,0.1);
-            color: white;
-            border: 1px solid rgba(255,255,255,0.2);
         }
-        .btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
         }
         .stats-bar {
-            display: flex;
-            gap: 2rem;
-            margin-bottom: 2rem;
-            padding: 1rem 2rem;
-            background: rgba(255,255,255,0.05);
             border-radius: 12px;
         }
         .stat {
-            display: flex;
-            flex-direction: column;
         }
         .stat-value {
-            font-size: 1.5rem;
-            font-weight: bold;
-            color: #00d4ff;
         }
         .stat-label {
-            font-size: 0.8rem;
-            color: #888;
-            text-transform: uppercase;
         }
         table {
             width: 100%;
             border-collapse: collapse;
-            background: rgba(255,255,255,0.05);
-            border-radius: 20px;
-            overflow: hidden;
-            backdrop-filter: blur(10px);
-        }
-        thead {
-            background: linear-gradient(135deg, rgba(0,212,255,0.2), rgba(123,44,191,0.2));
         }
         th {
-            padding: 1.2rem 1rem;
             text-align: left;
             font-weight: 600;
-            text-transform: uppercase;
-            font-size: 0.75rem;
-            letter-spacing: 0.5px;
             cursor: pointer;
             user-select: none;
-            transition: all 0.3s;
             position: relative;
         }
         th:hover {
-            background: rgba(255,255,255,0.1);
         }
-        th.sortable::after {
-            content: '↕️';
-            margin-left: 0.5rem;
-            font-size: 0.7rem;
             opacity: 0.5;
         }
-        th.sorted-asc::after {
             content: '▲';
             opacity: 1;
         }
-        th.sorted-desc::after {
             content: '▼';
             opacity: 1;
         }
-        tbody tr {
             border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s;
-        }
-        tbody tr:hover {
-            background: rgba(255,255,255,0.08);
         }
-        td {
-            padding: 1rem;
-            font-size: 0.9rem;
         }
         .model-name {
             font-weight: 600;
-            color: #fff;
-        }
-        .provider {
-            color: #888;
-            font-size: 0.8rem;
         }
-        .context {
-            background: rgba(0,212,255,0.2);
-            padding: 0.3rem 0.8rem;
-            border-radius: 20px;
-            font-size: 0.8rem;
-            color: #00d4ff;
-        }
-        .price {
-            font-family: monospace;
             font-size: 0.85rem;
-            color: #a0e0a0;
         }
         .architecture {
             display: flex;
-            gap: 0.3rem;
             flex-wrap: wrap;
         }
         .badge {
-            padding: 0.2rem 0.6rem;
-            border-radius: 12px;
-            font-size: 0.7rem;
-            text-transform: uppercase;
         }
-        .badge-modality {
-            background: rgba(123,44,191,0.3);
-            color: #e0a0ff;
         }
-        .badge-tool {
-            background: rgba(0,212,255,0.3);
-            color: #a0e0ff;
         }
-        .hidden { display: none; }
         footer {
-            margin-top: 3rem;
             text-align: center;
-            color: #666;
-            padding: 2rem;
         }
         @media (max-width: 768px) {
-            .container { padding: 1rem; }
-            table { font-size: 0.8rem; }
-            td { padding: 0.5rem; }
         }
     </style>
 </head>
 <body>
     <div class="container">
         <header>
-            <h1>🤖 OpenRouter Models</h1>
-            <p class="subtitle">Explore {{ count }} available LLMs from {{ providers }} providers</p>
         </header>
         <div class="stats-bar">
             <div class="stat">
-                <span class="stat-value">{{ count }}</span>
-                <span class="stat-label">Total Models</span>
             </div>
             <div class="stat">
-                <span class="stat-value">{{ providers }}</span>
-                <span class="stat-label">Providers</span>
             </div>
             <div class="stat">
-                <span class="stat-value">{{ updated }}</span>
-                <span class="stat-label">Last Updated</span>
             </div>
         </div>
         <div class="controls">
-            <input type="text" class="search-box" id="searchBox" placeholder="🔍 Search models, providers, or architecture...">
-            <a href="/api/raw" class="btn btn-secondary" target="_blank">Raw JSON</a>
-            <a href="/api/download" class="btn btn-primary" download>📥 Download JSON</a>
         </div>
-        <table id="modelsTable">
-            <thead>
-                <tr>
-                    <th class="sortable" data-col="name">Model Name</th>
-                    <th class="sortable" data-col="provider">Provider</th>
-                    <th class="sortable" data-col="context">Context</th>
-                    <th class="sortable" data-col="prompt">Prompt $/M</th>
-                    <th class="sortable" data-col="completion">Completion $/M</th>
-                    <th>Architecture</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for model in models %}
-                <tr data-name="{{ model.id }}" data-provider="{{ model.id.split('/')[0] }}" data-context="{{ model.context_length | default(0) }}" data-prompt="{{ model.prompt_cost }}" data-completion="{{ model.completion_cost }}">
-                    <td>
-                        <div class="model-name">{{ model.id.split('/')[-1] | truncate(30) }}</div>
-                        <div class="provider">{{ model.id }}</div>
-                    </td>
-                    <td class="provider">{{ model.id.split('/')[0] }}</td>
-                    <td><span class="context">{{ '{:,}'.format(model.context_length | int) if model.context_length else 'Unknown' }}</span></td>
-                    <td class="price">${{ '%.6f' % model.prompt_cost }}</td>
-                    <td class="price">${{ '%.6f' % model.completion_cost }}</td>
-                    <td>
-                        <div class="architecture">
-                            {% for mod in model.architecture.get('modality', '').split('->') %}
-                                {% if mod %}
-                                <span class="badge badge-modality">{{ mod }}</span>
-                                {% endif %}
-                            {% endfor %}
-                            {% if model.architecture.get('instruct_type') %}
-                            <span class="badge badge-tool">{{ model.architecture.instruct_type }}</span>
-                            {% endif %}
-                        </div>
-                    </td>
-                </tr>
-                {% endfor %}
-            </tbody>
-        </table>
         <footer>
-            <p>Data auto-refreshes every 3 hours • Powered by <a href="https://openrouter.ai" target="_blank" style="color:#00d4ff;">OpenRouter</a></p>
         </footer>
     </div>
     <script>
         // Search functionality
-        document.getElementById('searchBox').addEventListener('input', function(e) {
-            const term = e.target.value.toLowerCase();
-            document.querySelectorAll('#modelsTable tbody tr').forEach(row => {
                 const text = row.textContent.toLowerCase();
-                row.classList.toggle('hidden', !text.includes(term));
             });
         });
-        // Sorting functionality
-        let sortDir = {};
-        document.querySelectorAll('th.sortable').forEach(th => {
-            th.addEventListener('click', function() {
-                const col = this.dataset.col;
-                const table = document.getElementById('modelsTable');
-                const tbody = table.querySelector('tbody');
-                const rows = Array.from(tbody.querySelectorAll('tr'));
-                document.querySelectorAll('th').forEach(h => h.classList.remove('sorted-asc', 'sorted-desc'));
-                sortDir[col] = !sortDir[col];
-                this.classList.add(sortDir[col] ? 'sorted-asc' : 'sorted-desc');
-                rows.sort((a, b) => {
-                    let aVal = a.dataset[col];
-                    let bVal = b.dataset[col];
-                    if (!isNaN(aVal) && !isNaN(bVal)) {
-                        aVal = parseFloat(aVal) || 0;
-                        bVal = parseFloat(bVal) || 0;
-                    }
-                    if (aVal < bVal) return sortDir[col] ? -1 : 1;
-                    if (aVal > bVal) return sortDir[col] ? 1 : -1;
-                    return 0;
-                });
-                rows.forEach(row => tbody.appendChild(row));
             });
-        });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OpenRouter Models Explorer</title>
     <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        :root {
+            --bg-primary: #0f172a;
+            --bg-secondary: #1e293b;
+            --bg-tertiary: #334155;
+            --accent-primary: #3b82f6;
+            --accent-secondary: #8b5cf6;
+            --text-primary: #f8fafc;
+            --text-secondary: #94a3b8;
+            --success: #22c55e;
+            --warning: #f59e0b;
+            --error: #ef4444;
+        }
         body {
+            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
             min-height: 100vh;
+            padding: 20px;
         }
         .container {
             max-width: 1400px;
             margin: 0 auto;
         }
         header {
             text-align: center;
+            padding: 40px 20px;
+            background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
+            border-radius: 16px;
+            margin-bottom: 30px;
             border: 1px solid rgba(255,255,255,0.1);
         }
+        header h1 {
             font-size: 2.5rem;
+            margin-bottom: 10px;
+            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
+            background-clip: text;
         }
+        header p {
+            color: var(--text-secondary);
             font-size: 1.1rem;
         }
         .controls {
             display: flex;
             flex-wrap: wrap;
+            gap: 15px;
+            margin-bottom: 20px;
+            padding: 20px;
+            background: var(--bg-secondary);
+            border-radius: 12px;
             align-items: center;
         }
         .search-box {
             flex: 1;
+            min-width: 280px;
+            position: relative;
+        }
+        .search-box input {
+            width: 100%;
+            padding: 12px 20px;
+            border: 2px solid var(--bg-tertiary);
+            border-radius: 8px;
+            background: var(--bg-primary);
+            color: var(--text-primary);
             font-size: 1rem;
+            transition: all 0.3s ease;
         }
+        .search-box input:focus {
+            outline: none;
+            border-color: var(--accent-primary);
         }
         .btn {
+            padding: 12px 24px;
             border: none;
+            border-radius: 8px;
             cursor: pointer;
             font-weight: 600;
             text-decoration: none;
             display: inline-flex;
             align-items: center;
+            gap: 8px;
+            transition: all 0.3s ease;
+            font-size: 0.95rem;
         }
         .btn-primary {
+            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
             color: white;
         }
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
+        }
         .btn-secondary {
+            background: var(--bg-tertiary);
+            color: var(--text-primary);
         }
+        .btn-secondary:hover {
+            background: var(--accent-primary);
         }
         .stats-bar {
+            background: var(--bg-secondary);
+            padding: 15px 20px;
             border-radius: 12px;
+            margin-bottom: 20px;
+            display: flex;
+            gap: 30px;
+            flex-wrap: wrap;
+            justify-content: center;
         }
         .stat {
+            text-align: center;
         }
         .stat-value {
+            font-size: 2rem;
+            font-weight: 700;
+            color: var(--accent-primary);
         }
         .stat-label {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
         }
+        .table-container {
+            overflow-x: auto;
+            background: var(--bg-secondary);
+            border-radius: 12px;
+            border: 1px solid rgba(255,255,255,0.1);
+        }
         table {
             width: 100%;
             border-collapse: collapse;
+            min-width: 900px;
         }
         th {
+            background: var(--bg-tertiary);
+            padding: 16px;
             text-align: left;
             font-weight: 600;
             cursor: pointer;
             user-select: none;
             position: relative;
+            transition: background 0.2s;
         }
         th:hover {
+            background: var(--accent-primary);
         }
+        th .sort-indicator {
+            margin-left: 8px;
             opacity: 0.5;
         }
+        th.sort-asc .sort-indicator::after {
             content: '▲';
             opacity: 1;
         }
+        th.sort-desc .sort-indicator::after {
             content: '▼';
             opacity: 1;
         }
+        td {
+            padding: 14px 16px;
             border-bottom: 1px solid rgba(255,255,255,0.05);
+            color: var(--text-secondary);
         }
+        tr:hover {
+            background: rgba(59, 130, 246, 0.05);
         }
         .model-name {
+            color: var(--text-primary);
             font-weight: 600;
         }
+        .model-id {
             font-size: 0.85rem;
+            color: var(--text-secondary);
+            font-family: monospace;
         }
         .architecture {
             display: flex;
+            gap: 6px;
             flex-wrap: wrap;
         }
         .badge {
+            padding: 4px 10px;
+            border-radius: 20px;
+            font-size: 0.75rem;
+            font-weight: 500;
+        }
+        .badge-primary {
+            background: rgba(59, 130, 246, 0.2);
+            color: var(--accent-primary);
+        }
+        .badge-success {
+            background: rgba(34, 197, 94, 0.2);
+            color: var(--success);
+        }
+        .badge-warning {
+            background: rgba(245, 158, 11, 0.2);
+            color: var(--warning);
+        }
+        .context {
+            font-family: monospace;
+            color: var(--accent-secondary);
+        }
+        .price {
+            font-family: monospace;
+            font-weight: 600;
+        }
+        .price input {
+            color: var(--success);
         }
+        .price output {
+            color: var(--success);
         }
+        .status {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+        }
+        .status::before {
+            content: '';
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: var(--success);
         }
         footer {
             text-align: center;
+            padding: 40px;
+            color: var(--text-secondary);
+            margin-top: 20px;
+        }
+        .no-results {
+            text-align: center;
+            padding: 60px;
+            color: var(--text-secondary);
         }
         @media (max-width: 768px) {
+            header h1 {
+                font-size: 1.8rem;
+            }
+            .controls {
+                flex-direction: column;
+                width: 100%;
+            }
+            .search-box {
+                min-width: 100%;
+            }
+            .btn {
+                width: 100%;
+                justify-content: center;
+            }
         }
     </style>
 </head>
 <body>
     <div class="container">
         <header>
+            <h1>🔮 OpenRouter Models Explorer</h1>
+            <p>Explore {{ models|length }} AI models with real-time sorting and search</p>
         </header>
         <div class="stats-bar">
             <div class="stat">
+                <div class="stat-value">{{ models|length }}</div>
+                <div class="stat-label">Total Models</div>
             </div>
             <div class="stat">
+                <div class="stat-value">{{ unique_providers }}</div>
+                <div class="stat-label">Providers</div>
             </div>
             <div class="stat">
+                <div class="stat-value" id="visible-count">{{ models|length }}</div>
+                <div class="stat-label">Visible</div>
             </div>
         </div>
         <div class="controls">
+            <div class="search-box">
+                <input type="text" id="searchInput" placeholder="🔍 Search models, providers, or architecture...">
+            </div>
+            <a href="/api/raw" target="_blank" class="btn btn-secondary">📄 View JSON</a>
+            <a href="/api/download" class="btn btn-primary">⬇️ Download</a>
+            <a href="https://openrouter.ai" target="_blank" class="btn btn-secondary">OpenRouter →</a>
         </div>
+        <div class="table-container">
+            <table id="modelsTable">
+                <thead>
+                    <tr>
+                        <th onclick="sortTable(0)">Model <span class="sort-indicator">⇅</span></th>
+                        <th onclick="sortTable(1)">Provider <span class="sort-indicator">⇅</span></th>
+                        <th onclick="sortTable(2)">Architecture <span class="sort-indicator">⇅</span></th>
+                        <th onclick="sortTable(3)" style="text-align: right;">Context <span class="sort-indicator">⇅</span></th>
+                        <th onclick="sortTable(4)" style="text-align: right;">Prompt $/1M <span class="sort-indicator">⇅</span></th>
+                        <th onclick="sortTable(5)" style="text-align: right;">Completion $/1M <span class="sort-indicator">⇅</span></th>
+                        <th>Status</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for model in models %}
+                    <tr>
+                        <td>
+                            <div class="model-name">{{ model.name.split('/', 1)[-1] if '/' in model.name else model.name }}</div>
+                            <div class="model-id">{{ model.id }}</div>
+                        </td>
+                        <td>
+                            <span class="badge badge-primary">{{ model.provider }}</span>
+                        </td>
+                        <td>
+                            <div class="architecture">
+                                {% for arch in model.architecture %}
+                                    <span class="badge badge-success">{{ arch }}</span>
+                                {% endfor %}
+                            </div>
+                        </td>
+                        <td style="text-align: right;" class="context">{{ "{:,}".format(model.context) }}</td>
+                        <td style="text-align: right;" class="price">${{ "{:.4f}".format(model.prompt_price) }}</td>
+                        <td style="text-align: right;" class="price">${{ "{:.4f}".format(model.completion_price) }}</td>
+                        <td><span class="status">Available</span></td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+            <div id="noResults" class="no-results" style="display: none;">
+                <h3>No models found</h3>
+                <p>Try adjusting your search criteria</p>
+            </div>
+        </div>
         <footer>
+            <p>Data updates every 3 hours • Powered by OpenRouter API</p>
+            <p style="margin-top: 10px; font-size: 0.85rem;">Built with Flask on HuggingFace Spaces</p>
         </footer>
     </div>
     <script>
+        let currentSort = { column: -1, direction: 'asc' };
         // Search functionality
+        document.getElementById('searchInput').addEventListener('input', function(e) {
+            const searchTerm = e.target.value.toLowerCase();
+            const rows = document.querySelectorAll('#modelsTable tbody tr');
+            let visibleCount = 0;
+            rows.forEach(row => {
                 const text = row.textContent.toLowerCase();
+                if (text.includes(searchTerm)) {
+                    row.style.display = '';
+                    visibleCount++;
+                } else {
+                    row.style.display = 'none';
+                }
             });
+            document.getElementById('visible-count').textContent = visibleCount;
+            document.getElementById('noResults').style.display = visibleCount === 0 ? 'block' : 'none';
         });
+        // Sort functionality
+        function sortTable(columnIndex) {
+            const table = document.getElementById('modelsTable');
+            const tbody = table.querySelector('tbody');
+            const rows = Array.from(tbody.querySelectorAll('tr'));
+            const headers = table.querySelectorAll('th');
+            // Update sort direction
+            if (currentSort.column === columnIndex) {
+                currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
+            } else {
+                currentSort.direction = 'asc';
+                currentSort.column = columnIndex;
+            }
+            // Update header classes
+            headers.forEach((header, index) => {
+                header.classList.remove('sort-asc', 'sort-desc');
+                if (index === columnIndex) {
+                    header.classList.add(currentSort.direction === 'asc' ? 'sort-asc' : 'sort-desc');
+                }
+            });
+            // Sort rows
+            rows.sort((a, b) => {
+                const aText = a.cells[columnIndex].textContent.trim();
+                const bText = b.cells[columnIndex].textContent.trim();
+                // Check if numeric
+                const aNum = parseFloat(aText.replace(/[$,]/g, ''));
+                const bNum = parseFloat(bText.replace(/[$,]/g, ''));
+                let comparison;
+                if (!isNaN(aNum) && !isNaN(bNum)) {
+                    comparison = aNum - bNum;
+                } else {
+                    comparison = aText.localeCompare(bText);
+                }
+                return currentSort.direction === 'asc' ? comparison : -comparison;
             });
+            // Reorder rows
+            rows.forEach(row => tbody.appendChild(row));
+        }
+        // Auto-refresh indicator
+        let lastUpdate = new Date();
+        setInterval(() => {
+            const now = new Date();
+            const elapsed = Math.floor((now - lastUpdate) / 1000);
+            const hours = Math.floor(elapsed / 3600);
+            const minutes = Math.floor((elapsed % 3600) / 60);
+            // Could update a "last updated" timestamp here
+        }, 60000); // Every minute
     </script>
 </body>
 </html>