tested and completed mos form

backend/session_manager.py

@@ -43,17 +43,17 @@ class SessionManager:
                     exercise_groups[clip.exercise_id] = {"male": [], "female": []}
                 exercise_groups[clip.exercise_id][clip.speaker].append(clip)
 
-            paired_exercises = []
+            # Collect all clips from this model
+            all_model_clips = []
             for _, speakers in exercise_groups.items():
-                if speakers["male"] and speakers["female"]:
-                    male_clip = rng.choice(speakers["male"])
-                    female_clip = rng.choice(speakers["female"])
-                    paired_exercises.append((male_clip, female_clip))
+                if speakers["male"]:
+                    all_model_clips.extend(speakers["male"])
+                if speakers["female"]:
+                    all_model_clips.extend(speakers["female"])
 
-            # Select 3 random pairs (6 clips total) for this model
-            selected_pairs = rng.sample(paired_exercises, min(3, len(paired_exercises)))
-            for male_clip, female_clip in selected_pairs:
-                mos_clips.extend([male_clip, female_clip])
+            # Select 3 random clips (regardless of gender pairing) for this model
+            selected_clips = rng.sample(all_model_clips, min(3, len(all_model_clips)))
+            mos_clips.extend(selected_clips)
 
         # Group by content (exercise + transcript) for comparisons
         content_groups: Dict[Any, List[Clip]] = {}
@@ -213,14 +213,18 @@ class SessionManager:
             return
 
         try:
-            for clip_id, ratings in ratings_data.items():
-                # Only process if we have at least one dimension filled
-                if not any(
-                    ratings.get(dim)
-                    for dim in ["clarity", "pronunciation", "prosody", "naturalness", "overall"]
-                ):
-                    continue
-
+            # Get all clips that were presented to the user
+            presented_clips = session.get("mos_clips", [])
+            presented_clip_ids = {clip.id for clip in presented_clips}
+            
+            print(f"[DEBUG] Presented {len(presented_clip_ids)} MOS clips to user")
+            print(f"[DEBUG] Received ratings for {len(ratings_data)} clips")
+            
+            # Process all presented clips, whether rated or not
+            for clip in presented_clips:
+                clip_id = clip.id
+                ratings = ratings_data.get(clip_id, {})
+                
                 mos_response = {
                     "session_id": session["session_id"],
                     "clip_id": clip_id,
@@ -245,7 +249,14 @@ class SessionManager:
                 }
 
                 self.save_response("mos", mos_response)
-                print(f"[INFO] Processed MOS rating for clip {clip_id}")
+                
+                # Log whether this clip was rated or not
+                has_ratings = any(
+                    ratings.get(dim)
+                    for dim in ["clarity", "pronunciation", "prosody", "naturalness", "overall"]
+                )
+                status = "rated" if has_ratings else "not rated"
+                print(f"[INFO] Processed MOS clip {clip_id} ({status})")
 
         except Exception as e:
             print(f"[WARN] Error processing MOS data: {e}")
@@ -272,16 +283,42 @@ class SessionManager:
             return
 
         try:
+            # Get all AB pairs that were presented to the user from the submitted data
+            # The comparison data will tell us which type based on the IDs
+            print(f"[DEBUG] Received ratings for {len(comparisons_data)} comparisons")
+            
+            # Build a set of already saved comparison IDs to avoid duplicates
+            session_id = session["session_id"]
+            existing_ab_responses = [
+                r for r in self.responses.get("ab", [])
+                if r.get("session_id") == session_id
+            ]
+            existing_pairs = {
+                (r["clip_a_id"], r["clip_b_id"])
+                for r in existing_ab_responses
+            }
+            print(f"[DEBUG] Already have {len(existing_pairs)} AB comparisons saved for this session")
+            
+            # Process each comparison from the submitted data
             for comp_id, comparison in comparisons_data.items():
-                if not comparison.get("choice"):
+                clip_a_id = comparison.get("clip_a_id")
+                clip_b_id = comparison.get("clip_b_id")
+                
+                if not clip_a_id or not clip_b_id:
+                    print(f"[WARN] Skipping comparison {comp_id} - missing clip IDs")
                     continue
-
+                
+                # Skip if we've already saved this pair
+                if (clip_a_id, clip_b_id) in existing_pairs:
+                    print(f"[DEBUG] Skipping duplicate comparison: {clip_a_id} vs {clip_b_id}")
+                    continue
+                
                 ab_response = {
-                    "session_id": session["session_id"],
-                    "clip_a_id": comparison.get("clip_a_id"),
-                    "clip_b_id": comparison.get("clip_b_id"),
+                    "session_id": session_id,
+                    "clip_a_id": clip_a_id,
+                    "clip_b_id": clip_b_id,
                     "comparison_type": comparison.get("comparison_type"),
-                    "choice": comparison.get("choice"),
+                    "choice": comparison.get("choice"),  # Can be None if not rated
                     "comment": comparison.get("comment", ""),
                     # Support both model_vs_model (gender_mismatch_a/b)
                     # and gender_vs_gender (gender_mismatch_male/female)
@@ -293,10 +330,10 @@ class SessionManager:
                 }
 
                 self.save_response("ab", ab_response)
