File size: 6,471 Bytes
d1a7111 11c32ae b4a0c57 f723129 7cdde63 b54f543 f52ec6e 7cdde63 f723129 d1a7111 d91b022 ecf4195 2c21cf7 d91b022 2c21cf7 ecf4195 d1a7111 ecf4195 d1a7111 ecf4195 d1a7111 ecf4195 d1a7111 d91b022 ecf4195 59a65af f723129 7cdde63 b4a0c57 7cdde63 58de179 7cdde63 4d13673 58de179 7cdde63 d91b022 7cdde63 b6b84c7 2c21cf7 d91b022 b6b84c7 7cdde63 f52ec6e 7cdde63 92d8154 b54f543 f52ec6e 7cdde63 f52ec6e 7cdde63 f723129 7cdde63 f723129 d1a7111 59a65af d1a7111 |
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 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 |
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 { Carousel } from 'primereact/carousel'
function App () {
const [data, setData] = useState(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)
const [selectedLanguages, setSelectedLanguages] = 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)
setLoading(false)
})
.catch(err => {
setError(err.message)
setLoading(false)
})
}, [selectedLanguages])
return (
<PrimeReactProvider>
<div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
<header
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
padding: '5vh 0'
}}
>
<div>
<span
role='img'
aria-label='Globe Emoji'
style={{ fontSize: '70px' }}
>
🌍
</span>
</div>
<h1 style={{ fontSize: '2.5rem', fontWeight: '700' }}>
AI Language Proficiency Monitor
</h1>
<p style={{ fontSize: '1.15rem', color: '#555', marginTop: '0' }}>
Tracking language proficiency of AI models for every language
</p>
{data && (
<AutoComplete
languages={data?.language_table}
onComplete={items => setSelectedLanguages(items)}
/>
)}
<div style={{maxWidth: '600px', textAlign: 'center', marginTop: '2rem'}}>
<p>The <i>AI Language Proficiency Monitor</i> presents comprehensive multilingual evaluation results of AI language models.</p>
<ul style={{textAlign: 'left'}}>
<li><b>Developers and researchers</b> can identify the best-performing model for any given language or region.</li>
<li><b>Policymakers and funders</b> can identify languages that are neglected by current AI systems and prioritize investment accordingly.</li>
<li><b>Model developers</b> gain a global metric of multilinguality that incentivizes broad language coverage.</li>
</ul>
<p>We also want to celebrate the community's effort towards multilingual datasets and models. We invite you to integrate additional benchmark datasets, and to add your custom language models to the monitor.</p>
<p>Benchmark results automatically refresh every night for the most popular AI models, as well as community-listed models. For a more detailed methodlogy, see <a href="#">our non-existing paper</a>.</p>
<p>The language monitor is a collaboration between BMZ's <a href="https://www.bmz-digital.global/en/overview-of-initiatives/the-bmz-data-lab/" target="_blank" rel="noopener noreferrer">Data Lab</a>, GIZ's <a href="https://www.giz.de/expertise/html/61982.html" target="_blank" rel="noopener noreferrer">FairForward</a> initiative, and the <a href="https://www.dfki.de/en/web/research/research-departments/multilinguality-and-language-technology/ee-team" target="_blank" rel="noopener noreferrer">E&E group</a> of DFKI's Multilinguality and Language Technology Lab.</p>
</div>
</header>
<main
style={{
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
gap: '2rem',
alignItems: 'center',
width: '100%',
height: '100%',
justifyContent: 'center',
paddingBottom: '5vh'
}}
>
{loading && (
<i className='pi pi-spinner pi-spin' style={{ fontSize: '4rem' }} />
)}
{error && <p>Error: {error}</p>}
{data && (
<>
<div
style={{
flex: '60vw 100vw 40vw',
maxWidth: 'min(100vw, 800px)'
}}
>
<ModelTable data={data.model_table} />
</div>
<div
style={{
flex: '60vw 100vw 40vw',
maxWidth: 'min(100vw, 800px)'
}}
>
<LanguageTable
data={data.language_table}
selectedLanguages={selectedLanguages}
setSelectedLanguages={setSelectedLanguages}
/>
</div>
<div
style={{
flex: '60vw 100vw 40vw',
maxWidth: 'min(100vw, 800px)'
}}
>
<DatasetTable data={data} />
</div>
<div
id='figure'
style={{
flex: '100vw 100vw 100vw',
maxWidth: 'min(100vw, 800px)',
alignItems: 'center',
justifyContent: 'center',
width: '100%'
}}
>
<Carousel
value={[
<WorldMap data={data.countries} />,
<LanguagePlot data={data} />,
<SpeakerPlot data={data} />,
<HistoryPlot data={data} />,
]}
numScroll={1}
numVisible={1}
itemTemplate={item => item}
circular
style={{ width: '100%', minHeight: '650px' }}
/>
</div>
</>
)}
</main>
</div>
</PrimeReactProvider>
)
}
export default App
|