Update frontend/src/App.js

frontend/src/App.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import _ from 'lodash';
+import { Search } from 'lucide-react';
 
 const ScoreBar = ({ score }) => {
   const percentage = score <= 1 ? score * 100 : score;
@@ -7,9 +8,9 @@ const ScoreBar = ({ score }) => {
   const backgroundColor = `hsl(${hue}, 70%, 45%)`;
   
   return (
-    <div className="relative h-8 bg-gray-100 rounded w-full">
+    <div className="relative h-6 bg-gray-200 rounded-full overflow-hidden">
       <div 
-        className="absolute top-0 left-0 h-full rounded transition-all duration-200"
+        className="absolute top-0 left-0 h-full transition-all duration-200"
         style={{ 
           width: `${percentage}%`,
           backgroundColor
@@ -29,17 +30,15 @@ function App() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [sortConfig, setSortConfig] = useState({ key: 'GAIA', direction: 'desc' });
+  const [searchQuery, setSearchQuery] = useState('');
 
   useEffect(() => {
     const fetchData = async () => {
       try {
         setLoading(true);
-        
         const response = await fetch('https://smolagents-benchmark-smolagents-llm-leaderboard.hf.space/api/results');
-
         if (!response.ok) {
-          const text = await response.text();
-          throw new Error(`HTTP error! status: ${response.status}, message: ${text}`);
+          throw new Error(`HTTP error! status: ${response.status}`);
         }
         const jsonData = await response.json();
         setData(jsonData);
@@ -59,18 +58,15 @@ function App() {
     setSortConfig({ key, direction });
   };
 
-  const sortedData = _.orderBy(
-    data,
-    [item => item.scores[sortConfig.key] || 0],
-    [sortConfig.direction]
-  );
-
-  const getSortIcon = (key) => {
-    if (sortConfig.key === key) {
-      return sortConfig.direction === 'desc' ? ' ↓' : ' ↑';
-    }
-    return ' ↕';
-  };
+  const filteredAndSortedData = _.chain(data)
+    .filter(item => 
+      item.model_id.toLowerCase().includes(searchQuery.toLowerCase())
+    )
+    .orderBy(
+      [item => item.scores[sortConfig.key] || 0],
+      [sortConfig.direction]
+    )
+    .value();
 
   if (loading) {
     return (
@@ -89,50 +85,70 @@ function App() {
   }
 
   return (
-    <div className="p-6">
+    <div className="max-w-6xl mx-auto p-6">
       <div className="mb-6">
         <h1 className="text-2xl font-bold mb-2">Model Benchmark Results</h1>
         <p className="text-gray-600">Comparing model performance across different benchmarks</p>
       </div>
+      
+      <div className="mb-6 relative">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
+          <input
+            type="text"
+            placeholder="Search models..."
+            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+      </div>
 
-      <div className="overflow-x-auto">
-        <table className="w-full border-collapse">
-          <thead>
-            <tr className="border-b border-gray-200">
-              <th className="py-3 text-left font-medium text-gray-700 w-1/4">Model</th>
-              {["GAIA", "MATH", "SimpleQA"].map(benchmark => (
-                <th 
-                  key={benchmark}
-                  onClick={() => handleSort(benchmark)}
-                  className="py-3 px-4 text-left font-medium text-gray-700 cursor-pointer hover:text-blue-600"
+      <div className="bg-white rounded-lg shadow overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full border-collapse">
+            <thead>
+              <tr className="bg-gray-50 border-b border-gray-200">
+                <th className="py-3 px-6 text-left font-medium text-gray-700">Model</th>
+                {["GAIA", "MATH", "SimpleQA"].map(benchmark => (
+                  <th 
+                    key={benchmark}
+                    onClick={() => handleSort(benchmark)}
+                    className="py-3 px-6 text-left font-medium text-gray-700 cursor-pointer hover:text-blue-600"
+                  >
+                    <div className="flex items-center gap-1">
+                      {benchmark}
+                      <span className="text-gray-400">-</span>
+                    </div>
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {filteredAndSortedData.map((item, index) => (
+                <tr 
+                  key={index} 
+                  className={`border-b border-gray-100 ${
+                    index % 2 === 0 ? 'bg-white' : 'bg-gray-50'
+                  }`}
                 >
-                  <div className="flex items-center gap-1">
-                    {benchmark}
-                    <span className="text-gray-500">{getSortIcon(benchmark)}</span>
-                  </div>
-                </th>
+                  <td className="py-3 px-6 font-medium truncate" title={item.model_id}>
+                    {item.model_id}
+                  </td>
+                  <td className="py-3 px-6">
+                    <ScoreBar score={item.scores.GAIA} />
+                  </td>
+                  <td className="py-3 px-6">
+                    <ScoreBar score={item.scores.MATH} />
+                  </td>
+                  <td className="py-3 px-6">
+                    <ScoreBar score={item.scores.SimpleQA} />
+                  </td>
+                </tr>
               ))}
-            </tr>
-          </thead>
-          <tbody>
-            {sortedData.map((item, index) => (
-              <tr key={index} className="border-b border-gray-100">
-                <td className="py-3 pr-4 font-medium truncate" title={item.model_id}>
-                  {item.model_id}
-                </td>
-                <td className="py-3 px-4">
-                  <ScoreBar score={item.scores.GAIA} />
-                </td>
-                <td className="py-3 px-4">
-                  <ScoreBar score={item.scores.MATH} />
-                </td>
-                <td className="py-3 px-4">
-                  <ScoreBar score={item.scores.SimpleQA} />
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   );