-                print(
-                    f"[INFO] Processed A/B rating for clips "
-                    f"{comparison.get('clip_a_id')} vs {comparison.get('clip_b_id')}"
-                )
+                existing_pairs.add((clip_a_id, clip_b_id))  # Mark as saved
+                
+                status = "rated" if comparison.get("choice") else "not rated"
+                print(f"[INFO] Processed A/B comparison {clip_a_id} vs {clip_b_id} ({status})")
 
         except Exception as e:
             print(f"[WARN] Error processing A/B data: {e}")

frontend/app.py

@@ -5,7 +5,6 @@ Main entrypoint wiring backend + frontend pages.
 
 import time
 import gradio as gr
-
 import os
 import sys
 
@@ -17,9 +16,8 @@ sys.path.insert(0, mos_dir)
 from backend.data_manager import DataManager
 from backend.session_manager import SessionManager
 from backend.hf_logging import push_session_to_hub
-from backend.models import get_display_model_name, audio_to_base64_url
 
-# Frontend styling + pages
+# Frontend pieces
 from frontend.css import CSS
 from frontend.pages.intro import build_intro_page
 from frontend.pages.samples import build_sample_page
@@ -28,12 +26,27 @@ from frontend.pages.ab_model import build_ab_model_page, render_ab_model_html
 from frontend.pages.ab_gender import build_ab_gender_page, render_ab_gender_html
 from frontend.pages.conclusion import build_conclusion_page
 from frontend.pages.thank_you import build_thank_you_page
+from frontend.utils.validation import (
+    validate_mos_completion,
+    validate_ab_completion,
+    validate_final_submission,
+)
+from frontend.utils.js_collectors import (
+    COLLECT_MOS_DATA_JS,
+    COLLECT_AB_DATA_JS,
+    COLLECT_CONCLUSION_DATA_JS,
+    SCROLL_TO_TOP_JS,
+)
 
 
 def create_app(data_manager, session_manager):
     with gr.Blocks(title="ATC TTS Evaluation", css=CSS) as app:
         # Global state
         session_state = gr.State()
+        
+        # Persistent data state - stores user inputs across page transitions
+        mos_data_state = gr.State(value="{}")
+        ab_data_state = gr.State(value="{}")
 
         # Hidden textboxes used by the JS collectors on MOS / AB pages
         mos_data_textbox = gr.Textbox(
@@ -125,11 +138,18 @@ def create_app(data_manager, session_manager):
             )
 
         def continue_from_mos_to_ab_model(session, mos_data_json):
-            """
-            Process MOS data (collected via JavaScript) and move to Model-vs-Model page.
-            """
+            """Process MOS data and move to Model-vs-Model page."""
             print(f"[DEBUG] continue_from_mos_to_ab_model called")
             print(f"[DEBUG] MOS data JSON received: '{mos_data_json}'")
+            
+            # Validate MOS completion
+            expected_clips = len(session.get("mos_clips", []))
+            is_valid, error_msg = validate_mos_completion(mos_data_json, expected_clips)
+            if not is_valid:
+                gr.Warning(error_msg)
+                return gr.update(), gr.update(), ""
+            
+            # Process and navigate
             session_manager.process_mos_data(session, mos_data_json)
             ab_model_html = render_ab_model_html(session)
             return (
@@ -139,11 +159,18 @@ def create_app(data_manager, session_manager):
             )
 
         def continue_from_ab_model_to_ab_gender(session, ab_data_json):
-            """
-            Process A/B model comparison data (collected via JavaScript) and move to Gender A/B page.
-            """
+            """Process A/B model comparison data and move to Gender A/B page."""
             print(f"[DEBUG] continue_from_ab_model_to_ab_gender called")
             print(f"[DEBUG] AB data JSON received: '{ab_data_json}'")
+            
+            # Validate AB model completion
+            expected_comparisons = len(session.get("ab_model_pairs", []))
+            is_valid, error_msg = validate_ab_completion(ab_data_json, expected_comparisons, "model comparisons")
+            if not is_valid:
+                gr.Warning(error_msg)
+                return gr.update(), gr.update(), ""
+            
+            # Process and navigate
             session_manager.process_ab_data(session, ab_data_json)
             ab_gender_html = render_ab_gender_html(session)
             return (
@@ -153,9 +180,18 @@ def create_app(data_manager, session_manager):
             )
 
         def complete_evaluation_with_ab_gender_data(session, ab_data_json):
