Update index.html

index.html

@@ -7,9 +7,15 @@
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
         
         :root {
-            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-            --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+            --primary-color: #0ea5e9;
+            --primary-dark: #0c4a6e;
+            --primary-light: #f0f9ff;
+            --secondary-color: #059669;
+            --secondary-dark: #064e3b;
+            --secondary-light: #ecfdf5;
+            --accent-color: #7c3aed;
+            --accent-dark: #4c1d95;
+            --accent-light: #f3f4f6;
             --dark-bg: #0a0a0a;
             --card-bg: #ffffff;
             --text-primary: #1a1a1a;
@@ -20,9 +26,9 @@
             --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.06);
             --shadow-lg: 0 10px 25px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.06);
             --shadow-xl: 0 20px 40px rgba(0,0,0,0.1), 0 8px 20px rgba(0,0,0,0.08);
-            --border-radius: 16px;
-            --border-radius-sm: 12px;
-            --border-radius-lg: 24px;
+            --border-radius: 8px;
+            --border-radius-sm: 6px;
+            --border-radius-lg: 12px;
         }
         
         * {
@@ -67,10 +73,7 @@
             font-weight: 900; 
             margin: 0 0 16px 0;
             letter-spacing: -2px;
-            background: var(--primary-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
+            color: var(--primary-color);
             position: relative;
         }
         
@@ -82,7 +85,7 @@
             transform: translateX(-50%);
             width: 60px;
             height: 4px;
-            background: var(--accent-gradient);
+            background: var(--primary-color);
             border-radius: 2px;
         }
         
@@ -105,18 +108,18 @@
         }
         
         .aisheets-credit a { 
-            color: #667eea;
+            color: var(--primary-color);
             text-decoration: none;
             font-weight: 600;
             transition: all 0.3s ease;
             padding: 4px 8px;
             border-radius: 6px;
-            background: rgba(102, 126, 234, 0.1);
+            background: var(--primary-light);
         }
         
         .aisheets-credit a:hover { 
-            color: #764ba2;
-            background: rgba(118, 75, 162, 0.1);
+            color: var(--primary-dark);
+            background: rgba(14, 165, 233, 0.15);
             transform: translateY(-1px);
         }
         
@@ -133,6 +136,53 @@
             backdrop-filter: blur(20px);
         }
         
+        .filter-section {
+            background: var(--card-bg);
+            padding: 20px 30px;
+            margin-bottom: 30px;
+            border-radius: var(--border-radius-lg);
+            box-shadow: var(--shadow-xl);
+            border: 1px solid rgba(255,255,255,0.8);
+            backdrop-filter: blur(20px);
+        }
+        
+        .filter-controls {
+            display: flex;
+            justify-content: center;
+            gap: 15px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+        
+        .filter-btn {
+            background: #f8fafc;
+            border: 2px solid #e5e7eb;
+            color: #374151;
+            padding: 8px 16px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-weight: 500;
+            transition: all 0.2s ease;
+        }
+        
+        .filter-btn:hover {
+            background: var(--primary-light);
+            border-color: var(--primary-color);
+            color: var(--primary-dark);
+        }
+        
+        .filter-btn.active {
+            background: var(--primary-color);
+            border-color: var(--primary-color);
+            color: white;
+        }
+        
+        .filter-label {
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-right: 10px;
+        }
+        
         .stats-header p { 
             font-size: 16px; 
             margin: 0 0 30px 0; 
@@ -151,7 +201,7 @@
         
         .stat { 
             font-size: 16px; 
-            background: var(--primary-gradient);
+            background: var(--primary-color);
             padding: 20px 30px;
             border-radius: var(--border-radius-sm);
             color: white;
@@ -209,8 +259,8 @@
         }
         
         .toc-title:hover {
-            background: rgba(102, 126, 234, 0.1);
-            color: #667eea;
+            background: var(--primary-light);
+            color: var(--primary-color);
             transform: translateY(-1px);
         }
         
@@ -255,14 +305,14 @@
             left: 0;
             right: 0;
             height: 3px;
-            background: var(--accent-gradient);
+            background: var(--primary-color);
             transform: scaleX(0);
             transition: transform 0.3s ease;
         }
         
         .toc-item:hover { 
             background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
-            border-color: #667eea;
+            border-color: var(--primary-color);
             transform: translateY(-4px);
             box-shadow: var(--shadow-lg);
         }
@@ -273,7 +323,7 @@
         
         .toc-number { 
             font-weight: 700; 
-            color: #667eea; 
+            color: var(--primary-color); 
             margin-right: 12px;
             font-size: 16px;
         }
@@ -306,100 +356,102 @@
         }
         
         .description-header { 
-            background: var(--primary-gradient); 
-            color: white; 
-            padding: 25px 20px; 
-            text-align: center; 
-            font-size: 18px; 
-            font-weight: 700;
-            letter-spacing: -0.3px;
-            position: relative;
+            background: #f8fafc; 
+            color: #374151; 
+            padding: 16px 20px; 
+            text-align: left; 
+            font-size: 16px; 
+            font-weight: 600;
+            border-bottom: 1px solid #e5e7eb;
+            cursor: pointer;
+            user-select: none;
+            transition: background-color 0.2s ease;
         }
         
