Stop active microphone recording before transcription and simplify instructions

app.py

@@ -43,16 +43,43 @@ def create_app() -> gr.Blocks:
     # Provide one audio input and one transcription action.
     # ---------------------------------------------------------
     with gr.Blocks(title="LambdaAudio v6", delete_cache=(3600, 3600)) as app:
-        gr.Markdown(
-            "# LambdaAudio v6\n"
-            "日本語の音声をアップロードするか、マイクで録音してください。\n"
-            "30秒を超える音声は発話区間に分割し、順番に文字起こしします（最大200 MB）。\n\n"
-            "[モデルの詳細](https://huggingface.co/KeisukeMiyamoto/lambda-audio-v6)"
-        )
-        audio = gr.Audio(sources=["upload", "microphone"], type="filepath", format="wav", label="音声", editable=False)
-        button = gr.Button("文字起こし", variant="primary")
+        gr.Markdown("# LambdaAudio v6\n日本語の音声をアップロードするか、マイクで録音してください。\n\n[モデルの詳細](https://huggingface.co/KeisukeMiyamoto/lambda-audio-v6)")
+        audio = gr.Audio(sources=["upload", "microphone"], type="filepath", format="wav", label="音声", editable=False, elem_id="recording-input")
+        button = gr.Button("文字起こし", variant="primary", elem_id="transcribe-button")
+        submit = gr.Button(visible="hidden", elem_id="transcribe-submit")
         output = gr.Textbox(label="文字起こし結果", lines=5, interactive=False, buttons=["copy"])
-        button.click(transcribe_recording, inputs=audio, outputs=output, api_name="transcribe", concurrency_limit=1)
+        submit.click(transcribe_recording, inputs=audio, outputs=output, api_name="transcribe", concurrency_limit=1)
+
+        # ---------------------------------------------------------
+        # Stop the browser recorder before submitting its uploaded audio.
+        # The stop_recording event fires after Gradio finishes uploading.
+        # ---------------------------------------------------------
+        button.click(
+            fn=None,
+            queue=False,
+            js="""() => {
+                const audio = document.getElementById('recording-input');
+                if (audio.dataset.submitAfterRecording) return;
+                const stop = [...audio.querySelectorAll('.stop-button, .stop-button-paused')]
+                    .find(button => button.checkVisibility());
+                if (stop) {
+                    audio.dataset.submitAfterRecording = 'true';
+                    stop.click();
+                    return;
+                }
+                document.getElementById('transcribe-submit').click();
+            }""",
+        )
+        audio.stop_recording(
+            fn=None,
+            queue=False,
+            js="""() => {
+                const audio = document.getElementById('recording-input');
+                if (!audio.dataset.submitAfterRecording) return;
+                delete audio.dataset.submitAfterRecording;
+                document.getElementById('transcribe-submit').click();
+            }""",
+        )
     return app.queue(max_size=10)