Update ui/gradio_interface.py

ui/gradio_interface.py

@@ -33,27 +33,21 @@ class DebugGenieUI:
     ):
         """Main analysis handler with progressive updates."""
         try:
-            # Initialize outputs
-            chat_history = []
-            solutions_html = ""
-            viz_html = ""
-            voice_audio = None
-            analysis_json = {}
-            
             # Validate inputs
             if not error_text and screenshot is None:
                 return (
-                    [{"role": "user", "content": "Analyze error"}, 
-                     {"role": "assistant", "content": "❌ Error: Please provide either an error message or a screenshot."}],
-                    "<div>No analysis performed.</div>",
-                    "<div>No visualization available.</div>",
+                    [{"role": "assistant", "content": "⚠️ **Please provide either an error message or a screenshot to begin analysis.**"}],
+                    "",
+                    "",
                     None,
                     {},
-                    "Status: ❌ Missing input"
+                    gr.update(visible=False),
+                    gr.update(visible=False),
+                    gr.update(visible=False),
+                    "⚠️ Waiting for input..."
                 )
             
-            progress(0.1, desc="Starting analysis...")
-            chat_history.append({"role": "user", "content": f"Analyze this error:\n```\n{error_text[:200]}...\n```"})
+            progress(0.1, desc="🔍 Analyzing error...")
             
             # Build context
             context = {
@@ -62,71 +56,53 @@ class DebugGenieUI:
                 'code_context': ""
             }
             
-            # Add screenshot context if provided
             if screenshot is not None:
-                context['type'] = 'ide'  # Could be auto-detected
+                context['type'] = 'ide'
                 
-            progress(0.2, desc="Running multi-agent analysis...")
+            progress(0.3, desc="🤖 Running AI agents...")
             
             # Run backend analysis
             result = await self.backend.analyze(context)
             
-            progress(0.7, desc="Generating visualizations...")
-            
-            # Build chat response
-            response_text = f"""
-## 🎯 Root Cause
-{result.root_cause}
-
-## ✅ Recommended Solutions
-"""
-            for idx, sol in enumerate(result.solutions[:3], 1):
-                response_text += f"\n### {idx}. {sol.get('title', 'Solution')}\n"
-                response_text += f"{sol.get('description', '')}\n"
-                response_text += f"**Confidence:** {sol.get('probability', 0):.0%}\n"
+            progress(0.7, desc="📊 Generating insights...")
             
-            chat_history.append({"role": "assistant", "content": response_text})
+            # Build main response
+            response_parts = [f"## 🎯 Root Cause\n\n{result.root_cause}\n\n---\n"]
             
-            # Generate solutions accordion HTML
-            solutions_html = self._generate_solutions_html(result.solutions)
+            # Generate solutions HTML
+            solutions_html = self._generate_modern_solutions(result.solutions)
             
-            # Generate 3D visualization if we have stack trace
-            # For demo, create a mock trace
+            # Generate visualization
             mock_trace = self.visualizer.generate_mock_trace()
             viz_html = self.visualizer.generate_flow(mock_trace)
             
-            # Build analysis JSON
+            # Build metrics
             analysis_json = {
                 "execution_time": f"{result.execution_time:.2f}s",
-                "confidence": result.confidence_score,
+                "confidence": f"{result.confidence_score:.1%}",
                 "agents_used": list(result.agent_metrics.keys()),
-                "metrics": result.agent_metrics
+                "solutions_found": len(result.solutions)
             }
             
-            # Generate voice explanation for top solution
-            progress(0.9, desc="Generating voice explanation...")
+            # Voice explanation
+            progress(0.9, desc="🎙️ Generating explanation...")
+            voice_audio = None
             if self.voice_explainer and result.solutions:
                 try:
