import { useState, useEffect } from 'react'
import { PrimeReactProvider } from 'primereact/api'
import 'primereact/resources/themes/lara-light-cyan/theme.css'
import ModelTable from './components/ModelTable'
import LanguageTable from './components/LanguageTable'
import DatasetTable from './components/DatasetTable'
import WorldMap from './components/WorldMap'
import AutoComplete from './components/AutoComplete'
import LanguagePlot from './components/LanguagePlot'
import SpeakerPlot from './components/SpeakerPlot'
import HistoryPlot from './components/HistoryPlot'
import CostPlot from './components/CostPlot'
import { Carousel } from 'primereact/carousel'
import { Dialog } from 'primereact/dialog'
import { Button } from 'primereact/button'
function App () {
const [data, setData] = useState(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)
const [selectedLanguages, setSelectedLanguages] = useState([])
const [machineTranslatedMetrics, setMachineTranslatedMetrics] = useState([])
const [dialogVisible, setDialogVisible] = useState(false)
const [aboutVisible, setAboutVisible] = useState(false)
const [contributeVisible, setContributeVisible] = useState(false)
// Add state for carousel items
const [carouselItems, setCarouselItems] = useState([])
const [fullScreenCarouselItems, setFullScreenCarouselItems] = useState([])
useEffect(() => {
fetch('/api/data', {
method: 'POST',
body: JSON.stringify({ selectedLanguages })
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok')
}
return response.json()
})
.then(jsonData => {
setData(jsonData)
setMachineTranslatedMetrics(jsonData.machine_translated_metrics || [])
setLoading(false)
})
.catch(err => {
setError(err.message)
setLoading(false)
})
}, [selectedLanguages])
// Create carousel items when data is loaded
useEffect(() => {
if (data) {
// Add a small delay to ensure components are ready
const timer = setTimeout(() => {
setCarouselItems([
,
,
,
,
]);
}, 100);
return () => clearTimeout(timer);
}
}, [data])
const [windowWidth, setWindowWidth] = useState(window.innerWidth)
const [windowHeight, setWindowHeight] = useState(window.innerHeight)
useEffect(() => {
const handleResize = () => {
setWindowWidth(window.innerWidth)
setWindowHeight(window.innerHeight)
}
window.addEventListener('resize', handleResize)
return () => window.removeEventListener('resize', handleResize)
}, [])
// Create full-screen carousel items when data or window size changes
useEffect(() => {
if (data) {
const timer = setTimeout(() => {
setFullScreenCarouselItems([
,
,
,
,
]);
}, 100);
return () => clearTimeout(timer);
}
}, [data, windowWidth, windowHeight])
return (
Work in Progress: This dashboard is currently under
active development. Evaluation results are not yet final. Note that the visualised results currently stem from sampling 20 instances per combination of model, task, and language. We have evaluated 139 languages across 41 models and 7 tasks, totaling over 300,000 individual evaluations. Only the top 150 languages by speaker count are included in the current evaluation scope. More extensive evaluation runs will be released later this year.