File size: 11,011 Bytes
970eef1
2a8ebbd
d6b6619
 
970eef1
ffa4ae8
 
 
 
 
 
 
 
 
2a8ebbd
 
83106dd
 
 
 
970eef1
 
ffa4ae8
 
 
 
 
970eef1
 
 
2a8ebbd
970eef1
 
 
2a8ebbd
 
ffa4ae8
970eef1
 
 
2a8ebbd
 
 
 
 
 
 
 
 
ffa4ae8
 
 
 
 
 
 
 
 
 
 
 
 
2a8ebbd
 
 
 
 
 
ffa4ae8
2a8ebbd
970eef1
 
 
 
 
 
 
 
 
 
 
 
 
8e3f969
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ffa4ae8
 
 
 
 
970eef1
 
 
 
 
 
 
 
 
ffa4ae8
 
 
8e3f969
970eef1
8e3f969
ffa4ae8
 
 
 
 
 
 
 
 
 
 
 
 
 
970eef1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d6b6619
 
 
 
 
 
 
 
 
 
 
 
970eef1
 
 
 
2a8ebbd
970eef1
 
 
d6b6619
970eef1
 
 
 
8e3f969
 
970eef1
 
8e3f969
 
 
 
 
970eef1
8e3f969
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
970eef1
 
 
 
8e3f969
970eef1
2a8ebbd
970eef1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2a8ebbd
 
 
970eef1
 
 
 
2a8ebbd
970eef1
 
 
 
83106dd
970eef1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
import React, { useState, useEffect, useRef } from "react";
import { Box, Typography, CircularProgress, Alert, Paper } from "@mui/material";
import { useNavigate, useSearchParams } from "react-router-dom";
import API_CONFIG from "../config/api";

// Temps de simulation en millisecondes pour les documents précalculés
const SIMULATION_DURATION = 20000; // 20 secondes

// Intervalle de changement des messages pour les documents standards vs précalculés
const MESSAGE_CHANGE_INTERVAL = {
  DEFAULT: 20000, // 20 secondes pour documents standards
  PRECALCULATED: 5000, // 5 secondes pour documents précalculés
};