-            """
-            Process A/B gender comparison data (collected via JavaScript) and move to conclusion page.
-            """
+            """Process A/B gender comparison data and move to conclusion page."""
+            print(f"[DEBUG] complete_evaluation_with_ab_gender_data called")
+            print(f"[DEBUG] AB gender data JSON received: '{ab_data_json}'")
+            
+            # Validate AB gender completion
+            expected_comparisons = len(session.get("ab_gender_pairs", []))
+            is_valid, error_msg = validate_ab_completion(ab_data_json, expected_comparisons, "gender comparisons")
+            if not is_valid:
+                gr.Warning(error_msg)
+                return gr.update(), gr.update()
+            
+            # Process and navigate
             session_manager.process_ab_data(session, ab_data_json)
             if session:
                 session["completed"] = True
@@ -171,10 +207,7 @@ def create_app(data_manager, session_manager):
             mos_data_json,
             ab_data_json,
         ):
-            """
-            Final submit: process any remaining MOS/AB data (collected via JavaScript), 
-            save overall feedback, export the session, and push to HF.
-            """
+            """Final submit: process data, validate overall preference, save, and push to HF."""
             print(f"[DEBUG] export_results_with_data_processing called")
             print(f"[DEBUG] overall_preference: '{overall_preference}'")
             print(f"[DEBUG] comments: '{comments}'")
@@ -182,14 +215,21 @@ def create_app(data_manager, session_manager):
             if not session:
                 return gr.update(), gr.update()
 
-            # Ensure all MOS / AB ratings are processed
+            # Validate that overall preference is selected
+            is_valid, error_msg = validate_final_submission(overall_preference)
+            if not is_valid:
+                print(f"[ERROR] {error_msg}")
+                gr.Warning(error_msg)
+                return gr.update(), gr.update()
+
+            # Process all MOS / AB ratings
             session_manager.process_mos_data(session, mos_data_json)
             session_manager.process_ab_data(session, ab_data_json)
 
-            # Save overall feedback - always save even if empty
+            # Save overall feedback
             feedback_response = {
                 "session_id": session["session_id"],
-                "overall_preference": overall_preference or "",
+                "overall_preference": overall_preference,
                 "final_comments": comments or "",
                 "timestamp": time.time(),
             }
@@ -200,13 +240,9 @@ def create_app(data_manager, session_manager):
             export_data = session_manager.export_session(session["session_id"])
             try:
                 push_session_to_hub(session["session_id"], export_data)
-                print(
-                    f"[INFO] Successfully submitted session {session['session_id']} to Hub"
-                )
+                print(f"[INFO] Successfully submitted session {session['session_id']} to Hub")
             except Exception as e:
-                print(
-                    f"[WARN] Failed to push session {session['session_id']} to Hub: {e}"
-                )
+                print(f"[WARN] Failed to push session {session['session_id']} to Hub: {e}")
 
             return (
                 gr.update(visible=False),  # hide conclusion page
@@ -222,7 +258,7 @@ def create_app(data_manager, session_manager):
             start_evaluation,
             inputs=[],
             outputs=[intro_page, sample_page, session_state],
-            js="() => { window.scrollTo(0, 0); }"
+            js=SCROLL_TO_TOP_JS
         )
 
         # Samples → MOS
@@ -230,7 +266,7 @@ def create_app(data_manager, session_manager):
             show_mos_page,
             inputs=[session_state],
             outputs=[sample_page, mos_page, mos_dynamic_content],
-            js="() => { window.scrollTo(0, 0); }"
+            js=SCROLL_TO_TOP_JS
         )
 
         # MOS → AB Model (process MOS first)
@@ -238,52 +274,7 @@ def create_app(data_manager, session_manager):
             fn=continue_from_mos_to_ab_model,
             inputs=[session_state, mos_data_textbox],
             outputs=[mos_page, ab_model_page, ab_model_dynamic_content],
