feat(login): add internationalisation to login comonents

frontend/src/components/shared/AuthContainer.jsx

@@ -1,139 +0,0 @@
-import React from "react";
-import {
-  Box,
-  Typography,
-  Button,
-  Chip,
-  Stack,
-  Paper,
-  CircularProgress,
-} from "@mui/material";
-import HFLogo from "../Logo/HFLogo";
-import { useAuth } from "../../hooks/useAuth";
-import LogoutIcon from "@mui/icons-material/Logout";
-import { useNavigate } from "react-router-dom";
-
-function AuthContainer({ actionText = "DO_ACTION" }) {
-  const { isAuthenticated, user, login, logout, loading } = useAuth();
-  const navigate = useNavigate();
-
-  const handleLogout = () => {
-    if (isAuthenticated && logout) {
-      logout();
-      navigate("/", { replace: true });
-      window.location.reload();
-    }
-  };
-
-  if (loading) {
-    return (
-      <Paper
-        elevation={0}
-        sx={{
-          p: 3,
-          mb: 4,
-          border: "1px solid",
-          borderColor: "grey.300",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          gap: 2,
-        }}
-      >
-        <CircularProgress size={24} />
-      </Paper>
-    );
-  }
-
-  if (!isAuthenticated) {
-    return (
-      <Paper
-        elevation={0}
-        sx={{
-          p: 3,
-          mb: 4,
-          border: "1px solid",
-          borderColor: "grey.300",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          gap: 2,
-        }}
-      >
-        <Typography variant="h6" align="center">
-          Login to {actionText}
-        </Typography>
-        <Typography variant="body2" color="text.secondary" align="center">
-          You need to be logged in with your Hugging Face account to{" "}
-          {actionText.toLowerCase()}
-        </Typography>
-        <Button
-          variant="contained"
-          onClick={login}
-          startIcon={
-            <Box
-              sx={{
-                width: 20,
-                height: 20,
-                display: "flex",
-                alignItems: "center",
-              }}
-            >
-              <HFLogo />
-            </Box>
-          }
-          sx={{
-            textTransform: "none",
-            fontWeight: 600,
-            py: 1,
-            px: 2,
-          }}
-        >
-          Sign in with Hugging Face
-        </Button>
-      </Paper>
-    );
-  }
-
-  return (
-    <Paper
-      elevation={0}
-      sx={{ p: 2, border: "1px solid", borderColor: "grey.300", mb: 4 }}
-    >
-      <Stack
-        direction="row"
-        spacing={2}
-        alignItems="center"
-        justifyContent="space-between"
-      >
-        <Stack direction="row" spacing={1} alignItems="center">
-          <Typography variant="body1">
-            Connected as <strong>{user?.username}</strong>
-          </Typography>
-          <Chip
-            label={`Ready to ${actionText}`}
-            color="success"
-            size="small"
-            variant="outlined"
-          />
-        </Stack>
-        <Button
-          variant="contained"
-          onClick={handleLogout}
-          endIcon={<LogoutIcon />}
-          color="primary"
-          sx={{
-            minWidth: 120,
-            height: 36,
-            textTransform: "none",
-            fontSize: "0.9375rem",
-          }}
-        >
-          Logout
-        </Button>
-      </Stack>
-    </Paper>
-  );
-}
-
-export default AuthContainer;

frontend/src/i18n.tsx

@@ -1,4 +1,5 @@
 import { createI18nApi, declareComponentKeys } from "i18nifty";
+import { Typography } from "@mui/material";
 export {declareComponentKeys};
 
 //List the languages you with to support
@@ -21,9 +22,10 @@ export const {
 	/** For use outside of React */
 	getTranslation,
 } = createI18nApi<
-    | import ("pages/LeaderboardPage/LeaderboardPage").I18n
+    | import ("pages/AddModelPage/AddModelPage").I18n
     | import ("components/Header/Header").I18n
     | import ("components/Navigation/Navigation").I18n