// Starting messages with their timing
const STARTING_MESSAGES = [
  { 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 }) => {
  const [searchParams] = useSearchParams();
  const isDefault =
    isDefaultDocument ||
    ["the-bitter-lesson", "hurricane-faq", "pokemon-guide"].includes(sessionId);
  const [evaluationComplete, setEvaluationComplete] = useState(false);
  const [error, setError] = useState(null);
  const [elapsedTime, setElapsedTime] = useState(0);
  const [startingMessageIndex, setStartingMessageIndex] = useState(0);

  const timerIntervalRef = useRef(null);
  const startTimeRef = useRef(null);
  const startingMessageIntervalRef = useRef(null);
  const pollingIntervalRef = useRef(null);
  const simulationTimeoutRef = useRef(null);

  const navigate = useNavigate();

  // Add effect to handle automatic redirection when evaluation is complete
  useEffect(() => {
    if (evaluationComplete) {
      navigate(`/evaluation-display?session=${sessionId}`);
    }
  }, [evaluationComplete, sessionId, navigate]);

  // Add effect to handle starting messages
  useEffect(() => {
    startingMessageIntervalRef.current = setInterval(
      () => {
        setStartingMessageIndex((prev) => {
          if (prev < STARTING_MESSAGES.length - 1) {
            return prev + 1;
          }
          return prev;
        });
      },
      isDefault
        ? MESSAGE_CHANGE_INTERVAL.PRECALCULATED
        : MESSAGE_CHANGE_INTERVAL.DEFAULT
    );

    return () => {
      if (startingMessageIntervalRef.current) {
        clearInterval(startingMessageIntervalRef.current);
      }
    };
  }, [isDefault]);

  // Start evaluation when component mounts
  useEffect(() => {
    // Set start time
    startTimeRef.current = Date.now();

    // Start timer
    timerIntervalRef.current = setInterval(() => {
      const timeElapsed = Math.floor(
        (Date.now() - startTimeRef.current) / 1000
      );
      setElapsedTime(timeElapsed);
    }, 1000);

    // Gestionnaire pour détecter quand la page redevient visible
    const handleVisibilityChange = () => {
      if (
        document.visibilityState === "visible" &&
        !isDefault &&
        !evaluationComplete
      ) {
        console.log("Page became visible, checking evaluation status...");
        // Force une nouvelle requête pour récupérer l'état d'évaluation
        const checkEvaluationStatus = async () => {
          try {
            const logsResponse = await fetch(
              `${API_CONFIG.BASE_URL}/evaluation-logs/${sessionId}`
            );

            if (logsResponse.ok) {
              const logsResult = await logsResponse.json();
              if (logsResult.is_completed) {
                // Mettre fin à l'évaluation si elle est terminée
                setEvaluationComplete(true);

                // Avancer à la dernière étape des messages
                setStartingMessageIndex(STARTING_MESSAGES.length - 1);

                // Nettoyer les intervalles
                if (pollingIntervalRef.current) {
                  clearInterval(pollingIntervalRef.current);
                }
                if (startingMessageIntervalRef.current) {
                  clearInterval(startingMessageIntervalRef.current);
                }
              } else {
                // Si l'évaluation est toujours en cours, mettre à jour l'étape actuelle
                // basée sur le temps écoulé
                const progress = Math.min(
                  Math.floor(
                    (Date.now() - startTimeRef.current) /
                      MESSAGE_CHANGE_INTERVAL.DEFAULT
                  ),
                  STARTING_MESSAGES.length - 1
                );
                setStartingMessageIndex(progress);
              }
            }
          } catch (error) {
            console.error("Error checking evaluation status:", error);
          }
        };

        checkEvaluationStatus();
      }
    };

    // Ajouter l'écouteur pour le changement de visibilité
    document.addEventListener("visibilitychange", handleVisibilityChange);

    if (isDefault) {
      simulateEvaluation();
    } else {
      startEvaluation();
    }

    // Clean up intervals on unmount
    return () => {
      if (pollingIntervalRef.current) {
        clearInterval(pollingIntervalRef.current);
      }
      if (timerIntervalRef.current) {
        clearInterval(timerIntervalRef.current);
      }
      if (simulationTimeoutRef.current) {
        clearTimeout(simulationTimeoutRef.current);
      }
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, [isDefault, sessionId, evaluationComplete]);

  // Simulate the evaluation process for pre-calculated documents
  const simulateEvaluation = () => {
    // Complete after 20 seconds
    simulationTimeoutRef.current = setTimeout(() => {
      setEvaluationComplete(true);

      if (startingMessageIntervalRef.current) {
        clearInterval(startingMessageIntervalRef.current);
      }

      setStartingMessageIndex(STARTING_MESSAGES.length - 1); // Set to last message
    }, SIMULATION_DURATION);
  };

  // Format elapsed time as HH:MM:SS
  const formatElapsedTime = () => {
    const hours = Math.floor(elapsedTime / 3600);
    const minutes = Math.floor((elapsedTime % 3600) / 60);
    const seconds = elapsedTime % 60;

    return [
      hours.toString().padStart(2, "0"),
      minutes.toString().padStart(2, "0"),
      seconds.toString().padStart(2, "0"),
    ].join(":");
  };

  // Start benchmark evaluation
  const startEvaluation = async () => {
    if (!sessionId) {
      setError("Missing session ID");
      return;
    }

    try {
      // Call API to start evaluation
      const response = await fetch(
        `${API_CONFIG.BASE_URL}/evaluate-benchmark`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            session_id: sessionId,
          }),
        }
      );

      const result = await response.json();

      if (response.ok) {
        // Set up polling to check completion
        pollingIntervalRef.current = setInterval(async () => {
          try {
            const logsResponse = await fetch(
              `${API_CONFIG.BASE_URL}/evaluation-logs/${sessionId}`
            );

            if (logsResponse.ok) {
              const logsResult = await logsResponse.json();

              // Vérifier si l'évaluation est terminée
              if (logsResult.is_completed) {
                setEvaluationComplete(true);

                // Avancer à la dernière étape du message
                setStartingMessageIndex(STARTING_MESSAGES.length - 1);

                // Arrêter les intervalles
                clearInterval(pollingIntervalRef.current);
                if (startingMessageIntervalRef.current) {
                  clearInterval(startingMessageIntervalRef.current);
                }
              } else {
                // Si l'évaluation est toujours en cours, estimer la progression
                // en fonction du temps écoulé
                const elapsedSinceStart = Date.now() - startTimeRef.current;

                // Estimer la progression (en supposant qu'une évaluation prend environ 80 secondes)
                const estimatedTotalTime = 80000; // 80 secondes
                const estimatedProgress = Math.min(
                  elapsedSinceStart / estimatedTotalTime,
                  1
                );

                // Calculer l'étape estimée (0 à STARTING_MESSAGES.length - 1)
                const estimatedStepIndex = Math.min(
                  Math.floor(estimatedProgress * STARTING_MESSAGES.length),
                  STARTING_MESSAGES.length - 1
                );

                // Mettre à jour l'index des messages de démarrage si nécessaire
                if (estimatedStepIndex > startingMessageIndex) {
                  setStartingMessageIndex(estimatedStepIndex);
                }
              }
            }
          } catch (error) {
            console.log("Error polling logs:", error);
            // Ne pas arrêter le polling en cas d'erreurs réseau temporaires
          }
        }, 2000);
      } else {
        setError(result.error || "Benchmark evaluation failed");
      }
    } catch (error) {
      console.error("Error starting evaluation:", error);
      setError("Error connecting to server");
    }
  };

  return (
    <Paper
      elevation={3}
      sx={{
        p: 4,
        mt: 3,
        mb: 3,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        minHeight: 200,
      }}
    >
      {error ? (
        <Alert severity="error" sx={{ width: "100%" }}>
          {error}
        </Alert>
      ) : (
        <>
          {evaluationComplete ? (
            <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">
                {`${STARTING_MESSAGES[startingMessageIndex].message} (${STARTING_MESSAGES[startingMessageIndex].step}/${STARTING_MESSAGES[startingMessageIndex].totalSteps})`}
              </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;