Update app.py

app.py

@@ -39,7 +39,7 @@ def chatbot_response(user_feedback, chat_history):
     ))
     return chat_history, ""
 
-# Custom CSS for a dark grey, minimalist UI
+# Custom CSS for dark grey, minimalist UI
 custom_css = """
 body, .gradio-container {
     background: #2d2d2d !important;
@@ -112,25 +112,6 @@ h1, h2, h3 {
     color: #b3b3b3 !important;
     font-weight: 600;
 }
-.loading {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100px;
-}
-.loading::after {
-    content: '';
-    width: 24px;
-    height: 24px;
-    border: 4px solid #6b6b6b;
-    border-top: 4px solid transparent;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-}
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
 @media (max-width: 768px) {
     .gradio-container {
         padding: 10px;
@@ -190,7 +171,7 @@ with gr.Blocks(css=custom_css) as demo:
                 fn=analyze_sentiment,
                 inputs=sentiment_input,
                 outputs=sentiment_output,
-                _js="() => { document.querySelector('.loading').style.display = 'block'; setTimeout(() => document.querySelector('.loading').style.display = 'none', 1000); }"
+                show_progress=True
             )
         
         # Text-to-Image Tab
@@ -219,7 +200,7 @@ with gr.Blocks(css=custom_css) as demo:
                 fn=generate_mock_image,
                 inputs=image_prompt,
                 outputs=image_output,
-                _js="() => { document.querySelector('.loading').style.display = 'block'; setTimeout(() => document.querySelector('.loading').style.display = 'none', 1000); }"
+                show_progress=True
             )
         
         # Chatbot Tab
@@ -248,7 +229,7 @@ with gr.Blocks(css=custom_css) as demo:
                 fn=chatbot_response,
                 inputs=[feedback_input, chatbot],
                 outputs=[chatbot, feedback_output],
-                _js="() => { document.querySelector('.loading').style.display = 'block'; setTimeout(() => document.querySelector('.loading').style.display = 'none', 500); }"
+                show_progress=True
             )
 
 # Launch the app