-        .description-header::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            height: 1px;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+        .description-header:hover {
+            background: #f1f5f9;
         }
         
         /* Evaluation Section */
         .evaluation-section { 
-            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); 
-            border-bottom: 1px solid var(--border-color); 
-            padding: 20px; 
+            background: #ffffff; 
+            border-bottom: 1px solid #e5e7eb; 
+            padding: 8px 20px; 
+        }
+        
+        .evaluations-container {
+            display: none;
+        }
+        
+        .evaluations-container.expanded {
+            display: block;
         }
         
         .evaluation-result { 
-            background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); 
-            border: 1px solid #86efac; 
-            border-radius: var(--border-radius-sm); 
-            padding: 20px; 
-            margin-bottom: 15px;
-            box-shadow: var(--shadow-sm);
+            background: #f9fafb; 
+            border: 1px solid #e5e7eb; 
+            border-radius: 6px; 
+            padding: 12px 16px; 
+            margin-bottom: 8px;
         }
         
         .eval-label { 
-            font-size: 12px; 
-            color: var(--text-muted); 
-            margin-bottom: 8px; 
-            font-weight: 600;
+            font-size: 11px; 
+            color: #6b7280; 
+            margin-bottom: 4px; 
+            font-weight: 500;
             text-transform: uppercase;
             letter-spacing: 0.5px;
         }
         
         .winner { 
-            color: #166534; 
-            font-weight: 800; 
-            margin-bottom: 8px; 
-            font-size: 16px;
+            color: #374151; 
+            font-weight: 600; 
+            margin-bottom: 4px; 
+            font-size: 14px;
         }
         
         .reason { 
-            color: #166534; 
+            color: #374151; 
             font-weight: 500;
         }
         
         .view-eval-btn { 
-            background: var(--primary-gradient); 
-            color: white; 
-            border: none; 
-            padding: 8px 16px; 
-            border-radius: var(--border-radius-sm); 
+            background: #ffffff; 
+            color: #374151; 
+            border: 1px solid #d1d5db; 
+            padding: 4px 12px; 
+            border-radius: 4px; 
             cursor: pointer; 
-            margin-top: 12px; 
-            font-size: 13px; 
-            font-weight: 600;
-            transition: all 0.3s ease;
+            margin-top: 8px; 
+            font-size: 11px; 
+            font-weight: 500;
+            transition: all 0.2s ease;
         }
         
         .view-eval-btn:hover {
-            transform: translateY(-1px);
-            box-shadow: var(--shadow-md);
+            background: #f3f4f6;
+            border-color: #9ca3af;
         }
         
         .full-evaluation { 
-            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); 
-            border: 1px solid #fbbf24; 
-            border-radius: var(--border-radius-sm); 
-            padding: 20px; 
-            margin-top: 15px; 
+            background: #ffffff; 
+            border: 1px solid #e5e7eb; 
+            border-radius: 6px; 
+            padding: 12px 16px; 
+            margin-top: 8px; 
             display: none;
-            box-shadow: var(--shadow-sm);
         }
         
         .thinking-content { 
-            max-height: 300px; 
+            max-height: 200px; 
             overflow-y: auto; 
-            font-size: 14px; 
-            line-height: 1.6; 
+            font-size: 12px; 
+            line-height: 1.5; 
             white-space: pre-wrap; 
             text-align: left; 
-            color: #92400e;
-            font-weight: 500;
+            color: #374151;
+            font-weight: 400;
         }
         
         /* Implementation Panels */
