|
import React, { useEffect } from "react"; |
|
import { Box, Container, CssBaseline } from "@mui/material"; |
|
import { |
|
HashRouter as Router, |
|
Routes, |
|
Route, |
|
Navigate, |
|
} from "react-router-dom"; |
|
import getTheme from "./config/theme"; |
|
import { useThemeMode } from "./hooks/useThemeMode"; |
|
import { ThemeProvider } from "@mui/material/styles"; |
|
import Navigation from "./components/Navigation"; |
|
import HomePage from "./pages/HomePage"; |
|
import BenchmarkGenerationPage from "./pages/BenchmarkGenerationPage"; |
|
import BenchmarkDisplayPage from "./pages/BenchmarkDisplayPage"; |
|
import BenchmarkEvaluationPage from "./pages/BenchmarkEvaluationPage"; |
|
import EvaluationDisplayPage from "./pages/EvaluationDisplayPage"; |
|
import Footer from "./components/Footer/Footer"; |
|
|
|
const syncURLWithParent = () => { |
|
|
|
if (window.parent !== window) { |
|
try { |
|
|
|
window.parent.postMessage( |
|
{ |
|
hash: window.location.hash, |
|
}, |
|
"https://huggingface.co" |
|
); |
|
|
|
|
|
console.log("Synced hash with parent:", window.location.hash); |
|
} catch (error) { |
|
console.error("Error syncing URL with parent:", error); |
|
} |
|
} |
|
}; |
|
|
|
function App() { |
|
const { mode } = useThemeMode(); |
|
const theme = getTheme(mode); |
|
|
|
|
|
useEffect(() => { |
|
|
|
const handleHashChange = () => { |
|
syncURLWithParent(); |
|
}; |
|
|
|
|
|
const handleParentMessage = (event) => { |
|
|
|
if (event.origin === "https://huggingface.co") { |
|
|
|
if (event.data.hash && event.data.hash !== window.location.hash) { |
|
console.log("Received hash from parent:", event.data.hash); |
|
|
|
window.location.hash = event.data.hash; |
|
} |
|
} |
|
}; |
|
|
|
|
|
syncURLWithParent(); |
|
|
|
|
|
window.addEventListener("hashchange", handleHashChange); |
|
|
|
|
|
window.addEventListener("message", handleParentMessage); |
|
|
|
|
|
return () => { |
|
window.removeEventListener("hashchange", handleHashChange); |
|
window.removeEventListener("message", handleParentMessage); |
|
}; |
|
}, []); |
|
|
|
return ( |
|
<ThemeProvider theme={theme}> |
|
<CssBaseline /> |
|
<Router> |
|
<Container maxWidth="md"> |
|
<Navigation /> |
|
<Box sx={{ pt: 12, pb: 4 }}> |
|
<Routes> |
|
<Route path="/" element={<HomePage />} /> |
|
<Route |
|
path="/benchmark-generation" |
|
element={<BenchmarkGenerationPage />} |
|
/> |
|
<Route |
|
path="/benchmark-display" |
|
element={<BenchmarkDisplayPage />} |
|
/> |
|
<Route |
|
path="/benchmark-evaluation" |
|
element={<BenchmarkEvaluationPage />} |
|
/> |
|
<Route |
|
path="/evaluation-display" |
|
element={<EvaluationDisplayPage />} |
|
/> |
|
<Route path="*" element={<Navigate to="/" replace />} /> |
|
</Routes> |
|
<Footer /> |
|
</Box> |
|
</Container> |
|
</Router> |
|
</ThemeProvider> |
|
); |
|
} |
|
|
|
export default App; |
|
|