Update src/App.js

src/App.js

@@ -1,25 +1,441 @@
-import logo from './logo.svg';
-import './App.css';
+import React, { useState, useEffect, useMemo } from 'react';
+import { Search, Trophy, Medal, Award, BarChart3, Filter, RefreshCw, ExternalLink, Clock, Zap, Target, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
+
+const LeaderboardUrology = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filterLicense, setFilterLicense] = useState('all');
+  const [sortBy, setSortBy] = useState('accuracy');
+  const [sortOrder, setSortOrder] = useState('desc');
+  const [data, setData] = useState([]);
+  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 loadData = async () => {
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    return mockData;
+  };
+
+  const refreshData = async () => {
+    setRefreshing(true);
+    try {
+      const newData = await loadData();
+      const shuffledData = [...newData].sort(() => Math.random() - 0.5).slice(0, Math.floor(Math.random() * 3) + 6);
+      setData(shuffledData);
+      setLastUpdated(new Date());
+    } catch (error) {
+      console.error('Error refreshing data:', error);
+    } finally {
+      setRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    const initializeData = async () => {
+      const initialData = await loadData();
+      setData(initialData);
+      setLastUpdated(new Date());
+      setLoading(false);
+    };
+    initializeData();
+  }, []);
+
+  const filteredAndSortedData = useMemo(() => {
+    let filtered = data.filter(item => {
+      const matchesSearch = item.model.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                           item.baseModel.toLowerCase().includes(searchTerm.toLowerCase());
+      const matchesFilter = filterLicense === 'all' || item.license === filterLicense;
+      return matchesSearch && matchesFilter;
+    });
+
+    return filtered.sort((a, b) => {
+      let aValue = a[sortBy];
+      let bValue = b[sortBy];
+      
+      if (sortBy === 'submittedTime') {
+        aValue = new Date(aValue);
+        bValue = new Date(bValue);
+      }
+      
+      if (sortOrder === 'desc') {
+        return bValue > aValue ? 1 : -1;
+      } else {
+        return aValue > bValue ? 1 : -1;
+      }
+    });
+  }, [data, searchTerm, filterLicense, sortBy, sortOrder]);
+
+  const getRankIcon = (index) => {
+    switch(index) {
+      case 0: return <Trophy className="w-6 h-6 text-yellow-500" />;
+      case 1: return <Medal className="w-6 h-6 text-gray-400" />;
+      case 2: return <Award className="w-6 h-6 text-amber-600" />;
+      default: return <span className="text-xl font-bold text-gray-500">#{index + 1}</span>;
+    }
+  };
+
+  const formatAccuracy = (accuracy) => {
+    return `${(accuracy * 100).toFixed(2)}%`;
+  };
+
+  const formatParams = (params) => {
+    if (params === 0) return 'API';
+    if (params >= 1e9) return `${(params / 1e9).toFixed(1)}B`;
+    if (params >= 1e6) return `${(params / 1e6).toFixed(1)}M`;
+    return params.toLocaleString();
+  };
+
+  const formatDate = (dateString) => {
+    return new Date(dateString).toLocaleDateString('es-ES', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  const getSortIcon = (column) => {
+    if (sortBy !== column) return <ArrowUpDown className="w-4 h-4 text-gray-400" />;
+    return sortOrder === 'desc' ? 
+      <ArrowDown className="w-4 h-4 text-blue-500" /> : 
+      <ArrowUp className="w-4 h-4 text-blue-500" />;
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-white mb-4"></div>
+          <p className="text-white text-xl">Cargando leaderboard...</p>
+        </div>
+      </div>
+    );
+  }
 
-function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900">
+      <div className="container mx-auto px-4 py-8">
+        <div className="text-center mb-8">
+          <h1 className="text-5xl font-bold text-white mb-4 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+            🏆 Urology AI Leaderboard
+          </h1>
+          <p className="text-xl text-gray-300 mb-6">
+            Evaluating Natural Language Models on Urology Knowledge Assessment
+          </p>
+          <div className="flex justify-center space-x-8 text-center">
+            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/20">
+              <div className="text-2xl font-bold text-white">{data.length}</div>
+              <div className="text-sm text-gray-300">Models</div>
+            </div>
+            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/20">
+              <div className="text-2xl font-bold text-white">151</div>
+              <div className="text-sm text-gray-300">Questions</div>
+            </div>
+            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/20">
+              <div className="text-2xl font-bold text-white">SAS Urology</div>
+              <div className="text-sm text-gray-300">Specialty</div>
+            </div>
+          </div>
+        </div>
+
+        <div className="mb-6 flex flex-wrap gap-4 items-center justify-between">
+          <div className="flex flex-wrap gap-4 items-center">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+              <input
+                type="text"
+                placeholder="Search model..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="pl-10 pr-4 py-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+            </div>
+            
+            <div className="relative">
+              <Filter className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+              <select
+                value={filterLicense}
+                onChange={(e) => setFilterLicense(e.target.value)}
+                className="pl-10 pr-8 py-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none"
+              >
+                <option value="all">All licenses</option>
+                <option value="API Service">API Service</option>
+                <option value="Apache 2.0">Apache 2.0</option>
+                <option value="MIT">MIT</option>
+              </select>
+            </div>
+          </div>
+
+          <button 
+            onClick={refreshData}
+            disabled={refreshing}
+            className="flex items-center space-x-2 px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-green-600/50 text-white rounded-lg transition-colors"
+          >
+            <RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin' : ''}`} />
+            <span>{refreshing ? 'Updating...' : 'Update'}</span>
+          </button>
+        </div>
+
+        <div className="bg-white/10 backdrop-blur-sm rounded-xl border border-white/20 overflow-hidden">
+          <div className="overflow-x-auto">
+            <div className="max-h-96 overflow-y-auto">
+              <table className="w-full">
+                <thead className="sticky top-0 bg-white/10 backdrop-blur-sm">
+                  <tr className="border-b border-white/10">
+                    <th className="px-6 py-4 text-left text-white font-semibold">Rank</th>
+                    <th className="px-6 py-4 text-left text-white font-semibold">Model</th>
+                    <th 
+                      className="px-6 py-4 text-left text-white font-semibold cursor-pointer hover:bg-white/5 transition-colors"
+                      onClick={() => {
+                        if (sortBy === 'accuracy') {
+                          setSortOrder(sortOrder === 'desc' ? 'asc' : 'desc');
+                        } else {
+                          setSortBy('accuracy');
+                          setSortOrder('desc');
+                        }
+                      }}
+                    >
+                      <div className="flex items-center space-x-1">
+                        <Target className="w-4 h-4" />
+                        <span>Accuracy</span>
+                        {getSortIcon('accuracy')}
+                      </div>
+                    </th>
+                    <th className="px-6 py-4 text-left text-white font-semibold">Answers</th>
+                    <th className="px-6 py-4 text-left text-white font-semibold">Parameters</th>
+                    <th className="px-6 py-4 text-left text-white font-semibold">License</th>
+                    <th 
+                      className="px-6 py-4 text-left text-white font-semibold cursor-pointer hover:bg-white/5 transition-colors"
+                      onClick={() => {
+                        if (sortBy === 'submittedTime') {
+                          setSortOrder(sortOrder === 'desc' ? 'asc' : 'desc');
+                        } else {
+                          setSortBy('submittedTime');
+                          setSortOrder('desc');
+                        }
+                      }}
+                    >
+                      <div className="flex items-center space-x-1">
+                        <Clock className="w-4 h-4" />
+                        <span>Date</span>
+                        {getSortIcon('submittedTime')}
+                      </div>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filteredAndSortedData.map((item, index) => (
+                    <tr 
+                      key={item.model} 
+                      className="border-b border-white/5 hover:bg-white/5 transition-colors group"
+                    >
+                      <td className="px-6 py-4">
+                        <div className="flex items-center">
+                          {getRankIcon(index)}
+                        </div>
+                      </td>
+                      <td className="px-6 py-4">
+                        <div className="flex flex-col">
+                          <div className="flex items-center space-x-2">
+                            <span className="text-white font-medium">{item.model.split('/').pop()}</span>
+                            <ExternalLink className="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer" />
+                          </div>
+                          <span className="text-sm text-gray-400">{item.model.split('/')[0]}</span>
+                        </div>
+                      </td>
+                      <td className="px-6 py-4">
+                        <div className="flex items-center space-x-3">
+                          <div className="flex-1">
+                            <div className="flex items-center justify-between mb-1">
+                              <span className="text-white font-semibold">{formatAccuracy(item.accuracy)}</span>
+                            </div>
+                            <div className="w-full bg-gray-700 rounded-full h-2">
+                              <div 
+                                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2 rounded-full transition-all duration-500"
+                                style={{ width: `${item.accuracy * 100}%` }}
+                              ></div>
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+                      <td className="px-6 py-4">
+                        <div className="text-center">
+                          <div className="text-white font-semibold">{item.correctAnswers}/{item.totalQuestions}</div>
+                          <div className="text-sm text-gray-400">correct</div>
+                        </div>
+                      </td>
+                      <td className="px-6 py-4">
+                        <div className="flex items-center space-x-2">
+                          <Zap className="w-4 h-4 text-yellow-400" />
+                          <span className="text-white">{formatParams(item.params)}</span>
+                        </div>
+                      </td>
+                      <td className="px-6 py-4">
+                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+                          item.license === 'API Service' 
+                            ? 'bg-blue-500/20 text-blue-300' 
+                            : item.license === 'Apache 2.0'
+                            ? 'bg-green-500/20 text-green-300'
+                            : 'bg-purple-500/20 text-purple-300'
+                        }`}>
+                          {item.license}
+                        </span>
+                      </td>
+                      <td className="px-6 py-4">
+                        <div className="text-sm text-gray-300">
+                          {formatDate(item.submittedTime)}
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-8 space-y-6">
+          <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6 border border-white/20">
+            <h3 className="text-xl font-semibold text-white mb-3">📊 About This Evaluation</h3>
+            <p className="text-gray-300 mb-3">
+              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.
+            </p>
+            <p className="text-gray-300 mb-4">
+              Questions are from the SAS (Servicio Andaluz de Salud) for the <strong>Convocatoria Concurso Oposición</strong> - specialized medical examination for urology residents.
+            </p>
+            <div className="flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-4 text-gray-300">
+              <span>Dataset: <a href="https://huggingface.co/datasets/SASLeaderboard/results" className="text-blue-400 hover:text-blue-300 transition-colors">SASLeaderboard/results</a></span>
+              {lastUpdated && (
+                <span className="text-sm">
+                  Last updated: {lastUpdated.toLocaleString('en-US')}
+                </span>
+              )}
+            </div>
+          </div>
+          
+          <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/20">
+            <div className="text-center">
+              <h4 className="text-lg font-semibold text-white mb-2">🎓 Academic Project</h4>
+              <p className="text-gray-300 text-sm">
+                Final project for IES Rafael Alberti<br/>
+                Course: Artificial Intelligence and Big Data<br/>
+                Subject: Artificial Intelligence Models
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
-}
+};
 
-export default App;
+export default LeaderboardUrology;