@@ -419,7 +471,7 @@
         }
         
         .impl-header { 
-            background: var(--secondary-gradient); 
+            background: var(--secondary-color); 
             color: white; 
             padding: 16px 20px; 
             font-weight: 700; 
@@ -507,12 +559,12 @@
         }
         
         ::-webkit-scrollbar-thumb {
-            background: var(--primary-gradient);
+            background: var(--primary-color);
             border-radius: 4px;
         }
         
         ::-webkit-scrollbar-thumb:hover {
-            background: var(--secondary-gradient);
+            background: var(--secondary-color);
         }
     </style>
 </head>
@@ -538,6 +590,24 @@
                     };
                 }
                 
+                // Also check for model 1/model 2 patterns
+                const model1Match = evalText.match(/model\s*1/i);
+                const model2Match = evalText.match(/model\s*2/i);
+                
+                if (model1Match) {
+                    return {
+                        winner: 'Qwen3-Coder-480B-A35B-Instruct',
+                        reason: evalText,
+                        fullEval: evalText
+                    };
+                } else if (model2Match) {
+                    return {
+                        winner: 'gpt-oss-120b',
+                        reason: evalText,
+                        fullEval: evalText
+                    };
+                }
+                
                 return null;
             } catch (e) {
                 console.error('Error parsing evaluation:', e);
@@ -545,61 +615,208 @@
             }
         }
         
