Add ghunnah/madd durations

config.py

@@ -25,6 +25,27 @@ VISIBLE_ITEMS_IN_SELECTOR = 4  # Number of items visible in scrollable selectors
 IS_HF_SPACE = os.environ.get("SPACE_ID") is not None
 DEV_TAB_VISIBLE = not IS_HF_SPACE  # Hide Dev tab on HF Spaces, show locally
 
+# =============================================================================
+# Layout configuration
+# =============================================================================
+
+LEFT_COLUMN_SCALE = 3   # 30% width (right column is 10 - 3 = 7, i.e. 70%)
+
+# Components in each column (for documentation, used by builder.py)
+LEFT_COLUMN_COMPONENTS = [
+    "verse_selector",      # Chapter/verse dropdowns
+    "control_buttons",     # Random, Reset, Multi-models
+    "audio_input",         # Microphone/upload
+    "analyze_btn",         # Analyze button
+    "recitation_settings", # Accordion with madd/ghunnah settings
+]
+
+RIGHT_COLUMN_COMPONENTS = [
+    "arabic_display",      # Selected verse text
+    "reference_audio",     # Reference audio player
+    "analysis_tabs",       # Error, Ghunnah, Madd, Dev tabs
+]
+
 # =============================================================================
 # Arabic text styling (UI)
 # =============================================================================

recitation_engine/audio_pipeline.py

@@ -366,8 +366,8 @@ class UnifiedVadProcessor(AudioProcessor):
         parallel_time = time.time() - parallel_start
         print(f"[PIPELINE] Parallel CPU+GPU completed in {parallel_time:.2f}s")
 
