adjust ui layout

app.py

@@ -559,53 +559,68 @@ DEMO_CSS = """
 """
 Demo = gr.Blocks(css=DEMO_CSS)
 with Demo:
-    gr.Markdown("## Whisper vs. SenseVoice (Language, Device & Diarization with Simplified→Traditional Chinese)")
-
+    gr.Markdown("## Whisper vs. SenseVoice (…)")
     audio_input = gr.Audio(sources=["upload", "microphone"], type="filepath", label="Audio Input")
-
-    # Examples
     examples = gr.Examples(
-        examples=[
-            ["interview.mp3"],
-            ["news.mp3"]
-        ],
+        examples=[["interview.mp3"], ["news.mp3"]],
         inputs=[audio_input],
         label="Example Audio Files"
     )
 
+    # ────────────────────────────────────────────────────────────────
+    # 1) CONTROL PANELS (still side-by-side)
     with gr.Row():
         with gr.Column():
             gr.Markdown("### Faster-Whisper ASR")
-            whisper_dd = gr.Dropdown(choices=WHISPER_MODELS, value=WHISPER_MODELS[0], label="Whisper Model")
-            whisper_lang = gr.Dropdown(choices=WHISPER_LANGUAGES, value="auto", label="Whisper Language")
-            device_radio = gr.Radio(choices=["GPU", "CPU"], value="GPU", label="Device")
-            diar_check = gr.Checkbox(label="Enable Diarization", value=True)
-            out_w = gr.Textbox(label="Transcript", visible=False)
-            out_w_d = gr.HTML(label="Diarized Transcript", visible=True, elem_classes=["diar"])
-            # Toggle visibility based on checkbox
-            diar_check.change(lambda e: gr.update(visible=not e), inputs=diar_check, outputs=out_w)
-            diar_check.change(lambda e: gr.update(visible=e), inputs=diar_check, outputs=out_w_d)
-            btn_w = gr.Button("Transcribe with Faster-Whisper")
-            btn_w.click(fn=transcribe_fwhisper_stream,
-                        inputs=[whisper_dd, whisper_lang, audio_input, device_radio, diar_check],
-                        outputs=[out_w, out_w_d])
+            whisper_dd      = gr.Dropdown(choices=WHISPER_MODELS, value=WHISPER_MODELS[0], label="Whisper Model")
+            whisper_lang    = gr.Dropdown(choices=WHISPER_LANGUAGES, value="auto",      label="Whisper Language")
+            device_radio    = gr.Radio(choices=["GPU","CPU"], value="GPU", label="Device")
+            diar_check      = gr.Checkbox(label="Enable Diarization", value=True)
+            btn_w           = gr.Button("Transcribe with Faster-Whisper")
 
         with gr.Column():
             gr.Markdown("### FunASR SenseVoice ASR")
-            sense_dd = gr.Dropdown(choices=SENSEVOICE_MODELS, value=SENSEVOICE_MODELS[0], label="SenseVoice Model")
-            sense_lang = gr.Dropdown(choices=SENSEVOICE_LANGUAGES, value="auto", label="SenseVoice Language")
-            device_radio_sense = gr.Radio(choices=["GPU", "CPU"], value="GPU", label="Device")
-            punct_chk = gr.Checkbox(label="Enable Punctuation", value=True)
-            diar_s_chk = gr.Checkbox(label="Enable Diarization", value=True)
-            out_s = gr.Textbox(label="Transcript", visible=False)
-            out_s_d = gr.HTML(label="Diarized Transcript", visible=True, elem_classes=["diar"])
-            # Toggle visibility
-            diar_s_chk.change(lambda e: gr.update(visible=not e), inputs=diar_s_chk, outputs=out_s)
-            diar_s_chk.change(lambda e: gr.update(visible=e), inputs=diar_s_chk, outputs=out_s_d)
-            btn_s = gr.Button("Transcribe with SenseVoice")
-            btn_s.click(fn=transcribe_sense_steam,
-                        inputs=[sense_dd, sense_lang, audio_input, punct_chk, diar_s_chk, device_radio_sense],
-                        outputs=[out_s, out_s_d])
+            sense_dd         = gr.Dropdown(choices=SENSEVOICE_MODELS, value=SENSEVOICE_MODELS[0], label="SenseVoice Model")
+            sense_lang       = gr.Dropdown(choices=SENSEVOICE_LANGUAGES, value="auto", label="SenseVoice Language")
+            device_radio_s   = gr.Radio(choices=["GPU","CPU"], value="GPU",     label="Device")
+            punct_chk        = gr.Checkbox(label="Enable Punctuation", value=True)
+            diar_s_chk       = gr.Checkbox(label="Enable Diarization",   value=True)
+            btn_s            = gr.Button("Transcribe with SenseVoice")
+
+    # ────────────────────────────────────────────────────────────────
+    # 2) SHARED TRANSCRIPT ROW (aligned side-by-side)
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("### Faster-Whisper Output")
+            out_w   = gr.Textbox(label="Raw Transcript", visible=False)
+            out_w_d = gr.HTML(label="Diarized Transcript", elem_classes=["diar"])
+
+        with gr.Column():
+            gr.Markdown("### SenseVoice Output")
+            out_s   = gr.Textbox(label="Raw Transcript", visible=False)
+            out_s_d = gr.HTML(label="Diarized Transcript", elem_classes=["diar"])
+
+    # ────────────────────────────────────────────────────────────────
+    # 3) WIRING UP TOGGLES & BUTTONS
+    # toggle raw ↔ diarized for each system
+    diar_check.change(lambda e: gr.update(visible=not e), diar_check, out_w)
+    diar_check.change(lambda e: gr.update(visible=e),     diar_check, out_w_d)
+
+    diar_s_chk.change(lambda e: gr.update(visible=not e), diar_s_chk, out_s)
+    diar_s_chk.change(lambda e: gr.update(visible=e),     diar_s_chk, out_s_d)
+
+    # wire the callbacks into those shared boxes
+    btn_w.click(
+        fn=transcribe_fwhisper_stream,
+        inputs=[whisper_dd, whisper_lang, audio_input, device_radio, diar_check],
+        outputs=[out_w, out_w_d]
+    )
+    btn_s.click(
+        fn=transcribe_sense_steam,
+        inputs=[sense_dd, sense_lang, audio_input, punct_chk, diar_s_chk, device_radio_s],
+        outputs=[out_s, out_s_d]
+    )
+
 
 if __name__ == "__main__":
     Demo.launch()