Update static/js/websocket_trainer.js

static/js/websocket_trainer.js

@@ -1,330 +1,331 @@
-// Assume socket.io client is already included in the HTML.
-// For standalone testing, you might connect like this:
-// const socket = io.connect('http://localhost:5000'); 
-const socket = io();
-
-// --- Global Variables ---
-let currentExerciseType = null;
-let videoStream = null;
-let isSessionActive = false;
-let animationFrameId = null;
-
-// --- HTML Element References (will be defined in HTML) ---
-const videoElement = document.getElementById('videoElement');
-const canvasElement = document.createElement('canvas'); // Offscreen canvas
-const startButton = document.getElementById('startButton');
-const stopButton = document.getElementById('stopButton');
-const exerciseTypeSelect = document.getElementById('exerciseTypeSelect');
-
-// UI Displays for feedback
-const repsDisplay = document.getElementById('repsDisplay'); // For general rep count
-const feedbackDisplay = document.getElementById('feedbackDisplay'); // For general feedback
-const stageDisplay = document.getElementById('stageDisplay'); // For exercise stage (e.g., "up", "down")
-
-// Specific displays for Hammer Curl (as it has left/right)
-const repsLeftDisplay = document.getElementById('repsLeftDisplay');
-const repsRightDisplay = document.getElementById('repsRightDisplay');
-const feedbackLeftDisplay = document.getElementById('feedbackLeftDisplay');
-const feedbackRightDisplay = document.getElementById('feedbackRightDisplay');
-const stageLeftDisplay = document.getElementById('stageLeftDisplay');
-const stageRightDisplay = document.getElementById('stageRightDisplay');
-const angleDisplay = document.getElementById('angleDisplay'); // General angle display
-
-// --- Utility Functions ---
-function clearUIFeedback() {
-    if (repsDisplay) repsDisplay.textContent = 'Reps: 0';
-    if (feedbackDisplay) feedbackDisplay.textContent = 'Feedback: -';
-    if (stageDisplay) stageDisplay.textContent = 'Stage: -';
-    if (angleDisplay) angleDisplay.textContent = 'Angle: -';
-
-    if (repsLeftDisplay) repsLeftDisplay.textContent = 'Reps Left: 0';
-    if (repsRightDisplay) repsRightDisplay.textContent = 'Reps Right: 0';
-    if (feedbackLeftDisplay) feedbackLeftDisplay.textContent = 'Feedback Left: -';
-    if (feedbackRightDisplay) feedbackRightDisplay.textContent = 'Feedback Right: -';
-    if (stageLeftDisplay) stageLeftDisplay.textContent = 'Stage Left: -';
-    if (stageRightDisplay) stageRightDisplay.textContent = 'Stage Right: -';
+document.addEventListener('DOMContentLoaded', () => {
+    const videoElement = document.getElementById('userVideo');
+    const canvasElement = document.createElement('canvas'); // Offscreen canvas
+    const context = canvasElement.getContext('2d');
+
+    const startButton = document.getElementById('startTrainerBtn');
+    const stopButton = document.getElementById('stopTrainerBtn');
+    const exerciseTypeSelect = document.getElementById('exerciseType');
+
+    const repsDisplay = document.getElementById('repsDisplay');
+    const stageDisplay = document.getElementById('stageDisplay');
+    const feedbackDisplay = document.getElementById('feedbackDisplay');
+    const angleLeftDisplay = document.getElementById('angleLeftDisplay');
+    const angleRightDisplay = document.getElementById('angleRightDisplay');
+
+    const repsLeftHcDisplay = document.getElementById('repsLeftHc');
+    const repsRightHcDisplay = document.getElementById('repsRightHc');
+    const stageLeftHcDisplay = document.getElementById('stageLeftHc');
+    const stageRightHcDisplay = document.getElementById('stageRightHc');
+    const feedbackLeftHcDisplay = document.getElementById('feedbackLeftHc');
+    const feedbackRightHcDisplay = document.getElementById('feedbackRightHc');
+    const angleLeftCurlHcDisplay = document.getElementById('angleLeftCurlHc');
+    const angleRightCurlHcDisplay = document.getElementById('angleRightCurlHc');
+
+    const squatPushupUIDiv = document.getElementById('squatPushupUI');
+    const hammerCurlUIDiv = document.getElementById('hammerCurlUI');
     
-    // Hide or show elements based on exercise type if necessary
-    const hammerCurlElements = document.querySelectorAll('.hammer-curl-specific');
-    hammerCurlElements.forEach(el => el.style.display = 'none');
-    const genericElements = document.querySelectorAll('.generic-exercise-specific');
-    genericElements.forEach(el => el.style.display = 'block');
-}
-
-function updateGenericUI(data) {
-    if (repsDisplay) repsDisplay.textContent = `Reps: ${data.counter || 0}`;
-    if (feedbackDisplay) feedbackDisplay.textContent = `Feedback: ${data.feedback || '-'}`;
-    if (stageDisplay) stageDisplay.textContent = `Stage: ${data.stage || '-'}`;
-    if (angleDisplay && data.angle_left !== undefined && data.angle_right !== undefined) {
-        angleDisplay.textContent = `Angles L: ${Math.round(data.angle_left)}, R: ${Math.round(data.angle_right)}`;
-    } else if (angleDisplay && data.angle_body_left !== undefined && data.angle_body_right !== undefined) {
-        angleDisplay.textContent = `Body Angles L: ${Math.round(data.angle_body_left)}, R: ${Math.round(data.angle_body_right)}`;
+    const apiStatusDisplay = document.getElementById('apiStatus'); // Assuming this is still used for general status
+    const sessionIdDisplay = document.getElementById('sessionIdDisplay'); // Assuming this is still used
+
+    let socket = null;
+    let currentExerciseType = '';
+    let isSessionActive = false;
+    let animationFrameId = null;
+    let stream = null; // To keep track of the media stream
+
+    const logger = {
+        log: (message) => console.log(`[Trainer Log] ${message}`),
+        error: (message) => console.error(`[Trainer Error] ${message}`),
+        info: (message) => console.info(`[Trainer Info] ${message}`)
+    };
+
+    logger.log("WebSocket trainer script loaded. Waiting for DOM and user interaction.");
+
+    function setupUIForExercise(exerciseType) {
+        if (exerciseType === 'hammer_curl') {
+            if (squatPushupUIDiv) squatPushupUIDiv.style.display = 'none';
+            if (hammerCurlUIDiv) hammerCurlUIDiv.style.display = 'block';
+        } else {
+            if (squatPushupUIDiv) squatPushupUIDiv.style.display = 'block';
+            if (hammerCurlUIDiv) hammerCurlUIDiv.style.display = 'none';
+        }
     }
-}
-
-function updateHammerCurlUI(data) {
-    if (repsLeftDisplay) repsLeftDisplay.textContent = `Reps Left: ${data.counter_left || 0}`;
-    if (repsRightDisplay) repsRightDisplay.textContent = `Reps Right: ${data.counter_right || 0}`;
-    if (feedbackLeftDisplay) feedbackLeftDisplay.textContent = `Feedback Left: ${data.feedback_left || '-'}`;
-    if (feedbackRightDisplay) feedbackRightDisplay.textContent = `Feedback Right: ${data.feedback_right || '-'}`;
-    if (stageLeftDisplay) stageLeftDisplay.textContent = `Stage Left: ${data.stage_left || '-'}`;
-    if (stageRightDisplay) stageRightDisplay.textContent = `Stage Right: ${data.stage_right || '-'}`;
-    if (angleDisplay && data.angle_left_curl !== undefined && data.angle_right_curl !== undefined) {
-        angleDisplay.textContent = `Curl Angles L: ${Math.round(data.angle_left_curl)}, R: ${Math.round(data.angle_right_curl)}`;
+    
+    function updateGenericUI(data) {
+        if (repsDisplay) repsDisplay.textContent = data.counter !== undefined ? data.counter : 'N/A';
+        if (stageDisplay) stageDisplay.textContent = data.stage || 'N/A';
+        if (feedbackDisplay) feedbackDisplay.textContent = data.feedback || 'N/A';
+        if (angleLeftDisplay) angleLeftDisplay.textContent = data.angle_left !== undefined ? data.angle_left.toFixed(2) : 'N/A';
+        if (angleRightDisplay) angleRightDisplay.textContent = data.angle_right !== undefined ? data.angle_right.toFixed(2) : 'N/A';
     }
-}
-
-function setupUIForExercise(exerciseType) {
-    const hammerCurlElements = document.querySelectorAll('.hammer-curl-specific');
-    const genericElements = document.querySelectorAll('.generic-exercise-specific');
-
-    if (exerciseType === 'hammer_curl') {
-        hammerCurlElements.forEach(el => el.style.display = 'block'); // or 'inline', 'flex' etc.
-        genericElements.forEach(el => el.style.display = 'none');
-    } else {
-        hammerCurlElements.forEach(el => el.style.display = 'none');
-        genericElements.forEach(el => el.style.display = 'block'); // or 'inline', 'flex' etc.
+
+    function updateHammerCurlUI(data) {
+        if (repsLeftHcDisplay) repsLeftHcDisplay.textContent = data.counter_left !== undefined ? data.counter_left : 'N/A';
+        if (repsRightHcDisplay) repsRightHcDisplay.textContent = data.counter_right !== undefined ? data.counter_right : 'N/A';
+        if (stageLeftHcDisplay) stageLeftHcDisplay.textContent = data.stage_left || 'N/A';
+        if (stageRightHcDisplay) stageRightHcDisplay.textContent = data.stage_right || 'N/A';
+        if (feedbackLeftHcDisplay) feedbackLeftHcDisplay.textContent = data.feedback_left || 'N/A';
+        if (feedbackRightHcDisplay) feedbackRightHcDisplay.textContent = data.feedback_right || 'N/A';
+        if (angleLeftCurlHcDisplay) angleLeftCurlHcDisplay.textContent = data.angle_left_curl !== undefined ? data.angle_left_curl.toFixed(2) : 'N/A';
+        if (angleRightCurlHcDisplay) angleRightCurlHcDisplay.textContent = data.angle_right_curl !== undefined ? data.angle_right_curl.toFixed(2) : 'N/A';
     }
-}
 
 
-// --- Webcam and Frame Sending ---
-async function startWebcam() {
-    try {
-        videoStream = await navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 480 }, audio: false });
-        if (videoElement) {
-            videoElement.srcObject = videoStream;
-            videoElement.onloadedmetadata = () => {
-                videoElement.play();
-                // Set canvas dimensions once video is playing
-                if (canvasElement) {
-                    canvasElement.width = videoElement.videoWidth;
-                    canvasElement.height = videoElement.videoHeight;
-                }
-                // Start sending frames only after session is confirmed active by server
-            };
+    function initializeSocket() {
+        if (socket && socket.connected) {
+            logger.info("Socket already connected.");
+            return;
         }
-    } catch (error) {
-        console.error("Error accessing webcam:", error);
-        alert("Could not access webcam. Please ensure permissions are granted.");
-        isSessionActive = false; // Ensure session is marked as inactive
-        if (startButton) startButton.disabled = false;
-        if (stopButton) stopButton.disabled = true;
-    }
-}
+        socket = io({
+            reconnection: true,
+            reconnectionAttempts: 5,
+            reconnectionDelay: 1000,
+        });
 
-function stopWebcam() {
-    if (videoStream) {
-        videoStream.getTracks().forEach(track => track.stop());
-        videoStream = null;
-    }
-    if (videoElement) {
-        videoElement.srcObject = null;
-    }
-    if (animationFrameId) {
-        cancelAnimationFrame(animationFrameId);
-        animationFrameId = null;
-    }
-    console.log("Webcam stopped.");
-}
-
-async function sendFrameLoop() {
-    // Assuming logger object is defined, e.g.:
-    // const logger = {
-    //     log: (message) => console.log(`[Trainer Log] ${message}`),
-    //     error: (message) => console.error(`[Trainer Error] ${message}`),
-    //     info: (message) => console.info(`[Trainer Info] ${message}`)
-    // };
-    // And variables like isSessionActive, videoElement, canvasElement, context, currentExerciseType, socket, animationFrameId are defined in the broader scope.
-    // If logger is not globally available, use console.log/console.info directly.
-
-    console.log(`[sendFrameLoop] Called. isSessionActive: ${isSessionActive}, videoElement.srcObject: ${!!videoElement.srcObject}, video.paused: ${videoElement.paused}, video.ended: ${videoElement.ended}, video.readyState: ${videoElement.readyState}`);
-
-    if (!isSessionActive || !videoElement.srcObject || videoElement.paused || videoElement.ended || videoElement.readyState < 3) { // Added HESITATION_THRESHOLD_FRAMES
-        console.info(`[sendFrameLoop] Stopping frame loop due to conditions: 
-            isSessionActive: ${isSessionActive}, 
-            videoElement.srcObject: ${!!videoElement.srcObject}, 
-            video.paused: ${videoElement.paused}, 
-            video.ended: ${videoElement.ended}, 
-            video.readyState: ${videoElement.readyState}`);
-        
-        if (animationFrameId) {
-            cancelAnimationFrame(animationFrameId);
-            animationFrameId = null;
-        }
-        return; 
-    }
+        socket.on('connect', () => {
+            logger.info(`Connected to server with SID: ${socket.id}`);
+            apiStatusDisplay.textContent = "Connected to server.";
+        });
 
-    // Draw current video frame to canvas
-    try {
-        // Get context here if it's not already global or if canvas might be recreated.
-        // If canvasElement is persistent and context is stable, it can be initialized once.
-        const context = canvasElement.getContext('2d'); 
-        if (canvasElement.width > 0 && canvasElement.height > 0) {
-            context.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
-            const imageDataBase64 = canvasElement.toDataURL('image/jpeg', 0.7).split(',')[1]; // Get base64 string
+        socket.on('disconnect', (reason) => {
+            logger.info(`Disconnected from server: ${reason}`);
+            apiStatusDisplay.textContent = "Disconnected. Please refresh.";
+            stopTrainer(false); // Stop without emitting to server as it's already disconnected
+        });
 
-            if (socket && socket.connected) {
-                // console.log(`[sendFrameLoop] Sending frame for exercise: ${currentExerciseType}`); // Can be too verbose
-                socket.emit('process_frame', {
-                    image: imageDataBase64,
-                    exercise_type: currentExerciseType,
-                    frame_width: canvasElement.width,
-                    frame_height: canvasElement.height
-                });
-            } else {
-                console.error("[sendFrameLoop] Socket not connected. Cannot send frame.");
-            }
-        } else {
-            console.warn("[sendFrameLoop] Canvas dimensions are zero, skipping frame draw/send.");
-        }
-    } catch (e) {
-        console.error("[sendFrameLoop] Error in drawing or sending frame:", e);
-    }
-    
-    // Loop to send next frame
-    animationFrameId = requestAnimationFrame(sendFrameLoop); 
-}
+        socket.on('connect_error', (error) => {
+            logger.error(`Connection Error: ${error.message}`);
+            apiStatusDisplay.textContent = "Connection Error.";
+        });
+        
+        socket.on('connection_ack', (data) => {
+            logger.info(`Server Acknowledged Connection: ${JSON.stringify(data)}`);
+        });
 
-// --- Socket.IO Event Handlers ---
-socket.on('connect', () => {
-    console.log('Connected to server with SID:', socket.id);
-});
+        socket.on('session_started', (data) => {
+            logger.info(`Session started on server: ${data.session_id} for exercise: ${data.exercise_type}`);
+            isSessionActive = true;
+            apiStatusDisplay.textContent = `Session for ${data.exercise_type} started.`;
+            // Now that session is confirmed, start the frame loop
+            sendFrameLoop();
+        });
 
-socket.on('connection_ack', (data) => {
-    console.log('Server Acknowledged Connection:', data);
-    // You could use data.sid from server if needed, but socket.id is usually sufficient client-side
-});
+        socket.on('session_error', (data) => {
+            logger.error(`Session error: ${data.error}`);
+            apiStatusDisplay.textContent = `Session Error: ${data.error}`;
+            alert(`Session Error: ${data.error}`);
+            stopTrainer(false); // Stop client side operations
+        });
 
-socket.on('session_started', (data) => {
-    console.log('Session started on server:', data.session_id, "for exercise:", data.exercise_type);
-    isSessionActive = true;
-    currentExerciseType = data.exercise_type; // Ensure currentExerciseType is what server confirmed
-    setupUIForExercise(currentExerciseType);
-    
-    if (startButton) startButton.disabled = true;
-    if (stopButton) stopButton.disabled = false;
-
-    if (videoStream && videoElement && !videoElement.paused) { // If webcam already started
-        if (animationFrameId) cancelAnimationFrame(animationFrameId); // Clear previous loop if any
-        sendFrameLoop();
-    } else {
-        startWebcam().then(() => { // Start webcam if not already, then start loop
-            if (isSessionActive) { // Check again in case webcam failed
-                 if (animationFrameId) cancelAnimationFrame(animationFrameId);
-                 sendFrameLoop();
+        socket.on('exercise_update', (data) => {
+            if (data.success) {
+                if (data.landmarks_detected) {
+                    // logger.log('Exercise Update:', data.data); // Can be verbose
+                    if (currentExerciseType === 'hammer_curl') {
+                        updateHammerCurlUI(data.data);
+                    } else {
+                        updateGenericUI(data.data);
+                    }
+                } else {
+                    feedbackDisplay.textContent = data.message || 'No landmarks detected.';
+                }
+            } else {
+                logger.error(`Exercise update error: ${data.message || 'Unknown error'}`);
+                feedbackDisplay.textContent = `Error: ${data.message || 'Unknown error'}`;
             }
         });
-    }
-});
 
-socket.on('session_error', (data) => {
-    console.error('Session error:', data.error);
-    alert('Session Error: ' + data.error);
-    isSessionActive = false;
-    if (animationFrameId) cancelAnimationFrame(animationFrameId);
-    animationFrameId = null;
-    stopWebcam(); // Stop webcam on session error
-    clearUIFeedback();
-    if (startButton) startButton.disabled = false;
-    if (stopButton) stopButton.disabled = true;
-});
+        socket.on('frame_error', (data) => {
+            logger.error(`Frame processing error from server: ${data.error}`);
+            feedbackDisplay.textContent = `Server Error: ${data.error}`;
+        });
+    }
 
-socket.on('exercise_update', (data) => {
-    // console.log('Exercise update received:', data); // Can be very verbose
-    if (!isSessionActive) return;
+    async function startTrainer() {
+        if (isSessionActive) {
+            logger.info("Session already active. Please stop current session first.");
+            return;
+        }
 
-    if (data.success) {
-        if (data.landmarks_detected) {
-            if (currentExerciseType === 'hammer_curl') {
-                updateHammerCurlUI(data.data);
+        currentExerciseType = exerciseTypeSelect.value;
+        setupUIForExercise(currentExerciseType);
+        logger.info(`Attempting to start exercise: ${currentExerciseType}`);
+        apiStatusDisplay.textContent = "Starting session...";
+
+        if (!socket || !socket.connected) {
+            logger.info("Socket not connected. Initializing socket connection...");
+            initializeSocket();
+            // Wait for connection before proceeding
+            // This can be handled by having the 'session_started' event trigger sendFrameLoop
+        }
+        
+        // Emit start_exercise_session once socket is connected
+        // The 'connect' event listener will now handle the initial connection_ack
+        // We will emit 'start_exercise_session' after connection is confirmed
+        const attemptStartSession = () => {
+            if (socket && socket.connected) {
+                logger.info(`Socket connected, emitting start_exercise_session for ${currentExerciseType}`);
+                socket.emit('start_exercise_session', { exercise_type: currentExerciseType });
             } else {
-                updateGenericUI(data.data);
+                logger.info("Waiting for socket connection to start session...");
+                setTimeout(attemptStartSession, 500); // Retry after a short delay
             }
-        } else {
-            if (feedbackDisplay) feedbackDisplay.textContent = 'Feedback: No landmarks detected. Adjust position?';
+        };
+        
+        attemptStartSession();
+
+
+        try {
+            stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
+            videoElement.srcObject = stream;
+            videoElement.onloadedmetadata = () => {
+                logger.info("Video metadata loaded.");
+                canvasElement.width = videoElement.videoWidth;
+                canvasElement.height = videoElement.videoHeight;
+                videoElement.play().then(() => {
+                    logger.info("Video playback started.");
+                    // sendFrameLoop() is now called upon 'session_started' event from server
+                    startButton.disabled = true; // Corrected from startBtn to startButton
+                    stopButton.disabled = false;  // Corrected from stopBtn to stopButton
+                    exerciseTypeSelect.disabled = true;
+                }).catch(playError => {
+                    logger.error(`Error playing video: ${playError}`);
+                    apiStatusDisplay.textContent = "Error playing video.";
+                    alert(`Error playing video: ${playError.message}`);
+                    stopTrainer(false); // Clean up if play fails
+                });
+            };
+            videoElement.oncanplay = () => {
+                logger.info("Video can play.");
+            };
+            videoElement.onplaying = () => {
+                logger.info("Video is now playing.");
+            };
+            videoElement.onpause = () => {
+                logger.info("Video paused.");
+            };
+            videoElement.onended = () => {
+                logger.info("Video ended.");
+            };
+
+        } catch (err) {
+            logger.error(`Error accessing webcam: ${err}`);
+            apiStatusDisplay.textContent = "Error accessing webcam.";
+            alert(`Could not access webcam: ${err.message}`);
         }
-    } else {
-        // This case might indicate an error in processing even if landmarks were detected (e.g. Python error)
-        console.error('Exercise update indicated failure:', data.message || 'Unknown error');
-        if (feedbackDisplay) feedbackDisplay.textContent = `Feedback: Error - ${data.message || 'Processing error'}`;
     }
-});
 
-socket.on('frame_error', (data) => {
-    console.error('Frame processing error from server:', data.error);
-    if (feedbackDisplay) feedbackDisplay.textContent = `Error: ${data.error}`;
-    // Consider if we should stop the session or allow user to try again
-});
+    function stopTrainer(emitToServer = true) {
+        logger.info("Stop trainer called.");
+        isSessionActive = false;
+        if (animationFrameId) {
+            cancelAnimationFrame(animationFrameId);
+            animationFrameId = null;
+            logger.info("Frame loop cancelled.");
+        }
 
-socket.on('disconnect', () => {
-    console.log('Disconnected from server.');
-    isSessionActive = false;
-    if (animationFrameId) cancelAnimationFrame(animationFrameId);
-    animationFrameId = null;
-    stopWebcam();
-    clearUIFeedback();
-    if (startButton) startButton.disabled = false;
-    if (stopButton) stopButton.disabled = true;
-    alert("Disconnected from server. Please start a new session.");
-});
+        if (stream) {
+            stream.getTracks().forEach(track => track.stop());
+            logger.info("Webcam tracks stopped.");
+        }
+        videoElement.srcObject = null;
 
+        if (socket && socket.connected && emitToServer) {
+            // No specific 'end_exercise_session' event needed as server handles 'disconnect'
+            // but if you want explicit cleanup, you can add one.
+            // socket.emit('end_exercise_session', { session_id: socket.id });
+            logger.info("Signaling server for session end (via disconnect).");
+        }
+        
+        // If you want to fully disconnect and clean up the socket on stop:
+        // if (socket) {
+        //     socket.disconnect();
+        //     socket = null;
+        //     logger.info("Socket disconnected.");
+        // }
+
+
+        apiStatusDisplay.textContent = "Trainer stopped.";
+        startButton.disabled = false; // Corrected from startBtn to startButton
+        stopButton.disabled = true;  // Corrected from stopBtn to stopButton
+        exerciseTypeSelect.disabled = false;
+
+        // Reset UI elements
+        if (repsDisplay) repsDisplay.textContent = '0';
+        if (stageDisplay) stageDisplay.textContent = 'N/A';
+        if (feedbackDisplay) feedbackDisplay.textContent = 'N/A';
+        if (angleLeftDisplay) angleLeftDisplay.textContent = '0';
+        if (angleRightDisplay) angleRightDisplay.textContent = '0';
+        if (repsLeftHcDisplay) repsLeftHcDisplay.textContent = '0';
+        if (repsRightHcDisplay) repsRightHcDisplay.textContent = '0';
+        if (stageLeftHcDisplay) stageLeftHcDisplay.textContent = 'N/A';
+        if (stageRightHcDisplay) stageRightHcDisplay.textContent = 'N/A';
+        if (feedbackLeftHcDisplay) feedbackLeftHcDisplay.textContent = 'N/A';
+        if (feedbackRightHcDisplay) feedbackRightHcDisplay.textContent = 'N/A';
+        if (angleLeftCurlHcDisplay) angleLeftCurlHcDisplay.textContent = '0';
+        if (angleRightCurlHcDisplay) angleRightCurlHcDisplay.textContent = '0';
+        if (sessionIdDisplay) sessionIdDisplay.textContent = '-';
+    }
 
-// --- UI Event Listeners ---
-if (startButton) {
-    startButton.addEventListener('click', () => {
-        if (exerciseTypeSelect) {
-            currentExerciseType = exerciseTypeSelect.value;
-            if (!currentExerciseType) {
-                alert("Please select an exercise type.");
-                return;
+    async function sendFrameLoop() {
+        if (!isSessionActive || !videoElement.srcObject || videoElement.paused || videoElement.ended || videoElement.readyState < videoElement.HAVE_FUTURE_DATA) {
+            logger.info(`Stopping frame loop. Conditions: isSessionActive=${isSessionActive}, srcObject=${!!videoElement.srcObject}, paused=${videoElement.paused}, ended=${videoElement.ended}, readyState=${videoElement.readyState}`);
+            if (animationFrameId) {
+                cancelAnimationFrame(animationFrameId);
+                animationFrameId = null;
+            }
+            // If session is supposed to be active but video state is bad, consider stopping the session.
+            if (isSessionActive && (videoElement.paused || videoElement.ended || videoElement.readyState < videoElement.HAVE_FUTURE_DATA)) {
+                logger.warn("Video stream issue detected, stopping session from client-side.");
+                // stopTrainer(); // This might cause a loop if called from here. Better to just stop sending.
             }
-        } else {
-            alert("Exercise type selector not found.");
             return;
         }
 
-        console.log(`Starting exercise: ${currentExerciseType}`);
-        socket.emit('start_exercise_session', { exercise_type: currentExerciseType });
-        
-        // Disable start button, enable stop button
-        startButton.disabled = true;
-        stopButton.disabled = false;
+        try {
+            if (canvasElement.width > 0 && canvasElement.height > 0) {
+                context.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
+                const imageDataBase64 = canvasElement.toDataURL('image/jpeg', 0.7).split(',')[1];
+
+                if (socket && socket.connected) {
+                    socket.emit('process_frame', {
+                        image: imageDataBase64,
+                        exercise_type: currentExerciseType,
+                        frame_width: canvasElement.width,
+                        frame_height: canvasElement.height
+                    });
+                } else {
+                    logger.error("Socket not connected in sendFrameLoop. Cannot send frame.");
+                    stopTrainer(false); // Stop if socket disconnected
+                }
+            } else {
+                logger.warn("[sendFrameLoop] Canvas dimensions are zero or video not ready, skipping frame draw/send.");
+            }
+        } catch (error) {
+            logger.error("Error in sendFrameLoop:", error);
+            stopTrainer(false); // Stop on error
+        }
 
-        // Webcam and sendFrameLoop will now be started upon 'session_started' confirmation
-        // This ensures we don't start sending frames before the server is ready for this session.
-        // Initial UI setup for the selected exercise:
-        setupUIForExercise(currentExerciseType);
-        clearUIFeedback(); // Clear previous feedback
-    });
-}
-
-if (stopButton) {
-    stopButton.addEventListener('click', () => {
-        console.log("Stop button clicked. Ending session.");
-        isSessionActive = false; // Mark session as inactive immediately
-        
-        // The server's 'disconnect' handler will clean up the session for this socket.id
-        // If more explicit cleanup is needed, an event like 'stop_exercise_session' could be emitted.
-        // socket.emit('stop_exercise_session'); // Example if specific server-side stop logic is added
+        if (isSessionActive) { // Check again before queuing next frame
+            animationFrameId = requestAnimationFrame(sendFrameLoop);
+        }
+    }
 
-        stopWebcam();
-        clearUIFeedback();
+    // Initialize Socket.IO connection when the script loads
+    initializeSocket();
 
-        if (startButton) startButton.disabled = false;
-        if (stopButton) stopButton.disabled = true;
-        
-        // No need to explicitly disconnect socket here, allow user to start new session.
-        // If you want to fully disconnect: socket.disconnect();
-    });
-}
-
-// Initialize UI
-window.addEventListener('DOMContentLoaded', () => {
-    clearUIFeedback();
-    if (stopButton) stopButton.disabled = true;
-    if (startButton) startButton.disabled = false;
-    // Ensure correct UI elements are visible/hidden initially
-    setupUIForExercise(exerciseTypeSelect ? exerciseTypeSelect.value : 'squat'); // Default to squat or first selected
+    startButton.addEventListener('click', startTrainer);
+    stopButton.addEventListener('click', () => stopTrainer(true));
+
+    // Initial UI setup based on default selected exercise
+    if (exerciseTypeSelect) {
+        setupUIForExercise(exerciseTypeSelect.value);
+        exerciseTypeSelect.addEventListener('change', (event) => {
+            if (!isSessionActive) { // Only allow changing exercise type if session is not active
+                currentExerciseType = event.target.value;
+                setupUIForExercise(currentExerciseType);
+            }
+        });
+    }
 });
-console.log("WebSocket trainer script loaded. Waiting for DOM and user interaction.");