update darkmode | update wording

frontend/src/components/BenchmarkCreateForm.jsx

@@ -9,6 +9,7 @@ import {
   Alert,
   Grid,
 } from "@mui/material";
+import { alpha } from "@mui/material/styles";
 import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
 import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
@@ -208,7 +209,7 @@ function BenchmarkCreateForm({ onStartGeneration }) {
                 border:
                   selectedDocument?.id === doc.id
                     ? `2px solid ${theme.palette.primary.main}`
-                    : "2px solid rgba(0, 0, 0, 0.1)",
+                    : `2px solid ${theme.palette.divider}`,
                 "&:hover": {
                   transform: "translateY(-2px)",
                   boxShadow: 3,
@@ -253,8 +254,10 @@ function BenchmarkCreateForm({ onStartGeneration }) {
               ? `2px solid ${theme.palette.primary.main}`
               : isDragging
               ? `2px dashed ${theme.palette.primary.main}`
-              : "2px dashed rgba(0, 0, 0, 0.16)",
-          backgroundColor: isDragging ? "rgba(0, 0, 0, 0.05)" : "transparent",
+              : `2px dashed ${theme.palette.divider}`,
+          backgroundColor: isDragging
+            ? alpha(theme.palette.action.hover, 0.5)
+            : "transparent",
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
@@ -289,23 +292,23 @@ function BenchmarkCreateForm({ onStartGeneration }) {
           </>
         ) : (
           <>
-            <CloudUploadIcon
-              sx={{ fontSize: 50, color: "primary.main", mb: 1 }}
-            />
+            {isLoading ? (
+              <CircularProgress size={50} sx={{ mb: 1 }} />
+            ) : (
+              <CloudUploadIcon
+                sx={{ fontSize: 50, color: "primary.main", mb: 1 }}
+              />
+            )}
             <Typography variant="h6" component="div" gutterBottom>
-              Drag and drop your file here or click to browse
+              {isLoading
+                ? "Uploading your file..."
+                : "Drag and drop your file here or click to browse"}
             </Typography>
             <Typography variant="body2" color="text.secondary">
               Accepted formats: PDF, TXT, HTML, MD
             </Typography>
           </>
         )}
-
-        {isLoading && (
-          <Box sx={{ mt: 2 }}>
-            <CircularProgress size={30} />
-          </Box>
-        )}
       </Box>
 
       <Box sx={{ display: "flex", justifyContent: "center" }}>

frontend/src/components/BenchmarkDisplay.jsx

@@ -17,6 +17,8 @@ import LinkIcon from "@mui/icons-material/Link";
 import DownloadIcon from "@mui/icons-material/Download";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import API_CONFIG from "../config/api";
+import { useThemeMode } from "../hooks/useThemeMode";
+import getTheme from "../config/theme";
 
 /**
  * Component to display benchmark information and evaluation button
@@ -35,6 +37,8 @@ const BenchmarkDisplay = ({
   datasetUrl,
 }) => {
   const [isDownloading, setIsDownloading] = useState(false);
+  const { mode } = useThemeMode();
+  const theme = getTheme(mode);
 
   // Default questions if none provided
   const questions =
@@ -141,7 +145,8 @@ const BenchmarkDisplay = ({
             variant="outlined"
             sx={{
               mb: 2,
-              backgroundColor: "#fafafa",
+              backgroundColor: theme.palette.background.subtle,
+              border: `1px solid ${theme.palette.divider}`,
             }}
           >
             <CardContent>

frontend/src/components/BenchmarkEvaluation.jsx

@@ -14,10 +14,10 @@ const MESSAGE_CHANGE_INTERVAL = {
 
 // Starting messages with their timing
 const STARTING_MESSAGES = [
-  { message: "Initializing evaluation environment...", progress: 0 },
-  { message: "Starting evaluation process...", progress: 27 },
-  { message: "Evaluating models...", progress: 54 },
-  { message: "Storing evaluation results...", progress: 84 },
+  { message: "Initializing evaluation environment...", step: 1, totalSteps: 4 },
+  { message: "Starting evaluation process...", step: 2, totalSteps: 4 },
+  { message: "Evaluating models...", step: 3, totalSteps: 4 },
+  { message: "Storing evaluation results...", step: 4, totalSteps: 4 },
 ];
 
 const BenchmarkEvaluation = ({ sessionId, isDefaultDocument, onComplete }) => {
@@ -213,7 +213,7 @@ const BenchmarkEvaluation = ({ sessionId, isDefaultDocument, onComplete }) => {
 
               {/* Step progress indicator */}
               <Typography variant="body1" color="text.secondary">
-                {`${STARTING_MESSAGES[startingMessageIndex].message} (${STARTING_MESSAGES[startingMessageIndex].progress}%)`}
+                {`${STARTING_MESSAGES[startingMessageIndex].message} (${STARTING_MESSAGES[startingMessageIndex].step}/${STARTING_MESSAGES[startingMessageIndex].totalSteps})`}
               </Typography>
 
               {/* Timer display */}

frontend/src/components/BenchmarkGenerator.jsx

@@ -26,9 +26,9 @@ const STEP_LABELS = {
   upload_ingest_to_hub: "Upload to Hub",
   summarization: "Summarization",
   chunking: "Chunking",
-  single_shot_question_generation: "Single-shot QG",
-  multi_hop_question_generation: "Multi-hop QG",
-  lighteval: "LightEval",
+  single_shot_question_generation: "Question generation",
+  multi_hop_question_generation: "Question generation",
+  lighteval: "Saving results",
 };
 
 // Simulated log messages for pre-calculated documents
@@ -402,22 +402,19 @@ const BenchmarkGenerator = ({ sessionId, isDefaultDocument, onComplete }) => {
 
     // If there's no active step yet
     if (currentStepIndex === 0 && completedSteps.length === 0) {
-      return `Starting... (0%)`;
+      return `Starting (0/${totalSteps})`;
     }
 
     // If all steps are completed
     if (currentStepIndex >= totalSteps) {
-      return `Complete (100%)`;
+      return `Complete (${totalSteps}/${totalSteps})`;
     }
 
-    // Calculate percentage
-    const percentage = Math.round((currentStepIndex / totalSteps) * 100);
-
     // Get current step name
     const currentStepName =
       STEP_LABELS[BENCHMARK_STEPS[currentStepIndex]] || "Processing";
 
-    return `${currentStepName} (${percentage}%)`;
+    return `${currentStepName} (${currentStepIndex}/${totalSteps})`;
   };
 
   // Format elapsed time in HH:MM:SS

frontend/src/components/ExternalLinks.jsx

@@ -2,8 +2,13 @@ import React from "react";
 import { Box, Typography, IconButton, Tooltip } from "@mui/material";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import ShareIcon from "@mui/icons-material/Share";
+import DarkModeOutlinedIcon from "@mui/icons-material/DarkModeOutlined";
+import LightModeOutlinedIcon from "@mui/icons-material/LightModeOutlined";
+import { useThemeMode } from "../hooks/useThemeMode";
 
 const ExternalLinks = () => {
+  const { mode, toggleTheme } = useThemeMode();
+
   const handleShare = async () => {
     try {
       await navigator.share({
@@ -72,22 +77,43 @@ const ExternalLinks = () => {
           <OpenInNewIcon sx={{ fontSize: "0.75rem", ml: 0.5, opacity: 0.6 }} />
         </a>
       </Typography>
-      <Tooltip title="Share">
-        <IconButton
-          onClick={handleShare}
-          size="small"
-          sx={{
-            ml: 1,
-            color: "inherit",
-            opacity: 0.7,
-            "&:hover": {
-              opacity: 1,
-            },
-          }}
-        >
-          <ShareIcon fontSize="small" />
-        </IconButton>
-      </Tooltip>
+      <Box sx={{ display: "flex", alignItems: "center" }}>
+        <Tooltip title="Share">
+          <IconButton
+            onClick={handleShare}
+            size="small"
+            sx={{
+              color: "inherit",
+              opacity: 0.7,
+              "&:hover": {
+                opacity: 1,
+              },
+            }}
+          >
+            <ShareIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title={mode === "light" ? "Mode sombre" : "Mode clair"}>
+          <IconButton
+            onClick={toggleTheme}
+            size="small"
+            sx={{
+              ml: 1,
+              color: "inherit",
+              opacity: 0.7,
+              "&:hover": {
+                opacity: 1,
+              },
+            }}
+          >
+            {mode === "light" ? (
+              <DarkModeOutlinedIcon fontSize="small" />
+            ) : (
+              <LightModeOutlinedIcon fontSize="small" />
+            )}
+          </IconButton>
+        </Tooltip>
+      </Box>
     </Box>
   );
 };

frontend/src/hooks/useThemeMode.js

@@ -1,28 +1,61 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, createContext, useContext } from "react";
 
-export const useThemeMode = () => {
+// Créer un contexte pour le thème
+const ThemeModeContext = createContext();
+
+// Provider pour le contexte du thème
+export const ThemeModeProvider = ({ children }) => {
   // Get system preference
   const getSystemPreference = () => {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
   };
 
-  // Initialize theme mode from system preference
-  const [mode, setMode] = useState(getSystemPreference);
+  // Essayer de récupérer le mode depuis localStorage ou utiliser la préférence système
+  const getSavedTheme = () => {
+    const savedTheme = localStorage.getItem("theme-mode");
+    return savedTheme || getSystemPreference();
+  };
 
-  // Listen to system preference changes
+  // Initialize theme mode from saved or system preference
+  const [mode, setMode] = useState(getSavedTheme);
+
+  // Listen to system preference changes if no saved preference
   useEffect(() => {
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handleChange = (e) => {
-      setMode(e.matches ? 'dark' : 'light');
+      // Only change if no user preference is saved
+      if (!localStorage.getItem("theme-mode")) {
+        setMode(e.matches ? "dark" : "light");
+      }
     };
- 
-    mediaQuery.addEventListener('change', handleChange);
-    return () => mediaQuery.removeEventListener('change', handleChange);
+
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
   }, []);
 
+  // Save theme preference to localStorage when it changes
+  useEffect(() => {
+    localStorage.setItem("theme-mode", mode);
+  }, [mode]);
+
   const toggleTheme = () => {
-    setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+    setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
   };
 
-  return { mode, toggleTheme };
-}; 
+  return (
+    <ThemeModeContext.Provider value={{ mode, toggleTheme }}>
+      {children}
+    </ThemeModeContext.Provider>
+  );
+};
+
+// Hook pour utiliser le contexte du thème
+export const useThemeMode = () => {
+  const context = useContext(ThemeModeContext);
+  if (context === undefined) {
+    throw new Error("useThemeMode must be used within a ThemeModeProvider");
+  }
+  return context;
+};

frontend/src/index.js

@@ -1,6 +1,11 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
+import { ThemeModeProvider } from "./hooks/useThemeMode";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(<App />);
+root.render(
+  <ThemeModeProvider>
+    <App />
+  </ThemeModeProvider>
+);

frontend/src/pages/BenchmarkDisplayPage.jsx

@@ -4,6 +4,8 @@ import { useNavigate, useSearchParams, Navigate } from "react-router-dom";
 import Intro from "../components/Intro";
 import BenchmarkDisplay from "../components/BenchmarkDisplay";
 import API_CONFIG from "../config/api";
+import { useThemeMode } from "../hooks/useThemeMode";
+import getTheme from "../config/theme";
 
 function BenchmarkDisplayPage() {
   const navigate = useNavigate();
@@ -13,6 +15,8 @@ function BenchmarkDisplayPage() {
   const [datasetUrl, setDatasetUrl] = useState(null);
   const [isValidSession, setIsValidSession] = useState(true);
   const [isLoading, setIsLoading] = useState(true);
+  const { mode } = useThemeMode();
+  const theme = getTheme(mode);
 
   useEffect(() => {
     console.log("BenchmarkDisplayPage useEffect - sessionId:", sessionId);
@@ -133,10 +137,10 @@ function BenchmarkDisplayPage() {
       ) : (
         <Box
           sx={{
-            border: "1px solid rgba(0, 0, 0, 0.12)",
+            border: `1px solid ${theme.palette.divider}`,
             borderRadius: 2,
             p: 4,
-            bgcolor: "white",
+            bgcolor: "background.paper",
           }}
         >
           <BenchmarkDisplay

frontend/src/pages/EvaluationDisplayPage.jsx

@@ -3,12 +3,16 @@ import { Box, CircularProgress } from "@mui/material";
 import { useSearchParams, Navigate } from "react-router-dom";
 import Intro from "../components/Intro";
 import EvaluationDisplay from "../components/EvaluationDisplay";
+import { useThemeMode } from "../hooks/useThemeMode";
+import getTheme from "../config/theme";
 
 function EvaluationDisplayPage() {
   const [searchParams] = useSearchParams();
   const sessionId = searchParams.get("session");
   const [isValidSession, setIsValidSession] = useState(true);
   const [isLoading, setIsLoading] = useState(true);
+  const { mode } = useThemeMode();
+  const theme = getTheme(mode);
 
   useEffect(() => {
     if (!sessionId) {
@@ -64,10 +68,10 @@ function EvaluationDisplayPage() {
       ) : (
         <Box
           sx={{
-            border: "1px solid rgba(0, 0, 0, 0.12)",
+            border: `1px solid ${theme.palette.divider}`,
             borderRadius: 2,
             p: 4,
-            bgcolor: "white",
+            bgcolor: "background.paper",
           }}
         >
           <EvaluationDisplay sessionId={sessionId} />

frontend/src/pages/HomePage.jsx

@@ -3,9 +3,13 @@ import { Box } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import Intro from "../components/Intro";
 import BenchmarkCreateForm from "../components/BenchmarkCreateForm";
+import { useThemeMode } from "../hooks/useThemeMode";
+import getTheme from "../config/theme";
 
 function HomePage() {
   const navigate = useNavigate();
+  const { mode } = useThemeMode();
+  const theme = getTheme(mode);
 
   const handleStartGeneration = (sid, isDefaultDocument) => {
     navigate(
@@ -20,10 +24,10 @@ function HomePage() {
       <Intro />
       <Box
         sx={{
-          border: "1px solid rgba(0, 0, 0, 0.12)",
+          border: `1px solid ${theme.palette.divider}`,
           borderRadius: 2,
           p: 4,
-          bgcolor: "white",
+          bgcolor: "background.paper",
         }}
       >
         <BenchmarkCreateForm onStartGeneration={handleStartGeneration} />