Update frontend/src/App.js

frontend/src/App.js

@@ -1,24 +1,17 @@
 import React, { useState, useEffect } from 'react';
 import _ from 'lodash';
+import './App.css';
+
 const ScoreBar = ({ score }) => {
   const percentage = score <= 1 ? score * 100 : score;
-  const hue = Math.min(percentage * 1.2, 120); // 0 = red, 120 = green
-  const backgroundColor = `hsl(${hue}, 70%, 45%)`;
   
   return (
-    <div className="relative h-6 bg-gray-200 rounded-full overflow-hidden">
+    <div className="score-bar">
       <div 
-        className="absolute top-0 left-0 h-full transition-all duration-200"
-        style={{ 
-          width: `${percentage}%`,
-          backgroundColor
-        }}
+        className="score-fill"
+        style={{ width: `${percentage}%` }}
       />
-      <div className="absolute inset-0 flex items-center justify-end px-3">
-        <span className="text-sm font-medium text-white mix-blend-difference">
-          {percentage.toFixed(2)}%
-        </span>
-      </div>
+      <span className="score-text">{percentage.toFixed(1)}%</span>
     </div>
   );
 };
@@ -66,87 +59,52 @@ function App() {
     )
     .value();
 
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="text-lg">Loading benchmark results...</div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="flex items-center justify-center min-h-screen text-red-600">
-        Error: {error}
-      </div>
-    );
-  }
+  if (loading) return <div className="container">Loading benchmark results...</div>;
+  if (error) return <div className="container" style={{color: 'red'}}>Error: {error}</div>;
 
   return (
-    <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 className="container">
+      <div className="header">
+        <h1 className="title">Model Benchmark Results</h1>
+        <p className="subtitle">Comparing model performance across different benchmarks</p>
       </div>
       
-      <div className="mb-6 relative">
-        <div className="relative">
-          <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">⚲</span>
-          <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 className="search-container">
+        <input
+          type="text"
+          className="search-input"
+          placeholder="Search models..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
       </div>
 
-      <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="table-container">
+        <table>
+          <thead>
+            <tr>
+              <th>Model</th>
+              {["GAIA", "MATH", "SimpleQA"].map(benchmark => (
+                <th 
+                  key={benchmark}
+                  onClick={() => handleSort(benchmark)}
                 >
-                  <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>
+                  {benchmark} -
+                </th>
               ))}
-            </tbody>
-          </table>
-        </div>
+            </tr>
+          </thead>
+          <tbody>
+            {filteredAndSortedData.map((item, index) => (
+              <tr key={index}>
+                <td className="model-name">{item.model_id}</td>
+                <td><ScoreBar score={item.scores.GAIA} /></td>
+                <td><ScoreBar score={item.scores.MATH} /></td>
+                <td><ScoreBar score={item.scores.SimpleQA} /></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
       </div>
     </div>
   );