File size: 1,756 Bytes
d1a7111 ecf4195 d1a7111 ecf4195 d1a7111 ecf4195 d1a7111 ecf4195 d1a7111 ecf4195 d1a7111 ecf4195 59a65af d1a7111 ecf4195 4718a02 ecf4195 d1a7111 ecf4195 d1a7111 ecf4195 59a65af 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 |
import './App.css'
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'
function App () {
const [data, setData] = useState(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)
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)
})
}, [])
return (
<div className='App'>
<header className='App-header'>
<div className='emoji-container'>
<span
role='img'
aria-label='Hugging Face Emoji'
className='header-emoji'
>
🌍
</span>
</div>
<h1>Global AI Language Monitor</h1>
<p>Tracking language proficiency of AI models for every language</p>
<div className='data-container' style={{ width: '100%' }}>
<PrimeReactProvider>
{loading && <p>...</p>}
{error && <p>Error: {error}</p>}
{data && (
<div style={{ display: 'flex', flexDirection: 'row', gap: '2rem' }}>
<ModelTable data={data} />
<LanguageTable data={data} />
</div>
)}
</PrimeReactProvider>
</div>
</header>
</div>
)
}
export default App
|