File size: 5,126 Bytes
d1a7111 11c32ae b4a0c57 f723129 7cdde63 f723129 d1a7111 f723129 ecf4195 d1a7111 ecf4195 d1a7111 ecf4195 d1a7111 ecf4195 d1a7111 ecf4195 f723129 7cdde63 f723129 59a65af f723129 7cdde63 b4a0c57 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 166 167 168 169 170 171 |
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 [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
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>
<div
id='figure'
style={{
flex: '100vw 100vw 100vw',
maxWidth: 'min(100vw, 800px)',
alignItems: 'center',
justifyContent: 'center'
}}
>
<Carousel
value={[
<WorldMap data={data} />,
<LanguagePlot data={data} />
]}
numScroll={1}
numVisible={1}
itemTemplate={item => item}
circular
/>
</div>
</>
)}
</main>
</div>
</PrimeReactProvider>
)
}
export default App
|