test

app/static/css/styles.css

@@ -136,21 +136,21 @@ body {
 }
 
 .model-card h3 {
-    font-size: 1.3rem;
+    font-size: 0.9rem;
     margin-bottom: 8px;
-    color: var(--primary);
-    font-weight: 600;
+    color: var(--text);
+    font-weight: 500;
 }
 
 .model-card .subtitle {
-    color: var(--text-light);
+    color: var(--text);
     font-size: 0.9rem;
     margin-bottom: 12px;
     font-weight: 500;
 }
 
 .model-card p {
-    color: var(--text-light);
+    color: var(--text);
     font-size: 0.9rem;
     margin-bottom: 5px;
 }
@@ -225,45 +225,42 @@ body {
 
 .config-list {
     display: grid;
-    gap: 15px;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+    padding: 20px;
 }
 
 .config-card {
+    background: white;
     border: 1px solid var(--border);
     border-radius: 8px;
     padding: 20px;
+    transition: var(--transition);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
 }
 
-.config-card h4 {
-    font-size: 1.1rem;
-    margin-bottom: 10px;
-    color: var(--primary-dark);
+.config-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
 }
 
-.config-details {
+.config-content {
     display: flex;
     flex-direction: column;
-    gap: 20px;
-}
-
-.config-group {
-    background: var(--secondary);
-    border-radius: 6px;
-    padding: 15px;
+    gap: 12px;
 }
 
-.config-group h5 {
-    color: var(--primary);
-    font-size: 1rem;
-    margin-bottom: 12px;
-    font-weight: 600;
+.config-card h4 {
+    font-size: 1.1rem;
+    margin-bottom: 10px;
+    color: var(--primary-dark);
 }
 
 .detail-item {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 8px;
-    padding: 4px 0;
+    align-items: center;
+    padding: 8px 0;
     border-bottom: 1px solid var(--border);
 }
 
@@ -272,12 +269,13 @@ body {
 }
 
 .detail-item strong {
-    color: var(--text);
-    font-weight: 500;
+    color: var(--text-light);
+    font-size: 0.9rem;
 }
 
 .detail-item span {
-    color: var(--text-light);
+    color: var(--text);
+    font-weight: 500;
 }
 
 /* Empty State */
@@ -294,6 +292,12 @@ body {
 }
 
 /* Responsive */
+@media (max-width: 1200px) {
+    .config-list {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
 @media (max-width: 768px) {
     .model-grid {
         grid-template-columns: 1fr;
@@ -308,6 +312,10 @@ body {
         align-items: flex-start;
         gap: 15px;
     }
+    
+    .config-list {
+        grid-template-columns: 1fr;
+    }
 }
 
 /* Loading spinner */

app/static/js/main.js

@@ -1,6 +1,6 @@
 let models = [];
 let currentPage = 1;
-const modelsPerPage = 10;
+const modelsPerPage = 12;
 
 // DOM Elements
 const modelGrid = document.getElementById('modelGrid');
@@ -66,53 +66,40 @@ async function showModelConfigurations(modelId) {
             noConfig.style.display = 'block';
             configList.innerHTML = '';
         } else {
-            configs.forEach((config, idx) => {
+            configs.forEach((config) => {
                 const configCard = document.createElement('div');
                 configCard.className = 'config-card';
                 
-                // Group related configurations
-                const groups = {
-                    'Model Information': {
-                        'checkpoint_id': config.checkpoint_id,
-                        'checkpoint_revision': config.checkpoint_revision,
-                        'task': config.task
-                    },
-                    'Hardware Configuration': {
-                        'num_cores': config.num_cores,
-                        'auto_cast_type': config.auto_cast_type
-                    },
-                    'Compiler Settings': {
-                        'compiler_type': config.compiler_type,
-                        'compiler_version': config.compiler_version
-                    },
-                    'Model Parameters': {
-                        'batch_size': config.batch_size,
-                        'sequence_length': config.sequence_length
-                    }
-                };
-
-                let detailsHtml = '';
-                for (const [groupName, groupFields] of Object.entries(groups)) {
-                    detailsHtml += `
-                        <div class="config-group">
-                            <h5>${groupName}</h5>
-                            ${Object.entries(groupFields)
-                                .map(([key, value]) => `
-                                    <div class="detail-item">
-                                        <strong>${key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}:</strong>
-                                        <span>${value}</span>
-                                    </div>
-                                `).join('')}
+                let detailsHtml = `
+                    <div class="config-content">
+                        <div class="detail-item">
+                            <strong>Num Cores:</strong>
+                            <span>${config.num_cores}</span>
+                        </div>
+                        <div class="detail-item">
+                            <strong>Auto Cast Type:</strong>
+                            <span>${config.auto_cast_type}</span>
+                        </div>
+                        <div class="detail-item">
+                            <strong>Batch Size:</strong>
+                            <span>${config.batch_size}</span>
+                        </div>
+                        <div class="detail-item">
+                            <strong>Sequence Length:</strong>
+                            <span>${config.sequence_length}</span>
+                        </div>
+                        <div class="detail-item">
+                            <strong>Compiler Type:</strong>
+                            <span>${config.compiler_type}</span>
+                        </div>
+                        <div class="detail-item">
+                            <strong>Compiler Version:</strong>
+                            <span>${config.compiler_version}</span>
                         </div>
-                    `;
-                }
-                
-                configCard.innerHTML = `
-                    <h4>Configuration ${idx + 1}</h4>
-                    <div class="config-details">
-                        ${detailsHtml}
                     </div>
                 `;
+                
+                configCard.innerHTML = detailsHtml;
                 configList.appendChild(configCard);
             });
         }
@@ -151,7 +138,13 @@ function renderModels() {
     setTimeout(() => {
         const startIdx = (currentPage - 1) * modelsPerPage;
         const endIdx = startIdx + modelsPerPage;
-        const paginatedModels = models.slice(startIdx, endIdx);
+        
+        // Sort models alphabetically by title (case-insensitive)
+        const sortedModels = [...models].sort((a, b) => 
+            a.name.toLowerCase().localeCompare(b.name.toLowerCase())
+        );
+        
+        const paginatedModels = sortedModels.slice(startIdx, endIdx);
         
         if (paginatedModels.length === 0) {
             modelGrid.innerHTML = `
@@ -166,7 +159,7 @@ function renderModels() {
                 const modelCard = document.createElement('div');
                 modelCard.className = 'model-card';
                 modelCard.innerHTML = `
-                    <h3>${model.name}</h3>
+                    <h3><strong>${model.name}</strong></h3>
                     <p class="subtitle">Architecture: ${model.type}</p>
                 `;
                 modelCard.addEventListener('click', () => showModelConfigurations(model.id));
@@ -224,4 +217,19 @@ function goToNextPage() {
         renderModels();
         updatePagination();
     }
+}
+
+function createConfigurationElement(config) {
+    const configElement = document.createElement('div');
+    configElement.className = 'config-item';
+    
+    // Add your configuration content here, but skip the title
+    // For example:
+    configElement.innerHTML = `
+        <div class="config-content">
+            <!-- Your configuration details here -->
+        </div>
+    `;
+    
+    return configElement;
 } 

app/templates/index.html

@@ -24,6 +24,7 @@
             <div class="section-header">
                 <h2><i class="fas fa-list"></i> Available Models</h2>
             </div>
+            <p class="section-subtitle" style="margin-bottom: 20px;">Browse and select from all available model configurations</p>
             
             <div id="modelGrid" class="model-grid">
                 <!-- Models will be populated here -->