File size: 3,843 Bytes
debda0e
ebdfd67
970eef1
31d11b5
970eef1
 
 
 
 
 
 
ebdfd67
 
 
 
 
 
 
970eef1
debda0e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
970eef1
 
 
 
debda0e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
970eef1
 
 
 
 
ebdfd67
970eef1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
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 ExternalLinks from "./components/ExternalLinks";
import KeyboardShortcuts from "./components/KeyboardShortcuts";
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";

// Fonction pour synchroniser les hash URL avec la page parente Hugging Face
const syncURLWithParent = () => {
  // Cette fonction est nécessaire uniquement dans un environnement Hugging Face Spaces
  if (window.parent !== window) {
    try {
      // On envoie le hash actuel à la page parente (Hugging Face)
      window.parent.postMessage(
        {
          hash: window.location.hash,
        },
        "https://huggingface.co"
      );

      // On log pour débogage
      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);

  // Effet pour surveiller les changements de hash et les synchroniser
  useEffect(() => {
    // Fonction de gestionnaire d'événements pour les changements de hash
    const handleHashChange = () => {
      syncURLWithParent();
    };

    // Fonction pour gérer les messages reçus de la page parente
    const handleParentMessage = (event) => {
      // Vérifier que le message vient bien de Hugging Face
      if (event.origin === "https://huggingface.co") {
        // Si le message contient un hash et qu'il est différent du hash actuel
        if (event.data.hash && event.data.hash !== window.location.hash) {
          console.log("Received hash from parent:", event.data.hash);
          // Mettre à jour le hash de l'URL sans recharger la page
          window.location.hash = event.data.hash;
        }
      }
    };

    // On synchronise au chargement initial
    syncURLWithParent();

    // On écoute les changements de hash
    window.addEventListener("hashchange", handleHashChange);

    // On écoute les messages de la page parente
    window.addEventListener("message", handleParentMessage);

    // Nettoyage
    return () => {
      window.removeEventListener("hashchange", handleHashChange);
      window.removeEventListener("message", handleParentMessage);
    };
  }, []);

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Router>
        <Container maxWidth="md">
          <ExternalLinks />
          <Box sx={{ pt: 12, pb: 4 }}>
            <KeyboardShortcuts />
            <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>
          </Box>
        </Container>
      </Router>
    </ThemeProvider>
  );
}

export default App;