File size: 4,482 Bytes
d1a7111 11c32ae b4a0c57 f723129 7cdde63 f723129 d1a7111 d91b022 ecf4195 2c21cf7 d91b022 2c21cf7 ecf4195 d1a7111 ecf4195 d1a7111 ecf4195 d1a7111 ecf4195 d1a7111 d91b022 ecf4195 59a65af f723129 7cdde63 b4a0c57 7cdde63 a3e21c6 7cdde63 4d13673 7cdde63 d91b022 7cdde63 b6b84c7 2c21cf7 d91b022 b6b84c7 7cdde63 92d8154 7cdde63 a3e21c6 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 |
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 { 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' }}>
Global AI 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)}
/>
)}
</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'
}}
>
<Carousel
value={[
<WorldMap data={data.countries} />,
<LanguagePlot data={data} />
]}
numScroll={1}
numVisible={1}
itemTemplate={item => item}
circular
style={{ width: '800px', minHeight: '650px' }}
/>
</div>
</>
)}
</main>
</div>
</PrimeReactProvider>
)
}
export default App
|