-            js="""
-            (session_data, current_mos_data) => {
-                window.scrollTo(0, 0);
-                
-                // Collect MOS data from the current page
-                const ratings = {};
-                
-                const selects = document.querySelectorAll('select[data-clip-id]');
-                const checkboxes = document.querySelectorAll('input[type="checkbox"][data-clip-id]');
-                const textareas = document.querySelectorAll('textarea[data-clip-id]');
-                
-                console.log('[DEBUG] Found selects:', selects.length);
-                console.log('[DEBUG] Found checkboxes:', checkboxes.length);
-                console.log('[DEBUG] Found textareas:', textareas.length);
-                
-                selects.forEach(select => {
-                    const clipId = select.getAttribute('data-clip-id');
-                    const dimension = select.getAttribute('data-dimension');
-                    if (!ratings[clipId]) ratings[clipId] = {};
-                    ratings[clipId][dimension] = select.value;
-                    console.log('[DEBUG] Select:', clipId, dimension, select.value);
-                });
-                
-                checkboxes.forEach(checkbox => {
-                    const clipId = checkbox.getAttribute('data-clip-id');
-                    const dimension = checkbox.getAttribute('data-dimension');
-                    if (!ratings[clipId]) ratings[clipId] = {};
-                    ratings[clipId][dimension] = checkbox.checked;
-                    console.log('[DEBUG] Checkbox:', clipId, dimension, checkbox.checked);
-                });
-                
-                textareas.forEach(textarea => {
-                    const clipId = textarea.getAttribute('data-clip-id');
-                    const dimension = textarea.getAttribute('data-dimension');
-                    if (!ratings[clipId]) ratings[clipId] = {};
-                    ratings[clipId][dimension] = textarea.value;
-                    console.log('[DEBUG] Textarea:', clipId, dimension, textarea.value);
-                });
-                
-                console.log('[DEBUG] Final ratings object:', ratings);
-                const ratingsJson = JSON.stringify(ratings);
-                console.log('[DEBUG] Ratings JSON:', ratingsJson);
-                
-                return [session_data, ratingsJson];
-            }
-            """
+            js=COLLECT_MOS_DATA_JS
         )
 
         # AB Model → AB Gender (process AB model first)
@@ -291,58 +282,7 @@ def create_app(data_manager, session_manager):
             continue_from_ab_model_to_ab_gender,
             inputs=[session_state, ab_data_textbox],
             outputs=[ab_model_page, ab_gender_page, ab_gender_dynamic_content],
-            js="""
-            (session_data, current_ab_data) => {
-                window.scrollTo(0, 0);
-                
-                // Collect A/B data from the current page
-                const ratings = {};
-                
-                const radios = document.querySelectorAll('input[type="radio"]:checked');
-                const checkboxes = document.querySelectorAll('input[type="checkbox"][data-comparison-id]');
-                const textareas = document.querySelectorAll('textarea[data-comparison-id]');
-                
-                console.log('[DEBUG] Found radios:', radios.length);
-                console.log('[DEBUG] Found checkboxes:', checkboxes.length);
-                console.log('[DEBUG] Found textareas:', textareas.length);
-                
-                radios.forEach(radio => {
-                    const compId = radio.getAttribute('data-comparison-id');
-                    const clipAId = radio.getAttribute('data-clip-a-id');
-                    const clipBId = radio.getAttribute('data-clip-b-id');
-                    const compType = radio.getAttribute('data-type');
-                    
-                    if (!ratings[compId]) ratings[compId] = {};
-                    ratings[compId].clip_a_id = clipAId;
-                    ratings[compId].clip_b_id = clipBId;
-                    ratings[compId].comparison_type = compType;
-                    ratings[compId].choice = radio.value;
-                    console.log('[DEBUG] Radio:', compId, radio.value);
-                });
-                
-                checkboxes.forEach(checkbox => {
-                    const compId = checkbox.getAttribute('data-comparison-id');
-                    const dimension = checkbox.getAttribute('data-dimension');
-                    if (!ratings[compId]) ratings[compId] = {};
-                    ratings[compId][dimension] = checkbox.checked;
-                    console.log('[DEBUG] Checkbox:', compId, dimension, checkbox.checked);
-                });
-                
-                textareas.forEach(textarea => {
-                    const compId = textarea.getAttribute('data-comparison-id');
-                    const dimension = textarea.getAttribute('data-dimension');
-                    if (!ratings[compId]) ratings[compId] = {};
-                    ratings[compId][dimension] = textarea.value;
-                    console.log('[DEBUG] Textarea:', compId, dimension, textarea.value);
-                });
-                
-                console.log('[DEBUG] Final A/B ratings object:', ratings);
-                const ratingsJson = JSON.stringify(ratings);
-                console.log('[DEBUG] A/B Ratings JSON:', ratingsJson);
-                
-                return [session_data, ratingsJson];
-            }
-            """
+            js=COLLECT_AB_DATA_JS
         )
 
         # AB Gender → Conclusion (process AB gender data)
@@ -350,58 +290,7 @@ def create_app(data_manager, session_manager):
             complete_evaluation_with_ab_gender_data,
             inputs=[session_state, ab_data_textbox],
             outputs=[ab_gender_page, conclusion_page],
