Update app.py

app.py

@@ -29,7 +29,7 @@ default_thresholds = inference_module.THRESHOLDS
 # Prediction function with export capability
 def predict_emotions_with_details(text, confidence_threshold=0.0, chart_type="bar"):
     if not text.strip():
-        return "Please enter some text.", "", "", None, None
+        return "Please enter some text.", "", "", None, None, False
     
     predictions_str, processed_text = predict_emotions(text)
     
@@ -106,7 +106,7 @@ def predict_emotions_with_details(text, confidence_threshold=0.0, chart_type="ba
             fig.update_traces(textinfo='percent+label', pull=[0.1] + [0] * (len(df) - 1))
             fig.update_layout(margin=dict(t=40, b=40))
     
-    return processed_text, thresholded_output, top_5_output, fig, df_export
+    return processed_text, thresholded_output, top_5_output, fig, df_export, True
 
 # Custom CSS for enhanced styling
 custom_css = """
@@ -193,6 +193,10 @@ body {
     font-style: italic;
     color: #888;
     text-align: center;
+    display: none;
+}
+#loading.visible {
+    display: block;
 }
 #examples-title {
     font-size: 1.5em;
@@ -222,7 +226,7 @@ footer a:hover {
 }
 """
 
-# JavaScript for theme toggle and loading spinner
+# JavaScript for theme toggle
 theme_js = """
 function toggleTheme() {
     document.body.classList.toggle('dark-mode');
@@ -230,10 +234,10 @@ function toggleTheme() {
     toggleBtn.innerHTML = document.body.classList.contains('dark-mode') ? '☀️' : '🌙';
 }
 function showLoading() {
-    document.getElementById('loading').style.display = 'block';
+    document.getElementById('loading').classList.add('visible');
 }
 function hideLoading() {
-    document.getElementById('loading').style.display = 'none';
+    document.getElementById('loading').classList.remove('visible');
 }
 """
 
@@ -291,7 +295,7 @@ with gr.Blocks(css=custom_css) as demo:
                     reset_btn = gr.Button("Reset", variant="secondary")
     
     # Loading indicator
-    gr.HTML("<div id='loading' style='display:none;'>Predicting emotions, please wait...</div>")
+    loading_indicator = gr.HTML("<div id='loading'>Predicting emotions, please wait...</div>")
     
     # Output Section
     with gr.Row():
@@ -334,24 +338,31 @@ with gr.Blocks(css=custom_css) as demo:
         """
     )
     
+    # State to manage loading visibility
+    loading_state = gr.State(value=False)
+    
     # Bind predictions with loading spinner
+    def start_loading():
+        return True
+    
+    def stop_loading(processed_text, thresholded_output, top_5_output, fig, df_export, loading_state):
+        return processed_text, thresholded_output, top_5_output, fig, df_export, False
+    
     submit_btn.click(
+        fn=start_loading,
+        inputs=[],
+        outputs=[loading_state]
+    ).then(
         fn=predict_emotions_with_details,
         inputs=[text_input, confidence_slider, chart_type],
-        outputs=[processed_text_output, thresholded_output, top_5_output, output_plot, export_btn],
-        _js="showLoading(); return [arguments[0], arguments[1], arguments[2]]"
-    ).then(
-        fn=None,
-        inputs=None,
-        outputs=None,
-        _js="hideLoading"
+        outputs=[processed_text_output, thresholded_output, top_5_output, output_plot, export_btn, loading_state]
     )
     
     # Reset functionality
     reset_btn.click(
-        fn=lambda: ("", "", "", None, None),
+        fn=lambda: ("", "", "", None, None, False),
         inputs=[],
-        outputs=[text_input, processed_text_output, thresholded_output, top_5_output, output_plot, export_btn]
+        outputs=[text_input, processed_text_output, thresholded_output, top_5_output, output_plot, export_btn, loading_state]
     )
 
 # Launch