Update app.py

app.py

@@ -29,6 +29,7 @@ class ProgressTracker:
         self.is_processing = False
         self.lock = threading.Lock()
         self.gradio_progress = None  # Store Gradio progress object
+        self.progress_bar = None  # Store Gradio progress bar component
     
     def update(self, progress, message="Processing..."):
         with self.lock:
@@ -40,24 +41,73 @@ class ProgressTracker:
                     self.gradio_progress(progress / 100, desc=message)
                 except:
                     pass  # Ignore errors if progress object is not valid
+            
+            # Update visible progress bar component if available
+            if self.progress_bar is not None:
+                try:
+                    # Create HTML progress bar
+                    progress_html = f"""
+                    <div style="background-color: #f0f0f0; border-radius: 10px; padding: 5px; margin: 10px 0; border: 1px solid #ddd;">
+                        <div style="background: linear-gradient(90deg, #4CAF50 0%, #45a049 100%); width: {progress}%; height: 25px; border-radius: 8px; transition: width 0.3s ease;"></div>
+                        <div style="text-align: center; margin-top: 5px; font-weight: bold; color: #333;">
+                            {message} - {progress:.1f}%
+                        </div>
+                    </div>
+                    """
+                    self.progress_bar.update(value=progress_html, visible=True)
+                except Exception as e:
+                    print(f"Error updating progress bar: {e}")
+                    pass
     
     def get_status(self):
         with self.lock:
             return f"{self.message} ({self.progress:.1f}%)"
     
-    def start_processing(self, gradio_progress=None):
+    def start_processing(self, gradio_progress=None, progress_bar=None):
         with self.lock:
             self.is_processing = True
             self.progress = 0
             self.message = "Starting..."
             self.gradio_progress = gradio_progress
+            self.progress_bar = progress_bar
+            # Show progress bar
+            if self.progress_bar is not None:
+                try:
+                    start_html = """
+                    <div style="background-color: #f0f0f0; border-radius: 10px; padding: 5px; margin: 10px 0; border: 1px solid #ddd;">
+                        <div style="background: linear-gradient(90deg, #4CAF50 0%, #45a049 100%); width: 0%; height: 25px; border-radius: 8px; transition: width 0.3s ease;"></div>
+                        <div style="text-align: center; margin-top: 5px; font-weight: bold; color: #333;">
+                            Starting... - 0.0%
+                        </div>
+                    </div>
+                    """
+                    self.progress_bar.update(value=start_html, visible=True)
+                except Exception as e:
+                    print(f"Error starting progress bar: {e}")
+                    pass
     
     def end_processing(self):
         with self.lock:
             self.is_processing = False
             self.progress = 100
             self.message = "Complete"
+            # Show completion progress bar
+            if self.progress_bar is not None:
+                try:
+                    complete_html = """
+                    <div style="background-color: #f0f0f0; border-radius: 10px; padding: 5px; margin: 10px 0; border: 1px solid #ddd;">
+                        <div style="background: linear-gradient(90deg, #4CAF50 0%, #45a049 100%); width: 100%; height: 25px; border-radius: 8px; transition: width 0.3s ease;"></div>
+                        <div style="text-align: center; margin-top: 5px; font-weight: bold; color: #333;">
+                            ✅ Analysis Complete - 100.0%
+                        </div>
+                    </div>
+                    """
+                    self.progress_bar.update(value=complete_html, visible=True)
+                except Exception as e:
+                    print(f"Error ending progress bar: {e}")
+                    pass
             self.gradio_progress = None
+            # Don't reset progress_bar here so it shows the completion state
 
 # Create a global instance
 progress_tracker = ProgressTracker()
