Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
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; | |