File size: 3,966 Bytes
d1a7111 11c32ae 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 f723129 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 |
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 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 && <p>...</p>}
{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>
</>
)}
</main>
</div>
</PrimeReactProvider>
)
}
export default App
|