BrianIsaac commited on
Commit
7763303
Β·
1 Parent(s): 52179de

fix: add loading indicator for audio generation buttons

Browse files

Add visual feedback during TTS audio generation by implementing
Gradio event chaining pattern:

- Disable button and show "Generating..." text on click
- Display runtime progress indicator via show_progress="minimal"
- Restore original button text and re-enable after completion

This improves UX by providing clear feedback during the 3-20 second
audio generation process instead of appearing unresponsive.

Files changed (1) hide show
  1. app.py +28 -12
app.py CHANGED
@@ -4869,35 +4869,51 @@ Please try again with different parameters.
4869
  # ============================================================
4870
  # AUDIO BUTTON EVENT HANDLERS
4871
  # ============================================================
 
 
 
 
4872
 
4873
  # Analysis audio button
4874
  analysis_audio_btn.click(
 
 
 
4875
  fn=generate_analysis_audio,
4876
  inputs=[],
4877
- outputs=[
4878
- analysis_audio_player,
4879
- analysis_audio_btn
4880
- ]
 
4881
  )
4882
 
4883
  # Build portfolio audio button
4884
  build_audio_btn.click(
 
 
 
4885
  fn=generate_build_audio,
4886
  inputs=[],
4887
- outputs=[
4888
- build_audio_player,
4889
- build_audio_btn
4890
- ]
 
4891
  )
4892
 
4893
  # Compare/debate audio button
4894
  compare_audio_btn.click(
 
 
 
4895
  fn=generate_debate_audio,
4896
  inputs=[],
4897
- outputs=[
4898
- compare_audio_player,
4899
- compare_audio_btn
4900
- ]
 
4901
  )
4902
 
4903
  # MCP Tool Registrations (API/MCP only - no UI components)
 
4869
  # ============================================================
4870
  # AUDIO BUTTON EVENT HANDLERS
4871
  # ============================================================
4872
+ # Use event chaining to show loading state during audio generation:
4873
+ # 1. Disable button and change text to "Generating..."
4874
+ # 2. Run async audio generation with progress indicator
4875
+ # 3. Restore button to original state
4876
 
4877
  # Analysis audio button
4878
  analysis_audio_btn.click(
4879
+ fn=lambda: gr.update(value="Generating...", interactive=False),
4880
+ outputs=analysis_audio_btn
4881
+ ).then(
4882
  fn=generate_analysis_audio,
4883
  inputs=[],
4884
+ outputs=[analysis_audio_player, analysis_audio_btn],
4885
+ show_progress="minimal"
4886
+ ).then(
4887
+ fn=lambda: gr.update(value="πŸ”Š Listen to Analysis", interactive=True),
4888
+ outputs=analysis_audio_btn
4889
  )
4890
 
4891
  # Build portfolio audio button
4892
  build_audio_btn.click(
4893
+ fn=lambda: gr.update(value="Generating...", interactive=False),
4894
+ outputs=build_audio_btn
4895
+ ).then(
4896
  fn=generate_build_audio,
4897
  inputs=[],
4898
+ outputs=[build_audio_player, build_audio_btn],
4899
+ show_progress="minimal"
4900
+ ).then(
4901
+ fn=lambda: gr.update(value="πŸ”Š Listen to Portfolio", interactive=True),
4902
+ outputs=build_audio_btn
4903
  )
4904
 
4905
  # Compare/debate audio button
4906
  compare_audio_btn.click(
4907
+ fn=lambda: gr.update(value="Generating...", interactive=False),
4908
+ outputs=compare_audio_btn
4909
+ ).then(
4910
  fn=generate_debate_audio,
4911
  inputs=[],
4912
+ outputs=[compare_audio_player, compare_audio_btn],
4913
+ show_progress="minimal"
4914
+ ).then(
4915
+ fn=lambda: gr.update(value="🎭 Listen to Debate", interactive=True),
4916
+ outputs=compare_audio_btn
4917
  )
4918
 
4919
  # MCP Tool Registrations (API/MCP only - no UI components)