Front update 2 (#6)

* Add Git LFS for PNG files

* Remove simulation images (not needed for deployment)

* Add HF Space metadata to README

* Add HF Space YAML metadata to README

* Translate all French text to English in frontend

- Translate comments in gifGenerator.ts
- Translate comments in jsonExporter.ts
- Translate comments in useJsonExporter.ts
- Translate error messages to English

* Translate remaining French comments to English in frontend

* Translate last French comments in StepCard.tsx

.gitattributes

@@ -0,0 +1 @@
+*.png filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,3 +1,12 @@
+---
+title: CUA2 - Computer Use Agent 2
+emoji: 🤖
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+pinned: false
+---
+
 # CUA2 - Computer Use Agent 2
 
 An AI-powered automation interface featuring real-time agent task processing, VNC streaming, and step-by-step execution visualization.

cua2-front/src/components/steps/ConnectionStepCard.tsx

@@ -3,7 +3,7 @@ import { Card, CardContent, Box, Typography, CircularProgress } from '@mui/mater
 import CableIcon from '@mui/icons-material/Cable';
 import { keyframes } from '@mui/system';
 
-// Animation de pulsation pour le border
+// Border pulse animation
 const borderPulse = keyframes`
   0%, 100% {
     border-color: rgba(79, 134, 198, 0.4);
@@ -15,7 +15,7 @@ const borderPulse = keyframes`
   }
 `;
 
-// Animation de pulsation pour le fond
+// Background pulse animation
 const backgroundPulse = keyframes`
   0%, 100% {
     background-color: rgba(79, 134, 198, 0.03);
@@ -54,7 +54,7 @@ export const ConnectionStepCard: React.FC<ConnectionStepCardProps> = ({ isConnec
       }}
     >
       <CardContent sx={{ p: 1.5, '&:last-child': { pb: 1.5 }, position: 'relative', zIndex: 1 }}>
-        {/* Header avec spinner ou check */}
+        {/* Header with spinner or check */}
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
           <Box
             sx={{

cua2-front/src/components/steps/StepCard.tsx

@@ -30,11 +30,11 @@ export const StepCard: React.FC<StepCardProps> = ({ step, index, isLatest = fals
   };
 
   const handleAccordionClick = (event: React.MouseEvent) => {
-    event.stopPropagation(); // Empêcher la propagation pour ne pas sélectionner la step
+    event.stopPropagation(); // Prevent propagation to avoid selecting the step
   };
 
   const handleVote = async (event: React.MouseEvent, vote: 'like' | 'dislike') => {
-    event.stopPropagation(); // Empêcher la propagation pour ne pas sélectionner la step
+    event.stopPropagation(); // Prevent propagation to avoid selecting the step
 
     if (isVoting) return;
 

cua2-front/src/components/steps/StepsList.tsx

@@ -59,13 +59,13 @@ export const StepsList: React.FC<StepsListProps> = ({ trace }) => {
   // - Remains visible during the entire agent processing
   // - Hides only when agent stops OR a finalStep exists
   useEffect(() => {
-    // Si le stream démarre vraiment (isAgentProcessing = true et PAS en train de se connecter)
-    // Et pas encore de startTime enregistré
+    // If stream really starts (isAgentProcessing = true and NOT connecting)
+    // And no startTime recorded yet
     if (isAgentProcessing && !isConnectingToE2B && !streamStartTimeRef.current) {
       streamStartTimeRef.current = Date.now();
     }
 
-    // Si l'agent s'arrête OU qu'on a un finalStep, reset et cacher
+    // If agent stops OR we have a finalStep, reset and hide
     if (!isAgentProcessing || finalStep) {
       streamStartTimeRef.current = null;
       setShowThinkingCard(false);
@@ -83,7 +83,7 @@ export const StepsList: React.FC<StepsListProps> = ({ trace }) => {
         clearTimeout(thinkingTimeoutRef.current);
       }
 
-      // Calculer le temps écoulé depuis le début du stream
+      // Calculate elapsed time since stream started
       const elapsedTime = Date.now() - streamStartTimeRef.current;
       const remainingTime = Math.max(0, 5000 - elapsedTime);
 

cua2-front/src/components/steps/ThinkingStepCard.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Card, CardContent, Box, Typography, CircularProgress } from '@mui/material';
 import { keyframes } from '@mui/system';
 
-// Animation de pulsation pour le border
+// Border pulse animation
 const borderPulse = keyframes`
   0%, 100% {
     border-color: rgba(79, 134, 198, 0.4);
@@ -14,7 +14,7 @@ const borderPulse = keyframes`
   }
 `;
 
-// Animation de pulsation pour le fond
+// Background pulse animation
 const backgroundPulse = keyframes`
   0%, 100% {
     background-color: rgba(79, 134, 198, 0.03);
@@ -50,7 +50,7 @@ export const ThinkingStepCard: React.FC = () => {
       }}
     >
       <CardContent sx={{ p: 1.5, '&:last-child': { pb: 1.5 }, position: 'relative', zIndex: 1 }}>
-        {/* Header avec spinner */}
+        {/* Header with spinner */}
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
           <Box
             sx={{

cua2-front/src/components/timeline/Timeline.tsx

@@ -131,7 +131,7 @@ export const Timeline: React.FC<TimelineProps> = ({ metadata, isRunning }) => {
               content: '""',
               position: 'absolute',
               left: "15px",
-              // Calculer la largeur pour couvrir tous les steps (200 steps * (40px minWidth + 12px gap))
+              // Calculate width to cover all steps (200 steps * (40px minWidth + 12px gap))
               width: `calc(${metadata.maxSteps} * (40px + 12px))`,
               top: '17.5px',
               transform: 'translateY(-50%)',
@@ -157,7 +157,7 @@ export const Timeline: React.FC<TimelineProps> = ({ metadata, isRunning }) => {
                 zIndex: 1,
               }}
             >
-              {/* Cercle blanc en arrière-plan pour cacher la ligne */}
+              {/* White circle background to hide the line */}
               <Box
                 sx={{
                   position: 'relative',
@@ -166,7 +166,7 @@ export const Timeline: React.FC<TimelineProps> = ({ metadata, isRunning }) => {
                   justifyContent: 'center',
                 }}
               >
-                {/* Fond blanc/background pour cacher la ligne */}
+                {/* White background to hide the line */}
                 <Box
                   sx={{
                     position: 'absolute',
@@ -239,7 +239,7 @@ export const Timeline: React.FC<TimelineProps> = ({ metadata, isRunning }) => {
                   } : {},
                 }}
               >
-                {/* Cercle blanc en arrière-plan pour cacher la ligne */}
+                {/* White circle background to hide the line */}
                 <Box
                   sx={{
                     position: 'relative',
@@ -248,7 +248,7 @@ export const Timeline: React.FC<TimelineProps> = ({ metadata, isRunning }) => {
                     justifyContent: 'center',
                   }}
                 >
-                  {/* Fond blanc/background pour cacher la ligne */}
+                  {/* White background to hide the line */}
                   <Box
                     sx={{
                       position: 'absolute',
@@ -338,7 +338,7 @@ export const Timeline: React.FC<TimelineProps> = ({ metadata, isRunning }) => {
                 },
               }}
             >
-              {/* Cercle blanc en arrière-plan pour cacher la ligne */}
+              {/* White circle background to hide the line */}
               <Box
                 sx={{
                   position: 'relative',
@@ -347,7 +347,7 @@ export const Timeline: React.FC<TimelineProps> = ({ metadata, isRunning }) => {
                   justifyContent: 'center',
                 }}
               >
-                {/* Fond blanc/background pour cacher la ligne */}
+                {/* White background to hide the line */}
                 <Box
                   sx={{
                     position: 'absolute',

cua2-front/src/hooks/useJsonExporter.ts

@@ -13,7 +13,7 @@ interface UseJsonExporterReturn {
 }
 
 /**
- * Hook personnalisé pour exporter et télécharger une trace en JSON
+ * Custom hook to export and download a trace as JSON
  */
 export const useJsonExporter = ({
   trace,

cua2-front/src/services/gifGenerator.ts

@@ -2,7 +2,7 @@ import gifshot from 'gifshot';
 
 export interface GifGenerationOptions {
   images: string[];
-  interval?: number; // Durée de chaque frame en secondes
+  interval?: number; // Duration of each frame in seconds
   gifWidth?: number;
   gifHeight?: number;
   quality?: number;
@@ -10,18 +10,18 @@ export interface GifGenerationOptions {
 
 export interface GifGenerationResult {
   success: boolean;
-  image?: string; // Data URL du GIF
+  image?: string; // GIF data URL
   error?: string;
 }
 
 /**
- * Ajoute un compteur d'étapes sur une image
- * @param imageSrc Source de l'image (base64 ou URL)
- * @param stepNumber Numéro de l'étape
- * @param totalSteps Nombre total d'étapes
- * @param width Largeur de l'image
- * @param height Hauteur de l'image
- * @returns Promesse résolue avec l'image modifiée en base64
+ * Add step counter to an image
+ * @param imageSrc Image source (base64 or URL)
+ * @param stepNumber Step number
+ * @param totalSteps Total number of steps
+ * @param width Image width
+ * @param height Image height
+ * @returns Promise resolved with modified image in base64
  */
 const addStepCounter = async (
   imageSrc: string,
@@ -45,10 +45,10 @@ const addStepCounter = async (
         return;
       }
 
-      // Dessiner l'image
+      // Draw the image
       ctx.drawImage(img, 0, 0, width, height);
 
-      // Configurer le style du compteur
+      // Configure counter style
       const fontSize = Math.max(12, Math.floor(height * 0.08));
       const padding = Math.max(6, Math.floor(height * 0.03));
       const text = `${stepNumber}/${totalSteps}`;
@@ -58,11 +58,11 @@ const addStepCounter = async (
       const textWidth = textMetrics.width;
       const textHeight = fontSize;
 
-      // Position en bas à droite
+      // Position at bottom right
       const x = width - textWidth - padding * 2;
       const y = height - padding * 2;
 
-      // Dessiner un rectangle semi-transparent pour la lisibilité
+      // Draw semi-transparent rectangle for readability
       ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
       ctx.fillRect(
         x - padding,
@@ -71,12 +71,12 @@ const addStepCounter = async (
         textHeight + padding * 2
       );
 
-      // Dessiner le texte en noir
+      // Draw black text
       ctx.fillStyle = '#000000';
       ctx.textBaseline = 'top';
       ctx.fillText(text, x, y - textHeight);
 
-      // Convertir le canvas en base64
+      // Convert canvas to base64
       resolve(canvas.toDataURL('image/png'));
     };
 
@@ -89,16 +89,16 @@ const addStepCounter = async (
 };
 
 /**
- * Génère un GIF à partir d'une liste d'images (base64 ou URLs)
- * @param options Options de génération du GIF
- * @returns Promesse résolue avec le résultat de la génération
+ * Generate a GIF from a list of images (base64 or URLs)
+ * @param options GIF generation options
+ * @returns Promise resolved with generation result
  */
 export const generateGif = async (
   options: GifGenerationOptions
 ): Promise<GifGenerationResult> => {
   const {
     images,
-    interval = 1.5, // 1.5 secondes par frame par défaut
+    interval = 1.5, // 1.5 seconds per frame by default
     gifWidth = 400,
     gifHeight = 200,
     quality = 10,
@@ -107,12 +107,12 @@ export const generateGif = async (
   if (!images || images.length === 0) {
     return {
       success: false,
-      error: 'Aucune image fournie pour générer le GIF',
+      error: 'No images provided to generate GIF',
     };
   }
 
   try {
-    // Ajouter le compteur sur chaque image
+    // Add counter to each image
     const imagesWithCounter = await Promise.all(
       images.map((img, index) =>
         addStepCounter(img, index + 1, images.length, gifWidth, gifHeight)
@@ -134,7 +134,7 @@ export const generateGif = async (
           if (obj.error) {
             resolve({
               success: false,
-              error: obj.errorMsg || 'Erreur lors de la génération du GIF',
+              error: obj.errorMsg || 'Error during GIF generation',
             });
           } else {
             resolve({
@@ -148,15 +148,15 @@ export const generateGif = async (
   } catch (error) {
     return {
       success: false,
-      error: error instanceof Error ? error.message : 'Erreur inconnue',
+      error: error instanceof Error ? error.message : 'Unknown error',
     };
   }
 };
 
 /**
- * Télécharge un GIF (data URL) avec un nom de fichier
- * @param dataUrl Data URL du GIF
- * @param filename Nom du fichier à télécharger
+ * Download a GIF (data URL) with a filename
+ * @param dataUrl GIF data URL
+ * @param filename Filename to download
  */
 export const downloadGif = (dataUrl: string, filename: string = 'trace-replay.gif') => {
   const link = document.createElement('a');

cua2-front/src/services/jsonExporter.ts

@@ -31,7 +31,7 @@ export const exportTraceToJson = (
       inputTokensUsed: step.inputTokensUsed,
       outputTokensUsed: step.outputTokensUsed,
       step_evaluation: step.step_evaluation,
-      // Ne pas inclure l'image base64 pour réduire la taille du JSON
+      // Don't include base64 image to reduce JSON size
       hasImage: !!step.image,
     })),
     exportedAt: new Date().toISOString(),
@@ -41,9 +41,9 @@ export const exportTraceToJson = (
 };
 
 /**
- * Télécharge un JSON avec un nom de fichier
- * @param jsonString String JSON à télécharger
- * @param filename Nom du fichier à télécharger
+ * Download a JSON with a filename
+ * @param jsonString JSON string to download
+ * @param filename Filename to download
  */
 export const downloadJson = (jsonString: string, filename: string = 'trace.json') => {
   const blob = new Blob([jsonString], { type: 'application/json' });