feat(lang): logic for internationalization

Mechanism is now in place, must fill in translations.

frontend/eslint.config.js

@@ -24,6 +24,10 @@ export default [
       'react-refresh': reactRefresh,
     },
     rules: {
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        { varsIgnorePattern: "^i18n$" },
+      ],
       ...js.configs.recommended.rules,
       ...react.configs.recommended.rules,
       ...react.configs['jsx-runtime'].rules,

frontend/package.json

@@ -41,6 +41,9 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
-    "vite": "^6.0.5"
+    "i18nifty": "^3.2.3",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.5",
+    "vite-tsconfig-paths": "^5.1.4"
   }
 }

frontend/src/App.jsx

@@ -6,19 +6,18 @@ import {
   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 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 "@codegouvfr/react-dsfr/Header";
-import { Footer } from "@codegouvfr/react-dsfr/Footer";
+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";
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -101,7 +100,8 @@ function App() {
                   }}
                   quickAccessItems={[
                     // other quick access items...
-                    headerFooterDisplayItem
+                    headerFooterDisplayItem,
+                    <LanguageSelect />
                   ]}
                   id="fr-header-simple-header-with-service-title-and-tagline"
                   serviceTagline="Tableau de référence pour les grands modèles de langages en français"
@@ -125,43 +125,7 @@ function App() {
                     <Route path="/vote" element={<VoteModelPage />} />
                   </Routes>
                 </Box>
-                <Footer
-                  accessibility="fully compliant"
-                  contentDescription="
-                    L'évaluation des systèmes d'IA est un enjeu stratégique sur lequel la France s'est historiquement démarquée.
-
-                    Ce classement, ou leaderboard, s'inspire directement de l'Open LLM Leaderboard et permet de comparer différents modèles d'IA génératifs à l'aide de jeux de données spécifiquement adaptés aux environnements et à la culture francophones.
-                    "
-                  partnersLogos={{
-                    sub: [
-                      {
-                        alt: 'Logo Inria',
-                        href: '#',
-                        imgUrl: '/inr_logo_rouge.png'
-                      },
-                      {
-                        alt: 'Logo CNRS',
-                        href: '#',
-                        imgUrl: '/LOGO_CNRS_BLEU.png'
-                      },
-                      {
-                        alt: 'Logo LNE',
-                        href: '#',
-                        imgUrl: '/logo-lne.svgz'
-                      },
-                      {
-                        alt: 'Logo DGE',
-                        href: '#',
-                        imgUrl: '/logo_DGE.png'
-                      },
-                      {
-                        alt: 'Logo huggingface',
-                        href: '#',
-                        imgUrl: '/hf-logo-with-title.svg'
-                      }
-                    ]
-                  }}
-                />
+                <Footer />
               </Box>
             </LeaderboardProvider>
           </Router>

frontend/src/components/Footer/Footer.jsx

@@ -1,30 +0,0 @@
-import React from "react";
-import { Box, Typography, Link } from "@mui/material";
-
-const Footer = () => {
-  return (
-    <Box
-      component="footer"
-      sx={{
-        width: "100%",
-        py: 4,
-        textAlign: "center",
-      }}
-    >
-      <Typography variant="body2" color="text.secondary" sx={{ mx: 4 }}>
-        © 2024 Hugging Face - Open LLM Leaderboard - Made with 🤗 by the HF team
-        -{" "}
-        <Link
-          href="https://huggingface.co"
-          target="_blank"
-          rel="noopener noreferrer"
-          color="inherit"
-        >
-          huggingface.co
-        </Link>
-      </Typography>
-    </Box>
-  );
-};
-
-export default Footer;

frontend/src/components/Footer/Footer.tsx

@@ -0,0 +1,91 @@
+import {addFooterTranslations, Footer} from "@codegouvfr/react-dsfr/Footer";
+
+// import { Box, Typography, Link } from "@mui/material";
+
+const footer = () => {
+    <Footer
+                  accessibility="fully compliant"
+                  contentDescription="
+                    L'évaluation des systèmes d'IA est un enjeu stratégique sur lequel la France s'est historiquement démarquée.
+
+                    Ce classement, ou leaderboard, s'inspire directement de l'Open LLM Leaderboard et permet de comparer différents modèles d'IA génératifs à l'aide de jeux de données spécifiquement adaptés aux environnements et à la culture francophones.
+                    "
+                  partnersLogos={{
+                    sub: [
+                      {
+                        alt: 'Logo Inria',
+                        href: '#',
+                        imgUrl: '/inr_logo_rouge.png'
+                      },
+                      {
+                        alt: 'Logo CNRS',
+                        href: '#',
+                        imgUrl: '/LOGO_CNRS_BLEU.png'
+                      },
+                      {
+                        alt: 'Logo LNE',
+                        href: '#',
+                        imgUrl: '/logo-lne.svgz'
+                      },
+                      {
+                        alt: 'Logo DGE',
+                        href: '#',
+                        imgUrl: '/logo_DGE.png'
+                      },
+                      {
+                        alt: 'Logo huggingface',
+                        href: '#',
+                        imgUrl: '/hf-logo-with-title.svg'
+                      }
+                    ]
+                  }}
+                />
+}
+
+addFooterTranslations({
+    lang: "en",
+    messages: {
+        accessibility: "Accessibility",
+        "fully compliant": "Partially compliant",
+
+    }
+});
+
+
+addFooterTranslations({
+    lang: "fr",
+    messages: {
+        accessibility: "Accesibilité",
+        "fully compliant": "Partielle",
+        
+    }
+});
+
+// const Footer = () => {
+//   return (
+//     <Box
+//       component="footer"
+//       sx={{
+//         width: "100%",
+//         py: 4,
+//         textAlign: "center",
+//       }}
+//     >
+//       <Typography variant="body2" color="text.secondary" sx={{ mx: 4 }}>
+//         © 2024 Hugging Face - Open LLM Leaderboard - Made with 🤗 by the HF team
+//         -{" "}
+//         <Link
+//           href="https://huggingface.co"
+//           target="_blank"
+//           rel="noopener noreferrer"
+//           color="inherit"
+//         >
+//           huggingface.co
+//         </Link>
+//       </Typography>
+//     </Box>
+//   );
+// };
+
+
+export default footer;

frontend/src/components/LanguageSelect/LanguageSelect.jsx

@@ -0,0 +1,44 @@
+import React from 'react';import { 
+    LanguageSelect as LanguageSelect_base, 
+    addLanguageSelectTranslations 
+} from "@codegouvfr/react-dsfr/LanguageSelect";
+
+import { useLang, languages} from "i18n";
+
+// NOTE: This component can be used inside or outside of the Header component.
+export function LanguageSelect(props) {
+
+    const { id } = props;
+
+    const { lang, setLang } = useLang();
+
+    return (
+        <LanguageSelect_base
+            id={id}
+            supportedLangs={languages}
+            lang={lang} // "en" or "fr"
+            setLang={setLang}
+            fullNameByLang={{
+                en: "English",
+                fr: "Français"
+            }}
+        />
+    );
+
+}
+
+languages.forEach(lang =>
+    addLanguageSelectTranslations({
+        lang: lang,
+        messages: {
+            "select language": (() => {
+                switch (lang) {
+                    case "en": return "Select language";
+                    /* spell-checker: disable */
+                    case "fr": return "Choisir la langue";
+                    /* spell-checker: enable */
+                }
+            })()
+        }
+    })
+);

frontend/src/i18n.tsx

@@ -0,0 +1,57 @@
+import { createI18nApi, declareComponentKeys } from "i18nifty";
+
+//List the languages you with to support
+export const languages = ["en", "fr"] as const;
+
+//If the user's browser language doesn't match any 
+//of the languages above specify the language to fallback to:  
+export const fallbackLanguage = "en";
+
+export type Language = typeof languages[number];
+
+export type LocalizedString = Parameters<typeof resolveLocalizedString>[0];
+
+export const {
+	useTranslation, 
+	resolveLocalizedString, 
+	useLang, 
+	$lang,
+	useResolveLocalizedString,
+	/** For use outside of React */
+	getTranslation,
+} = createI18nApi<
+    | import ("pages/LeaderboardPage/LeaderboardPage").I18n
+>()(
+    { 
+      languages, 
+      fallbackLanguage
+    },
+    {
+        "en": {
+            "LeaderboardPage": {
+                "greating": ({ who })=> `Hello ${who}`,
+                "how are you": "How are you feeling today?",
+                "learn more": ({ href }) => (
+                    <>
+                        Learn more about 
+                        <a href={href}>this website</a>.
+                    </>
+                )
+            },
+        },
+	/* spell-checker: disable */
+	"fr": {
+            "LeaderboardPage": {
+                "greating": ({ who })=> `Bonjour ${who}`,
+                "how are you": "Comment vous sentez vous au jour d'hui?",
+                "learn more": ({ href }) => (
+                    <>
+                        En savoir plus à propos de  
+                        <a href={href}>ce site web</a>.
+                    </>
+                )
+            },
+        }
+	/* spell-checker: enable */
+    }
+);

frontend/src/main.jsx

@@ -2,8 +2,16 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.jsx'
+import { useLang } from "i18n";
 import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
-startReactDsfr({ defaultColorScheme: "system" });
+
+startReactDsfr({ 
+  defaultColorScheme: "system",
+  useLang: function useLangDsfr() {
+        const { lang } = useLang();
+        return lang;
+  }
+});
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>

frontend/src/pages/LeaderboardPage/{LeaderboardPage.jsx → LeaderboardPage.tsx}

@@ -2,9 +2,9 @@ import { useEffect } from "react";
 import Leaderboard from "./components/Leaderboard/Leaderboard";
 import { Box } from "@mui/material";
 import PageHeader from "../../components/shared/PageHeader";
-import Logo from "../../components/Logo/Logo";
 import { useLeaderboardData } from "./components/Leaderboard/hooks/useLeaderboardData";
 import { useLeaderboard } from "./components/Leaderboard/context/LeaderboardContext";
+import { declareComponentKeys } from "i18nifty";
 
 function LeaderboardPage() {
   const { data, isLoading, error } = useLeaderboardData();
@@ -34,6 +34,7 @@ function LeaderboardPage() {
       </Box> */}
       <PageHeader
         title="Leaderboard"
+        subtitle={""}
         // subtitle={
         //   <>
         //     Comparer les grands modèles de langages {" "}
@@ -47,4 +48,11 @@ function LeaderboardPage() {
   );
 }
 
+const { i18n } = declareComponentKeys<
+| { K: "greating"; P: { who: string; } }
+| "how are you"
+| { K: "learn more"; P: { href: string; }; R: JSX.Element }
+>()({ LeaderboardPage });
+export type I18n = typeof i18n;
+
 export default LeaderboardPage;

frontend/src/pages/LeaderboardPage/components/Leaderboard/components/Filters/SearchBar.jsx

@@ -185,7 +185,7 @@ const SearchBar = ({
         <InputBase
           value={localValue}
           onChange={handleLocalChange}
-          placeholder='Search by model name • try "meta @architecture:llama @license:mit"'
+          placeholder='Recherce par nom de modèle • essayez "meta @architecture:llama @license:mit"'
           sx={{
             flex: 1,
             fontSize: "1rem",
@@ -286,7 +286,7 @@ const SearchBar = ({
                 display: { xs: "none", md: "block" },
               }}
             >
-              Advanced Filters
+              Filtres avancés
             </Typography>
           </Box>
           <InfoIconWithTooltip
@@ -316,8 +316,7 @@ const SearchBar = ({
                 lineHeight: 1.5,
               }}
             >
-              Supports strict search and regex • Use semicolons for multiple
-              terms
+              Supporte la recherche stricte et les expressions régulières • Utilisez des points virgules pour plusieurs termes
             </Typography>
           </Box>
         )}

frontend/tsconfig.app.json

@@ -0,0 +1,29 @@
+{
+    "compilerOptions": {
+      "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+      "target": "ES2020",
+      "useDefineForClassFields": true,
+      "lib": ["ES2020", "DOM", "DOM.Iterable"],
+      "module": "ESNext",
+      "skipLibCheck": true,
+      "baseUrl": "src",
+  
+      /* Bundler mode */
+      "moduleResolution": "bundler",
+      "allowImportingTsExtensions": true,
+      "isolatedModules": true,
+      "moduleDetection": "force",
+      "noEmit": true,
+      "jsx": "react-jsx",
+      "allowJs": true,
+  
+      /* Linting */
+      "strict": true,
+      "noUnusedLocals": true,
+      "noUnusedParameters": true,
+      "noFallthroughCasesInSwitch": true,
+      "noUncheckedSideEffectImports": true
+    },
+    "include": ["src"]
+  }
+  

frontend/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "files": [],
+    "references": [
+      { "path": "./tsconfig.app.json" },
+      { "path": "./tsconfig.node.json" }
+    ]
+  }
+  

frontend/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+      "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+      "target": "ES2022",
+      "lib": ["ES2023"],
+      "module": "ESNext",
+      "skipLibCheck": true,
+  
+      /* Bundler mode */
+      "moduleResolution": "bundler",
+      "allowImportingTsExtensions": true,
+      "isolatedModules": true,
+      "moduleDetection": "force",
+      "noEmit": true,
+  
+      /* Linting */
+      "strict": true,
+      "noUnusedLocals": true,
+      "noUnusedParameters": true,
+      "noFallthroughCasesInSwitch": true,
+      "noUncheckedSideEffectImports": true
+    },
+    "include": ["vite.config.ts"]
+  }
+  

frontend/vite.config.js

@@ -1,9 +1,13 @@
 import { defineConfig } from 'vite'
+import tsconfigPaths from "vite-tsconfig-paths";
 import react from '@vitejs/plugin-react'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    tsconfigPaths()
+ ],
   server: {
     proxy: {
       '/api': {