File size: 3,449 Bytes
b3d493a d94b1a3 02764ad b3d493a 02764ad b3d493a 02764ad b3d493a 02764ad b3d493a a0f1951 b3d493a b35cd1f b3d493a a4ec759 b3d493a b35cd1f b3d493a b35cd1f e17557b 02764ad b3d493a a0f1951 02764ad b3d493a b35cd1f 02764ad b35cd1f b3d493a 02764ad b3d493a d94b1a3 02764ad b3d493a 02764ad b3d493a a0f1951 1f689a2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
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; |