Spaces:

Noveumai
/

NovaEval

Sleeping

App Files Files Community

shashankagar commited on Jul 16

Commit

55395f1

verified ·

1 Parent(s): 844aeac

Upload 4 files

Browse files

Files changed (1) hide show

app.py +270 -200

app.py CHANGED Viewed

@@ -1,6 +1,6 @@
 """
-Advanced NovaEval Space by Noveum.ai
-Comprehensive AI Model Evaluation Platform with Hugging Face Models
 """
 import asyncio
@@ -31,7 +31,7 @@ logger = logging.getLogger(__name__)
 app = FastAPI(
     title="NovaEval by Noveum.ai",
     description="Advanced AI Model Evaluation Platform with Hugging Face Models",
-    version="2.0.0"
 )
 app.add_middleware(
@@ -508,13 +508,16 @@ async def get_homepage():
             transform: translateY(-2px);
             box-shadow: 0 10px 25px rgba(0,0,0,0.1);
         }
-        .model-card {
-            border: 2px solid transparent;
-            transition: all 0.3s ease;
         }
-        .model-card.selected {
-            border-color: #667eea;
-            background: rgba(102, 126, 234, 0.1);
         }
         .progress-bar {
             transition: width 0.5s ease;
@@ -526,122 +529,125 @@ async def get_homepage():
             from { opacity: 0; transform: translateX(-10px); }
             to { opacity: 1; transform: translateX(0); }
         }