-        function createEvaluationSection(evaluation, index) {
-            const winner = evaluation.winner.toLowerCase().includes('kimi') ? 'Kimi-K2' : 
-                          evaluation.winner.toLowerCase().includes('qwen') ? 'Qwen3-Coder' : 
+        function createEvaluationSection(evaluation, index, evalType = 'qwen') {
+            const winner = evaluation.winner.toLowerCase().includes('qwen') || evaluation.winner.toLowerCase().includes('model 1') ? 'Qwen3-Coder-480B-A35B-Instruct' : 
+                          evaluation.winner.toLowerCase().includes('gpt') || evaluation.winner.toLowerCase().includes('model 2') ? 'gpt-oss-120b' : 
                           evaluation.winner;
             
+            const judgeLabel = evalType === 'qwen' ? 'Qwen3-Coder judge' : 
+                             evalType === 'gpt' ? 'GPT-OSS judge' : 
+                             'Kimi judge';
+            
             return `
                 <div class="evaluation-section">
-                    <div class="eval-label">(Kimi-K2 judge)</div>
+                    <div class="eval-label">${judgeLabel}</div>
                     <div class="evaluation-result">
                         <div class="winner">🏆 Winner: ${winner}</div>
-                        <button class="view-eval-btn" onclick="toggleFullEval(${index})">View Reason</button>
+                        <button class="view-eval-btn" onclick="toggleFullEval('full-eval-${index}-${evalType}')">View Reason</button>
                     </div>
-                    <div class="full-evaluation" id="full-eval-${index}">
+                    <div class="full-evaluation" id="full-eval-${index}-${evalType}">
                         <div class="thinking-content">${evaluation.reason}</div>
                     </div>
                 </div>
             `;
         }
         
+        function createMajorityVoteSection(qwenEvaluation, gptEvaluation, kimiEvaluation, index) {
+            let qwenVotes = 0;
+            let gptOssVotes = 0;
+            let totalVotes = 0;
+            
+            if (qwenEvaluation) {
+                totalVotes++;
+                const winner = qwenEvaluation.winner.toLowerCase();
+                if (winner.includes('qwen') || winner.includes('model 1')) {
+                    qwenVotes++;
+                } else if (winner.includes('gpt') || winner.includes('model 2')) {
+                    gptOssVotes++;
+                }
+            }
+            
+            if (gptEvaluation) {
+                totalVotes++;
+                const winner = gptEvaluation.winner.toLowerCase();
+                if (winner.includes('qwen') || winner.includes('model 1')) {
+                    qwenVotes++;
+                } else if (winner.includes('gpt') || winner.includes('model 2')) {
+                    gptOssVotes++;
+                }
+            }
+            
+            if (kimiEvaluation) {
+                totalVotes++;
+                const winner = kimiEvaluation.winner.toLowerCase();
+                if (winner.includes('qwen') || winner.includes('model 1')) {
+                    qwenVotes++;
+                } else if (winner.includes('gpt') || winner.includes('model 2')) {
+                    gptOssVotes++;
+                }
+            }
+            
+            if (totalVotes === 0) return '';
+            
+            let majorityWinner = '';
+            let voteBreakdown = '';
+            
+            if (qwenVotes > gptOssVotes) {
+                majorityWinner = 'Qwen3-Coder-480B-A35B-Instruct';
+                voteBreakdown = `Qwen: ${qwenVotes} | GPT-OSS: ${gptOssVotes}`;
+            } else if (gptOssVotes > qwenVotes) {
+                majorityWinner = 'gpt-oss-120b';
+                voteBreakdown = `Qwen: ${qwenVotes} | GPT-OSS: ${gptOssVotes}`;
+            } else {
+                majorityWinner = 'Tie';
+                voteBreakdown = `Qwen: ${qwenVotes} | GPT-OSS: ${gptOssVotes}`;
+            }
+            
+            return `
+                <div class="evaluation-section">
+                    <div class="eval-label">Majority Vote (${totalVotes} judges)</div>
+                    <div class="evaluation-result" style="background: #f0f9ff; border-color: #0ea5e9;">
+                        <div class="winner" style="color: #0c4a6e;">🏆 Final Winner: ${majorityWinner}</div>
+                        <div style="font-size: 11px; color: #0c4a6e; margin-top: 4px; font-weight: 500;">Vote Breakdown: ${voteBreakdown}</div>
+                    </div>
+                </div>
+            `;
+        }
+        
         function calculateWinRates(rows) {
-            let kimiWins = 0;
-            let qwenWins = 0;
+            let qwenMajorityWins = 0;
+            let gptOssMajorityWins = 0;
             let ties = 0;
             let totalEvaluated = 0;
             
+            // Individual judge stats for display
+            let qwenWinsQwenJudge = 0;
+            let gptOssWinsQwenJudge = 0;
+            let qwenWinsGptJudge = 0;
+            let gptOssWinsGptJudge = 0;
+            let qwenWinsKimiJudge = 0;
+            let gptOssWinsKimiJudge = 0;
+            let totalEvaluatedQwen = 0;
+            let totalEvaluatedGpt = 0;
+            let totalEvaluatedKimi = 0;
+            
             rows.forEach(row => {
-                const evaluation = parseEvaluation(row.row['r1-evaluation'] || '');
-                if (evaluation) {
+                let qwenVotes = 0;
+                let gptOssVotes = 0;
+                let totalVotes = 0;
+                
+                // Qwen judge evaluations
+                const qwenEvaluation = parseEvaluation(row.row['eval-qwen-coder'] || '');
+                if (qwenEvaluation) {
+                    totalEvaluatedQwen++;
+                    totalVotes++;
+                    const winner = qwenEvaluation.winner.toLowerCase();
+                    if (winner.includes('qwen') || winner.includes('model 1')) {
+                        qwenWinsQwenJudge++;
+                        qwenVotes++;
+                    } else if (winner.includes('gpt') || winner.includes('model 2')) {
+                        gptOssWinsQwenJudge++;
+                        gptOssVotes++;
+                    }
+                }
+                
+                // GPT-OSS judge evaluations
+                const gptEvaluation = parseEvaluation(row.row['eval-gpt-oss'] || '');
+                if (gptEvaluation) {
+                    totalEvaluatedGpt++;
+                    totalVotes++;
+                    const winner = gptEvaluation.winner.toLowerCase();
+                    if (winner.includes('qwen') || winner.includes('model 1')) {
+                        qwenWinsGptJudge++;
+                        qwenVotes++;
+                    } else if (winner.includes('gpt') || winner.includes('model 2')) {
+                        gptOssWinsGptJudge++;
+                        gptOssVotes++;
+                    }
+                }
+                
+                // Kimi judge evaluations
+                const kimiEvaluation = parseEvaluation(row.row['eval-kimi'] || '');
+                if (kimiEvaluation) {
+                    totalEvaluatedKimi++;
+                    totalVotes++;
+                    const winner = kimiEvaluation.winner.toLowerCase();
+                    if (winner.includes('qwen') || winner.includes('model 1')) {
+                        qwenWinsKimiJudge++;
+                        qwenVotes++;
+                    } else if (winner.includes('gpt') || winner.includes('model 2')) {
+                        gptOssWinsKimiJudge++;
+                        gptOssVotes++;
+                    }
+                }
+                
+                // Calculate majority vote for this app
+                if (totalVotes > 0) {
                     totalEvaluated++;
-                    const winner = evaluation.winner.toLowerCase();
-                    if (winner.includes('kimi')) {
-                        kimiWins++;
-                    } else if (winner.includes('qwen')) {
-                        qwenWins++;
+                    if (qwenVotes > gptOssVotes) {
+                        qwenMajorityWins++;
+                    } else if (gptOssVotes > qwenVotes) {
+                        gptOssMajorityWins++;
                     } else {
                         ties++;
                     }
                 }
             });
             
-            const kimiRate = totalEvaluated > 0 ? Math.round((kimiWins / totalEvaluated) * 100) : 0;
-            const qwenRate = totalEvaluated > 0 ? Math.round((qwenWins / totalEvaluated) * 100) : 0;
+            const qwenRateQwenJudge = totalEvaluatedQwen > 0 ? Math.round((qwenWinsQwenJudge / totalEvaluatedQwen) * 100) : 0;
+            const gptOssRateQwenJudge = totalEvaluatedQwen > 0 ? Math.round((gptOssWinsQwenJudge / totalEvaluatedQwen) * 100) : 0;
+            const qwenRateGptJudge = totalEvaluatedGpt > 0 ? Math.round((qwenWinsGptJudge / totalEvaluatedGpt) * 100) : 0;
+            const gptOssRateGptJudge = totalEvaluatedGpt > 0 ? Math.round((gptOssWinsGptJudge / totalEvaluatedGpt) * 100) : 0;
+            const qwenRateKimiJudge = totalEvaluatedKimi > 0 ? Math.round((qwenWinsKimiJudge / totalEvaluatedKimi) * 100) : 0;
+            const gptOssRateKimiJudge = totalEvaluatedKimi > 0 ? Math.round((gptOssWinsKimiJudge / totalEvaluatedKimi) * 100) : 0;
+            
+            const qwenMajorityRate = totalEvaluated > 0 ? Math.round((qwenMajorityWins / totalEvaluated) * 100) : 0;
+            const gptOssMajorityRate = totalEvaluated > 0 ? Math.round((gptOssMajorityWins / totalEvaluated) * 100) : 0;
             
             return {
-                kimi: kimiWins,
-                qwen: qwenWins,
+                qwenMajorityWins: qwenMajorityWins,
+                gptOssMajorityWins: gptOssMajorityWins,
                 ties: ties,
-                kimiRate: kimiRate,
-                qwenRate: qwenRate,
-                total: totalEvaluated
+                qwenMajorityRate: qwenMajorityRate,
+                gptOssMajorityRate: gptOssMajorityRate,
+                qwenWinsQwenJudge: qwenWinsQwenJudge,
+                gptOssWinsQwenJudge: gptOssWinsQwenJudge,
+                qwenWinsGptJudge: qwenWinsGptJudge,
+                gptOssWinsGptJudge: gptOssWinsGptJudge,
+                qwenWinsKimiJudge: qwenWinsKimiJudge,
+                gptOssWinsKimiJudge: gptOssWinsKimiJudge,
+                qwenRateQwenJudge: qwenRateQwenJudge,
+                gptOssRateQwenJudge: gptOssRateQwenJudge,
+                qwenRateGptJudge: qwenRateGptJudge,
+                gptOssRateGptJudge: gptOssRateGptJudge,
+                qwenRateKimiJudge: qwenRateKimiJudge,
+                gptOssRateKimiJudge: gptOssRateKimiJudge,
+                totalEvaluated: totalEvaluated,
+                totalEvaluatedQwen: totalEvaluatedQwen,
+                totalEvaluatedGpt: totalEvaluatedGpt,
+                totalEvaluatedKimi: totalEvaluatedKimi
             };
         }
         
-        function toggleFullEval(index) {
-            const fullEval = document.getElementById(`full-eval-${index}`);
+        function toggleFullEval(id) {
+            const fullEval = document.getElementById(id);
             
             if (fullEval.style.display === 'block') {
                 fullEval.style.display = 'none';
@@ -608,6 +825,46 @@
             }
         }
         
+        function toggleEvaluations(index) {
+            const evaluationsContainer = document.getElementById(`evaluations-${index}`);
+            const header = document.getElementById(`header-${index}`);
+            
+            if (evaluationsContainer.classList.contains('expanded')) {
+                evaluationsContainer.classList.remove('expanded');
+                header.innerHTML = `${index + 1}. ${header.getAttribute('data-description')} <span style="float: right; font-size: 12px; color: #6b7280; font-weight: 400;">View Details ▼</span>`;
+            } else {
+                evaluationsContainer.classList.add('expanded');
+                header.innerHTML = `${index + 1}. ${header.getAttribute('data-description')} <span style="float: right; font-size: 12px; color: #6b7280; font-weight: 400;">Hide Details ▲</span>`;
+            }
+        }
+        
+        function filterByWinner(winner) {
+            const filterBtns = document.querySelectorAll('.filter-btn');
+            filterBtns.forEach(btn => btn.classList.remove('active'));
+            
+            if (winner !== 'all') {
+                document.querySelector(`[data-filter="${winner}"]`).classList.add('active');
+            } else {
+                document.querySelector('[data-filter="all"]').classList.add('active');
+            }
+            
+            const appSections = document.querySelectorAll('.app-section');
+            appSections.forEach(section => {
+                const winnerDisplay = section.querySelector('.winner-display');
+                if (winnerDisplay) {
+                    const winnerText = winnerDisplay.textContent.toLowerCase();
+                    if (winner === 'all' || 
+                        (winner === 'qwen' && winnerText.includes('qwen3-coder')) ||
+                        (winner === 'gpt' && winnerText.includes('gpt-oss')) ||
+                        (winner === 'tie' && winnerText.includes('tie'))) {
+                        section.style.display = 'block';
+                    } else {
+                        section.style.display = 'none';
+                    }
+                }
+            });
+        }
+        
         function scrollToApp(index) {
             const appSection = document.getElementById(`app-${index}`);
             if (appSection) {
@@ -634,7 +891,7 @@
         async function loadAppsFromHuggingFace() {
             const container = document.getElementById('apps-container');
             
-            const response = await fetch('https://datasets-server.huggingface.co/rows?dataset=dvilasuero/JSVibes&config=default&split=train&offset=0&length=50');
+            const response = await fetch('https://datasets-server.huggingface.co/rows?dataset=dvilasuero/jsvibes-qwen-gpt-oss-judged&config=default&split=train&offset=0&length=50');
             const data = await response.json();
             
             // Calculate win rates
@@ -645,28 +902,39 @@
                     <h1>JSVibes</h1>
                     <p>Vibe testing open models for simple but useful (web) code tasks</p>
                     <div class="aisheets-credit">
-                        Built with <a href="https://huggingface.co/spaces/aisheets/sheets" target="_blank">AISheets</a>
+                        Built with <a href="https://huggingface.co/spaces/aisheets/sheets" target="_blank">AISheets</a> | 
+                        Dataset: <a href="https://huggingface.co/datasets/dvilasuero/jsvibes-qwen-gptoss" target="_blank">jsvibes-qwen-gptoss</a>
                     </div>
                 </div>
                 <div class="stats-header">
-                    <p style="font-size: 14px; opacity: 0.8;">Automatically evaluated by Kimi K2 as a judge. Judgments are imperfect, test them yourself!</p>
+                    <p style="font-size: 14px; opacity: 0.8;">Automatically evaluated by Qwen3-Coder, GPT-OSS, and Kimi as judges. Results based on majority voting. Judgments are imperfect, test them yourself!</p>
                     <div class="win-stats">
                         <div class="stat">
-                            <span class="model">Kimi-K2</span> 
-                            <span class="wins">${winStats.kimi} wins</span> 
-                            <div style="font-size: 14px; opacity: 0.8;">${winStats.kimiRate}%</div>
+                            <span class="model">Qwen3-Coder-480B-A35B-Instruct</span> 
+                            <span class="wins">${winStats.qwenMajorityWins} wins</span> 
+                            <div style="font-size: 14px; opacity: 0.8;">Majority: ${winStats.qwenMajorityRate}% | Individual: Qwen: ${winStats.qwenRateQwenJudge}% | GPT: ${winStats.qwenRateGptJudge}% | Kimi: ${winStats.qwenRateKimiJudge}%</div>
                         </div>
                         <div class="stat">
-                            <span class="model">Qwen3-Coder</span> 
-                            <span class="wins">${winStats.qwen} wins</span> 
-                            <div style="font-size: 14px; opacity: 0.8;">${winStats.qwenRate}%</div>
+                            <span class="model">gpt-oss-120b</span> 
+                            <span class="wins">${winStats.gptOssMajorityWins} wins</span> 
+                            <div style="font-size: 14px; opacity: 0.8;">Majority: ${winStats.gptOssMajorityRate}% | Individual: Qwen: ${winStats.gptOssRateQwenJudge}% | GPT: ${winStats.gptOssRateGptJudge}% | Kimi: ${winStats.gptOssRateKimiJudge}%</div>
                         </div>
                         <div class="stat">
                             <span class="model">Ties</span> 
                             <span class="wins">${winStats.ties}</span> 
+                            <div style="font-size: 14px; opacity: 0.8;">Total: ${winStats.totalEvaluated}</div>
                         </div>
                     </div>
                 </div>
+                <div class="filter-section">
+                    <div class="filter-controls">
+                        <span class="filter-label">Filter by Winner:</span>
+                        <button class="filter-btn active" data-filter="all" onclick="filterByWinner('all')">All Apps</button>
+                        <button class="filter-btn" data-filter="qwen" onclick="filterByWinner('qwen')">Qwen Wins</button>
+                        <button class="filter-btn" data-filter="gpt" onclick="filterByWinner('gpt')">GPT-OSS Wins</button>
+                        <button class="filter-btn" data-filter="tie" onclick="filterByWinner('tie')">Ties</button>
+                    </div>
+                </div>
                 <div class="toc-container">
                     <div class="toc-title" id="toc-title" onclick="toggleTOC()">📋 List of Apps ▶</div>
                     <div class="toc-content collapsed" id="toc-content">
@@ -697,41 +965,116 @@
                 const app = row.row;
                 
                 // Clean HTML content by removing markdown code blocks
-                let kimiHtml = app['kimi-k2'] || '';
                 let qwenHtml = app['qwen3-coder'] || '';
+                let gptOssHtml = app['gpt-oss'] || '';
                 
-                if (kimiHtml.startsWith('```html')) {
-                    kimiHtml = kimiHtml.replace(/```html\n?/, '').replace(/```$/, '');
-                }
                 if (qwenHtml.startsWith('```html')) {
                     qwenHtml = qwenHtml.replace(/```html\n?/, '').replace(/```$/, '');
                 }
+                if (gptOssHtml.startsWith('```html')) {
+                    gptOssHtml = gptOssHtml.replace(/```html\n?/, '').replace(/```$/, '');
+                }
+                
+                // Parse evaluation data from all three judges
+                const qwenEvaluation = parseEvaluation(app['eval-qwen-coder'] || '');
+                const gptEvaluation = parseEvaluation(app['eval-gpt-oss'] || '');
+                const kimiEvaluation = parseEvaluation(app['eval-kimi'] || '');
                 
-                // Parse evaluation data
-                const evaluation = parseEvaluation(app['r1-evaluation'] || '');
-                if (!evaluation && app['r1-evaluation']) {
-                    console.log(`Failed to parse evaluation for app ${index}:`, app['r1-evaluation']);
+                console.log(`App ${index} evaluations:`, {
+                    qwen: qwenEvaluation,
+                    gpt: gptEvaluation,
+                    kimi: kimiEvaluation,
+                    qwenRaw: app['eval-qwen-coder'],
+                    gptRaw: app['eval-gpt-oss'],
+                    kimiRaw: app['eval-kimi']
+                });
+                
+                if (!qwenEvaluation && app['eval-qwen-coder']) {
+                    console.log(`Failed to parse Qwen evaluation for app ${index}:`, app['eval-qwen-coder']);
+                }
+                if (!gptEvaluation && app['eval-gpt-oss']) {
+                    console.log(`Failed to parse GPT evaluation for app ${index}:`, app['eval-gpt-oss']);
+                }
+                if (!kimiEvaluation && app['eval-kimi']) {
+                    console.log(`Failed to parse Kimi evaluation for app ${index}:`, app['eval-kimi']);
                 }
                 
                 const section = document.createElement('div');
                 section.className = 'app-section';
                 section.id = `app-${index}`;
+                // Calculate majority vote for this app
+                let qwenVotes = 0;
+                let gptOssVotes = 0;
+                let totalVotes = 0;
+                
+                if (qwenEvaluation) {
+                    totalVotes++;
+                    const winner = qwenEvaluation.winner.toLowerCase();
+                    if (winner.includes('qwen') || winner.includes('model 1')) {
+                        qwenVotes++;
+                    } else if (winner.includes('gpt') || winner.includes('model 2')) {
+                        gptOssVotes++;
+                    }
+                }
+                
+                if (gptEvaluation) {
+                    totalVotes++;
+                    const winner = gptEvaluation.winner.toLowerCase();
+                    if (winner.includes('qwen') || winner.includes('model 1')) {
+                        qwenVotes++;
+                    } else if (winner.includes('gpt') || winner.includes('model 2')) {
+                        gptOssVotes++;
+                    }
+                }
+                
+                if (kimiEvaluation) {
+                    totalVotes++;
+                    const winner = kimiEvaluation.winner.toLowerCase();
+                    if (winner.includes('qwen') || winner.includes('model 1')) {
+                        qwenVotes++;
+                    } else if (winner.includes('gpt') || winner.includes('model 2')) {
+                        gptOssVotes++;
+                    }
+                }
+                
+                let majorityWinner = '';
+                let voteBreakdown = '';
+                
+                if (qwenVotes > gptOssVotes) {
+                    majorityWinner = 'Qwen3-Coder-480B-A35B-Instruct';
+                    voteBreakdown = `Qwen: ${qwenVotes} | GPT-OSS: ${gptOssVotes}`;
+                } else if (gptOssVotes > qwenVotes) {
+                    majorityWinner = 'gpt-oss-120b';
+                    voteBreakdown = `Qwen: ${qwenVotes} | GPT-OSS: ${gptOssVotes}`;
+                } else {
+                    majorityWinner = 'Tie';
+                    voteBreakdown = `Qwen: ${qwenVotes} | GPT-OSS: ${gptOssVotes}`;
+                }
+                
                 section.innerHTML = `
-                    <div class="description-header">
-                        ${index + 1}. ${app.description || 'No description available'}
+                    <div class="description-header" id="header-${index}" onclick="toggleEvaluations(${index})" data-description="${app.description || 'No description available'}">
+                        ${index + 1}. ${app.description || 'No description available'} <span style="float: right; font-size: 12px; color: #6b7280; font-weight: 400;">View Details ▼</span>
+                    </div>
+                    <div class="winner-display" style="background: #f0f9ff; border: 1px solid #0ea5e9; padding: 8px 20px; margin: 0;">
+                        <div style="color: #0c4a6e; font-weight: 600; font-size: 14px;">🏆 Winner: ${majorityWinner}</div>
+                        <div style="color: #0c4a6e; font-size: 11px; margin-top: 2px;">Vote Breakdown: ${voteBreakdown} (${totalVotes} judges)</div>
+                    </div>
+                    <div class="evaluations-container" id="evaluations-${index}">
+                        ${qwenEvaluation ? createEvaluationSection(qwenEvaluation, index, 'qwen') : ''}
+                        ${gptEvaluation ? createEvaluationSection(gptEvaluation, index, 'gpt') : ''}
+                        ${kimiEvaluation ? createEvaluationSection(kimiEvaluation, index, 'kimi') : ''}
                     </div>
-                    ${evaluation ? createEvaluationSection(evaluation, index) : ''}
                     <div class="implementations">
                         <div class="impl-panel">
-                            <div class="impl-header">Kimi-K2</div>
+                            <div class="impl-header">Qwen3-Coder-480B-A35B-Instruct</div>
                             <div class="iframe-container">
-                                <iframe srcdoc="${kimiHtml.replace(/"/g, '&quot;')}"></iframe>
+                                <iframe srcdoc="${qwenHtml.replace(/"/g, '&quot;')}"></iframe>
                             </div>
                         </div>
                         <div class="impl-panel">
-                            <div class="impl-header">Qwen3-Coder</div>
+                            <div class="impl-header">gpt-oss-120b</div>
                             <div class="iframe-container">
-                                <iframe srcdoc="${qwenHtml.replace(/"/g, '&quot;')}"></iframe>
+                                <iframe srcdoc="${gptOssHtml.replace(/"/g, '&quot;')}"></iframe>
                             </div>
                         </div>
                     </div>