fix to ui to visible

app.py

@@ -532,9 +532,6 @@ with gr.Blocks(title="MomsVoice", css=css_code) as demo:
                         pause_btn  = gr.Button("⏸ Pause",          variant="secondary",  scale=1, visible=False)
                         resume_btn = gr.Button("↩️ Resume Story",   variant="secondary",  scale=2, visible=False)
 
-                    with gr.Row():
-                        ask_btn = gr.Button("❓ Ask a Question", variant="primary", scale=2, visible=False)
-
                     chunk_status = gr.HTML("""
                         <div style="margin-top: 8px; font-size: 10px; color: #64748b; font-family: monospace; text-align: center;">
                             Chunk 0 / 0
@@ -553,14 +550,14 @@ with gr.Blocks(title="MomsVoice", css=css_code) as demo:
                     story_text_display = gr.HTML(visible=False)
                     timeline_slider = gr.Slider(minimum=0, maximum=100, step=1, value=0, label="📍 Story position (paragraph)", visible=False)
 
-                    # Q&A Panel
+                    # Q&A Panel — always visible
                     qa_panel = gr.HTML("""
                         <div style="margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 16px;">
                             <h4 style="font-family: 'Playfair Display', Georgia, serif; font-size: 14px; margin-bottom: 12px; color: #FAF7F2;">❓ Ask About the Story</h4>
                         </div>
-                    """, visible=False)
+                    """)
 
-                    with gr.Group(visible=False) as qa_input_group:
+                    with gr.Group() as qa_input_group:
                         question_audio = gr.Audio(
                             sources=["microphone"], type="filepath",
                             label="🎤 Ask your question — answer generates when you stop recording",
@@ -568,11 +565,17 @@ with gr.Blocks(title="MomsVoice", css=css_code) as demo:
                             format="wav",
                             elem_id="qa_audio_input",
                         )
-                        question_text = gr.Textbox(visible=False)
+                        question_text = gr.Textbox(
+                            placeholder="…or type a question here",
+                            label="Question (text fallback)",
+                        )
                         submit_question_btn = gr.Button("🔍 Get Answer", variant="primary", elem_id="qa_submit_btn")
 
-                    answer_display = gr.HTML(visible=False)
-                    answer_audio = gr.Audio(label="Answer Audio", interactive=False, visible=False, autoplay=True)
+                    answer_display = gr.HTML()
+                    answer_audio = gr.Audio(label="Answer Audio", interactive=False, autoplay=True, show_download_button=False)
+
+                    with gr.Row():
+                        ask_btn = gr.Button("❓ Ask a Question", variant="primary", scale=2, visible=False)
 
         # TAB 3: Clone Voice Studio
         with gr.TabItem("🎙️ Clone Voice Studio") as clone_tab:
@@ -945,8 +948,7 @@ with gr.Blocks(title="MomsVoice", css=css_code) as demo:
                    "<div style='text-align:center;font-size:10px;color:#64748b;font-family:monospace;margin-top:8px;'>No content loaded</div>",
                    gr.Button(visible=True), gr.Button(visible=False), gr.Button(visible=False),
                    gr.Slider(value=0), render_story_text(paras, 0) if paras else "",
-                   gr.HTML(visible=False),
-                   gr.HTML(visible=False), gr.Group(visible=False), gr.Button(visible=False))
+                   gr.HTML(visible=False), gr.Button(visible=False))
             return
 
         n = len(tts_chunks)
@@ -954,17 +956,15 @@ with gr.Blocks(title="MomsVoice", css=css_code) as demo:
                f"<div style='text-align:center;font-size:10px;color:#4ade80;font-family:monospace;margin-top:8px;'>▶ Paragraph 1 / {n_paras}</div>",
                gr.Button(visible=False), gr.Button(visible=True), gr.Button(visible=False),
                gr.Slider(value=0), render_story_text(paras, 0) if paras else "",
-               gr.HTML(visible=False),
-               gr.HTML(visible=False), gr.Group(visible=False), gr.Button(visible=False))
+               gr.HTML(visible=False), gr.Button(visible=False))
 
         for sample_rate, wav, i, total, err in generate_audio_stream(tts_chunks, voice_profile_id=profile_id):
-            # Map chunk index to paragraph index
             para_idx = min(int(i * n_paras / total), n_paras - 1) if total > 0 else 0
             if err:
                 yield (gr.update(), f"<div style='color:#ef4444;font-size:11px;'>Something went wrong. Try again.</div>", "",
                        gr.Button(visible=True), gr.Button(visible=False), gr.Button(visible=False),
                        gr.Slider(value=para_idx), gr.update(), gr.HTML(visible=False),
-                       gr.HTML(visible=False), gr.Group(visible=False), gr.Button(visible=False))
+                       gr.Button(visible=False))
                 return
             para_idx = min(int(i * n_paras / total), n_paras - 1) if total > 0 else 0
             is_last = (i + 1 >= total)
