File size: 5,440 Bytes
e7abd9e
 
 
 
 
 
 
 
3fb69ed
e7abd9e
 
 
 
 
 
1fccca5
dc3029e
b4e647f
a87d18d
 
e7abd9e
b4e647f
e7abd9e
5ae7646
e7abd9e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3fb69ed
b256a78
 
3fb69ed
 
e7abd9e
9cd0edd
 
 
 
 
 
 
 
 
 
a87d18d
9cd0edd
 
 
 
e7abd9e
 
9cd0edd
e7abd9e
 
9cd0edd
 
e7abd9e
 
1fccca5
9cd0edd
 
 
 
 
 
 
 
 
 
 
 
 
5ae7646
787d128
 
9cd0edd
 
3fb69ed
e7abd9e
9cd0edd
 
a87d18d
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
127
128
129
130
131
132
133
import React, { useEffect } from "react";
import {
  HashRouter as Router,
  Routes,
  Route,
  useSearchParams,
  useLocation,
} from "react-router-dom";
import { resolveLocalizedString, useResolveLocalizedString } from "i18n";
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 Header from "./components/Header/Header";
import { Badge } from "@codegouvfr/react-dsfr/Badge";
import Footer from "./components/Footer/Footer";
import MuiDsfrThemeProvider from "@codegouvfr/react-dsfr/mui";
import { headerFooterDisplayItem } from "@codegouvfr/react-dsfr/Display";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { LanguageSelect } from "./components/LanguageSelect/LanguageSelect";
import LeaderboardProvider from "./pages/LeaderboardPage/components/Leaderboard/context/LeaderboardContext";
import AboutPage from "pages/AboutPage/AboutPage";
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 disclaimer = {
    "fr": "Ce leaderboard compare les modèles de langage adaptés (ou non) à la langue française, sur des jeux de données en français, adaptés aux spécificités culturelles de la francophonie. C'est d'abord un projet de recherche collaboratif, et nous espérons recevoir de nombreuses contributions pour l'améliorer au fil du temps ! Nous fournissons les modalités et paramètres des évaluations ainsi que les métriques dans ce répertoire : https://github.com/leaderboard-modeles-IA-francais/evaluation-pipeline-leaderboard. Note : les données d'évaluation ont été pour l'instant gardées confidentielles, pour préserver l'intégrité et la validité des résultats, et éviter les manipulations du classement.",
    "en": "This leaderboard compares language models adapted (or not) to the French language, on French datasets, adapted to the cultural specificities of the French-speaking world. It is primarily a collaborative research project, and we hope to receive many contributions to improve it over time! We provide the evaluation modalities and parameters as well as the metrics in this repository: https://github.com/leaderboard-modeles-IA-francais/evaluation-pipeline-leaderboard. Note: The evaluation data has been kept confidential for the time being, to preserve the integrity and validity of the results, and avoid manipulation of the ranking."
  }

  return (
    <div
      className="App"
      style={{
        height: "100%",
        width: "100%",
        WebkitOverflowScrolling: "touch",
        overflow: "auto",
      }}
    >
      <QueryClientProvider client={queryClient}>
        <MuiDsfrThemeProvider>
          <CssBaseline />
          <Router>
            <LeaderboardProvider>
              <UrlHandler />
              <Box
                sx={{
                  minHeight: "100vh",
                  display: "flex",
                  flexDirection: "column",
                  bgcolor: "background.default",
                  color: "text.primary",
                }}
              >
                <Header />
                <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="/about" element={<AboutPage />} />
                    {/* <Route path="/quote" element={<QuotePage />} />
                    <Route path="/vote" element={<VoteModelPage />} /> */}
                  </Routes>
                </Box>
                <Footer disclaimer={disclaimer}/>
              </Box>
            </LeaderboardProvider>
          </Router>
        </MuiDsfrThemeProvider>
      </QueryClientProvider>
    </div>
  );
}

export default App;