File size: 4,395 Bytes
d1a7111 11c32ae b4a0c57 f723129 d1a7111 f723129 ecf4195 d1a7111 ecf4195 d1a7111 ecf4195 d1a7111 ecf4195 d1a7111 ecf4195 f723129 33469f2 f723129 59a65af f723129 5bcc69a d1a7111 5bcc69a d1a7111 ecf4195 5bcc69a f723129 59a65af f723129 5bcc69a 430bde6 5bcc69a 91e29ba f723129 b4a0c57 867080c b4a0c57 867080c b4a0c57 867080c b4a0c57 5bcc69a f723129 5bcc69a f723129 59a65af 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 |
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'
function App () {
const [data, setData] = useState(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)
const [allSuggestions, setAllSuggestions] = useState([])
const [filters, setFilters] = useState([])
useEffect(() => {
fetch('/results.json')
.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)
})
}, [])
useEffect(() => {
if (data) {
const models = data.model_table.map(item => ({ type: 'Model', value: item.model, detail: item.provider, searchText: item.provider.toLowerCase() + ' ' + item.model.toLowerCase() }))
const languages = data.language_table.map(item => ({ type: 'Language', value: item.autonym, detail: item.language_name, searchText: item.language_name.toLowerCase() + ' ' + item.autonym.toLowerCase() }))
const datasets = data.dataset_table.map(item => ({ type: 'Dataset', value: item.name, detail: item.tasks, searchText: item.author.toLowerCase() + ' ' + item.name.toLowerCase() + ' ' + item.tasks.map(task => task.toLowerCase()).join(' ') }))
const allSuggestions = [...models, ...languages, ...datasets]
setAllSuggestions(allSuggestions)
}
}, [data])
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 Language Monitor
</h1>
<p style={{ fontSize: '1.15rem', color: '#555', marginTop: '0' }}>
Tracking language proficiency of AI models for every language
</p>
<AutoComplete allSuggestions={allSuggestions} onComplete={item => setFilters(prevFilters => [item])} />
</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
id='figure'
style={{
flex: '100vw 100vw 100vw',
maxWidth: 'min(100vw, 800px)',
alignItems: 'center',
justifyContent: 'center',
}}
>
<WorldMap data={data} />
</div>
<div
style={{
flex: '60vw 100vw 40vw',
maxWidth: 'min(100vw, 800px)',
}}
>
<ModelTable data={data} />
</div>
<div
style={{
flex: '60vw 100vw 40vw',
maxWidth: 'min(100vw, 800px)'
}}
>
<LanguageTable data={data} />
</div>
<div
style={{
flex: '60vw 100vw 40vw',
maxWidth: 'min(100vw, 800px)'
}}
>
<DatasetTable data={data} />
</div>
</>
)}
</main>
</div>
</PrimeReactProvider>
)
}
export default App
|