@@ -972,21 +972,18 @@ with gr.Blocks(title="MomsVoice", css=css_code) as demo:
             yield ((sample_rate, wav.astype(np.float32) if hasattr(wav, 'astype') else wav), _status_playing, para_status,
                    gr.Button(visible=False), gr.Button(visible=True), gr.Button(visible=True),
                    gr.Slider(value=para_idx), render_story_text(paras, para_idx),
-                   gr.HTML(visible=is_last),
-                   gr.HTML(visible=False), gr.Group(visible=False), gr.Button(visible=False))
+                   gr.HTML(visible=is_last), gr.Button(visible=True))
 
         yield (gr.update(), _status_done, f"<div style='text-align:center;font-size:10px;color:#94a3b8;font-family:monospace;margin-top:8px;'>✅ Story complete</div>",
                gr.Button(visible=True), gr.Button(visible=False), gr.Button(visible=False),
                gr.Slider(value=max(n_paras - 1, 0)), render_story_text(paras, max(n_paras - 1, 0)),
-               gr.HTML(visible=True),
-               gr.HTML(visible=False), gr.Group(visible=False), gr.Button(visible=False))
+               gr.HTML(visible=True), gr.Button(visible=True))
 
     play_event = play_btn.click(
         stream_tts,
         inputs=[tts_chunks_state, paragraphs_state, voice_profile_state],
         outputs=[player_audio_control, player_status_bar, chunk_status, play_btn, pause_btn, ask_btn,
-                 timeline_slider, story_text_display, story_finished_panel,
-                 qa_panel, qa_input_group, resume_btn]
+                 timeline_slider, story_text_display, story_finished_panel, resume_btn]
     )
 
     # 6. Pause button — PAUSED state
@@ -1033,46 +1030,43 @@ with gr.Blocks(title="MomsVoice", css=css_code) as demo:
         """
         return (
             status_html,
-            gr.Button(visible=False),
-            gr.Button(visible=False),
-            gr.Button(visible=False),
-            gr.Button(visible=True),
-            gr.HTML(visible=True),
-            gr.Group(visible=True),
-            gr.HTML(visible=False),
-            gr.Audio(visible=False),
+            gr.Button(visible=False),  # play_btn
+            gr.Button(visible=False),  # pause_btn
+            gr.Button(visible=False),  # ask_btn
+            gr.Button(visible=True),   # resume_btn
+            gr.HTML(value=""),         # answer_display — clear previous answer
+            gr.Audio(visible=False),   # answer_audio
         )
 
     ask_btn.click(
         enter_asking_state,
         inputs=[],
-        outputs=[player_status_bar, play_btn, pause_btn, ask_btn, resume_btn, qa_panel, qa_input_group, answer_display, answer_audio],
+        outputs=[player_status_bar, play_btn, pause_btn, ask_btn, resume_btn, answer_display, answer_audio],
         cancels=[play_event],
     )
 
     # 9. Submit question — LFM2.5-Audio end-to-end (single model: audio-in → audio+text-out)
-    def handle_question_submit(question_txt, question_audio_path, paragraphs, slider_val, profile_id):
-        q_txt = (question_txt or "").strip()
-        has_audio = question_audio_path is not None and question_audio_path != ""
-
-        result = build_qa_response(
-            question_text=q_txt,
-            question_audio_path=question_audio_path if has_audio else None,
-            paragraphs=paragraphs,
-            output_dir=SAMPLE_SOUNDS_DIR,
-            answer_fn=answer_question_audio,
-            max_new_tokens=512,
-        )
+    _GENERATING_HTML = """
+        <div style="margin-top: 12px; padding: 20px 16px; background: rgba(245,132,31,0.08); border: 1px solid rgba(245,132,31,0.25); border-radius: 14px; text-align: center;">
+            <div style="font-size: 28px; margin-bottom: 10px;">🎧</div>
+            <div style="font-size: 11px; color: #f5841f; font-family: monospace; font-weight: 700; letter-spacing: 1px;">GENERATING ANSWER...</div>
+            <div style="margin-top: 10px; display: flex; justify-content: center; gap: 6px;">
+                <span style="width: 7px; height: 7px; border-radius: 50%; background: #f5841f; display: inline-block; animation: pulse 1.2s ease-in-out infinite;"></span>
+                <span style="width: 7px; height: 7px; border-radius: 50%; background: #f5841f; display: inline-block; animation: pulse 1.2s ease-in-out 0.3s infinite;"></span>
+                <span style="width: 7px; height: 7px; border-radius: 50%; background: #f5841f; display: inline-block; animation: pulse 1.2s ease-in-out 0.6s infinite;"></span>
+            </div>
+        </div>
+    """
 
+    def _build_answer_outputs(result):
         if not result["ok"]:
-            answer_html = """
+            error_html = """
                 <div style="padding: 10px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; font-size: 12px; color: #991b1b;">
                     Please type a question or record one with the microphone.
                 </div>
             """
-            return gr.HTML(value=answer_html, visible=True), gr.Audio(visible=False)
+            return gr.HTML(value=error_html, visible=True), gr.Audio(visible=False)
 