-            js="""
-            (session_data, current_ab_data) => {
-                window.scrollTo(0, 0);
-                
-                // Collect A/B gender data from the current page
-                const ratings = {};
-                
-                const radios = document.querySelectorAll('input[type="radio"]:checked');
-                const checkboxes = document.querySelectorAll('input[type="checkbox"][data-comparison-id]');
-                const textareas = document.querySelectorAll('textarea[data-comparison-id]');
-                
-                console.log('[DEBUG] Found radios:', radios.length);
-                console.log('[DEBUG] Found checkboxes:', checkboxes.length);
-                console.log('[DEBUG] Found textareas:', textareas.length);
-                
-                radios.forEach(radio => {
-                    const compId = radio.getAttribute('data-comparison-id');
-                    const clipAId = radio.getAttribute('data-clip-a-id');
-                    const clipBId = radio.getAttribute('data-clip-b-id');
-                    const compType = radio.getAttribute('data-type');
-                    
-                    if (!ratings[compId]) ratings[compId] = {};
-                    ratings[compId].clip_a_id = clipAId;
-                    ratings[compId].clip_b_id = clipBId;
-                    ratings[compId].comparison_type = compType;
-                    ratings[compId].choice = radio.value;
-                    console.log('[DEBUG] Radio:', compId, radio.value);
-                });
-                
-                checkboxes.forEach(checkbox => {
-                    const compId = checkbox.getAttribute('data-comparison-id');
-                    const dimension = checkbox.getAttribute('data-dimension');
-                    if (!ratings[compId]) ratings[compId] = {};
-                    ratings[compId][dimension] = checkbox.checked;
-                    console.log('[DEBUG] Checkbox:', compId, dimension, checkbox.checked);
-                });
-                
-                textareas.forEach(textarea => {
-                    const compId = textarea.getAttribute('data-comparison-id');
-                    const dimension = textarea.getAttribute('data-dimension');
-                    if (!ratings[compId]) ratings[compId] = {};
-                    ratings[compId][dimension] = textarea.value;
-                    console.log('[DEBUG] Textarea:', compId, dimension, textarea.value);
-                });
-                
-                console.log('[DEBUG] Final A/B gender ratings object:', ratings);
-                const ratingsJson = JSON.stringify(ratings);
-                console.log('[DEBUG] A/B Gender Ratings JSON:', ratingsJson);
-                
-                return [session_data, ratingsJson];
-            }
-            """
+            js=COLLECT_AB_DATA_JS
         )
 
         # Conclusion → Thank You (process any remaining data + export)
@@ -415,43 +304,7 @@ def create_app(data_manager, session_manager):
                 ab_data_textbox,
             ],
             outputs=[conclusion_page, thank_you_page],
-            js="""
-            (session_data, overall_feedback, final_comments, mos_data, ab_data) => {
-                window.scrollTo(0, 0);
-                
-                console.log('[DEBUG] Export button clicked');
-                console.log('[DEBUG] overall_feedback from Gradio:', overall_feedback);
-                console.log('[DEBUG] final_comments from Gradio:', final_comments);
-                
-                // Get actual values from the DOM elements
-                const radioInputs = document.querySelectorAll('input[type="radio"]');
-                let selectedRadio = null;
-                radioInputs.forEach(radio => {
-                    if (radio.checked) {
-                        selectedRadio = radio.value;
-                        console.log('[DEBUG] Found checked radio:', selectedRadio);
-                    }
-                });
-                
-                const textareas = document.querySelectorAll('textarea');
-                let commentsValue = '';
-                textareas.forEach(textarea => {
-                    // Skip hidden textboxes (MOS/AB data stores)
-                    if (textarea.parentElement.style.display !== 'none' && !textarea.parentElement.classList.contains('hide')) {
-                        if (textarea.value && textarea.value.trim() !== '') {
-                            commentsValue = textarea.value;
-                            console.log('[DEBUG] Found comments textarea:', commentsValue);
-                        }
-                    }
-                });
-                
-                console.log('[DEBUG] Final selected radio:', selectedRadio);
-                console.log('[DEBUG] Final comments:', commentsValue);
-                
-                // Return with actual values from DOM
-                return [session_data, selectedRadio, commentsValue, mos_data, ab_data];
-            }
-            """
+            js=COLLECT_CONCLUSION_DATA_JS
         )
 
         # Back navigation
@@ -459,35 +312,35 @@ def create_app(data_manager, session_manager):
             lambda: (gr.update(visible=True), gr.update(visible=False)),
             inputs=[],
             outputs=[intro_page, sample_page],