+    | import ("components/shared/AuthContainer").I18n
 >()(
     { 
       languages, 
@@ -31,16 +33,6 @@ export const {
     },
     {
         "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>.
-                    </>
-                )
-            },
             "header": {
                 "tagline": "Benchmark for large language models in French",
                 "service": "LLM leaderboard for the French language"
@@ -48,20 +40,25 @@ export const {
             "Navigation": {
                 "submit": "Submit",
                 "about": "About"
+            },
+            "AddModelPage": {
+                "title": "Submit a model for evaluation",
+                "subtitle": "Add your model to the LLM leaderboard for the French language."
+            },
+            "AuthContainer": {
+                "login": "Login to submit a model",
+                "need": "You need to be logged in with your Hugging Face account to submit a model",
+                "logout": "Logout",
+                "button": "Sign in with Hugging Face",
+                "loggedin": ({user}) => (
+                    <Typography variant="body1">
+                        Connected as <strong>{user}</strong>
+                    </Typography>
+                )
             }
         },
 	/* 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>.
-                    </>
-                )
-            },
             "header": {
                 "tagline": "Comparaison de modèles d'IA génératifs sur des jeux de données adaptés à la langue française",
                 "service": "Leaderboard des modèles de langage pour le français"
@@ -69,6 +66,21 @@ export const {
             "Navigation": {
                 "submit": "Soumettre",
                 "about": "A propos"
+            },
+            "AddModelPage": {
+                "title": "Soumettre un modele a l'evaluation",
+                "subtitle": "Ajoutez votre modele au leaderboard des modeles de langage pour le francais"
+            },
+            "AuthContainer": {
+                "login": "Se connecter pour soumettre un modele",
+                "need": "Il vous faut vous connecter avec votre compte Hugging Face pour soumettre un modele",
+                "logout": "Se deconnecter",
+                "button": "Se connecter avec Hugging Face",
+                "loggedin": ({user}) => (
+                    <Typography variant="body1">
+                        Connecte en tant que <strong>{user}</strong>
+                    </Typography>
+                )
             }
         }
 	/* spell-checker: enable */

frontend/src/pages/AddModelPage/AddModelPage.jsx

@@ -1,48 +0,0 @@
-import React from "react";
-import { Box, CircularProgress } from "@mui/material";
-import { useAuth } from "../../hooks/useAuth";
-import PageHeader from "../../components/shared/PageHeader";
-import EvaluationQueues from "./components/EvaluationQueues/EvaluationQueues";
-import ModelSubmissionForm from "./components/ModelSubmissionForm/ModelSubmissionForm";
-import SubmissionGuide from "./components/SubmissionGuide/SubmissionGuide";
-
-function AddModelPage() {
-  const { isAuthenticated, loading, user } = useAuth();
-
-  if (loading) {
-    return (
-      <Box
-        sx={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          height: "100vh",
-        }}
-      >
-        <CircularProgress />
-      </Box>
-    );
-  }
-
-  return (
-    <Box sx={{ width: "100%", maxWidth: 1200, margin: "0 auto", padding: 4 }}>
-      <PageHeader
-        title="Submit a Model for Evaluation"
-        subtitle={
-          <>
-            Add <span style={{ fontWeight: 600 }}>your</span> model to the Open
-            LLM Leaderboard
-          </>
-        }
-      />
-
-      <SubmissionGuide />
-
-      <ModelSubmissionForm user={user} isAuthenticated={isAuthenticated} />
-
-      <EvaluationQueues defaultExpanded={false} />
-    </Box>
-  );
-}
-
-export default AddModelPage;

frontend/src/pages/AddModelPage/components/SubmissionGuide/SubmissionGuide.jsx

@@ -52,6 +52,10 @@ const StepNumber = ({ number }) => (
   </Box>
 );
 
+const TITLE = {
+    "en": "Submission guide",
+    "fr": "Guide de soumission"
+}
 const LOCALIZED_STEPS = {
     STEP1: {
         TITLE: {
@@ -375,7 +379,7 @@ function SubmissionGuide() {
           variant="h6"
           sx={{ fontWeight: 600, color: "text.primary" }}
         >
-          Submission Guide
+          {resolveLocalizedString(TITLE)}
         </Typography>
         <ExpandMoreIcon
           sx={{