Update src/App.js

src/App.js

@@ -427,21 +427,7 @@ const UrologyLeaderboard = () => {
       React.createElement('div', { style: styles.innerContainer },
         React.createElement('div', { style: styles.header },
           React.createElement('h1', { style: styles.title }, '🏆 Urology AI Leaderboard'),
-          React.createElement('p', { style: styles.subtitle }, 'Evaluating Natural Language Models on Urology Knowledge Assessment'),
-          React.createElement('div', { style: styles.statsContainer },
-            React.createElement('div', { style: styles.statCard },
-              React.createElement('div', { style: styles.statNumber }, data.length),
-              React.createElement('div', { style: styles.statLabel }, 'Models')
-            ),
-            React.createElement('div', { style: styles.statCard },
-              React.createElement('div', { style: styles.statNumber }, '151'),
-              React.createElement('div', { style: styles.statLabel }, 'Questions')
-            ),
-            React.createElement('div', { style: styles.statCard },
-              React.createElement('div', { style: styles.statNumber }, 'SAS Urology'),
-              React.createElement('div', { style: styles.statLabel }, 'Specialty')
-            )
-          )
+          React.createElement('p', { style: styles.subtitle }, 'Evaluating Natural Language Models on Urology Knowledge Assessment')
         ),
         React.createElement('div', { style: styles.controlsContainer },
           React.createElement('div', { style: styles.inputGroup },
@@ -588,6 +574,51 @@ const UrologyLeaderboard = () => {
           )
         ),
         React.createElement('div', { style: styles.infoSection },
+          React.createElement('div', { style: styles.infoCard },
+            React.createElement('h3', { style: { fontSize: '20px', fontWeight: '600', color: 'white', marginBottom: '16px' } }, '📈 Statistics'),
+            React.createElement('div', { style: { display: 'flex', justifyContent: 'space-around', gap: '20px', flexWrap: 'wrap', marginBottom: '8px' } },
+              React.createElement('div', { style: { textAlign: 'center' } },
+                React.createElement('div', { style: { fontSize: '24px', fontWeight: 'bold', color: '#60a5fa' } }, filteredAndSortedData.length),
+                React.createElement('div', { style: { fontSize: '14px', color: '#d1d5db' } }, 'Models')
+              ),
+              React.createElement('div', { style: { textAlign: 'center' } },
+                React.createElement('div', { style: { fontSize: '24px', fontWeight: 'bold', color: '#34d399' } }, 
+                  filteredAndSortedData.length > 0 ? 
+                    `${((filteredAndSortedData.reduce((sum, item) => sum + item.accuracy, 0) / filteredAndSortedData.length) * 100).toFixed(1)}%` : 
+                    '0%'
+                ),
+                React.createElement('div', { style: { fontSize: '14px', color: '#d1d5db' } }, 'Mean')
+              ),
+              React.createElement('div', { style: { textAlign: 'center' } },
+                React.createElement('div', { style: { fontSize: '24px', fontWeight: 'bold', color: '#a78bfa' } }, 
+                  filteredAndSortedData.length > 0 ? (() => {
+                    const sortedAccuracies = [...filteredAndSortedData].sort((a, b) => a.accuracy - b.accuracy);
+                    const mid = Math.floor(sortedAccuracies.length / 2);
+                    const median = sortedAccuracies.length % 2 === 0 ? 
+                      (sortedAccuracies[mid - 1].accuracy + sortedAccuracies[mid].accuracy) / 2 : 
+                      sortedAccuracies[mid].accuracy;
+                    return `${(median * 100).toFixed(1)}%`;
+                  })() : '0%'
+                ),
+                React.createElement('div', { style: { fontSize: '14px', color: '#d1d5db' } }, 'Median')
+              ),
+              React.createElement('div', { style: { textAlign: 'center' } },
+                React.createElement('div', { style: { fontSize: '24px', fontWeight: 'bold', color: '#fbbf24' } }, 
+                  filteredAndSortedData.length > 0 ? (() => {
+                    const accuracyMap = {};
+                    filteredAndSortedData.forEach(item => {
+                      const rounded = Math.round(item.accuracy * 1000) / 10;
+                      accuracyMap[rounded] = (accuracyMap[rounded] || 0) + 1;
+                    });
+                    const maxCount = Math.max(...Object.values(accuracyMap));
+                    const modes = Object.keys(accuracyMap).filter(key => accuracyMap[key] === maxCount);
+                    return `${modes[0]}%`;
+                  })() : '0%'
+                ),
+                React.createElement('div', { style: { fontSize: '14px', color: '#d1d5db' } }, 'Mode')
+              )
+            )
+          ),
           React.createElement('div', { style: styles.infoCard },
             React.createElement('h3', { style: { fontSize: '20px', fontWeight: '600', color: 'white', marginBottom: '12px' } }, '📊 About This Evaluation'),
             React.createElement('p', { style: { color: '#d1d5db', marginBottom: '12px' } }, 'This leaderboard evaluates natural language models on their ability to answer urology questions. Models must respond to multiple-choice questions about urological knowledge, demonstrating their understanding and mastery of this medical specialty.'),