-                    # Convert first solution to RankedSolution format
                     top_solution = result.solutions[0]
                     ranked_sol = RankedSolution(
                         rank=1,
                         title=top_solution.get('title', 'Solution'),
                         description=top_solution.get('description', ''),
-                        steps=[], # Would parse from fix_instructions
+                        steps=[],
                         confidence=top_solution.get('probability', 0.5),
                         sources=[],
-                        why_ranked_here=f"Top ranked solution with {top_solution.get('probability', 0)*100:.0f}% confidence",
+                        why_ranked_here=f"Top solution with {top_solution.get('probability', 0)*100:.0f}% confidence",
                         trade_offs=[]
                     )
                     
-                    audio_bytes = self.voice_explainer.generate_explanation(
-                        ranked_sol, 
-                        mode="walkthrough"
-                    )
-                    
+                    audio_bytes = self.voice_explainer.generate_explanation(ranked_sol, mode="walkthrough")
                     if audio_bytes:
-                        # Save to temp file for Gradio
                         voice_path = self.voice_explainer.save_audio(
                             audio_bytes, 
                             f"explanation_{hash(error_text[:100])}.mp3"
@@ -134,9 +110,10 @@ class DebugGenieUI:
                         voice_audio = voice_path
                 except Exception as e:
                     logger.warning(f"Voice generation failed: {e}")
-                    voice_audio = None
             
-            progress(1.0, desc="Complete!")
+            progress(1.0, desc="✅ Complete!")
+            
+            chat_history = [{"role": "assistant", "content": "".join(response_parts)}]
             
             return (
                 chat_history,
@@ -144,161 +121,254 @@ class DebugGenieUI:
                 viz_html,
                 voice_audio,
                 analysis_json,
-                f"Status: ✅ Analysis complete in {result.execution_time:.2f}s"
+                gr.update(visible=True),
+                gr.update(visible=True),
+                gr.update(visible=True),
+                f"✅ Analysis complete • {result.execution_time:.1f}s • {len(result.solutions)} solutions"
             )
             
         except Exception as e:
             logger.error(f"Analysis failed: {e}")
             return (
-                [{"role": "user", "content": "Analyze error"}, 
-                 {"role": "assistant", "content": f"❌ Error: Analysis failed: {str(e)}"}],
-                f"<div class='error'>Error: {str(e)}</div>",
-                "<div>Visualization unavailable</div>",
+                [{"role": "assistant", "content": f"## ❌ Analysis Failed\n\n{str(e)}\n\nPlease check your input and try again."}],
+                "",
+                "",
                 None,
                 {"error": str(e)},
-                f"Status: ❌ Failed - {str(e)}"
+                gr.update(visible=False),
+                gr.update(visible=False),
+                gr.update(visible=False),
+                f"❌ Error: {str(e)}"
             )
     
-    def _generate_solutions_html(self, solutions: List[Dict]) -> str:
-        """Generate HTML for solutions accordion."""
+    def _generate_modern_solutions(self, solutions: List[Dict]) -> str:
+        """Generate modern, card-based solutions UI."""
         if not solutions:
-            return "<div>No solutions found.</div>"
+            return "<div style='text-align: center; padding: 40px; color: #666;'>No solutions found.</div>"
         
-        html = "<div style='font-family: sans-serif;'>"
+        html = """
+        <style>
+            .solutions-grid {
+                display: grid;
+                gap: 20px;
+                margin-top: 10px;
+            }
+            .solution-card {
+                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                border-radius: 16px;
+                padding: 24px;
+                color: white;
+                box-shadow: 0 10px 30px rgba(0,0,0,0.15);
+                transition: transform 0.2s, box-shadow 0.2s;
+                cursor: pointer;
+            }
+            .solution-card:hover {
+                transform: translateY(-4px);
+                box-shadow: 0 15px 40px rgba(0,0,0,0.25);
+            }
+            .solution-card.high-confidence {
+                background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+            }
+            .solution-card.medium-confidence {
+                background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            }
+            .solution-card.low-confidence {
+                background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+            }
+            .solution-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: flex-start;
+                margin-bottom: 16px;
+            }
+            .solution-rank {
+                background: rgba(255,255,255,0.3);
+                border-radius: 50%;
+                width: 36px;
+                height: 36px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-weight: bold;
+                font-size: 18px;
+            }
+            .solution-confidence {
+                background: rgba(255,255,255,0.25);
+                padding: 6px 14px;
+                border-radius: 20px;
+                font-size: 13px;
+                font-weight: 600;
+                backdrop-filter: blur(10px);
+            }
+            .solution-title {
+                font-size: 20px;
+                font-weight: 700;
+                margin-bottom: 12px;
+                line-height: 1.3;
+            }
+            .solution-description {
+                font-size: 15px;
+                line-height: 1.6;
+                opacity: 0.95;
+            }
+        </style>
+        <div class="solutions-grid">
+        """
         
-        for idx, sol in enumerate(solutions, 1):
+        for idx, sol in enumerate(solutions[:5], 1):
             title = sol.get('title', f'Solution {idx}')
-            desc = sol.get('description', 'No description')
+            desc = sol.get('description', 'No description available')
             prob = sol.get('probability', 0.5)
             
-            # Color code by probability
-            color = "green" if prob > 0.7 else "orange" if prob > 0.4 else "red"
+            # Determine confidence class
+            if prob > 0.7:
+                conf_class = "high-confidence"
+                conf_label = "High Confidence"
+            elif prob > 0.4:
+                conf_class = "medium-confidence"
+                conf_label = "Medium Confidence"
+            else:
+                conf_class = "low-confidence"
+                conf_label = "Low Confidence"
             
             html += f"""
-            <details style='border: 2px solid {color}; border-radius: 8px; padding: 16px; margin: 12px 0;'>
-                <summary style='font-size: 18px; font-weight: bold; cursor: pointer;'>
-                    {idx}. {title} 
-                    <span style='color: {color}; float: right;'>
-                        {prob:.0%} confidence
-                    </span>
-                </summary>
-                <div style='margin-top: 12px; padding: 12px; background: #f5f5f5; border-radius: 4px;'>
-                    <p>{desc}</p>
+            <div class="solution-card {conf_class}">
+                <div class="solution-header">
+                    <div class="solution-rank">#{idx}</div>
+                    <div class="solution-confidence">{prob:.0%} • {conf_label}</div>
                 </div>
-            </details>
+                <div class="solution-title">{title}</div>
+                <div class="solution-description">{desc}</div>
+            </div>
             """
         
         html += "</div>"
         return html
 
 def create_interface(backend: DebugBackend):
-    """Create the main Gradio interface."""
+    """Create the main Gradio interface with modern UX."""
     ui = DebugGenieUI(backend)
     
-    # Create Blocks without theme, css parameters (moved to launch)
     with gr.Blocks() as demo:
         
-        gr.Markdown(
-            """
-            # 🧞 DebugGenie - AI Debugging Assistant
-            ### Multi-Agent AI System for Intelligent Error Analysis
-            
-            Powered by Claude, Gemini, and GPT-4 working together to solve your bugs.
-            """
-        )
-        
+        # Hero Section
         with gr.Row():
-            with gr.Column(scale=1):
-                gr.Markdown("## 📝 Input")
-                
-                error_input = gr.Code(
-                    label="Paste Error Message / Stack Trace",
-                    language="python",
-                    lines=10
-                )
+            gr.Markdown(
+                """
+                # 🧞‍♂️ DebugGenie
+                ### Your AI-Powered Debugging Assistant
+                Upload an error, get instant solutions powered by multi-agent AI
+                """,
+                elem_classes="hero-section"
+            )
+        
+        # Main Content Area
+        with gr.Row(equal_height=True):
+            # Left Panel - Input Section
+            with gr.Column(scale=2, min_width=400):
+                gr.Markdown("### 📋 Error Details")
                 
-                screenshot_input = gr.Image(
-                    label="Upload Screenshot (Optional)",
-                    type="pil",
-                    sources=["upload", "clipboard"]
-                )
+                with gr.Group():
+                    error_input = gr.Code(
+                        label="Error Message or Stack Trace",
+                        language="python",
+                        lines=12,
+                        placeholder="Paste your error message, stack trace, or exception here...\n\nExample:\nTraceback (most recent call last):\n  File 'app.py', line 42\n    ValueError: invalid literal for int()",
+                        show_label=False
+                    )
                 
-                codebase_files = gr.File(
-                    label="Upload Codebase Files (Optional)",
-                    file_count="multiple"
-                )
+                with gr.Accordion("🎨 Additional Context (Optional)", open=False):
+                    screenshot_input = gr.Image(
+                        label="Screenshot",
+                        type="pil",
+                        sources=["upload", "clipboard"],
+                        height=200
+                    )
+                    
+                    codebase_files = gr.File(
+                        label="Related Code Files",
+                        file_count="multiple",
+                        file_types=[".py", ".js", ".java", ".cpp", ".ts", ".jsx", ".tsx"]
+                    )
                 
                 analyze_btn = gr.Button(
                     "🔍 Analyze Error",
                     variant="primary",
-                    size="lg"
+                    size="lg",
+                    scale=1
                 )
                 
-                gr.Markdown(
-                    """
-                    ---
-                    **Tips:**
-                    - Paste complete error traces for best results
-                    - Screenshots help with IDE or browser errors
-                    - Upload related code files for deeper analysis
-                    """
+                status_text = gr.Markdown(
+                    "💡 Ready to debug • Paste an error to get started",
+                    elem_classes="status-bar"
                 )
             
-            with gr.Column(scale=2):
-                gr.Markdown("## 🎯 Results")
+            # Right Panel - Results Section
+            with gr.Column(scale=3, min_width=600):
+                gr.Markdown("### 🎯 Analysis Results")
                 
-                status_text = gr.Markdown("**Status:** Ready to analyze")
+                # Main Analysis Display
+                with gr.Group():
+                    chatbot = gr.Chatbot(
+                        height=400,
+                        type="messages",
+                        show_copy_button=False,
+                        avatar_images=(None, "🧞"),
+                        bubble_full_width=False,
+                        render_markdown=True
+                    )
                 
-                with gr.Tabs():
-                    with gr.Tab("💬 Chat"):
-                        # Updated to use type="messages" (default in Gradio 6)
-                        chatbot = gr.Chatbot(
-                            height=500,
-                            type="messages",
-                            avatar_images=(
-                                None,
-                                "https://em-content.zobj.net/thumbs/120/apple/354/genie_1f9de.png"
-                            )
-                        )
-                    
-                    with gr.Tab("🎯 Solutions"):
-                        solutions_accordion = gr.HTML(
-                            value="<div>No solutions yet. Analyze an error to get started.</div>"
-                        )
-                    
-                    with gr.Tab("🎨 3D Error Flow"):
-                        viz_3d = gr.HTML(
-                            value="<div style='text-align: center; padding: 40px;'>Visualization will appear here after analysis.</div>"
-                        )
-                    
-                    with gr.Tab("📊 Analysis Details"):
-                        analysis_details = gr.JSON(
-                            label="Detailed Metrics"
-                        )
+                # Collapsible Sections
+                with gr.Group() as solutions_group:
+                    with gr.Accordion("💡 Recommended Solutions", open=True, visible=False) as solutions_accordion:
+                        solutions_html = gr.HTML()
                 
-                # Voice explanation (collapsed by default)
-                with gr.Accordion("🔊 Voice Explanation", open=False):
-                    voice_output = gr.Audio(
-                        label="AI-Generated Explanation",
-                        autoplay=False
-                    )
+                with gr.Group() as viz_group:
+                    with gr.Accordion("📊 Error Flow Visualization", open=False, visible=False) as viz_accordion:
+                        viz_3d = gr.HTML()
+                
+                with gr.Group() as details_group:
+                    with gr.Accordion("🔬 Technical Details", open=False, visible=False) as details_accordion:
+                        with gr.Row():
+                            with gr.Column(scale=1):
+                                analysis_details = gr.JSON(label="Metrics")
+                            with gr.Column(scale=1):
+                                voice_output = gr.Audio(
+                                    label="🎙️ Voice Explanation",
+                                    autoplay=False,
+                                    show_download_button=False
+                                )
         
-        # Examples - Updated to use messages format
+        # Quick Start Examples
+        gr.Markdown("### 📚 Quick Start Examples")
         gr.Examples(
             examples=[
                 [
-                    "Traceback (most recent call last):\n  File \"app.py\", line 42, in process_data\n    result = json.loads(data)\njson.decoder.JSONDecodeError: Expecting value: line 1 column 1 (char 0)",
+                    """Traceback (most recent call last):
+  File "app.py", line 42, in process_data
+    result = json.loads(data)
+json.decoder.JSONDecodeError: Expecting value: line 1 column 1 (char 0)""",
                     None,
                     None
                 ],
                 [
-                    "TypeError: 'NoneType' object is not subscriptable\n  File \"main.py\", line 15, in get_user\n    return users[user_id]['name']",
+                    """TypeError: 'NoneType' object is not subscriptable
+  File "main.py", line 15, in get_user
+    return users[user_id]['name']""",
+                    None,
+                    None
+                ],
+                [
+                    """AttributeError: 'list' object has no attribute 'keys'
+  File "data_processor.py", line 28, in parse_config
+    for key in config.keys():""",
                     None,
                     None
                 ]
             ],
             inputs=[error_input, screenshot_input, codebase_files],
-            label="📚 Example Errors"
+            label=None,
+            examples_per_page=3
         )
         
         # Event handlers
@@ -306,11 +376,14 @@ def create_interface(backend: DebugBackend):
             fn=ui.handle_analyze,
             inputs=[error_input, screenshot_input, codebase_files],
             outputs=[
-                chatbot, 
-                solutions_accordion, 
-                viz_3d, 
-                voice_output, 
-                analysis_details, 
+                chatbot,
+                solutions_html,
+                viz_3d,
+                voice_output,
+                analysis_details,
+                solutions_accordion,
+                viz_accordion,
+                details_accordion,
                 status_text
             ]
         )
@@ -318,29 +391,57 @@ def create_interface(backend: DebugBackend):
     return demo
 
 if __name__ == "__main__":
-    # Default to local backend for direct execution
     backend = LocalBackend()
     demo = create_interface(backend)
     
-    # Launch with theme and css parameters (moved from Blocks constructor)
     demo.launch(
         server_name="127.0.0.1",
         server_port=7860,
         share=False,
         show_error=True,
         theme=gr.themes.Soft(
-            primary_hue="blue",
-            secondary_hue="purple"
+            primary_hue="indigo",
+            secondary_hue="purple",
+            neutral_hue="slate",
+            radius_size="lg",
+            font=["Inter", "system-ui", "sans-serif"]
         ),
         css="""
-        .gradio-container {
-            font-family: 'Inter', sans-serif;
+        .hero-section {
+            text-align: center;
+            padding: 20px 0;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
         }
-        .error {
-            color: red;
-            padding: 16px;
-            background: #fee;
+        .status-bar {
+            text-align: center;
+            padding: 12px;
+            background: #f8fafc;
             border-radius: 8px;
+            margin-top: 16px;
+            font-weight: 500;
+        }
+        .gradio-container {
+            max-width: 1400px !important;
+            margin: auto;
+        }
+        button {
+            border-radius: 12px !important;
+            font-weight: 600 !important;
+            transition: all 0.2s !important;
+        }
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
+        }
+        .gr-group {
+            border-radius: 12px !important;
+            border: 1px solid #e2e8f0 !important;
+        }
+        .gr-accordion {
+            border-radius: 12px !important;
         }
         """
     )