Add i8n

app.py

@@ -112,13 +112,14 @@ def parse_args():
 # Must be created at import time.
 initialize_app()
 
-# Initialize locale from environment or default to English
-# Set TAJWEED_LOCALE=ar to run in Arabic mode
+# Initialize locale from environment (fallback for initial render)
+# The actual locale is set dynamically via ?__locale query param on page load
+# User preference is stored in localStorage and applied automatically
 from i8n import set_locale, get_available_locales
 env_locale = os.environ.get("TAJWEED_LOCALE", "en")
 if env_locale in get_available_locales():
     set_locale(env_locale)
-    print(f"Locale set to: {env_locale}")
+    print(f"Default locale: {env_locale}")
 
 # Import after initialization (depends on shared_state being populated)
 from ui.builder import build_interface

recitation_engine/model_loader.py

@@ -120,11 +120,8 @@ def load_models():
         Tuple (bundles, errors) where bundles is a list of dicts with keys
         path, processor, model. errors is a list of error strings (may be empty).
     """
-    # Return cached models if already loaded
+    # Return cached models if already loaded (don't move them - use move_models_to_gpu() for that)
     if _model_cache["loaded"]:
-        # Ensure devices are correct in case GPUs became available later
-        for bundle in _model_cache["bundles"]:
-            bundle["model"] = _ensure_device(bundle["model"])
         return _model_cache["bundles"], _model_cache["errors"]
     
     bundles = []

recitation_engine/segment_processor.py

@@ -147,19 +147,16 @@ def move_segment_models_to_gpu():
 
 
 def _load_segmenter():
-    """Load the VAD segmenter model."""
-    device, dtype = _get_device_and_dtype()
+    """Load the VAD segmenter model.
 
+    Note: This function only loads the model, it does NOT move it between devices.
+    Use move_segment_models_to_gpu() to move models to GPU inside GPU contexts.
+    """
+    # If already loaded, just return it (don't move it)
     if _segmenter_cache["loaded"]:
-        model = _segmenter_cache["model"]
-        if model is not None:
-            current_device = next(model.parameters()).device
-            current_dtype = next(model.parameters()).dtype
-            if current_device != device or current_dtype != dtype:
-                model = model.to(device=device, dtype=dtype)
-                _segmenter_cache["model"] = model
-                print(f"✓ Segmenter moved to {device}")
         return _segmenter_cache["model"], _segmenter_cache["processor"]
+
+    device, dtype = _get_device_and_dtype()
     
     try:
         from transformers import AutoFeatureExtractor, AutoModelForAudioFrameClassification
@@ -180,25 +177,17 @@ def _load_segmenter():
 
 
 def _load_whisper():
-    """Load the Whisper ASR model."""
-    device, dtype = _get_device_and_dtype()
+    """Load the Whisper ASR model.
 
+    Note: This function only loads the model, it does NOT move it between devices.
+    Use move_segment_models_to_gpu() to move models to GPU inside GPU contexts.
+    """
+    # If already loaded, just return it (don't move it)
     if _whisper_cache["loaded"]:
-        model = _whisper_cache["model"]
-        if model is not None:
-            current_device = next(model.parameters()).device
-            current_dtype = next(model.parameters()).dtype
-            if current_device != device or current_dtype != dtype:
-                model = model.to(device=device, dtype=dtype)
-                _whisper_cache["model"] = model
-                print(f"✓ Whisper moved to {device}")
-        prompt_ids = _whisper_cache["prompt_ids"]
-        if prompt_ids is not None and prompt_ids.device != device:
-            prompt_ids = prompt_ids.to(device)
-            _whisper_cache["prompt_ids"] = prompt_ids
-
-        return (_whisper_cache["model"], _whisper_cache["processor"], 
+        return (_whisper_cache["model"], _whisper_cache["processor"],
                 _whisper_cache["gen_config"], _whisper_cache["prompt_ids"])
+
+    device, dtype = _get_device_and_dtype()
     
     try:
         from transformers import AutoProcessor, AutoModelForSpeechSeq2Seq, GenerationConfig

ui/builder.py

@@ -5,7 +5,7 @@ Assembles all UI components and wires event handlers.
 """
 import gradio as gr
 