-        .metric-badge {
-            background: linear-gradient(45deg, #667eea, #764ba2);
         }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
     <!-- Header -->
-    <header class="gradient-bg text-white py-6 shadow-lg">
         <div class="container mx-auto px-4">
             <div class="flex items-center justify-between">
                 <div class="flex items-center space-x-3">
-                    <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
-                        <i data-lucide="zap" class="w-6 h-6 text-purple-600"></i>
                     </div>
                     <div>
-                        <h1 class="text-2xl font-bold">NovaEval</h1>
-                        <p class="text-purple-100 text-sm">by <a href="https://noveum.ai" target="_blank" class="underline hover:text-white">Noveum.ai</a></p>
                     </div>
                 </div>
                 <div class="text-right">
-                    <p class="text-purple-100 text-sm">Advanced AI Model Evaluation Platform</p>
-                    <p class="text-purple-200 text-xs">Powered by Hugging Face Models</p>
                 </div>
             </div>
         </div>
     </header>
-    <div class="container mx-auto px-4 py-8">
-        <!-- Main Content -->
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            <!-- Left Panel - Configuration -->
-            <div class="lg:col-span-2 space-y-6">
-                <!-- Model Selection -->
-                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
-                    <div class="flex items-center space-x-3 mb-6">
-                        <i data-lucide="cpu" class="w-6 h-6 text-purple-600"></i>
-                        <h2 class="text-xl font-semibold text-gray-800">Select Models</h2>
-                    </div>
-                    <!-- Model Search -->
-                    <div class="mb-4">
-                        <div class="relative">
-                            <input type="text" id="modelSearch" placeholder="Search models..."
-                                   class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
-                            <i data-lucide="search" class="w-5 h-5 text-gray-400 absolute left-3 top-2.5"></i>
                         </div>
-                    </div>
-                    <!-- Model Categories -->
-                    <div class="mb-4">
-                        <div class="flex space-x-2">
-                            <button onclick="filterModels('all')" class="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 transition-colors" id="filter-all">All</button>
-                            <button onclick="filterModels('small')" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300 transition-colors" id="filter-small">Small (1-3B)</button>
-                            <button onclick="filterModels('medium')" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300 transition-colors" id="filter-medium">Medium (7B)</button>
-                            <button onclick="filterModels('large')" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300 transition-colors" id="filter-large">Large (14B+)</button>
                         </div>
                     </div>
-                    <!-- Model Grid -->
-                    <div id="modelGrid" class="grid grid-cols-1 md:grid-cols-2 gap-4 max-h-96 overflow-y-auto">
-                        <!-- Models will be populated by JavaScript -->
-                    </div>
-                    <div class="mt-4 text-sm text-gray-600">
-                        <span id="selectedModelsCount">0</span> models selected
-                    </div>
-                </div>
-                <!-- Dataset Selection -->
-                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
-                    <div class="flex items-center space-x-3 mb-6">
-                        <i data-lucide="database" class="w-6 h-6 text-purple-600"></i>
-                        <h2 class="text-xl font-semibold text-gray-800">Select Dataset</h2>
-                    </div>
-                    <!-- Dataset Categories -->
-                    <div class="mb-4">
-                        <div class="flex flex-wrap gap-2">
-                            <button onclick="filterDatasets('all')" class="px-3 py-1 bg-purple-600 text-white rounded-full text-sm hover:bg-purple-700 transition-colors" id="dataset-filter-all">All</button>
-                            <button onclick="filterDatasets('reasoning')" class="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm hover:bg-gray-300 transition-colors" id="dataset-filter-reasoning">Reasoning</button>
-                            <button onclick="filterDatasets('knowledge')" class="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm hover:bg-gray-300 transition-colors" id="dataset-filter-knowledge">Knowledge</button>
-                            <button onclick="filterDatasets('math')" class="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm hover:bg-gray-300 transition-colors" id="dataset-filter-math">Math</button>
-                            <button onclick="filterDatasets('code')" class="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm hover:bg-gray-300 transition-colors" id="dataset-filter-code">Code</button>
-                            <button onclick="filterDatasets('language')" class="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm hover:bg-gray-300 transition-colors" id="dataset-filter-language">Language</button>
                         </div>
                     </div>
-                    <!-- Dataset Grid -->
-                    <div id="datasetGrid" class="space-y-3 max-h-64 overflow-y-auto">
-                        <!-- Datasets will be populated by JavaScript -->
-                    </div>
-                </div>
-                <!-- Configuration -->
-                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
-                    <div class="flex items-center space-x-3 mb-6">
-                        <i data-lucide="settings" class="w-6 h-6 text-purple-600"></i>
-                        <h2 class="text-xl font-semibold text-gray-800">Evaluation Configuration</h2>
-                    </div>
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                         <!-- Metrics Selection -->
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-3">Metrics</label>
-                            <div id="metricsGrid" class="space-y-2">
                                 <!-- Metrics will be populated by JavaScript -->
                             </div>
                         </div>
                         <!-- Parameters -->
-                        <div class="space-y-4">
                             <div>
-                                <label class="block text-sm font-medium text-gray-700 mb-2">Sample Size</label>
                                 <input type="range" id="sampleSize" min="10" max="1000" value="50"
-                                       class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
-                                <div class="flex justify-between text-xs text-gray-500 mt-1">
                                     <span>10</span>
                                     <span id="sampleSizeValue">50</span>
                                     <span>1000</span>
@@ -649,52 +655,51 @@ async def get_homepage():
                             </div>
                             <div>
-                                <label class="block text-sm font-medium text-gray-700 mb-2">Temperature</label>
                                 <input type="range" id="temperature" min="0" max="2" step="0.1" value="0.7"
-                                       class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
-                                <div class="flex justify-between text-xs text-gray-500 mt-1">
                                     <span>0.0</span>
                                     <span id="temperatureValue">0.7</span>
                                     <span>2.0</span>
                                 </div>
                             </div>
-                            <div>
-                                <label class="block text-sm font-medium text-gray-700 mb-2">Max Tokens</label>
-                                <input type="range" id="maxTokens" min="128" max="2048" step="128" value="512"
-                                       class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
-                                <div class="flex justify-between text-xs text-gray-500 mt-1">
-                                    <span>128</span>
-                                    <span id="maxTokensValue">512</span>
-                                    <span>2048</span>
-                                </div>
-                            </div>
                         </div>
-                    </div>
-                    <!-- Start Evaluation Button -->
-                    <div class="mt-6">
                         <button onclick="startEvaluation()" id="startBtn"
-                                class="w-full gradient-bg text-white py-3 px-6 rounded-lg font-semibold hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed">
-                            <i data-lucide="play" class="w-5 h-5 inline mr-2"></i>
                             Start Evaluation
                         </button>
                     </div>
                 </div>
             </div>
-            <!-- Right Panel - Progress & Results -->
             <div class="space-y-6">
                 <!-- Progress -->
-                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
-                    <div class="flex items-center space-x-3 mb-4">
-                        <i data-lucide="activity" class="w-6 h-6 text-purple-600"></i>
-                        <h2 class="text-xl font-semibold text-gray-800">Progress</h2>
                     </div>
                     <div id="progressSection" class="hidden">
-                        <div class="mb-4">
-                            <div class="flex justify-between text-sm text-gray-600 mb-2">
                                 <span id="currentStep">Initializing...</span>
                                 <span id="progressPercent">0%</span>
                             </div>
@@ -704,35 +709,23 @@ async def get_homepage():
                         </div>
                     </div>
-                    <div id="idleMessage" class="text-center text-gray-500 py-8">
-                        <i data-lucide="clock" class="w-12 h-12 mx-auto mb-3 text-gray-300"></i>
-                        <p>Ready to start evaluation</p>
                     </div>
                 </div>
                 <!-- Live Logs -->
-                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
-                    <div class="flex items-center space-x-3 mb-4">
-                        <i data-lucide="terminal" class="w-6 h-6 text-purple-600"></i>
-                        <h2 class="text-xl font-semibold text-gray-800">Live Logs</h2>
                     </div>
-                    <div id="logsContainer" class="bg-gray-900 text-green-400 p-4 rounded-lg h-64 overflow-y-auto font-mono text-sm">
                         <div class="text-gray-500">Waiting for evaluation to start...</div>
                     </div>
                 </div>
-                <!-- Results -->
-                <div id="resultsSection" class="bg-white rounded-xl shadow-lg p-6 card-hover hidden">
-                    <div class="flex items-center space-x-3 mb-4">
-                        <i data-lucide="bar-chart" class="w-6 h-6 text-purple-600"></i>
-                        <h2 class="text-xl font-semibold text-gray-800">Results</h2>
-                    </div>
-                    <div id="resultsContent">
-                        <!-- Results will be populated by JavaScript -->
-                    </div>
-                </div>
             </div>
         </div>
     </div>
@@ -769,17 +762,6 @@ async def get_homepage():
             document.getElementById('temperature').addEventListener('input', function() {
                 document.getElementById('temperatureValue').textContent = this.value;
             });
-            // Max tokens slider
-            document.getElementById('maxTokens').addEventListener('input', function() {
-                document.getElementById('maxTokensValue').textContent = this.value;
-            });
-            // Model search
-            document.getElementById('modelSearch').addEventListener('input', function() {
-                const searchTerm = this.value.toLowerCase();
-                filterModelsBySearch(searchTerm);
-            });
         }
         function renderModels() {
@@ -796,50 +778,92 @@ async def get_homepage():
         function createModelCard(model, category) {
             const div = document.createElement('div');
-            div.className = `model-card p-4 border rounded-lg cursor-pointer hover:shadow-md transition-all`;
             div.dataset.category = category;
             div.dataset.modelId = model.id;
             div.innerHTML = `
-                <div class="flex items-start justify-between mb-2">
                     <div class="flex-1">
                         <h3 class="font-semibold text-gray-800 text-sm">${model.name}</h3>
-                        <p class="text-xs text-gray-500">${model.provider} • ${model.size}</p>
                     </div>
                     <div class="text-xs bg-gray-100 px-2 py-1 rounded">${model.size}</div>
                 </div>
-                <p class="text-xs text-gray-600 mb-2">${model.description}</p>
                 <div class="flex flex-wrap gap-1">
-                    ${model.capabilities.map(cap => `<span class="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded">${cap}</span>`).join('')}
                 </div>
             `;
-            div.addEventListener('click', () => toggleModelSelection(model.id, div));
             return div;
         }
-        function toggleModelSelection(modelId, element) {
             if (selectedModels.includes(modelId)) {
                 selectedModels = selectedModels.filter(id => id !== modelId);
-                element.classList.remove('selected');
             } else {
                 selectedModels.push(modelId);
-                element.classList.add('selected');
             }
             updateSelectedModelsCount();
         }
         function updateSelectedModelsCount() {
-            document.getElementById('selectedModelsCount').textContent = selectedModels.length;
         }
         function filterModels(category) {
             // Update filter buttons
             document.querySelectorAll('[id^="filter-"]').forEach(btn => {
-                btn.className = btn.className.replace('bg-purple-600 text-white', 'bg-gray-200 text-gray-700');
             });
             document.getElementById(`filter-${category}`).className =
-                document.getElementById(`filter-${category}`).className.replace('bg-gray-200 text-gray-700', 'bg-purple-600 text-white');
             // Filter model cards
             document.querySelectorAll('.model-card').forEach(card => {
@@ -851,19 +875,6 @@ async def get_homepage():
             });
         }
-        function filterModelsBySearch(searchTerm) {
-            document.querySelectorAll('.model-card').forEach(card => {
-                const modelName = card.querySelector('h3').textContent.toLowerCase();
-                const modelProvider = card.querySelector('p').textContent.toLowerCase();
-                if (modelName.includes(searchTerm) || modelProvider.includes(searchTerm)) {
-                    card.style.display = 'block';
-                } else {
-                    card.style.display = 'none';
-                }
-            });
-        }
         function renderDatasets() {
             const grid = document.getElementById('datasetGrid');
             grid.innerHTML = '';
@@ -878,46 +889,70 @@ async def get_homepage():
         function createDatasetCard(dataset, category) {
             const div = document.createElement('div');
-            div.className = `dataset-card p-3 border rounded-lg cursor-pointer hover:shadow-md transition-all`;
             div.dataset.category = category;
             div.dataset.datasetId = dataset.id;
             div.innerHTML = `
-                <div class="flex items-start justify-between mb-2">
                     <div class="flex-1">
                         <h3 class="font-semibold text-gray-800 text-sm">${dataset.name}</h3>
-                        <p class="text-xs text-gray-600">${dataset.description}</p>
                     </div>
-                    <div class="text-xs bg-gray-100 px-2 py-1 rounded">${dataset.samples.toLocaleString()}</div>
                 </div>
-                <div class="flex justify-between items-center">
-                    <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">${dataset.task_type}</span>
                     <span class="text-xs text-gray-500">${dataset.difficulty}</span>
                 </div>
             `;
-            div.addEventListener('click', () => selectDataset(dataset.id, div));
             return div;
         }
-        function selectDataset(datasetId, element) {
             // Remove previous selection
             document.querySelectorAll('.dataset-card').forEach(card => {
-                card.classList.remove('selected');
             });
             // Add selection to clicked element
-            element.classList.add('selected');
             selectedDataset = datasetId;
         }
         function filterDatasets(category) {
             // Update filter buttons
             document.querySelectorAll('[id^="dataset-filter-"]').forEach(btn => {
-                btn.className = btn.className.replace('bg-purple-600 text-white', 'bg-gray-200 text-gray-700');
             });
             document.getElementById(`dataset-filter-${category}`).className =
-                document.getElementById(`dataset-filter-${category}`).className.replace('bg-gray-200 text-gray-700', 'bg-purple-600 text-white');
             // Filter dataset cards
             document.querySelectorAll('.dataset-card').forEach(card => {
@@ -939,7 +974,7 @@ async def get_homepage():
                 div.innerHTML = `
                     <input type="checkbox" id="metric-${metric.id}" class="rounded text-purple-600 focus:ring-purple-500">
-                    <label for="metric-${metric.id}" class="text-sm text-gray-700 cursor-pointer">${metric.name}</label>
                 `;
                 const checkbox = div.querySelector('input');
@@ -949,12 +984,47 @@ async def get_homepage():
                     } else {
                         selectedMetrics = selectedMetrics.filter(id => id !== metric.id);
                     }
                 });
                 grid.appendChild(div);
             });
         }
         function startEvaluation() {
             // Validation
             if (selectedModels.length === 0) {
@@ -979,7 +1049,7 @@ async def get_homepage():
                 metrics: selectedMetrics,
                 sample_size: parseInt(document.getElementById('sampleSize').value),
                 temperature: parseFloat(document.getElementById('temperature').value),
-                max_tokens: parseInt(document.getElementById('maxTokens').value),
                 top_p: 0.9
             };
@@ -1091,27 +1161,27 @@ async def get_homepage():
         }
         function showResults(results) {
-            const section = document.getElementById('resultsSection');
             const content = document.getElementById('resultsContent');
-            let html = '<div class="space-y-4">';
             Object.keys(results).forEach(modelId => {
-                const modelName = modelId.split('/').pop();
                 const modelResults = results[modelId];
                 html += `
-                    <div class="border rounded-lg p-4">
                         <h3 class="font-semibold text-gray-800 mb-3">${modelName}</h3>
-                        <div class="grid grid-cols-2 gap-3">
                 `;
                 Object.keys(modelResults).forEach(metric => {
                     const value = modelResults[metric];
                     html += `
-                        <div class="bg-gray-50 p-3 rounded">
-                            <div class="text-sm text-gray-600">${metric.toUpperCase()}</div>
-                            <div class="text-lg font-semibold text-gray-800">${value}</div>
                         </div>
                     `;
                 });
@@ -1121,20 +1191,20 @@ async def get_homepage():
             html += '</div>';
             content.innerHTML = html;
-            section.classList.remove('hidden');
         }
         function disableStartButton() {
             const btn = document.getElementById('startBtn');
             btn.disabled = true;
-            btn.innerHTML = '<i data-lucide="loader" class="w-5 h-5 inline mr-2 animate-spin"></i>Running Evaluation...';
             lucide.createIcons();
         }
         function enableStartButton() {
             const btn = document.getElementById('startBtn');
             btn.disabled = false;
-            btn.innerHTML = '<i data-lucide="play" class="w-5 h-5 inline mr-2"></i>Start Evaluation';
             lucide.createIcons();
         }
     </script>

 """
+Improved NovaEval Space by Noveum.ai
+Advanced AI Model Evaluation Platform with Enhanced UI
 """
 import asyncio
 app = FastAPI(
     title="NovaEval by Noveum.ai",
     description="Advanced AI Model Evaluation Platform with Hugging Face Models",
+    version="3.0.0"
 )
 app.add_middleware(
             transform: translateY(-2px);
             box-shadow: 0 10px 25px rgba(0,0,0,0.1);
         }
+        .tag-selected {
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            color: white;
         }
+        .tag-unselected {
+            background: #f3f4f6;
+            color: #374151;
+        }
+        .tag-unselected:hover {
+            background: #e5e7eb;
         }
         .progress-bar {
             transition: width 0.5s ease;
             from { opacity: 0; transform: translateX(-10px); }
             to { opacity: 1; transform: translateX(0); }
         }
+        .compact-card {
+            min-height: 120px;
+        }
+        .selection-panel {
+            max-height: 400px;
+            overflow-y: auto;
         }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
     <!-- Header -->
+    <header class="gradient-bg text-white py-4 shadow-lg">
         <div class="container mx-auto px-4">
             <div class="flex items-center justify-between">
                 <div class="flex items-center space-x-3">
+                    <div class="w-8 h-8 bg-white rounded-lg flex items-center justify-center">
+                        <i data-lucide="zap" class="w-5 h-5 text-purple-600"></i>
                     </div>
                     <div>
+                        <h1 class="text-xl font-bold">NovaEval</h1>
+                        <p class="text-purple-100 text-xs">by <a href="https://noveum.ai" target="_blank" class="underline hover:text-white">Noveum.ai</a></p>
                     </div>
                 </div>
                 <div class="text-right">
+                    <p class="text-purple-100 text-sm">Advanced AI Model Evaluation</p>
                 </div>
             </div>
         </div>
     </header>
+    <div class="container mx-auto px-4 py-6">
+        <!-- Main Grid Layout -->
+        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+            <!-- Left Panel - Selection (3 columns) -->
+            <div class="lg:col-span-3 space-y-6">
+                <!-- Selection Row -->
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <!-- Models Selection -->
+                    <div class="bg-white rounded-xl shadow-lg p-4 card-hover">
+                        <div class="flex items-center space-x-2 mb-4">
+                            <i data-lucide="cpu" class="w-5 h-5 text-purple-600"></i>
+                            <h2 class="text-lg font-semibold text-gray-800">Models</h2>
+                            <span id="selectedModelsCount" class="text-sm text-gray-500">(0)</span>
                         </div>
+                        <!-- Model Size Filters -->
+                        <div class="flex flex-wrap gap-1 mb-3">
+                            <button onclick="filterModels('all')" class="px-2 py-1 text-xs rounded-full tag-selected transition-all" id="filter-all">All</button>
+                            <button onclick="filterModels('small')" class="px-2 py-1 text-xs rounded-full tag-unselected transition-all" id="filter-small">Small</button>
+                            <button onclick="filterModels('medium')" class="px-2 py-1 text-xs rounded-full tag-unselected transition-all" id="filter-medium">Medium</button>
+                            <button onclick="filterModels('large')" class="px-2 py-1 text-xs rounded-full tag-unselected transition-all" id="filter-large">Large</button>
+                        </div>
+                        <!-- Selected Models Tags -->
+                        <div id="selectedModelsTags" class="mb-3 min-h-[24px]">
+                            <!-- Selected model tags will appear here -->
+                        </div>
+                        <!-- Model Selection Panel -->
+                        <div id="modelGrid" class="selection-panel space-y-2">
+                            <!-- Models will be populated by JavaScript -->
                         </div>
                     </div>
+                    <!-- Dataset Selection -->
+                    <div class="bg-white rounded-xl shadow-lg p-4 card-hover">
+                        <div class="flex items-center space-x-2 mb-4">
+                            <i data-lucide="database" class="w-5 h-5 text-purple-600"></i>
+                            <h2 class="text-lg font-semibold text-gray-800">Dataset</h2>
+                        </div>
+                        <!-- Dataset Category Filters -->
+                        <div class="flex flex-wrap gap-1 mb-3">
+                            <button onclick="filterDatasets('all')" class="px-2 py-1 text-xs rounded-full tag-selected transition-all" id="dataset-filter-all">All</button>
+                            <button onclick="filterDatasets('reasoning')" class="px-2 py-1 text-xs rounded-full tag-unselected transition-all" id="dataset-filter-reasoning">Reasoning</button>
+                            <button onclick="filterDatasets('knowledge')" class="px-2 py-1 text-xs rounded-full tag-unselected transition-all" id="dataset-filter-knowledge">Knowledge</button>
+                            <button onclick="filterDatasets('math')" class="px-2 py-1 text-xs rounded-full tag-unselected transition-all" id="dataset-filter-math">Math</button>
+                            <button onclick="filterDatasets('code')" class="px-2 py-1 text-xs rounded-full tag-unselected transition-all" id="dataset-filter-code">Code</button>
+                            <button onclick="filterDatasets('language')" class="px-2 py-1 text-xs rounded-full tag-unselected transition-all" id="dataset-filter-language">Language</button>
+                        </div>
+                        <!-- Selected Dataset Tag -->
+                        <div id="selectedDatasetTag" class="mb-3 min-h-[24px]">
+                            <!-- Selected dataset tag will appear here -->
+                        </div>
+                        <!-- Dataset Selection Panel -->
+                        <div id="datasetGrid" class="selection-panel space-y-2">
+                            <!-- Datasets will be populated by JavaScript -->
                         </div>
                     </div>
+                    <!-- Metrics & Config -->
+                    <div class="bg-white rounded-xl shadow-lg p-4 card-hover">
+                        <div class="flex items-center space-x-2 mb-4">
+                            <i data-lucide="settings" class="w-5 h-5 text-purple-600"></i>
+                            <h2 class="text-lg font-semibold text-gray-800">Config</h2>
+                        </div>
+                        <!-- Selected Metrics Tags -->
+                        <div id="selectedMetricsTags" class="mb-3 min-h-[24px]">
+                            <!-- Selected metrics tags will appear here -->
+                        </div>
                         <!-- Metrics Selection -->
+                        <div class="mb-4">
+                            <label class="block text-sm font-medium text-gray-700 mb-2">Metrics</label>
+                            <div id="metricsGrid" class="space-y-1">
                                 <!-- Metrics will be populated by JavaScript -->
                             </div>
                         </div>
                         <!-- Parameters -->
+                        <div class="space-y-3">
                             <div>
+                                <label class="block text-xs font-medium text-gray-700 mb-1">Sample Size</label>
                                 <input type="range" id="sampleSize" min="10" max="1000" value="50"
+                                       class="w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer">
+                                <div class="flex justify-between text-xs text-gray-500">
                                     <span>10</span>
                                     <span id="sampleSizeValue">50</span>
                                     <span>1000</span>
                             </div>
                             <div>
+                                <label class="block text-xs font-medium text-gray-700 mb-1">Temperature</label>
                                 <input type="range" id="temperature" min="0" max="2" step="0.1" value="0.7"
+                                       class="w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer">
+                                <div class="flex justify-between text-xs text-gray-500">
                                     <span>0.0</span>
                                     <span id="temperatureValue">0.7</span>
                                     <span>2.0</span>
                                 </div>
                             </div>
                         </div>
+                        <!-- Start Button -->
                         <button onclick="startEvaluation()" id="startBtn"
+                                class="w-full gradient-bg text-white py-2 px-4 rounded-lg font-semibold hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed mt-4 text-sm">
+                            <i data-lucide="play" class="w-4 h-4 inline mr-1"></i>
                             Start Evaluation
                         </button>
                     </div>
                 </div>
+                <!-- Results Panel -->
+                <div id="resultsPanel" class="bg-white rounded-xl shadow-lg p-6 card-hover hidden">
+                    <div class="flex items-center space-x-3 mb-4">
+                        <i data-lucide="bar-chart" class="w-6 h-6 text-purple-600"></i>
+                        <h2 class="text-xl font-semibold text-gray-800">Evaluation Results</h2>
+                    </div>
+                    <div id="resultsContent">
+                        <!-- Results will be populated by JavaScript -->
+                    </div>
+                </div>
             </div>
+            <!-- Right Panel - Progress & Logs (1 column) -->
             <div class="space-y-6">
                 <!-- Progress -->
+                <div class="bg-white rounded-xl shadow-lg p-4 card-hover">
+                    <div class="flex items-center space-x-2 mb-3">
+                        <i data-lucide="activity" class="w-5 h-5 text-purple-600"></i>
+                        <h2 class="text-lg font-semibold text-gray-800">Progress</h2>
                     </div>
                     <div id="progressSection" class="hidden">
+                        <div class="mb-3">
+                            <div class="flex justify-between text-xs text-gray-600 mb-1">
                                 <span id="currentStep">Initializing...</span>
                                 <span id="progressPercent">0%</span>
                             </div>
                         </div>
                     </div>
+                    <div id="idleMessage" class="text-center text-gray-500 py-4">
+                        <i data-lucide="clock" class="w-8 h-8 mx-auto mb-2 text-gray-300"></i>
+                        <p class="text-sm">Ready to start</p>
                     </div>
                 </div>
                 <!-- Live Logs -->
+                <div class="bg-white rounded-xl shadow-lg p-4 card-hover">
+                    <div class="flex items-center space-x-2 mb-3">
+                        <i data-lucide="terminal" class="w-5 h-5 text-purple-600"></i>
+                        <h2 class="text-lg font-semibold text-gray-800">Live Logs</h2>
                     </div>
+                    <div id="logsContainer" class="bg-gray-900 text-green-400 p-3 rounded-lg h-64 overflow-y-auto font-mono text-xs">
                         <div class="text-gray-500">Waiting for evaluation to start...</div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
             document.getElementById('temperature').addEventListener('input', function() {
                 document.getElementById('temperatureValue').textContent = this.value;
             });
         }
         function renderModels() {
         function createModelCard(model, category) {
             const div = document.createElement('div');
+            div.className = `model-card p-2 border rounded-lg cursor-pointer hover:shadow-md transition-all compact-card`;
             div.dataset.category = category;
             div.dataset.modelId = model.id;
             div.innerHTML = `
+                <div class="flex items-start justify-between mb-1">
                     <div class="flex-1">
                         <h3 class="font-semibold text-gray-800 text-sm">${model.name}</h3>
+                        <p class="text-xs text-gray-500">${model.provider}</p>
                     </div>
                     <div class="text-xs bg-gray-100 px-2 py-1 rounded">${model.size}</div>
                 </div>
+                <p class="text-xs text-gray-600 mb-2 line-clamp-2">${model.description}</p>
                 <div class="flex flex-wrap gap-1">
+                    ${model.capabilities.slice(0, 2).map(cap => `<span class="text-xs bg-purple-100 text-purple-700 px-1 py-0.5 rounded">${cap}</span>`).join('')}
                 </div>
             `;
+            div.addEventListener('click', () => toggleModelSelection(model.id, model.name, div));
             return div;
         }
+        function toggleModelSelection(modelId, modelName, element) {
             if (selectedModels.includes(modelId)) {
                 selectedModels = selectedModels.filter(id => id !== modelId);
+                element.classList.remove('ring-2', 'ring-purple-500', 'bg-purple-50');
             } else {
                 selectedModels.push(modelId);
+                element.classList.add('ring-2', 'ring-purple-500', 'bg-purple-50');
+            }
+            updateSelectedModelsTags();
+            updateSelectedModelsCount();
+        }
+        function updateSelectedModelsTags() {
+            const container = document.getElementById('selectedModelsTags');
+            container.innerHTML = '';
+            selectedModels.forEach(modelId => {
+                const modelName = getModelName(modelId);
+                const tag = document.createElement('span');
+                tag.className = 'inline-flex items-center px-2 py-1 text-xs bg-purple-100 text-purple-800 rounded-full mr-1 mb-1';
+                tag.innerHTML = `
+                    ${modelName}
+                    <button onclick="removeModel('${modelId}')" class="ml-1 text-purple-600 hover:text-purple-800">
+                        <i data-lucide="x" class="w-3 h-3"></i>
+                    </button>
+                `;
+                container.appendChild(tag);
+            });
+            lucide.createIcons();
+        }
+        function removeModel(modelId) {
+            selectedModels = selectedModels.filter(id => id !== modelId);
+            // Update UI
+            const modelCard = document.querySelector(`[data-model-id="${modelId}"]`);
+            if (modelCard) {
+                modelCard.classList.remove('ring-2', 'ring-purple-500', 'bg-purple-50');
             }
+            updateSelectedModelsTags();
             updateSelectedModelsCount();
         }
+        function getModelName(modelId) {
+            for (const category of Object.values(models)) {
+                for (const model of category) {
+                    if (model.id === modelId) {
+                        return model.name;
+                    }
+                }
+            }
+            return modelId.split('/').pop();
+        }
         function updateSelectedModelsCount() {
+            document.getElementById('selectedModelsCount').textContent = `(${selectedModels.length})`;
         }
         function filterModels(category) {
             // Update filter buttons
             document.querySelectorAll('[id^="filter-"]').forEach(btn => {
+                btn.className = btn.className.replace('tag-selected', 'tag-unselected');
             });
             document.getElementById(`filter-${category}`).className =
+                document.getElementById(`filter-${category}`).className.replace('tag-unselected', 'tag-selected');
             // Filter model cards
             document.querySelectorAll('.model-card').forEach(card => {
             });
         }
         function renderDatasets() {
             const grid = document.getElementById('datasetGrid');
             grid.innerHTML = '';
         function createDatasetCard(dataset, category) {
             const div = document.createElement('div');
+            div.className = `dataset-card p-2 border rounded-lg cursor-pointer hover:shadow-md transition-all compact-card`;
             div.dataset.category = category;
             div.dataset.datasetId = dataset.id;
             div.innerHTML = `
+                <div class="flex items-start justify-between mb-1">
                     <div class="flex-1">
                         <h3 class="font-semibold text-gray-800 text-sm">${dataset.name}</h3>
+                        <p class="text-xs text-gray-600 line-clamp-2">${dataset.description}</p>
                     </div>
+                    <div class="text-xs bg-gray-100 px-1 py-0.5 rounded">${dataset.samples.toLocaleString()}</div>
                 </div>
+                <div class="flex justify-between items-center mt-2">
+                    <span class="text-xs bg-blue-100 text-blue-700 px-1 py-0.5 rounded">${dataset.task_type}</span>
                     <span class="text-xs text-gray-500">${dataset.difficulty}</span>
                 </div>
             `;
+            div.addEventListener('click', () => selectDataset(dataset.id, dataset.name, div));
             return div;
         }
+        function selectDataset(datasetId, datasetName, element) {
             // Remove previous selection
             document.querySelectorAll('.dataset-card').forEach(card => {
+                card.classList.remove('ring-2', 'ring-purple-500', 'bg-purple-50');
             });
             // Add selection to clicked element
+            element.classList.add('ring-2', 'ring-purple-500', 'bg-purple-50');
             selectedDataset = datasetId;
+            // Update selected dataset tag
+            updateSelectedDatasetTag(datasetName);
+        }
+        function updateSelectedDatasetTag(datasetName) {
+            const container = document.getElementById('selectedDatasetTag');
+            container.innerHTML = `
+                <span class="inline-flex items-center px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded-full">
+                    ${datasetName}
+                    <button onclick="removeDataset()" class="ml-1 text-blue-600 hover:text-blue-800">
+                        <i data-lucide="x" class="w-3 h-3"></i>
+                    </button>
+                </span>
+            `;
+            lucide.createIcons();
+        }
+        function removeDataset() {
+            selectedDataset = null;
+            document.getElementById('selectedDatasetTag').innerHTML = '';
+            document.querySelectorAll('.dataset-card').forEach(card => {
+                card.classList.remove('ring-2', 'ring-purple-500', 'bg-purple-50');
+            });
         }
         function filterDatasets(category) {
             // Update filter buttons
             document.querySelectorAll('[id^="dataset-filter-"]').forEach(btn => {
+                btn.className = btn.className.replace('tag-selected', 'tag-unselected');
             });
             document.getElementById(`dataset-filter-${category}`).className =
+                document.getElementById(`dataset-filter-${category}`).className.replace('tag-unselected', 'tag-selected');
             // Filter dataset cards
             document.querySelectorAll('.dataset-card').forEach(card => {
                 div.innerHTML = `
                     <input type="checkbox" id="metric-${metric.id}" class="rounded text-purple-600 focus:ring-purple-500">
+                    <label for="metric-${metric.id}" class="text-xs text-gray-700 cursor-pointer">${metric.name}</label>
                 `;
                 const checkbox = div.querySelector('input');
                     } else {
                         selectedMetrics = selectedMetrics.filter(id => id !== metric.id);
                     }
+                    updateSelectedMetricsTags();
                 });
                 grid.appendChild(div);
             });
         }