-        # Build segment infos from results
-        all_segment_infos, all_predicted_phonemes = build_segment_infos(
+        # Build segment infos from results (returns kept_indices for FA alignment)
+        all_segment_infos, all_predicted_phonemes, kept_indices = build_segment_infos(
             vad_result.vad_segments,
             segment_audios,
             match_results,
@@ -393,10 +393,13 @@ class UnifiedVadProcessor(AudioProcessor):
             user_audio_clips,
         )
 
+        # Filter FA results to match kept segments (excludes Basmala/Isti'adha)
+        filtered_fa_results = [fa_results[i] for i in kept_indices] if fa_results else []
+
         # Apply pre-computed FA results to segment results (no separate GPU lease needed)
         segment_results_with_duration = self._apply_fa_to_segment_results(
             all_results, all_segment_infos, segment_audios, vad_result,
-            fa_results, user_audio_clips
+            filtered_fa_results, user_audio_clips
         )
 
         total_elapsed = time.time() - pipeline_start
@@ -625,6 +628,11 @@ class UnifiedVadProcessor(AudioProcessor):
         if not all_results:
             return []
 
+        # Defensive check: warn if lists are misaligned (indicates filtering bug)
+        if fa_results and len(all_results) != len(fa_results):
+            print(f"[SEGMENT FA] WARNING: Result count mismatch! "
+                  f"all_results={len(all_results)}, fa_results={len(fa_results)}")
+
         from recitation_analysis.duration_analysis.fa_backend import compute_cvc_baseline
         from recitation_analysis.duration_analysis.duration_calculator import (
             compute_instance_durations,

recitation_engine/segment_processor.py

@@ -1185,12 +1185,14 @@ def build_segment_infos(vad_segments, segment_audios, match_results, wav2vec_res
         wav2vec_results: List of phoneme transcriptions from Wav2Vec2
 
     Returns:
-        Tuple of (segment_infos, predicted_phonemes)
+        Tuple of (segment_infos, predicted_phonemes, kept_indices)
         - segment_infos: List of SegmentInfo objects (special segments filtered out)
         - predicted_phonemes: List of phoneme strings matching segment_infos
+        - kept_indices: List of original segment indices that were kept (for FA alignment)
     """
     segment_infos = []
     predicted_phonemes = []
+    kept_indices = []  # Track original indices for FA result alignment
     skipped_count = 0
     empty_phoneme_count = 0
 
@@ -1222,6 +1224,7 @@ def build_segment_infos(vad_segments, segment_audios, match_results, wav2vec_res
                 error=error_msg if error_msg else "Transcription failed"
             ))
             predicted_phonemes.append("")
+            kept_indices.append(i)  # Track for FA alignment
         else:
             # Valid match - get transcription by index
             word_start_idx, word_end_idx = match_result[0]
@@ -1251,6 +1254,7 @@ def build_segment_infos(vad_segments, segment_audios, match_results, wav2vec_res
                 match_score=match_score,
                 error=None
             ))
+            kept_indices.append(i)  # Track for FA alignment
 
     if skipped_count > 0:
         print(f"[SEGMENT FILTER] Skipped {skipped_count} special segment(s) (Basmala/Isti'adha)")
@@ -1262,4 +1266,4 @@ def build_segment_infos(vad_segments, segment_audios, match_results, wav2vec_res
     if empty_phoneme_count > 0:
         print(f"[BUILD SEGMENT] WARNING: {empty_phoneme_count} segment(s) have no phoneme data")
 
-    return segment_infos, predicted_phonemes
+    return segment_infos, predicted_phonemes, kept_indices

ui/builder.py

@@ -22,6 +22,7 @@ from config import (
     DURATION_TOLERANCE_STEP,
     JS_POLLING_ENABLED,
     JS_MUTATION_OBSERVER_ENABLED,
+    LEFT_COLUMN_SCALE,
 )
 from shared_state import get_model_bundles
 from utils.phonemizer_utils import get_chapter_list
@@ -146,23 +147,7 @@ def build_interface() -> gr.Blocks:
         components = {}
         states = {}
 
-        # Verse selector
-        verse_components, _ = create_verse_selector(
-            horizontal=True,
-            initial_selection=init["selection"],
-            chapters=chapters_list
-        )
-        components["from_chapter"] = verse_components["from_chapter"]
-        components["from_verse"] = verse_components["from_verse"]
-        components["to_verse"] = verse_components["to_verse"]
-
-        # Control buttons (segmentation is now auto-detected by VAD)
-        controls = create_control_buttons(multi_visible)
-        components["random_btn"] = controls["random_btn"]
-        components["reset_btn"] = controls["reset_btn"]
-        components["multi_models_cb"] = controls["multi_models_cb"]
-
-        # Hidden components to hold session values (avoids gr.State issues in some Gradio versions)
+        # Hidden components to hold session values (must be outside Row/Column for event wiring)
         states["expected_phonemes"] = gr.Textbox(
             value=init["phonemes"], visible=False, interactive=False
         )
@@ -181,9 +166,6 @@ def build_interface() -> gr.Blocks:
         )
 
         # Hidden components for lazy audio loading API
-        # JavaScript triggers lazy_verse_key.change() to fetch audio on navigation
-        # NOTE: Using gr.HTML wrapper with inline CSS to hide, because visible=False
-        # prevents DOM rendering on HF Spaces
         gr.HTML('<div id="lazy-audio-api-wrapper" style="display:none !important; height:0; overflow:hidden;"></div>')
         states["lazy_verse_key"] = gr.Textbox(
             value="",
@@ -200,7 +182,7 @@ def build_interface() -> gr.Blocks:
             elem_classes=["lazy-audio-hidden"]
         )
 
-        # Hidden components for segment clip lazy loading (segment mode reference audio)
+        # Hidden components for segment clip lazy loading
         states["segment_clip_request"] = gr.Textbox(
             value="",
             visible=True,
@@ -216,202 +198,220 @@ def build_interface() -> gr.Blocks:
             elem_classes=["lazy-audio-hidden"]
         )
 
-        # Arabic display
-        components["arabic_display"] = gr.HTML(
-            value=init["arabic_html"] or format_no_verse_message(),
-            label="Selected Verse"
-        )
-
-        # Reference audio section
-        from ui.components import create_reference_audio_section
-        ref_components = create_reference_audio_section(
-            init_audio_html=init["ref_audio_html"]
-        )
-
-        components["reference_audio"] = ref_components["audio_html"]
-        components["reference_dropdown_col"] = ref_components["dropdown_col"]
-        components["reference_dropdown"] = ref_components["dropdown"]
-
-        # Recitation settings (collapsed by default)
-        # Row 1: Madd settings, Row 2: Ghunnah settings + tolerance
-        with gr.Accordion("Recitation Settings", open=False):
-            # Row 1: All Madd length settings
-            with gr.Row():
-                components["madd_tabii_length"] = gr.Radio(
-                    choices=[2],
-                    value=MADD_TABII_LENGTH,
-                    label="Tabi'i",
-                    scale=1,
-                    interactive=False
-                )
-                components["madd_wajib_length"] = gr.Radio(
-                    choices=[4, 5],
-                    value=MADD_WAJIB_MUTTASIL_LENGTH,
-                    label="Wajib Muttasil",
-                    scale=1
-                )
-                components["madd_jaiz_length"] = gr.Radio(
-                    choices=[2, 4, 5],
-                    value=MADD_JAIZ_MUNFASIL_LENGTH,
-                    label="Ja'iz Munfasil",
-                    scale=1
-                )
-                components["madd_lazim_length"] = gr.Radio(
-                    choices=[6],
-                    value=MADD_LAZIM_LENGTH,
-                    label="Lazim",
-                    scale=1,
-                    interactive=False
-                )
-                components["madd_arid_length"] = gr.Radio(
-                    choices=[2, 4, 6],
-                    value=MADD_ARID_LISSUKUN_LENGTH,
-                    label="'Arid Lissukun",
-                    scale=1
+        # ----- Two-column layout -----
+        with gr.Row():
+            # ========== LEFT COLUMN ==========
+            with gr.Column(scale=LEFT_COLUMN_SCALE):
+                # Verse selector
+                verse_components, _ = create_verse_selector(
+                    horizontal=True,
+                    initial_selection=init["selection"],
+                    chapters=chapters_list
                 )
-                components["madd_leen_length"] = gr.Radio(
-                    choices=[2, 4, 6],
-                    value=MADD_LEEN_LENGTH,
-                    label="Leen",
-                    scale=1
+                components["from_chapter"] = verse_components["from_chapter"]
+                components["from_verse"] = verse_components["from_verse"]
+                components["to_verse"] = verse_components["to_verse"]
+
+                # Control buttons (segmentation is now auto-detected by VAD)
+                controls = create_control_buttons(multi_visible)
+                components["random_btn"] = controls["random_btn"]
+                components["reset_btn"] = controls["reset_btn"]
+                components["multi_models_cb"] = controls["multi_models_cb"]
+
+                # Audio input
+                components["audio_input"] = gr.Audio(
+                    sources=["microphone", "upload"],
+                    type="filepath",
+                    label="Record or Upload Your Recitation"
                 )
-            # Row 2: Ghunnah settings + tolerance slider
-            with gr.Row():
-                components["iqlab_ikhfaa_sound"] = gr.Radio(
-                    choices=["meem ghunnah", "ikhfaa"],
-                    value=IQLAB_IKHFAA_SHAFAWI_SOUND,
-                    label="Iqlab/Ikhfaa Shafawi Sound",
-                    scale=1
-                )
-                components["ghunnah_length"] = gr.Radio(
-                    choices=[2, 3],
-                    value=GHUNNAH_LENGTH,
-                    label="Ghunnah Length",
-                    scale=1
-                )
-                components["duration_tolerance"] = gr.Slider(
-                    minimum=DURATION_TOLERANCE_MIN,
-                    maximum=DURATION_TOLERANCE_MAX,
-                    step=DURATION_TOLERANCE_STEP,
-                    value=DURATION_TOLERANCE,
-                    label="Duration Tolerance",
-                    info="How much deviation from expected length to allow (harakat)",
-                    scale=2
-                )
-
-        # Audio input
-        # Using type="filepath" to access original filename for auto-surah selection
-        components["audio_input"] = gr.Audio(
-            sources=["microphone", "upload"],
-            type="filepath",
-            label="Record or Upload Your Recitation"
-        )
 
-        # Analyze button
-        components["analyze_btn"] = gr.Button(
-            "Analyze", variant="primary", visible=False
-        )
-
-        # Analysis tabs
-        with gr.Tabs():
-            with gr.Tab("Error Analysis"):
-                components["error_display"] = gr.HTML(value="", label="Error Analysis")
-            with gr.Tab("Ghunnah Analysis"):
-                with gr.Row(elem_classes=["sort-row"]):
-                    components["ghunnah_sort_dropdown"] = gr.Radio(
-                        choices=[("Text Order", "text_order"), ("By Rule", "by_rule"), ("By Errors", "by_errors")],
-                        value="text_order",
-                        show_label=False,
-                        interactive=True,
-                        container=False,
-                        visible=False,
-                        elem_classes=["sort-toggle"],
-                    )
-                components["ghunnah_display"] = gr.HTML(
-                    value=init["ghunnah_html"], label="Ghunnah Analysis"
-                )
-            with gr.Tab("Madd Analysis"):
-                with gr.Row(elem_classes=["sort-row"]):
-                    components["madd_sort_dropdown"] = gr.Radio(
-                        choices=[("Text Order", "text_order"), ("By Rule", "by_rule"), ("By Errors", "by_errors")],
-                        value="text_order",
-                        show_label=False,
-                        interactive=True,
-                        container=False,
-                        visible=False,
-                        elem_classes=["sort-toggle"],
-                    )
-                components["madd_display"] = gr.HTML(
-                    value=init["madd_html"], label="Madd Analysis"
+                # Analyze button
+                components["analyze_btn"] = gr.Button(
+                    "Analyze", variant="primary", visible=False
                 )
-            if DEV_TAB_VISIBLE:
-                with gr.Tab("Dev"):
 
+                # Recitation settings (expanded by default)
+                with gr.Accordion("Recitation Settings", open=True):
+                    # Row 1: All Madd length settings
                     with gr.Row():
-                        with gr.Column(scale=1):
-                            components["dev_canonical_phonemes"] = gr.Textbox(
-                                label="Canonical Phonemes (from phonemizer)",
-                                value=init["phonemes"],
-                                lines=3,
-                                interactive=False,
-                            )
-                        with gr.Column(scale=1):
-                            components["dev_detected_phonemes"] = gr.Textbox(
-                                label="Detected Phonemes (edit to simulate errors)",
-                                value=init["phonemes"],
-                                lines=3,
-                                interactive=True,
-                                placeholder="Modify phonemes here to simulate detection errors...",
-                            )
-
-                    with gr.Row():
-                        components["dev_simulate_btn"] = gr.Button(
-                            "Simulate Errors", variant="primary"
+                        components["madd_tabii_length"] = gr.Radio(
+                            choices=[2],
+                            value=MADD_TABII_LENGTH,
+                            label="Tabi'i",
+                            scale=1,
+                            interactive=False
                         )
-                        components["dev_reset_btn"] = gr.Button(
-                            "Reset to Canonical", variant="secondary"
+                        components["madd_wajib_length"] = gr.Radio(
+                            choices=[4, 5],
+                            value=MADD_WAJIB_MUTTASIL_LENGTH,
+                            label="Wajib Muttasil",
+                            scale=1
                         )
-
-                    components["dev_simulation_output"] = gr.HTML(value="", label="Simulation Result")
-
-                    with gr.Row():
-                        components["dev_test_name"] = gr.Textbox(
-                            label="Test Name",
-                            placeholder="Enter a name for this test case...",
-                            scale=2,
+                        components["madd_jaiz_length"] = gr.Radio(
+                            choices=[2, 4, 5],
+                            value=MADD_JAIZ_MUNFASIL_LENGTH,
+                            label="Ja'iz Munfasil",
+                            scale=1
                         )
-                        components["dev_save_btn"] = gr.Button(
-                            "Save Test Case", variant="secondary", scale=1
+                        components["madd_lazim_length"] = gr.Radio(
+                            choices=[6],
+                            value=MADD_LAZIM_LENGTH,
+                            label="Lazim",
+                            scale=1,
+                            interactive=False
                         )
-
-                    components["dev_save_status"] = gr.HTML(value="", label="Save Status")
-
-                    gr.Markdown("### Test Runner")
+                        components["madd_arid_length"] = gr.Radio(
+                            choices=[2, 4, 6],
+                            value=MADD_ARID_LISSUKUN_LENGTH,
+                            label="'Arid Lissukun",
+                            scale=1
+                        )
+                        components["madd_leen_length"] = gr.Radio(
+                            choices=[2, 4, 6],
+                            value=MADD_LEEN_LENGTH,
+                            label="Leen",
+                            scale=1
+                        )
+                    # Row 2: Ghunnah settings + tolerance slider
                     with gr.Row():
-                        components["dev_test_source"] = gr.Radio(
-                            choices=["MDD Tests (mdd_tests.yaml)", "Formal Tests (error_analysis/)"],
-                            value="MDD Tests (mdd_tests.yaml)",
-                            label="Test Source",
-                            scale=2,
+                        components["iqlab_ikhfaa_sound"] = gr.Radio(
+                            choices=["meem ghunnah", "ikhfaa"],
+                            value=IQLAB_IKHFAA_SHAFAWI_SOUND,
+                            label="Iqlab/Ikhfaa Shafawi Sound",
+                            scale=1
                         )
-                        components["dev_load_btn"] = gr.Button(
-                            "Load & Run Tests", variant="primary", scale=1
+                        components["ghunnah_length"] = gr.Radio(
+                            choices=[2, 3],
+                            value=GHUNNAH_LENGTH,
+                            label="Ghunnah Length",
+                            scale=1
+                        )
+                        components["duration_tolerance"] = gr.Slider(
+                            minimum=DURATION_TOLERANCE_MIN,
+                            maximum=DURATION_TOLERANCE_MAX,
+                            step=DURATION_TOLERANCE_STEP,
+                            value=DURATION_TOLERANCE,
+                            label="Duration Tolerance",
+                            info="How much deviation from expected length to allow (harakat)",
+                            scale=2
                         )
 
-                    components["dev_tests_output"] = gr.HTML(value="", label="Test Results")
+            # ========== RIGHT COLUMN ==========
+            with gr.Column(scale=10 - LEFT_COLUMN_SCALE, elem_classes=["right-column"]):
+                # Arabic display
+                components["arabic_display"] = gr.HTML(
+                    value=init["arabic_html"] or format_no_verse_message(),
+                    label="Selected Verse"
+                )
 
-                    gr.Markdown("### Alignment Visualization")
-                    with gr.Row():
-                        components["dev_alignment_btn"] = gr.Button(
-                            "Generate Alignment Plot", variant="secondary", scale=1
+                # Reference audio section
+                from ui.components import create_reference_audio_section
+                ref_components = create_reference_audio_section(
+                    init_audio_html=init["ref_audio_html"]
+                )
+                components["reference_audio"] = ref_components["audio_html"]
+                components["reference_dropdown_col"] = ref_components["dropdown_col"]
+                components["reference_dropdown"] = ref_components["dropdown"]
+
+                # Analysis tabs
+                with gr.Tabs():
+                    with gr.Tab("Error Analysis"):
+                        components["error_display"] = gr.HTML(value="", label="Error Analysis")
+                    with gr.Tab("Ghunnah Analysis"):
+                        with gr.Row(elem_classes=["sort-row"]):
+                            components["ghunnah_sort_dropdown"] = gr.Radio(
+                                choices=[("Text Order", "text_order"), ("By Rule", "by_rule"), ("By Errors", "by_errors")],
+                                value="text_order",
+                                show_label=False,
+                                interactive=True,
+                                container=False,
+                                visible=False,
+                                elem_classes=["sort-toggle"],
+                            )
+                        components["ghunnah_display"] = gr.HTML(
+                            value=init["ghunnah_html"], label="Ghunnah Analysis"
                         )
-                    components["dev_alignment_status"] = gr.HTML(value="", label="Status")
-                    components["dev_alignment_image"] = gr.Image(
-                        value=None,
-                        label="CTC Forced Alignment",
-                        type="filepath",
-                        show_download_button=True,
-                    )
+                    with gr.Tab("Madd Analysis"):
+                        with gr.Row(elem_classes=["sort-row"]):
+                            components["madd_sort_dropdown"] = gr.Radio(
+                                choices=[("Text Order", "text_order"), ("By Rule", "by_rule"), ("By Errors", "by_errors")],
+                                value="text_order",
+                                show_label=False,
+                                interactive=True,
+                                container=False,
+                                visible=False,
+                                elem_classes=["sort-toggle"],
+                            )
+                        components["madd_display"] = gr.HTML(
+                            value=init["madd_html"], label="Madd Analysis"
+                        )
+                    if DEV_TAB_VISIBLE:
+                        with gr.Tab("Dev"):
+                            with gr.Row():
+                                with gr.Column(scale=1):
+                                    components["dev_canonical_phonemes"] = gr.Textbox(
+                                        label="Canonical Phonemes (from phonemizer)",
+                                        value=init["phonemes"],
+                                        lines=3,
+                                        interactive=False,
+                                    )
+                                with gr.Column(scale=1):
+                                    components["dev_detected_phonemes"] = gr.Textbox(
+                                        label="Detected Phonemes (edit to simulate errors)",
+                                        value=init["phonemes"],
+                                        lines=3,
+                                        interactive=True,
+                                        placeholder="Modify phonemes here to simulate detection errors...",
+                                    )
+
+                            with gr.Row():
+                                components["dev_simulate_btn"] = gr.Button(
+                                    "Simulate Errors", variant="primary"
+                                )
+                                components["dev_reset_btn"] = gr.Button(
+                                    "Reset to Canonical", variant="secondary"
+                                )
+
+                            components["dev_simulation_output"] = gr.HTML(value="", label="Simulation Result")
+
+                            with gr.Row():
+                                components["dev_test_name"] = gr.Textbox(
+                                    label="Test Name",
+                                    placeholder="Enter a name for this test case...",
+                                    scale=2,
+                                )
+                                components["dev_save_btn"] = gr.Button(
+                                    "Save Test Case", variant="secondary", scale=1
+                                )
+
+                            components["dev_save_status"] = gr.HTML(value="", label="Save Status")
+
+                            gr.Markdown("### Test Runner")
+                            with gr.Row():
+                                components["dev_test_source"] = gr.Radio(
+                                    choices=["MDD Tests (mdd_tests.yaml)", "Formal Tests (error_analysis/)"],
+                                    value="MDD Tests (mdd_tests.yaml)",
+                                    label="Test Source",
+                                    scale=2,
+                                )
+                                components["dev_load_btn"] = gr.Button(
+                                    "Load & Run Tests", variant="primary", scale=1
+                                )
+
+                            components["dev_tests_output"] = gr.HTML(value="", label="Test Results")
+
+                            gr.Markdown("### Alignment Visualization")
+                            with gr.Row():
+                                components["dev_alignment_btn"] = gr.Button(
+                                    "Generate Alignment Plot", variant="secondary", scale=1
+                                )
+                            components["dev_alignment_status"] = gr.HTML(value="", label="Status")
+                            components["dev_alignment_image"] = gr.Image(
+                                value=None,
+                                label="CTC Forced Alignment",
+                                type="filepath",
+                                show_download_button=True,
+                            )
 
         # ----- Wire all events -----
         wire_all_events(components, states, handlers)

ui/components/verse_selector.py

@@ -200,7 +200,7 @@ def create_verse_selector(horizontal=False, initial_selection=None, chapters=Non
                 label="From Verse",
                 interactive=from_verse_interactive,
                 scale=1,
-                min_width=200,
+                min_width=80,
                 allow_custom_value=True,
             ),
             "to_verse": gr.Dropdown(
@@ -209,7 +209,7 @@ def create_verse_selector(horizontal=False, initial_selection=None, chapters=Non
                 label="To Verse",
                 interactive=to_verse_interactive,
                 scale=1,
-                min_width=200,
+                min_width=80,
                 allow_custom_value=True,
             ),
         }

ui/styles.py

@@ -204,6 +204,13 @@ def get_custom_css() -> str:
     .sort-toggle input[type="radio"] {
         display: none !important;
     }
+    /* Right column - reduce gap between arabic display and reference audio */
+    .right-column {
+        gap: 8px !important;
+    }
+    .right-column > div:first-child {
+        margin-bottom: 0 !important;
+    }
     """
 
     return get_force_dark_mode_css() + get_digital_khatt_font_face(DIGITAL_KHATT_FONT_B64) + get_uthmanic_font_face() + toggle_button_css