-        answer_audio_path_out = result["audio_path"]
         safe_answer = html.escape(str(result["answer_text"]))
         safe_question = html.escape(str(result["display_question"]))
         answer_html = f"""
@@ -1086,23 +1080,51 @@ with gr.Blocks(title="MomsVoice", css=css_code) as demo:
                 </div>
             </div>
         """
+        answer_audio_path_out = result["audio_path"]
         if answer_audio_path_out:
             return gr.HTML(value=answer_html, visible=True), gr.Audio(value=str(answer_audio_path_out), visible=True, autoplay=True)
         return gr.HTML(value=answer_html, visible=True), gr.Audio(visible=False)
 
+    def handle_question_submit(question_txt, question_audio_path, paragraphs, slider_val, profile_id):
+        q_txt = (question_txt or "").strip()
+        has_audio = question_audio_path is not None and question_audio_path != ""
+
+        yield gr.HTML(value=_GENERATING_HTML, visible=True), gr.Audio(visible=False)
+
+        result = build_qa_response(
+            question_text=q_txt,
+            question_audio_path=question_audio_path if has_audio else None,
+            paragraphs=paragraphs,
+            output_dir=SAMPLE_SOUNDS_DIR,
+            answer_fn=answer_question_audio,
+            max_new_tokens=512,
+        )
+        yield _build_answer_outputs(result)
+
     submit_question_btn.click(
         handle_question_submit,
         inputs=[question_text, question_audio, paragraphs_state, timeline_slider, voice_profile_state],
         outputs=[answer_display, answer_audio]
     )
 
-    # Auto-submit immediately when recording stops — directly calls inference
+    # Auto-submit immediately when recording stops — show waiting UI then run inference
     def auto_submit_on_stop(audio_path, question_txt, paragraphs, slider_val, profile_id):
         if not audio_path:
-            return gr.update(), gr.update()
+            return
         if not claim_audio_submission(audio_path):
-            return gr.update(), gr.update()
-        return handle_question_submit(question_txt, audio_path, paragraphs, slider_val, profile_id)
+            return
+
+        yield gr.HTML(value=_GENERATING_HTML, visible=True), gr.Audio(visible=False)
+
+        result = build_qa_response(
+            question_text=(question_txt or "").strip(),
+            question_audio_path=audio_path,
+            paragraphs=paragraphs,
+            output_dir=SAMPLE_SOUNDS_DIR,
+            answer_fn=answer_question_audio,
+            max_new_tokens=512,
+        )
+        yield _build_answer_outputs(result)
 
     question_audio.stop_recording(
         auto_submit_on_stop,
@@ -1122,12 +1144,8 @@ with gr.Blocks(title="MomsVoice", css=css_code) as demo:
             status_html,
             gr.Button(visible=True),   # play_btn
             gr.Button(visible=False),  # pause_btn
-            gr.Button(visible=True),   # ask_btn — keep visible so user can ask again
+            gr.Button(visible=True),   # ask_btn
             gr.Button(visible=False),  # resume_btn
-            gr.HTML(visible=False),    # qa_panel
-            gr.Group(visible=False),   # qa_input_group
-            gr.HTML(visible=False),    # answer_display
-            gr.Audio(visible=False),   # answer_audio
             gr.Textbox(value=""),      # question_text — clear previous question
             None,                      # question_audio — clear previous recording
         )
@@ -1135,7 +1153,7 @@ with gr.Blocks(title="MomsVoice", css=css_code) as demo:
     resume_btn.click(
         enter_resume_state,
         inputs=[],
-        outputs=[player_status_bar, play_btn, pause_btn, ask_btn, resume_btn, qa_panel, qa_input_group, answer_display, answer_audio, question_text, question_audio]
+        outputs=[player_status_bar, play_btn, pause_btn, ask_btn, resume_btn, question_text, question_audio]
     )
 
     # 11. Pause playback when switching to other tabs

inference_lfm.py

@@ -8,6 +8,7 @@ from __future__ import annotations
 
 import logging
 import os
+import re
 import threading
 import time
 
@@ -28,6 +29,9 @@ _model_lock = threading.Lock()
 HF_REPO = "LiquidAI/LFM2.5-Audio-1.5B"
 SAMPLE_RATE = 24000  # Mimi codec native rate (confirmed in official demo + library constants)
 
+# Matches special boundary tokens like <|text_end|>, <|audio_start|> that leak into decoded text
+_SPECIAL_TOKEN_RE = re.compile(r"<\|[^|>]+\|>")
+
 
 def _select_device() -> torch.device:
     return torch.device("cuda" if torch.cuda.is_available() else "cpu")
@@ -260,10 +264,11 @@ def answer_question_audio(
             text_token_count, audio_frame_count, audio_frame_count / 12.5, gen_time,
         )
 
-    # Decode text
+    # Decode text — strip interleaved boundary special tokens that leak through
     answer_text = ""
     if text_out:
-        answer_text = "".join(processor.text.decode(t.detach().cpu()) for t in text_out).strip()
+        raw_text = "".join(processor.text.decode(t.detach().cpu()) for t in text_out)
+        answer_text = _SPECIAL_TOKEN_RE.sub("", raw_text).strip()
 
     # Decode audio via processor.decode (drops EOS frame)
     waveform = None