Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 3,766 Bytes
e7abd9e 9cd0edd e7abd9e 9cd0edd e7abd9e 9cd0edd e7abd9e 9cd0edd e7abd9e 9cd0edd e7abd9e |
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 |
import React, { useEffect } from "react";
import {
HashRouter as Router,
Routes,
Route,
useSearchParams,
useLocation,
} from "react-router-dom";
import { ThemeProvider } from "@mui/material/styles";
import { Box, CssBaseline } from "@mui/material";
import Navigation from "./components/Navigation/Navigation";
import LeaderboardPage from "./pages/LeaderboardPage/LeaderboardPage";
import AddModelPage from "./pages/AddModelPage/AddModelPage";
import QuotePage from "./pages/QuotePage/QuotePage";
import VoteModelPage from "./pages/VoteModelPage/VoteModelPage";
import Footer from "./components/Footer/Footer";
import getTheme from "./config/theme";
import { useThemeMode } from "./hooks/useThemeMode";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import LeaderboardProvider from "./pages/LeaderboardPage/components/Leaderboard/context/LeaderboardContext";
const queryClient = new QueryClient({
defaultOptions: {
queries: {
retry: 1,
refetchOnWindowFocus: false,
},
},
});
function UrlHandler() {
const location = useLocation();
const [searchParams] = useSearchParams();
// Synchroniser l'URL avec la page parente HF
useEffect(() => {
// Vérifier si nous sommes dans un iframe HF Space
const isHFSpace = window.location !== window.parent.location;
if (!isHFSpace) return;
// Sync query and hash from this embedded app to the parent page URL
const queryString = window.location.search;
const hash = window.location.hash;
// HF Spaces' special message type to update the query string and the hash in the parent page URL
window.parent.postMessage(
{
queryString,
hash,
},
"https://huggingface.co"
);
}, [location, searchParams]);
// Read the updated hash reactively
useEffect(() => {
const handleHashChange = (event) => {
console.log("hash change event", event);
};
window.addEventListener("hashchange", handleHashChange);
return () => window.removeEventListener("hashchange", handleHashChange);
}, []);
return null;
}
function App() {
const { mode, toggleTheme } = useThemeMode();
const theme = getTheme(mode);
return (
<div
className="App"
style={{
height: "100%",
width: "100%",
WebkitOverflowScrolling: "touch",
overflow: "auto",
}}
>
<QueryClientProvider client={queryClient}>
<ThemeProvider theme={theme}>
<CssBaseline />
<Router>
<LeaderboardProvider>
<UrlHandler />
<Box
sx={{
minHeight: "100vh",
display: "flex",
flexDirection: "column",
bgcolor: "background.default",
color: "text.primary",
}}
>
<Navigation onToggleTheme={toggleTheme} mode={mode} />
<Box
sx={{
flex: 1,
display: "flex",
flexDirection: "column",
width: "100%",
px: 4,
pb: 4,
}}
>
<Routes>
<Route path="/" element={<LeaderboardPage />} />
<Route path="/add" element={<AddModelPage />} />
<Route path="/quote" element={<QuotePage />} />
<Route path="/vote" element={<VoteModelPage />} />
</Routes>
</Box>
<Footer />
</Box>
</LeaderboardProvider>
</Router>
</ThemeProvider>
</QueryClientProvider>
</div>
);
}
export default App;
|