-            js="() => { window.scrollTo(0, 0); }"
+            js=SCROLL_TO_TOP_JS
         )
 
         back_to_samples_btn.click(
             lambda: (gr.update(visible=False), gr.update(visible=True)),
             inputs=[],
             outputs=[mos_page, sample_page],
-            js="() => { window.scrollTo(0, 0); }"
+            js=SCROLL_TO_TOP_JS
         )
 
         back_to_mos_btn.click(
             lambda: (gr.update(visible=False), gr.update(visible=True)),
             inputs=[],
             outputs=[ab_model_page, mos_page],
-            js="() => { window.scrollTo(0, 0); }"
+            js=SCROLL_TO_TOP_JS
         )
 
         back_to_ab_model_btn.click(
             lambda: (gr.update(visible=False), gr.update(visible=True)),
             inputs=[],
             outputs=[ab_gender_page, ab_model_page],
-            js="() => { window.scrollTo(0, 0); }"
+            js=SCROLL_TO_TOP_JS
         )
 
         back_to_ab_gender_btn.click(
             lambda: (gr.update(visible=False), gr.update(visible=True)),
             inputs=[],
             outputs=[conclusion_page, ab_gender_page],
-            js="() => { window.scrollTo(0, 0); }"
+            js=SCROLL_TO_TOP_JS
         )
 
     return app

frontend/pages/ab_gender.py

@@ -34,6 +34,16 @@ def build_ab_gender_page():
             value="<p>Loading gender comparisons...</p>", visible=True
         )
 
+        gr.Markdown(
+            """
+            <div style="background: #7f1d1d; padding: 12px; border-radius: 8px; border: 2px solid #ef4444; margin: 15px 0;">
+                <p style="margin: 0; color: #fca5a5; font-weight: bold;">
+                    ⚠️ Warning: Using the "Back" button will lose all your comparisons on this page!
+                </p>
+            </div>
+            """
+        )
+
         with gr.Row():
             back_btn = gr.Button(
                 "Back to Model Comparisons", variant="secondary"

frontend/pages/ab_model.py

@@ -34,6 +34,16 @@ def build_ab_model_page():
             value="<p>Loading model comparisons...</p>", visible=True
         )
 
+        gr.Markdown(
+            """
+            <div style="background: #7f1d1d; padding: 12px; border-radius: 8px; border: 2px solid #ef4444; margin: 15px 0;">
+                <p style="margin: 0; color: #fca5a5; font-weight: bold;">
+                    ⚠️ Warning: Using the "Back" button will lose all your comparisons on this page!
+                </p>
+            </div>
+            """
+        )
+
         with gr.Row():
             back_btn = gr.Button(
                 "Back to Model Ratings", variant="secondary"

frontend/pages/conclusion.py

@@ -36,6 +36,16 @@ def build_conclusion_page():
             lines=4,
         )
 
