tfrere's picture
minor design fixes
05964a6
import React, { useState, useEffect, useRef } from "react";
import { Box, Typography, CircularProgress, Alert, Paper } from "@mui/material";
import { useNavigate, useSearchParams } from "react-router-dom";
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
import { useTimer } from "./hooks/useTimer";
import { useEvaluation } from "./hooks/useEvaluation";
import ErrorDisplay from "../common/ErrorDisplay";
// Messages de simulation pour les documents par défaut avec timing personnalisé
const SIMULATION_MESSAGES = [
{
message: "Initializing evaluation environment",
step: 1,
totalSteps: 5,
timing: 0,
}, // Immédiat
{
message: "Finding available model providers",
step: 2,
totalSteps: 5,
timing: 1500,
}, // Après 1.5s
{
message: "Starting evaluation process",
step: 3,
totalSteps: 5,
timing: 3000,
}, // Après 3s
{ message: "Evaluating models", step: 4, totalSteps: 5, timing: 5000 }, // Après 5s
{
message: "Storing evaluation results",
step: 5,
totalSteps: 5,
timing: 7000,
}, // Après 7s
];
// Durée totale pour rediriger à la fin de la simulation
const TOTAL_SIMULATION_DURATION = 8000; // 8 secondes
const BenchmarkEvaluation = ({ sessionId, isDefaultDocument, onComplete }) => {
const [searchParams] = useSearchParams();
const isDefault =
isDefaultDocument ||
["the-bitter-lesson", "hurricane-faq", "pokemon-guide"].includes(sessionId);
const navigate = useNavigate();
const simulationTimeoutsRef = useRef([]);
// États pour la simulation
const [simulationStep, setSimulationStep] = useState(0);
const [simulationComplete, setSimulationComplete] = useState(false);
// Use our custom hooks
const { formatElapsedTime, stopTimer } = useTimer();
const {
error,
evaluationComplete: realComplete,
currentStep,
evaluationStarted,
startEvaluation,
currentStepLabel,
totalSteps,
} = useEvaluation(sessionId, () => {
if (onComplete) {
onComplete();
}
});
// Gérer la simulation pour les documents par défaut
useEffect(() => {
// Seulement exécuter pour les documents par défaut et seulement une fois
if (!isDefault || simulationTimeoutsRef.current.length > 0) return;
console.log("Starting simulation for default document:", sessionId);
// Créer des timeouts pour chaque étape avec les timings personnalisés
for (let i = 1; i < SIMULATION_MESSAGES.length; i++) {
const messageData = SIMULATION_MESSAGES[i];
const timeout = setTimeout(() => {
console.log(`Simulation step ${i + 1}: ${messageData.message}`);
setSimulationStep(i);
}, messageData.timing);
simulationTimeoutsRef.current.push(timeout);
}
// Timeout final pour terminer la simulation
const finalTimeout = setTimeout(() => {
console.log("Simulation complete, redirecting");
setSimulationComplete(true);
if (onComplete) {
onComplete();
}
}, TOTAL_SIMULATION_DURATION);
simulationTimeoutsRef.current.push(finalTimeout);
// Nettoyage au démontage
return () => {
simulationTimeoutsRef.current.forEach(clearTimeout);
};
}, [isDefault, sessionId, onComplete]);
// Handle automatic redirection when evaluation is complete
useEffect(() => {
if (realComplete || simulationComplete) {
navigate(`/evaluation-display?session=${sessionId}`);
}
}, [realComplete, simulationComplete, sessionId, navigate]);
// Start evaluation if not default and not started
useEffect(() => {
if (!isDefault && !evaluationStarted) {
startEvaluation();
}
}, [isDefault, evaluationStarted, startEvaluation]);
// Stop timer when complete
useEffect(() => {
if (realComplete || simulationComplete) {
stopTimer();
}
}, [realComplete, simulationComplete, stopTimer]);
const isComplete = realComplete || simulationComplete;
const currentStepInfo = isDefault
? `${SIMULATION_MESSAGES[simulationStep].message} (${SIMULATION_MESSAGES[simulationStep].step}/${SIMULATION_MESSAGES[simulationStep].totalSteps})`
: `${currentStepLabel} (${currentStep + 1}/${totalSteps})`;
return (
<Paper
elevation={3}
sx={{
p: 8,
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
minHeight: 200,
position: "relative",
}}
>
{/* Temps estimé */}
<Box
sx={{
position: "absolute",
top: 12,
right: 12,
backgroundColor: "rgba(0, 0, 0, 0.04)",
borderRadius: "4px",
px: 1,
py: 0.5,
display: "inline-flex",
alignItems: "center",
}}
>
<Typography
variant="caption"
sx={{
fontSize: "0.675rem",
color: "text.secondary",
fontWeight: 500,
}}
>
Estimated time ~ 1m30s
</Typography>
</Box>
{error ? (
<ErrorDisplay error={error} />
) : (
<>
{isComplete ? (
<Alert severity="success" sx={{ width: "100%", mb: 3 }}>
Evaluation completed successfully!
</Alert>
) : (
<>
<CircularProgress size={60} sx={{ mb: 2 }} />
<Typography variant="h6" component="div" gutterBottom>
Benchmark evaluation...
</Typography>
{/* Step progress indicator */}
<Typography variant="body1" color="text.secondary">
{currentStepInfo}
</Typography>
{/* Timer display */}
<Box
sx={{
display: "flex",
alignItems: "center",
mt: 1,
color: "text.secondary",
opacity: 0.5,
}}
>
<Typography variant="body2">{formatElapsedTime()}</Typography>
</Box>
</>
)}
</>
)}
</Paper>
);
};
export default BenchmarkEvaluation;