| # Demo for https://github.com/gradio-app/gradio/pull/13660 | |
| # (fix for https://github.com/gradio-app/gradio/issues/13659). | |
| # | |
| # Open the browser DevTools Network tab, filter by "upload", then record a | |
| # short clip and press stop. | |
| # - On the "before" Space (gradio 6.20.0 release): every recording stop | |
| # sends TWO identical POST /upload requests. The second one rewrites the | |
| # same server file while the player is fetching it, which intermittently | |
| # breaks loading the recording (Content-Length errors). | |
| # - On the "after" Space (PR #13660 wheel): exactly ONE POST /upload. | |
| # The counters below show how often each event fires. Each event has its own | |
| # gr.State so the concurrently running handlers do not overwrite each other. | |
| import gradio as gr | |
| EVENTS = ["change", "stop_recording", "input"] | |
| def bump(name): | |
| def handler(n): | |
| n += 1 | |
| return n, f"`{name}`: {n}" | |
| return handler | |
| with gr.Blocks() as demo: | |
| gr.Markdown( | |
| "Open the DevTools **Network** tab, filter by `upload`, record a clip " | |
| "and press stop. Before the fix, each recording stop sends **two** " | |
| "identical `POST /upload` requests; after the fix, exactly **one**. " | |
| "The counters below show how often each event fires per recording.\n\n" | |
| "[Issue #13659](https://github.com/gradio-app/gradio/issues/13659) · " | |
| "[PR #13660](https://github.com/gradio-app/gradio/pull/13660)" | |
| ) | |
| audio = gr.Audio(sources=["microphone"], type="filepath", label="Record me") | |
| for name in EVENTS: | |
| state = gr.State(0) | |
| display = gr.Markdown(f"`{name}`: 0") | |
| getattr(audio, name)(bump(name), state, [state, display]) | |
| if __name__ == "__main__": | |
| demo.launch(ssr_mode=False) | |