@@ -757,8 +807,17 @@ def process_multiple_dashboards(api_key, files, language_code="it", goal_descrip
 # FIXED: Improved wrapper function for Gradio interface with progress bar integration
 def process_dashboard(api_key, files, language_name, goal_description=None, num_sections=4, model_name=DEFAULT_MODEL, custom_model=None, progress=gr.Progress()):
     """Process dashboard files (PDF/images) and generate reports (wrapper function for Gradio interface)."""
+    
+    # Get reference to the progress bar component
+    progress_bar = None
+    try:
+        # We'll pass this via the global progress_tracker
+        progress_bar = progress_tracker.progress_bar
+    except:
+        pass
+    
     # Start progress tracking with Gradio progress integration
-    progress_tracker.start_processing(progress)
+    progress_tracker.start_processing(progress, progress_bar)
     
     # Start a thread to update text-based progress
     progress_thread = threading.Thread(target=update_progress)
@@ -777,13 +836,29 @@ def process_dashboard(api_key, files, language_name, goal_description=None, num_
         error_message = "API key is required."
         progress_tracker.update(100, f"❌ {error_message}")
         progress_tracker.end_processing()
-        return None, None, error_message
+        error_html = """
+        <div style="background-color: #ffebee; border-radius: 10px; padding: 5px; margin: 10px 0; border: 1px solid #f44336;">
+            <div style="background: linear-gradient(90deg, #f44336 0%, #d32f2f 100%); width: 100%; height: 25px; border-radius: 8px;"></div>
+            <div style="text-align: center; margin-top: 5px; font-weight: bold; color: #d32f2f;">
+                ❌ Error: API key is required
+            </div>
+        </div>
+        """
+        return None, None, error_message, error_html
     
     if not files or len(files) == 0:
         error_message = "No files uploaded."
         progress_tracker.update(100, f"❌ {error_message}")
         progress_tracker.end_processing()
-        return None, None, error_message
+        error_html = """
+        <div style="background-color: #ffebee; border-radius: 10px; padding: 5px; margin: 10px 0; border: 1px solid #f44336;">
+            <div style="background: linear-gradient(90deg, #f44336 0%, #d32f2f 100%); width: 100%; height: 25px; border-radius: 8px;"></div>
+            <div style="text-align: center; margin-top: 5px; font-weight: bold; color: #d32f2f;">
+                ❌ Error: No files uploaded
+            </div>
+        </div>
+        """
+        return None, None, error_message, error_html
     
     # Process the uploaded files with improved handling
     processed_files = []
@@ -848,7 +923,15 @@ def process_dashboard(api_key, files, language_name, goal_description=None, num_
         error_message = "No valid files were uploaded or processed."
         progress_tracker.update(100, f"❌ {error_message}")
         progress_tracker.end_processing()
-        return None, None, error_message
+        error_html = """
+        <div style="background-color: #ffebee; border-radius: 10px; padding: 5px; margin: 10px 0; border: 1px solid #f44336;">
+            <div style="background: linear-gradient(90deg, #f44336 0%, #d32f2f 100%); width: 100%; height: 25px; border-radius: 8px;"></div>
+            <div style="text-align: center; margin-top: 5px; font-weight: bold; color: #d32f2f;">
+                ❌ Error: No valid files processed
+            </div>
+        </div>
+        """
+        return None, None, error_message, error_html
     
     print(f"Successfully processed {len(processed_files)} files for analysis")
     
@@ -875,18 +958,50 @@ def process_dashboard(api_key, files, language_name, goal_description=None, num_
             
             if valid_files:
                 print(f"✅ Returning {len(valid_files)} valid output files")
-                return combined_content, valid_files, status
+                success_html = """
+                <div style="background-color: #f0f0f0; border-radius: 10px; padding: 5px; margin: 10px 0; border: 1px solid #ddd;">
+                    <div style="background: linear-gradient(90deg, #4CAF50 0%, #45a049 100%); width: 100%; height: 25px; border-radius: 8px; transition: width 0.3s ease;"></div>
+                    <div style="text-align: center; margin-top: 5px; font-weight: bold; color: #333;">
+                        ✅ Analysis Complete - 100.0%
+                    </div>
+                </div>
+                """
+                return combined_content, valid_files, status, success_html
             else:
-                return combined_content, None, "Analysis completed but no downloadable files were created."
+                success_html = """
+                <div style="background-color: #fff3cd; border-radius: 10px; padding: 5px; margin: 10px 0; border: 1px solid #ffc107;">
+                    <div style="background: linear-gradient(90deg, #ffc107 0%, #ffb300 100%); width: 100%; height: 25px; border-radius: 8px;"></div>
+                    <div style="text-align: center; margin-top: 5px; font-weight: bold; color: #856404;">
+                        ⚠️ Analysis completed but no files created
+                    </div>
+                </div>
+                """
+                return combined_content, None, "Analysis completed but no downloadable files were created.", success_html
         
-        return combined_content, output_files, status
+        success_html = """
+        <div style="background-color: #f0f0f0; border-radius: 10px; padding: 5px; margin: 10px 0; border: 1px solid #ddd;">
+            <div style="background: linear-gradient(90deg, #4CAF50 0%, #45a049 100%); width: 100%; height: 25px; border-radius: 8px; transition: width 0.3s ease;"></div>
+            <div style="text-align: center; margin-top: 5px; font-weight: bold; color: #333;">
+                ✅ Analysis Complete - 100.0%
+            </div>
+        </div>
+        """
+        return combined_content, output_files, status, success_html
         
     except Exception as e:
         error_message = f"Error processing dashboards: {str(e)}"
         print(f"❌ {error_message}")
         progress_tracker.update(100, f"❌ {error_message}")
         progress_tracker.end_processing()
-        return None, None, error_message
+        error_html = """
+        <div style="background-color: #ffebee; border-radius: 10px; padding: 5px; margin: 10px 0; border: 1px solid #f44336;">
+            <div style="background: linear-gradient(90deg, #f44336 0%, #d32f2f 100%); width: 100%; height: 25px; border-radius: 8px;"></div>
+            <div style="text-align: center; margin-top: 5px; font-weight: bold; color: #d32f2f;">
+                ❌ Error processing dashboards
+            </div>
+        </div>
+        """
+        return None, None, error_message, error_html
 
 # Gradio Interface Functions
 def toggle_custom_model(choice):
@@ -928,6 +1043,16 @@ with gr.Blocks(title="Dashboard Narrator - Powered by OpenRouter.ai", theme=gr.t
     5. Optionally specify analysis goals
     6. Click "Analyze Dashboards" to begin
     """)
+    
+    # Add a visible progress bar component
+    with gr.Row():
+        with gr.Column():
+            progress_bar = gr.HTML(
+                value="",
+                visible=False,
+                label="Analysis Progress"
+            )
+    
     with gr.Row():
         with gr.Column(scale=1):
             api_key = gr.Textbox(
@@ -990,6 +1115,9 @@ with gr.Blocks(title="Dashboard Narrator - Powered by OpenRouter.ai", theme=gr.t
                 interactive=False
             )
     
+    # Store progress bar reference in global tracker
+    progress_tracker.progress_bar = progress_bar
+    
     # Handle model dropdown change
     model_choice.change(
         fn=toggle_custom_model,
@@ -1008,7 +1136,7 @@ with gr.Blocks(title="Dashboard Narrator - Powered by OpenRouter.ai", theme=gr.t
     analyze_btn.click(
         fn=process_dashboard,
         inputs=[api_key, files, language, goal, num_sections, model_choice, custom_model],
-        outputs=[output_md, output_files, output_status],
+        outputs=[output_md, output_files, output_status, progress_bar],
         show_progress=True
     )