Update src/App.js

src/App.js

@@ -26,25 +26,47 @@ const UrologyLeaderboard = () => {
         throw new Error('No data found in the dataset');
       }
       
-      const processedData = data.rows.map(row => {
-        const config = row.row.config;
-        const results = row.row.results;
+      // Agrupar por modelo y calcular estadísticas
+      const modelStats = {};
+      
+      data.rows.forEach(row => {
+        const rowData = row.row;
+        const model = rowData.model;
+        const isCorrect = rowData.is_correct;
+        const timestamp = rowData.timestamp;
+        
+        if (!modelStats[model]) {
+          modelStats[model] = {
+            model: model,
+            baseModel: model.split('/')[1] || model,
+            totalQuestions: 0,
+            correctAnswers: 0,
+            submittedTime: timestamp,
+            license: "Unknown",
+            submitType: "unknown",
+            params: 0,
+            precision: "unknown",
+            status: "FINISHED"
+          };
+        }
+        
+        modelStats[model].totalQuestions++;
+        if (isCorrect) {
+          modelStats[model].correctAnswers++;
+        }
         
-        return {
-          model: config.model || 'Unknown Model',
-          baseModel: config.base_model || '',
-          accuracy: results.overall?.accuracy || 0,
-          totalQuestions: results.overall?.total_questions || 151,
-          correctAnswers: Math.round((results.overall?.accuracy || 0) * (results.overall?.total_questions || 151)),
-          license: config.license || 'Unknown',
-          submitType: config.submit_type || 'unknown',
-          submittedTime: config.submitted_time || new Date().toISOString(),
-          params: config.params || 0,
-          precision: config.precision || 'unknown',
-          status: config.status || 'UNKNOWN'
-        };
+        // Mantener el timestamp más reciente
+        if (new Date(timestamp) > new Date(modelStats[model].submittedTime)) {
+          modelStats[model].submittedTime = timestamp;
+        }
       });
       
+      // Convertir a array y calcular accuracy
+      const processedData = Object.values(modelStats).map(stats => ({
+        ...stats,
+        accuracy: stats.totalQuestions > 0 ? stats.correctAnswers / stats.totalQuestions : 0
+      }));
+      
       console.log('Processed data:', processedData);
       return processedData;
     } catch (error) {
@@ -85,6 +107,7 @@ const UrologyLeaderboard = () => {
   }, []);
 
   const filteredAndSortedData = useMemo(() => {
+    // Si hay error, no procesar datos
     if (error) {
       return [];
     }
@@ -337,7 +360,7 @@ const UrologyLeaderboard = () => {
       color: '#c4b5fd'
     },
     infoSection: {
-      marginTop: '16px',
+      marginTop: '32px',
       display: 'flex',
       flexDirection: 'column',
       gap: '24px'
@@ -357,25 +380,6 @@ const UrologyLeaderboard = () => {
       padding: '16px',
       textAlign: 'center'
     },
-    academicTextSection: {
-      marginBottom: '24px'
-    },
-    academicImagesSection: {
-      display: 'flex',
-      justifyContent: 'space-around',
-      alignItems: 'center',
-      gap: '20px',
-      flexWrap: 'wrap'
-    },
-    logoImage: {
-      width: '160px',
-      height: '160px',
-      cursor: 'pointer',
-      background: 'white',
-      borderRadius: '8px',
-      padding: '4px',
-      flexShrink: 0
-    },
     loadingContainer: {
       minHeight: '100vh',
       background: 'linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #3730a3 100%)',
@@ -427,7 +431,21 @@ 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('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('div', { style: styles.controlsContainer },
           React.createElement('div', { style: styles.inputGroup },
@@ -575,53 +593,9 @@ 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 ? 
-                    Math.round(filteredAndSortedData.reduce((sum, item) => sum + item.correctAnswers, 0) / filteredAndSortedData.length) : 
-                    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 sortedAnswers = [...filteredAndSortedData].sort((a, b) => a.correctAnswers - b.correctAnswers);
-                    const mid = Math.floor(sortedAnswers.length / 2);
-                    const median = sortedAnswers.length % 2 === 0 ? 
-                      Math.round((sortedAnswers[mid - 1].correctAnswers + sortedAnswers[mid].correctAnswers) / 2) : 
-                      sortedAnswers[mid].correctAnswers;
-                    return median;
-                  })() : 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 answersMap = {};
-                    filteredAndSortedData.forEach(item => {
-                      answersMap[item.correctAnswers] = (answersMap[item.correctAnswers] || 0) + 1;
-                    });
-                    const maxCount = Math.max(...Object.values(answersMap));
-                    const modes = Object.keys(answersMap).filter(key => answersMap[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: '8px' } }, '📊 About This Evaluation'),
+            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.'),
-            React.createElement('p', { style: { color: '#d1d5db', marginBottom: '12px' } }, 
+            React.createElement('p', { style: { color: '#d1d5db', marginBottom: '16px' } }, 
               'Questions are from the ',
               React.createElement('a', {
                 href: 'https://www.sspa.juntadeandalucia.es/servicioandaluzdesalud/',
@@ -648,48 +622,69 @@ const UrologyLeaderboard = () => {
             )
           ),
           React.createElement('div', { style: styles.academicCard },
-            React.createElement('div', { style: styles.academicTextSection },
-              React.createElement('h4', { style: { fontSize: '18px', fontWeight: '600', color: 'white', marginBottom: '16px', margin: '0 0 16px 0' } }, '🎓 Academic Project'),
-              React.createElement('p', { style: { color: '#d1d5db', fontSize: '14px', margin: 0 } }, 
-                'Final project developed for Artificial Intelligence Models within the ',
-                React.createElement('a', {
-                  href: 'https://iesrafaelalberti.es/curso-especializacion-inteligencia-artificial-y-big-datatarde/',
-                  target: '_blank',
-                  rel: 'noopener noreferrer',
-                  style: { color: '#60a5fa', textDecoration: 'none', fontWeight: '600' }
-                }, 'Artificial Intelligence and Big Data'),
-                ' specialization course at ',
-                React.createElement('a', {
-                  href: 'https://iesrafaelalberti.es/',
-                  target: '_blank',
-                  rel: 'noopener noreferrer',
-                  style: { color: '#60a5fa', textDecoration: 'none', fontWeight: '600' }
-                }, 'IES Rafael Alberti')
-              )
-            ),
-            React.createElement('div', { style: styles.academicImagesSection },
+            React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '20px', flexWrap: 'wrap' } },
               React.createElement('a', {
                 href: 'https://iesrafaelalberti.es/',
                 target: '_blank',
                 rel: 'noopener noreferrer',
-                style: { textDecoration: 'none' }
+                style: { textDecoration: 'none', flexShrink: 0 }
               },
                 React.createElement('img', {
                   src: 'https://avatars.githubusercontent.com/u/79144080?s=200&v=4',
                   alt: 'IES Rafael Alberti Logo',
-                  style: styles.logoImage
+                  style: {
+                    width: '80px',
+                    height: '80px',
+                    cursor: 'pointer',
+                    background: 'white',
+                    borderRadius: '8px',
+                    padding: '4px'
+                  }
                 })
               ),
+              React.createElement('div', { style: { textAlign: 'center', flex: 1, minWidth: '200px' } },
+                React.createElement('h4', { style: { fontSize: '18px', fontWeight: '600', color: 'white', marginBottom: '16px', margin: '0 0 16px 0' } }, '🎓 Academic Project'),
+                React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                  React.createElement('p', { style: { color: '#d1d5db', fontSize: '14px', margin: 0 } }, 
+                    'Final project for ',
+                    React.createElement('a', {
+                      href: 'https://iesrafaelalberti.es/',
+                      target: '_blank',
+                      rel: 'noopener noreferrer',
+                      style: { color: '#60a5fa', textDecoration: 'none', fontWeight: '600' }
+                    }, 'IES Rafael Alberti')
+                  ),
+                  React.createElement('p', { style: { color: '#d1d5db', fontSize: '14px', margin: 0 } }, 
+                    'Course: ',
+                    React.createElement('a', {
+                      href: 'https://iesrafaelalberti.es/curso-especializacion-inteligencia-artificial-y-big-datatarde/',
+                      target: '_blank',
+                      rel: 'noopener noreferrer',
+                      style: { color: '#60a5fa', textDecoration: 'none', fontWeight: '600' }
+                    }, 'Artificial Intelligence and Big Data')
+                  ),
+                  React.createElement('p', { style: { color: '#d1d5db', fontSize: '14px', margin: 0 } }, 
+                    'Subject: Artificial Intelligence Models'
+                  )
+                )
+              ),
               React.createElement('a', {
                 href: 'https://iesrafaelalberti.es/curso-especializacion-inteligencia-artificial-y-big-datatarde/',
                 target: '_blank',
                 rel: 'noopener noreferrer',
-                style: { textDecoration: 'none' }
+                style: { textDecoration: 'none', flexShrink: 0 }
               },
                 React.createElement('img', {
                   src: '/IA-Big-Data-cuadrado.png',
                   alt: 'AI and Big Data Course Logo',
-                  style: styles.logoImage,
+                  style: {
+                    width: '80px',
+                    height: '80px',
+                    cursor: 'pointer',
+                    background: 'white',
+                    borderRadius: '8px',
+                    padding: '4px'
+                  },
                   onError: (e) => {
                     console.log('Error loading course image from public folder');
                   },
@@ -697,18 +692,6 @@ const UrologyLeaderboard = () => {
                     console.log('Course image loaded successfully from public folder');
                   }
                 })
-              ),
-              React.createElement('a', {
-                href: 'https://www.youtube.com/@LUVIDVISION',
-                target: '_blank',
-                rel: 'noopener noreferrer',
-                style: { textDecoration: 'none' }
-              },
-                React.createElement('img', {
-                  src: 'https://yt3.googleusercontent.com/Ae7dRhp7TfFS1Ocv2ErGPfgmsFQO7icx6bSbekGqXQfIurhDLIQEuT7HzzTlYavpRoV7ikdEdA=s160-c-k-c0x00ffffff-no-rj',
-                  alt: 'LuvidVision YouTube Channel',
-                  style: styles.logoImage
-                })
               )
             )
           )