frontend/src/App.js

import React, { useState, useEffect } from 'react';
import _ from 'lodash';
import './styles.css';

const ScoreBar = ({ score }) => {
  const percentage = score <= 1 ? score * 100 : score;
  
  return (
    <div className="score-bar">
      <div 
        className="score-fill"
        style={{ width: `${percentage}%` }}
      />
      <span className="score-text">{percentage.toFixed(1)}%</span>
    </div>
  );
};

function App() {
  const [data, setData] = useState([]);
  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) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (err) {
        console.error('Error fetching data:', err);
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  const handleSort = (key) => {
    const direction = sortConfig.key === key && sortConfig.direction === 'desc' ? 'asc' : 'desc';
    setSortConfig({ key, direction });
  };

  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 <div className="container">Loading benchmark results...</div>;
  if (error) return <div className="container" style={{color: 'red'}}>Error: {error}</div>;

  return (
    <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="search-container">
        <input
          type="text"
          className="search-input"
          placeholder="Search models..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
        />
      </div>

      <div className="table-container">
        <table>
          <thead>
            <tr>
              <th>Model</th>
              {["GAIA", "MATH", "SimpleQA"].map(benchmark => (
                <th 
                  key={benchmark}
                  onClick={() => handleSort(benchmark)}
                >
                  {benchmark} - {sortConfig.key === benchmark && (
                    sortConfig.direction === 'desc' ? '↓' : '↑'
                  )}
                </th>
              ))}
            </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>
  );
}

export default App;