+        function updateSelectedMetricsTags() {
+            const container = document.getElementById('selectedMetricsTags');
+            container.innerHTML = '';
+            selectedMetrics.forEach(metricId => {
+                const metricName = getMetricName(metricId);
+                const tag = document.createElement('span');
+                tag.className = 'inline-flex items-center px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full mr-1 mb-1';
+                tag.innerHTML = `
+                    ${metricName}
+                    <button onclick="removeMetric('${metricId}')" class="ml-1 text-green-600 hover:text-green-800">
+                        <i data-lucide="x" class="w-3 h-3"></i>
+                    </button>
+                `;
+                container.appendChild(tag);
+            });
+            lucide.createIcons();
+        }
+        function removeMetric(metricId) {
+            selectedMetrics = selectedMetrics.filter(id => id !== metricId);
+            // Update checkbox
+            const checkbox = document.getElementById(`metric-${metricId}`);
+            if (checkbox) {
+                checkbox.checked = false;
+            }
+            updateSelectedMetricsTags();
+        }
+        function getMetricName(metricId) {
+            const metric = metrics.find(m => m.id === metricId);
+            return metric ? metric.name : metricId;
+        }
         function startEvaluation() {
             // Validation
             if (selectedModels.length === 0) {
                 metrics: selectedMetrics,
                 sample_size: parseInt(document.getElementById('sampleSize').value),
                 temperature: parseFloat(document.getElementById('temperature').value),
+                max_tokens: 512,
                 top_p: 0.9
             };
         }
         function showResults(results) {
+            const panel = document.getElementById('resultsPanel');
             const content = document.getElementById('resultsContent');
+            let html = '<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">';
             Object.keys(results).forEach(modelId => {
+                const modelName = getModelName(modelId);
                 const modelResults = results[modelId];
                 html += `
+                    <div class="border rounded-lg p-4 bg-gray-50">
                         <h3 class="font-semibold text-gray-800 mb-3">${modelName}</h3>
+                        <div class="space-y-2">
                 `;
                 Object.keys(modelResults).forEach(metric => {
                     const value = modelResults[metric];
                     html += `
+                        <div class="flex justify-between items-center">
+                            <span class="text-sm text-gray-600">${metric.toUpperCase()}</span>
+                            <span class="text-lg font-semibold text-gray-800">${value}</span>
                         </div>
                     `;
                 });
             html += '</div>';
             content.innerHTML = html;
+            panel.classList.remove('hidden');
         }
         function disableStartButton() {
             const btn = document.getElementById('startBtn');
             btn.disabled = true;
+            btn.innerHTML = '<i data-lucide="loader" class="w-4 h-4 inline mr-1 animate-spin"></i>Running...';
             lucide.createIcons();
         }
         function enableStartButton() {
             const btn = document.getElementById('startBtn');
             btn.disabled = false;
+            btn.innerHTML = '<i data-lucide="play" class="w-4 h-4 inline mr-1"></i>Start Evaluation';
             lucide.createIcons();
         }
     </script>