+        gr.Markdown(
+            """
+            <div style="background: #7f1d1d; padding: 12px; border-radius: 8px; border: 2px solid #ef4444; margin: 15px 0;">
+                <p style="margin: 0; color: #fca5a5; font-weight: bold;">
+                    ⚠️ Warning: Using the "Back" button will lose all your previous submissions!
+                </p>
+            </div>
+            """
+        )
+
         with gr.Row():
             back_btn = gr.Button(
                 "Back to Gender Comparisons", variant="secondary"

frontend/pages/mos.py

@@ -47,6 +47,16 @@ def build_mos_page():
 
         mos_dynamic_content = gr.HTML(value="<p>Loading clips...</p>", visible=True)
 
+        gr.Markdown(
+            """
+            <div style="background: #7f1d1d; padding: 12px; border-radius: 8px; border: 2px solid #ef4444; margin: 15px 0;">
+                <p style="margin: 0; color: #fca5a5; font-weight: bold;">
+                    ⚠️ Warning: Using the "Back" button will lose all your ratings on this page!
+                </p>
+            </div>
+            """
+        )
+
         with gr.Row():
             back_btn = gr.Button("Back to Reference Audio", variant="secondary")
             continue_btn = gr.Button(

frontend/utils/js_collectors.py

@@ -0,0 +1,148 @@
+# frontend/js_collectors.py
+"""
+JavaScript code snippets for collecting form data on the client side.
+"""
+
+# JavaScript to collect MOS ratings from the page
+COLLECT_MOS_DATA_JS = """
+(session_data, current_mos_data) => {
+    window.scrollTo(0, 0);
+    
+    // Collect MOS data from the current page
+    const ratings = {};
+    
+    const selects = document.querySelectorAll('select[data-clip-id]');
+    const checkboxes = document.querySelectorAll('input[type="checkbox"][data-clip-id]');
+    const textareas = document.querySelectorAll('textarea[data-clip-id]');
+    
+    console.log('[DEBUG] Found selects:', selects.length);
+    console.log('[DEBUG] Found checkboxes:', checkboxes.length);
+    console.log('[DEBUG] Found textareas:', textareas.length);
+    
+    selects.forEach(select => {
+        const clipId = select.getAttribute('data-clip-id');
+        const dimension = select.getAttribute('data-dimension');
+        if (!ratings[clipId]) ratings[clipId] = {};
+        ratings[clipId][dimension] = select.value;
+        console.log('[DEBUG] Select:', clipId, dimension, select.value);
+    });
+    
+    checkboxes.forEach(checkbox => {
+        const clipId = checkbox.getAttribute('data-clip-id');
+        const dimension = checkbox.getAttribute('data-dimension');
+        if (!ratings[clipId]) ratings[clipId] = {};
+        ratings[clipId][dimension] = checkbox.checked;
+        console.log('[DEBUG] Checkbox:', clipId, dimension, checkbox.checked);
+    });
+    
+    textareas.forEach(textarea => {
+        const clipId = textarea.getAttribute('data-clip-id');
+        const dimension = textarea.getAttribute('data-dimension');
+        if (!ratings[clipId]) ratings[clipId] = {};
+        ratings[clipId][dimension] = textarea.value;
+        console.log('[DEBUG] Textarea:', clipId, dimension, textarea.value);
+    });
+    
+    console.log('[DEBUG] Final ratings object:', ratings);
+    const ratingsJson = JSON.stringify(ratings);
+    console.log('[DEBUG] Ratings JSON:', ratingsJson);
+    
+    return [session_data, ratingsJson];
+}
+"""
+
+# JavaScript to collect A/B comparison data from the page
+COLLECT_AB_DATA_JS = """
+(session_data, current_ab_data) => {
+    window.scrollTo(0, 0);
+    
+    // Collect A/B data from the current page
+    const ratings = {};
+    
+    const radios = document.querySelectorAll('input[type="radio"]:checked');
+    const checkboxes = document.querySelectorAll('input[type="checkbox"][data-comparison-id]');
+    const textareas = document.querySelectorAll('textarea[data-comparison-id]');
+    
+    console.log('[DEBUG] Found radios:', radios.length);
+    console.log('[DEBUG] Found checkboxes:', checkboxes.length);
+    console.log('[DEBUG] Found textareas:', textareas.length);
+    
+    radios.forEach(radio => {
+        const compId = radio.getAttribute('data-comparison-id');
+        const clipAId = radio.getAttribute('data-clip-a-id');
+        const clipBId = radio.getAttribute('data-clip-b-id');
+        const compType = radio.getAttribute('data-type');
+        
+        if (!ratings[compId]) ratings[compId] = {};
+        ratings[compId].clip_a_id = clipAId;
+        ratings[compId].clip_b_id = clipBId;
+        ratings[compId].comparison_type = compType;
+        ratings[compId].choice = radio.value;
+        console.log('[DEBUG] Radio:', compId, radio.value);
+    });
+    
+    checkboxes.forEach(checkbox => {
+        const compId = checkbox.getAttribute('data-comparison-id');
+        const dimension = checkbox.getAttribute('data-dimension');
+        if (!ratings[compId]) ratings[compId] = {};
+        ratings[compId][dimension] = checkbox.checked;
+        console.log('[DEBUG] Checkbox:', compId, dimension, checkbox.checked);
+    });
+    
+    textareas.forEach(textarea => {
+        const compId = textarea.getAttribute('data-comparison-id');
+        const dimension = textarea.getAttribute('data-dimension');
+        if (!ratings[compId]) ratings[compId] = {};
+        ratings[compId][dimension] = textarea.value;
+        console.log('[DEBUG] Textarea:', compId, dimension, textarea.value);
+    });
+    
+    console.log('[DEBUG] Final A/B ratings object:', ratings);
+    const ratingsJson = JSON.stringify(ratings);
+    console.log('[DEBUG] A/B Ratings JSON:', ratingsJson);
+    
+    return [session_data, ratingsJson];
+}
+"""
+
+# JavaScript to collect overall feedback from conclusion page
+COLLECT_CONCLUSION_DATA_JS = """
+(session_data, overall_feedback, final_comments, mos_data, ab_data) => {
+    window.scrollTo(0, 0);
+    
+    console.log('[DEBUG] Export button clicked');
+    console.log('[DEBUG] overall_feedback from Gradio:', overall_feedback);
+    console.log('[DEBUG] final_comments from Gradio:', final_comments);
+    
+    // Get actual values from the DOM elements
+    const radioInputs = document.querySelectorAll('input[type="radio"]');
+    let selectedRadio = null;
+    radioInputs.forEach(radio => {
+        if (radio.checked) {
+            selectedRadio = radio.value;
+            console.log('[DEBUG] Found checked radio:', selectedRadio);
+        }
+    });
+    
+    const textareas = document.querySelectorAll('textarea');
+    let commentsValue = '';
+    textareas.forEach(textarea => {
+        // Skip hidden textboxes (MOS/AB data stores)
+        if (textarea.parentElement.style.display !== 'none' && !textarea.parentElement.classList.contains('hide')) {
+            if (textarea.value && textarea.value.trim() !== '') {
+                commentsValue = textarea.value;
+                console.log('[DEBUG] Found comments textarea:', commentsValue);
+            }
+        }
+    });
+    
+    console.log('[DEBUG] Final selected radio:', selectedRadio);
+    console.log('[DEBUG] Final comments:', commentsValue);
+    
+    // Return with actual values from DOM
+    return [session_data, selectedRadio, commentsValue, mos_data, ab_data];
+}
+"""
+
+# Simple scroll to top JavaScript
+SCROLL_TO_TOP_JS = "() => { window.scrollTo(0, 0); }"

frontend/utils/validation.py

@@ -0,0 +1,113 @@
+# frontend/validation.py
+"""
+Validation logic for MOS evaluation form data.
+"""
+
+import json
+import gradio as gr
+from typing import Dict, Any, Tuple
+
+
+def validate_mos_completion(mos_data_json: str, expected_clips: int) -> Tuple[bool, str]:
+    """
+    Validate that all MOS clips have been rated.
+    
+    Returns:
+        (is_valid, error_message)
+    """
+    if not mos_data_json or mos_data_json == "None":
+        return False, "⚠️ Please rate at least one dimension for each clip before continuing!"
+    
+    try:
+        ratings_data = json.loads(mos_data_json)
+        
+        # Check that each clip is completed
+        # Clip is complete if: all 5 ratings are filled OR gender_mismatch is checked
+        clips_with_ratings = 0
+        for clip_id, ratings in ratings_data.items():
+            rating_dims = ["clarity", "pronunciation", "prosody", "naturalness", "overall"]
+            filled_ratings = [dim for dim in rating_dims if ratings.get(dim)]
+            
+            all_ratings_filled = len(filled_ratings) == 5
+            has_gender_mismatch = ratings.get("gender_mismatch", False)
+            
+            if all_ratings_filled or has_gender_mismatch:
+                clips_with_ratings += 1
+        
+        if clips_with_ratings < expected_clips:
+            return False, f"⚠️ Please complete all clips before continuing! Each clip needs either all 5 ratings, or a gender flag. ({clips_with_ratings}/{expected_clips} completed)"
+        
+        return True, ""
+        
+    except json.JSONDecodeError:
+        return False, "⚠️ Error reading ratings. Please try again!"
+
+
+def validate_ab_completion(ab_data_json: str, expected_comparisons: int, comparison_type: str = "comparisons") -> Tuple[bool, str]:
+    """
+    Validate that all A/B comparisons have been completed.
+    
+    A comparison is considered complete if either:
+    - A choice is selected (A, B, or tie), OR
+    - At least one gender mismatch checkbox is checked
+    
+    Args:
+        ab_data_json: JSON string containing comparison data
+        expected_comparisons: Number of comparisons expected
+        comparison_type: Type of comparison for error message (e.g., "model comparisons", "gender comparisons")
+    
+    Returns:
+        (is_valid, error_message)
+    """
+    if not ab_data_json or ab_data_json == "None":
+        return False, f"⚠️ Please make a choice for each {comparison_type} before continuing!"
+    
+    try:
+        comparisons_data = json.loads(ab_data_json)
+        
+        # Check that each comparison is completed
+        # Complete if: has a choice OR has gender mismatch checked
+        completed_comparisons = 0
+        for comp_id, comparison in comparisons_data.items():
+            has_choice = bool(comparison.get("choice"))
+            has_gender_mismatch = (
+                comparison.get("gender_mismatch_a", False) or 
+                comparison.get("gender_mismatch_b", False) or
+                comparison.get("gender_mismatch_male", False) or
+                comparison.get("gender_mismatch_female", False)
+            )
+            
+            if has_choice or has_gender_mismatch:
+                completed_comparisons += 1
+        
+        if completed_comparisons < expected_comparisons:
+            return False, f"⚠️ Please complete all {comparison_type} before continuing! Each needs either a choice or gender flag. ({completed_comparisons}/{expected_comparisons} completed)"
+        
+        return True, ""
+        
+    except json.JSONDecodeError:
+        return False, f"⚠️ Error reading {comparison_type}. Please try again!"
+
+
+def validate_overall_feedback(overall_preference: str) -> Tuple[bool, str]:
+    """
+    Validate that overall feedback has been selected.
+    
+    Returns:
+        (is_valid, error_message)
+    """
+    if not overall_preference or overall_preference == "None" or overall_preference == "":
+        return False, "⚠️ Please select an overall preference before submitting!"
+    
+    return True, ""
+
+
+def validate_final_submission(overall_preference: str) -> Tuple[bool, str]:
+    """
+    Validate final submission - only checks that overall preference is selected.
+    
+    Returns:
+        (is_valid, error_message)
+    """
+    # Only check that overall feedback is selected
+    return validate_overall_feedback(overall_preference)