-from i8n import t, get_locale
+from i8n import t, get_locale, set_locale, get_available_locales
 from config import (
     DEV_TAB_VISIBLE,
     IS_HF_SPACE,
@@ -46,6 +46,85 @@ from recitation_engine.reference_audio import get_verse_audio_path, parse_verse_
 from ui.handlers.lazy_audio import fetch_segment_clip_lazy
 
 
+def _on_locale_load(request: gr.Request):
+    """
+    Handle locale initialization on page load.
+
+    Reads the __locale query parameter and updates all component labels
+    to use the correct language.
+    """
+    # Read locale from query parameter
+    locale = request.query_params.get("__locale", "en")
+
+    # Validate and set locale
+    if locale in get_available_locales():
+        set_locale(locale)
+    else:
+        locale = "en"
+        set_locale("en")
+
+    # Build updated header HTML with correct locale
+    header_html = f"""
+    <div style="text-align: center;">
+        <h1 style="margin-bottom: 0;">{t("header.title")}</h1>
+    </div>
+    """
+
+    # Return updates for all translatable components
+    # Order must match the outputs list in the .load() event
+    return [
+        # 1. Header HTML
+        gr.update(value=header_html),
+        # 2. Language toggle (set to current locale)
+        gr.update(value=locale),
+        # 3. Audio input label
+        gr.update(label=t("audio.label")),
+        # 4. Analyze button
+        gr.update(value=t("controls.analyze")),
+        # 5. Duration tolerance slider
+        gr.update(label=t("settings.duration_tolerance"), info=t("settings.duration_tolerance_info")),
+        # 6. Iqlab/Ikhfaa sound radio
+        gr.update(
+            label=t("tajweed_settings.iqlab_ikhfaa_sound"),
+            choices=[
+                (t("tajweed_settings.meem_ghunnah"), "meem ghunnah"),
+                (t("tajweed_settings.ikhfaa"), "ikhfaa")
+            ]
+        ),
+        # 7. Ghunnah length radio
+        gr.update(label=t("tajweed_settings.ghunnah_length")),
+        # 8. Madd Jaiz length radio
+        gr.update(label=t("tajweed_settings.jaiz_munfasil")),
+        # 9. Madd Arid length radio
+        gr.update(label=t("tajweed_settings.arid_lissukun")),
+        # 10. Madd Leen length radio
+        gr.update(label=t("tajweed_settings.leen")),
+        # 11. Madd Wajib length radio
+        gr.update(label=t("tajweed_settings.wajib_muttasil")),
+        # 12. Madd Lazim length radio
+        gr.update(label=t("tajweed_settings.lazim")),
+        # 13. Madd Tabii length radio
+        gr.update(label=t("tajweed_settings.tabii")),
+        # 14. Error sort dropdown
+        gr.update(choices=[
+            (t("sort_options.text_order"), "text_order"),
+            (t("sort_options.by_errors"), "by_errors")
+        ]),
+        # 15. Ghunnah sort dropdown
+        gr.update(choices=[
+            (t("sort_options.text_order"), "text_order"),
+            (t("sort_options.by_rule"), "by_rule"),
+            (t("sort_options.by_errors"), "by_errors")
+        ]),
+        # 16. Madd sort dropdown
+        gr.update(choices=[
+            (t("sort_options.text_order"), "text_order"),
+            (t("sort_options.by_rule"), "by_rule"),
+            (t("sort_options.by_errors"), "by_errors")
+        ]),
+    ]
+
+
 def _compute_initial_state(chapters_list: list) -> dict:
     """
     Compute initial state by phonemizing the default verse selection.
@@ -136,62 +215,29 @@ def build_interface() -> gr.Blocks:
         if use_css_fallback:
             inject_css_fallback()
 
-        # Header with language toggle
-        current_locale = get_locale()
-        en_active = "active" if current_locale == "en" else ""
-        ar_active = "active" if current_locale == "ar" else ""
+        # ----- Create all components -----
+        components = {}
+        states = {}
 
-        gr.HTML(
+        # Header with title
+        components["header_html"] = gr.HTML(
             f"""
             <div style="text-align: center;">
                 <h1 style="margin-bottom: 0;">{t("header.title")}</h1>
             </div>
-            <div class="lang-toggle-container">
-                <div class="lang-toggle">
-                    <button id="lang-btn-en" class="{en_active}" onclick="switchLocale('en')">English</button>
-                    <button id="lang-btn-ar" class="{ar_active}" onclick="switchLocale('ar')">العربية</button>
-                </div>
-            </div>
-            <script>
-                // Initialize locale from localStorage on page load
-                (function() {{
-                    const storedLocale = localStorage.getItem('tajweed_locale');
-                    const currentServerLocale = '{current_locale}';
-
-                    // If stored locale differs from server locale, reload with locale param
-                    if (storedLocale && storedLocale !== currentServerLocale) {{
-                        // Update URL and reload to apply the stored locale
-                        const url = new URL(window.location.href);
-                        url.searchParams.set('__locale', storedLocale);
-                        if (!window.location.search.includes('__locale=' + storedLocale)) {{
-                            window.location.href = url.toString();
-                        }}
-                    }}
-
-                    // Sync toggle button visual state with stored preference
-                    if (storedLocale) {{
-                        document.getElementById('lang-btn-en')?.classList.toggle('active', storedLocale === 'en');
-                        document.getElementById('lang-btn-ar')?.classList.toggle('active', storedLocale === 'ar');
-                    }}
-                }})();
-
-                function switchLocale(locale) {{
-                    const currentLocale = localStorage.getItem('tajweed_locale') || 'en';
-                    if (locale !== currentLocale) {{
-                        localStorage.setItem('tajweed_locale', locale);
-                        // Reload with locale query param
-                        const url = new URL(window.location.href);
-                        url.searchParams.set('__locale', locale);
-                        window.location.href = url.toString();
-                    }}
-                }}
-            </script>
             """
         )
 
-        # ----- Create all components -----
-        components = {}
-        states = {}
+        # Language toggle using native Gradio Radio (styled via CSS)
+        current_locale = get_locale()
+        with gr.Row(elem_classes=["lang-toggle-container"]):
+            components["lang_toggle"] = gr.Radio(
+                choices=[("English", "en"), ("العربية", "ar")],
+                value=current_locale,
+                show_label=False,
+                container=False,
+                elem_classes=["lang-toggle-radio"],
+            )
 
         # Hidden components to hold session values (must be outside Row/Column for event wiring)
         states["expected_phonemes"] = gr.Textbox(
@@ -530,4 +576,54 @@ def build_interface() -> gr.Blocks:
             outputs=[states["segment_clip_response"]]
         )
 
+        # ----- Wire locale initialization on page load -----
+        # This reads the __locale query parameter and updates all translatable components
+        app.load(
+            fn=_on_locale_load,
+            inputs=[],
+            outputs=[
+                components["header_html"],
+                components["lang_toggle"],
+                components["audio_input"],
+                components["analyze_btn"],
+                components["duration_tolerance"],
+                components["iqlab_ikhfaa_sound"],
+                components["ghunnah_length"],
+                components["madd_jaiz_length"],
+                components["madd_arid_length"],
+                components["madd_leen_length"],
+                components["madd_wajib_length"],
+                components["madd_lazim_length"],
+                components["madd_tabii_length"],
+                components["error_sort_dropdown"],
+                components["ghunnah_sort_dropdown"],
+                components["madd_sort_dropdown"],
+            ]
+        )
+
+        # ----- Wire language toggle change -----
+        # When user clicks the toggle, store in localStorage and reload with new locale
+        locale_change_js = """
+            (locale) => {
+                if (locale) {
+                    const url = new URL(window.location.href);
+                    const currentUrlLocale = url.searchParams.get('__locale');
+
+                    // Only reload if URL locale is different (prevents infinite loop)
+                    if (currentUrlLocale !== locale) {
+                        localStorage.setItem('tajweed_locale', locale);
+                        url.searchParams.set('__locale', locale);
+                        setTimeout(() => { window.location.href = url.toString(); }, 100);
+                    }
+                }
+                return locale;
+            }
+        """
+        components["lang_toggle"].change(
+            fn=lambda x: x,
+            inputs=[components["lang_toggle"]],
+            outputs=[components["lang_toggle"]],
+            js=locale_change_js
+        )
+
     return app

ui/styles.py

@@ -234,22 +234,33 @@ def get_custom_css() -> str:
     .ref-audio-player audio {
         height: 40px !important;
     }
-    /* Language toggle - styled like sort toggle pills */
+    /* Language toggle container - centered under title */
     .lang-toggle-container {
         display: flex !important;
         justify-content: center !important;
         margin-top: 4px !important;
         margin-bottom: 8px !important;
+        min-height: auto !important;
+        padding: 0 !important;
+    }
+    .lang-toggle-container > div {
+        flex: 0 0 auto !important;
+        width: auto !important;
     }
-    .lang-toggle {
+    /* Language toggle radio - pill style like sort toggle */
+    .lang-toggle-radio {
         display: inline-flex !important;
-        gap: 0 !important;
+        padding: 0 !important;
         background: var(--background-fill-primary, #1f2937) !important;
         border-radius: 20px !important;
-        padding: 3px !important;
         border: 1px solid var(--border-color-primary, #374151) !important;
     }
-    .lang-toggle button {
+    .lang-toggle-radio > div {
+        display: inline-flex !important;
+        gap: 0 !important;
+        padding: 3px !important;
+    }
+    .lang-toggle-radio label {
         padding: 6px 16px !important;
         border: none !important;
         border-radius: 17px !important;
@@ -259,17 +270,21 @@ def get_custom_css() -> str:
         font-weight: 500 !important;
         cursor: pointer !important;
         transition: all 0.2s ease !important;
-        font-family: inherit !important;
+        margin: 0 !important;
     }
-    .lang-toggle button:hover:not(.active) {
+    .lang-toggle-radio label:hover {
         background: var(--background-fill-secondary, #374151) !important;
         color: var(--body-text-color, #f3f4f6) !important;
     }
-    .lang-toggle button.active {
+    .lang-toggle-radio input:checked + label,
+    .lang-toggle-radio label.selected {
         background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
         color: white !important;
         box-shadow: 0 2px 6px rgba(249, 115, 22, 0.35) !important;
     }
+    .lang-toggle-radio input[type="radio"] {
+        display: none !important;
+    }
     """
 
     return get_force_dark_mode_css() + get_digital_khatt_font_face(DIGITAL_KHATT_FONT_B64) + get_uthmanic_font_face() + toggle_button_css