File size: 1,481 Bytes
59a65af ecf4195 59a65af ecf4195 59a65af ecf4195 4718a02 ecf4195 9dbdcb2 ecf4195 59a65af |
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 |
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';
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 && <ModelTable data={data} />}
</PrimeReactProvider>
</div>
</header>
</div>
);
}
export default App;
|