Update src/App.js

src/App.js

@@ -9,164 +9,60 @@ const UrologyLeaderboard = () => {
   const [loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
   const [lastUpdated, setLastUpdated] = useState(null);
-
-  const mockData = [
-    {
-      model: "openai/gpt-4o-mini",
-      baseModel: "",
-      accuracy: 0.18543046357615803,
-      totalQuestions: 151,
-      correctAnswers: 28,
-      license: "API Service",
-      submitType: "openrouter",
-      submittedTime: "2025-05-22T16:53:10Z",
-      params: 0,
-      precision: "float16",
-      status: "FINISHED"
-    },
-    {
-      model: "anthropic/claude-3-sonnet",
-      baseModel: "claude-3-sonnet",
-      accuracy: 0.32450331125827815,
-      totalQuestions: 151,
-      correctAnswers: 49,
-      license: "API Service",
-      submitType: "openrouter",
-      submittedTime: "2025-05-22T14:30:25Z",
-      params: 0,
-      precision: "float16",
-      status: "FINISHED"
-    },
-    {
-      model: "meta-llama/llama-3.1-70b",
-      baseModel: "llama-3.1-70b",
-      accuracy: 0.27814569536423844,
-      totalQuestions: 151,
-      correctAnswers: 42,
-      license: "Apache 2.0",
-      submitType: "huggingface",
-      submittedTime: "2025-05-22T12:15:30Z",
-      params: 70000000000,
-      precision: "bfloat16",
-      status: "FINISHED"
-    },
-    {
-      model: "mistralai/mixtral-8x7b",
-      baseModel: "mixtral-8x7b",
-      accuracy: 0.23841059602649006,
-      totalQuestions: 151,
-      correctAnswers: 36,
-      license: "Apache 2.0",
-      submitType: "huggingface",
-      submittedTime: "2025-05-22T10:45:15Z",
-      params: 46700000000,
-      precision: "bfloat16",
-      status: "FINISHED"
-    },
-    {
-      model: "google/gemini-pro",
-      baseModel: "gemini-pro",
-      accuracy: 0.29801324503311255,
-      totalQuestions: 151,
-      correctAnswers: 45,
-      license: "API Service",
-      submitType: "google",
-      submittedTime: "2025-05-22T08:20:40Z",
-      params: 0,
-      precision: "float16",
-      status: "FINISHED"
-    },
-    {
-      model: "cohere/command-r-plus",
-      baseModel: "command-r-plus",
-      accuracy: 0.35761589403973510,
-      totalQuestions: 151,
-      correctAnswers: 54,
-      license: "API Service",
-      submitType: "cohere",
-      submittedTime: "2025-05-21T18:12:30Z",
-      params: 0,
-      precision: "float16",
-      status: "FINISHED"
-    },
-    {
-      model: "openai/gpt-4-turbo",
-      baseModel: "gpt-4-turbo",
-      accuracy: 0.41721854304635763,
-      totalQuestions: 151,
-      correctAnswers: 63,
-      license: "API Service",
-      submitType: "openai",
-      submittedTime: "2025-05-21T16:45:10Z",
-      params: 0,
-      precision: "float16",
-      status: "FINISHED"
-    },
-    {
-      model: "microsoft/phi-3-medium",
-      baseModel: "phi-3-medium",
-      accuracy: 0.21854304635761590,
-      totalQuestions: 151,
-      correctAnswers: 33,
-      license: "MIT",
-      submitType: "azure",
-      submittedTime: "2025-05-21T14:22:45Z",
-      params: 14000000000,
-      precision: "float16",
-      status: "FINISHED"
-    }
-  ];
+  const [error, setError] = useState(null);
 
   const loadData = async () => {
     try {
-      // Intentar cargar datos reales desde HuggingFace
       const response = await fetch('https://datasets-server.huggingface.co/rows?dataset=SASLeaderboard/results&config=default&split=train');
       
-      if (response.ok) {
-        const data = await response.json();
-        console.log('Raw HuggingFace data:', data);
-        
-        // Procesar los datos reales
-        const processedData = data.rows.map(row => {
-          const config = row.row.config;
-          const results = row.row.results;
-          
-          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'
-          };
-        });
-        
-        console.log('Processed data:', processedData);
-        return processedData;
-      } else {
-        console.log('HuggingFace API failed, using mock data');
-        return mockData;
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
       }
+      
+      const data = await response.json();
+      console.log('Raw HuggingFace data:', data);
+      
+      if (!data.rows || data.rows.length === 0) {
+        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;
+        
+        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'
+        };
+      });
+      
+      console.log('Processed data:', processedData);
+      return processedData;
     } catch (error) {
-      console.log('Error loading from HuggingFace, using mock data:', error);
-      return mockData;
+      console.error('Error loading data from HuggingFace:', error);
+      throw error;
     }
   };
 
   const refreshData = async () => {
     setRefreshing(true);
+    setError(null);
     try {
       const newData = await loadData();
-      const shuffledData = [...newData].sort(() => Math.random() - 0.5).slice(0, Math.floor(Math.random() * 3) + 6);
-      setData(shuffledData);
+      setData(newData);
       setLastUpdated(new Date());
     } catch (error) {
-      console.error('Error refreshing data:', error);
+      setError(`Failed to load data: ${error.message}`);
+      setData([]);
     } finally {
       setRefreshing(false);
     }
@@ -174,10 +70,16 @@ const UrologyLeaderboard = () => {
 
   useEffect(() => {
     const initializeData = async () => {
-      const initialData = await loadData();
-      setData(initialData);
-      setLastUpdated(new Date());
-      setLoading(false);
+      try {
+        const initialData = await loadData();
+        setData(initialData);
+        setLastUpdated(new Date());
+      } catch (error) {
+        setError(`Failed to load data: ${error.message}`);
+        setData([]);
+      } finally {
+        setLoading(false);
+      }
     };
     initializeData();
   }, []);
@@ -666,15 +568,23 @@ const UrologyLeaderboard = () => {
           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.'),
-            React.createElement('p', { style: { color: '#d1d5db', marginBottom: '16px' } }, 'Questions are from the SAS (Servicio Andaluz de Salud) for the ', React.createElement('strong', null, 'Convocatoria Concurso Oposición'), ' - specialized medical examination for urology residents.'),
-            React.createElement('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '8px', color: '#d1d5db' } },
+            React.createElement('p', { style: { color: '#d1d5db', marginBottom: '16px' } }, 
+              'Questions are from the SAS (Servicio Andaluz de Salud) for the ',
+              React.createElement('a', {
+                href: 'https://www.sspa.juntadeandalucia.es/servicioandaluzdesalud/profesionales/ofertas-de-empleo/oferta-de-empleo-publico-puestos-base/oep-extraordinaria-decreto-ley-122022-centros-sas/cuadro-de-evolucion-concurso-oposicion-centros-sas/fea-urologia',
+                target: '_blank',
+                rel: 'noopener noreferrer',
+                style: { color: '#60a5fa', textDecoration: 'none', fontWeight: '600' }
+              }, React.createElement('strong', null, 'Convocatoria Concurso Oposición')),
+              ' - specialized medical examination for urology residents.'
+            ),
+            React.createElement('div', { style: { display: 'flex', justifyContent: 'center', color: '#d1d5db' } },
               React.createElement('span', null, 'Dataset: ', React.createElement('a', { 
                 href: 'https://huggingface.co/datasets/SASLeaderboard/results', 
                 style: { color: '#60a5fa', textDecoration: 'none' },
                 target: '_blank',
                 rel: 'noopener noreferrer'
-              }, 'SASLeaderboard/results')),
-              lastUpdated && React.createElement('span', { style: { fontSize: '14px' } }, `Last updated: ${lastUpdated.toLocaleString('en-US')}`)
+              }, 'SASLeaderboard/results'))
             )
           ),
           React.createElement('div', { style: styles.academicCard },