Spaces:
Running
Running
File size: 2,581 Bytes
b087e88 |
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 |
import React, { useState, useEffect } from 'react'
import DatasetSelector from './DatasetSelector'
import LeaderboardTable from './LeaderboardTable'
import LeaderboardChart from './LeaderboardChart'
import ModelFilter from './ModelFilter'
import API from '../API'
import LoadingSpinner from './LoadingSpinner'
const LeaderboardPage: React.FC = () => {
const datasetNames = [
'voxpopuli_1k/audio',
'ravdess_1k/audio',
'val2014_1k/image',
'sav_val_full/video',
]
const [selectedDatasetName, setSelectedDatasetName] = useState(datasetNames[0])
const [models, setModels] = useState<string[]>([])
const [selectedModels, setSelectedModels] = useState<Set<string>>(new Set())
const [loading, setLoading] = useState(true)
const [benchmarkData, setBenchmarkData] = useState<any>(null)
// Fetch available models when dataset changes
useEffect(() => {
setLoading(true)
API.fetchStaticFile(`data/${selectedDatasetName}?dataset_type=benchmark`)
.then((response) => {
const data = JSON.parse(response)
setBenchmarkData(data)
const rows = data['rows']
const allKeys: string[] = Array.from(new Set(rows.flatMap((row: any) => Object.keys(row))))
// Remove 'metric' from headers if it exists
const headers = allKeys.filter((key) => key !== 'metric')
setModels(headers)
// Initialize all models as selected
setSelectedModels(new Set(headers))
setLoading(false)
})
.catch((err) => {
console.error('Failed to fetch models:', err)
setLoading(false)
})
}, [selectedDatasetName])
return (
<div className="">
<div className="flex flex-col gap-4">
<DatasetSelector
datasetNames={datasetNames}
selectedDatasetName={selectedDatasetName}
onDatasetNameChange={setSelectedDatasetName}
/>
</div>
{loading ? (
<LoadingSpinner />
) : (
<>
{models.length > 0 && (
<ModelFilter
models={models}
selectedModels={selectedModels}
setSelectedModels={setSelectedModels}
/>
)}
<div className="space-y-8">
<LeaderboardTable benchmarkData={benchmarkData} selectedModels={selectedModels} />
<div className="mt-8 pt-4 border-t border-gray-200">
<LeaderboardChart dataset={selectedDatasetName} selectedModels={selectedModels} />
</div>
</div>
</>
)}
</div>
)
}
export default LeaderboardPage
|