Update ui/gradio_interface.py

ui/gradio_interface.py

@@ -36,18 +36,14 @@ class DebugGenieUI:
             # Validate inputs
             if not error_text and screenshot is None:
                 return (
-                    [{"role": "assistant", "content": "⚠️ **Please provide either an error message or a screenshot to begin analysis.**"}],
-                    "",
-                    "",
+                    "<div style='padding: 20px; text-align: center; color: #666;'>⚠️ Please provide an error message or screenshot</div>",
+                    "<div style='padding: 20px; text-align: center; color: #999;'>Solutions will appear here after analysis</div>",
+                    "<div style='padding: 20px; text-align: center; color: #999;'>Visualization will appear here</div>",
                     None,
-                    {},
-                    gr.update(visible=False),
-                    gr.update(visible=False),
-                    gr.update(visible=False),
-                    "⚠️ Waiting for input..."
+                    None
                 )
             
-            progress(0.1, desc="🔍 Analyzing error...")
+            progress(0.2, desc="Analyzing error...")
             
             # Build context
             context = {
@@ -59,33 +55,29 @@ class DebugGenieUI:
             if screenshot is not None:
                 context['type'] = 'ide'
                 
-            progress(0.3, desc="🤖 Running AI agents...")
+            progress(0.5, desc="Running AI analysis...")
             
             # Run backend analysis
             result = await self.backend.analyze(context)
             
-            progress(0.7, desc="📊 Generating insights...")
+            progress(0.8, desc="Generating results...")
             
-            # Build main response
-            response_parts = [f"## 🎯 Root Cause\n\n{result.root_cause}\n\n---\n"]
+            # Build root cause display
+            root_cause_html = f"""
+            <div style='background: #f8f9fa; border-left: 4px solid #4f46e5; padding: 20px; border-radius: 8px; margin-bottom: 20px;'>
+                <h3 style='margin: 0 0 10px 0; color: #1e293b;'>🎯 Root Cause</h3>
+                <p style='margin: 0; color: #475569; line-height: 1.6;'>{result.root_cause}</p>
+            </div>
+            """
             
             # Generate solutions HTML
-            solutions_html = self._generate_modern_solutions(result.solutions)
+            solutions_html = self._generate_solutions_html(result.solutions)
             
             # Generate visualization
             mock_trace = self.visualizer.generate_mock_trace()
             viz_html = self.visualizer.generate_flow(mock_trace)
             
-            # Build metrics
-            analysis_json = {
-                "execution_time": f"{result.execution_time:.2f}s",
-                "confidence": f"{result.confidence_score:.1%}",
-                "agents_used": list(result.agent_metrics.keys()),
-                "solutions_found": len(result.solutions)
-            }
-            
-            # Voice explanation
-            progress(0.9, desc="🎙️ Generating explanation...")
+            # Generate voice explanation
             voice_audio = None
             if self.voice_explainer and result.solutions:
                 try:
@@ -111,134 +103,63 @@ class DebugGenieUI:
                 except Exception as e:
                     logger.warning(f"Voice generation failed: {e}")
             
-            progress(1.0, desc="✅ Complete!")
-            
-            chat_history = [{"role": "assistant", "content": "".join(response_parts)}]
+            progress(1.0, desc="Complete!")
             
             return (
-                chat_history,
+                root_cause_html,
                 solutions_html,
                 viz_html,
                 voice_audio,
-                analysis_json,
-                gr.update(visible=True),
-                gr.update(visible=True),
-                gr.update(visible=True),
-                f"✅ Analysis complete • {result.execution_time:.1f}s • {len(result.solutions)} solutions"
+                {
+                    "execution_time": f"{result.execution_time:.2f}s",
+                    "confidence": f"{result.confidence_score:.1%}",
+                    "solutions_found": len(result.solutions)
+                }
             )
             
         except Exception as e:
             logger.error(f"Analysis failed: {e}")
             return (
-                [{"role": "assistant", "content": f"## ❌ Analysis Failed\n\n{str(e)}\n\nPlease check your input and try again."}],
+                f"<div style='padding: 20px; background: #fee; border-radius: 8px; color: #c00;'>❌ Analysis failed: {str(e)}</div>",
                 "",
                 "",
                 None,
-                {"error": str(e)},
-                gr.update(visible=False),
-                gr.update(visible=False),
-                gr.update(visible=False),
-                f"❌ Error: {str(e)}"
+                {"error": str(e)}
             )
     
-    def _generate_modern_solutions(self, solutions: List[Dict]) -> str:
-        """Generate modern, card-based solutions UI."""
+    def _generate_solutions_html(self, solutions: List[Dict]) -> str:
+        """Generate clean, readable solutions display."""
         if not solutions:
-            return "<div style='text-align: center; padding: 40px; color: #666;'>No solutions found.</div>"
+            return "<div style='padding: 20px; text-align: center; color: #999;'>No solutions found</div>"
         
-        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">
-        """
+        html = "<div style='display: flex; flex-direction: column; gap: 16px;'>"
         
         for idx, sol in enumerate(solutions[:5], 1):
             title = sol.get('title', f'Solution {idx}')
             desc = sol.get('description', 'No description available')
             prob = sol.get('probability', 0.5)
             
-            # Determine confidence class
+            # Color based on confidence
             if prob > 0.7:
-                conf_class = "high-confidence"
-                conf_label = "High Confidence"
+                bg_color = "#10b981"
+                badge_text = "High Confidence"
             elif prob > 0.4:
-                conf_class = "medium-confidence"
-                conf_label = "Medium Confidence"
+                bg_color = "#f59e0b"
+                badge_text = "Medium Confidence"
             else:
-                conf_class = "low-confidence"
-                conf_label = "Low Confidence"
+                bg_color = "#6366f1"
+                badge_text = "Low Confidence"
             
             html += f"""
-            <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 style='border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; background: white;'>
+                <div style='display: flex; justify-content: space-between; align-items: start; margin-bottom: 12px;'>
+                    <div style='display: flex; align-items: center; gap: 12px;'>
+                        <span style='display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: {bg_color}; color: white; border-radius: 50%; font-weight: bold; font-size: 16px;'>{idx}</span>
+                        <h4 style='margin: 0; color: #1e293b; font-size: 18px;'>{title}</h4>
+                    </div>
+                    <span style='background: {bg_color}20; color: {bg_color}; padding: 4px 12px; border-radius: 12px; font-size: 13px; font-weight: 600;'>{prob:.0%} • {badge_text}</span>
                 </div>
-                <div class="solution-title">{title}</div>
-                <div class="solution-description">{desc}</div>
+                <p style='margin: 0; color: #64748b; line-height: 1.6;'>{desc}</p>
             </div>
             """
         
@@ -246,101 +167,84 @@ class DebugGenieUI:
         return html
 
 def create_interface(backend: DebugBackend):
-    """Create the main Gradio interface with modern UX."""
+    """Create the main Gradio interface with clean, simple design."""
     ui = DebugGenieUI(backend)
     
-    with gr.Blocks() as demo:
+    with gr.Blocks(title="DebugGenie - AI Debugging Assistant") as demo:
         
-        # Hero Section
-        with gr.Row():
-            gr.Markdown(
-                """
-                # 🧞‍♂️ DebugGenie
-                ### Your AI-Powered Debugging Assistant
-                Upload an error, get instant solutions powered by multi-agent AI
-                """,
-                elem_classes="hero-section"
-            )
+        # Header
+        gr.Markdown(
+            """
+            # 🧞 DebugGenie
+            ### AI-Powered Debugging Assistant
+            Paste your error message below and get instant solutions from multiple AI agents.
+            """,
+            elem_classes="header"
+        )
         
-        # 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")
-                
-                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
-                    )
-                
-                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",
-                    scale=1
+        # Main input section
+        gr.Markdown("## 📋 Enter Your Error")
+        
+        error_input = gr.Code(
+            label="Error Message or Stack Trace",
+            language="python",
+            lines=10,
+            placeholder="Paste your error message, stack trace, or exception here...",
+            show_label=False
+        )
+        
+        # Optional inputs in accordion
+        with gr.Accordion("➕ Add Screenshot or Files (Optional)", open=False):
+            with gr.Row():
+                screenshot_input = gr.Image(
+                    label="Screenshot",
+                    type="pil",
+                    sources=["upload", "clipboard"]
                 )
                 
-                status_text = gr.Markdown(
-                    "💡 Ready to debug • Paste an error to get started",
-                    elem_classes="status-bar"
+                codebase_files = gr.File(
+                    label="Related Code Files",
+                    file_count="multiple"
                 )
+        
+        # Analyze button
+        analyze_btn = gr.Button(
+            "🔍 Analyze Error",
+            variant="primary",
+            size="lg"
+        )
+        
+        # Results section
+        gr.Markdown("## 🎯 Analysis Results")
+        
+        root_cause_display = gr.HTML(
+            label="Root Cause",
+            value="<div style='padding: 20px; text-align: center; color: #999;'>Results will appear here after analysis</div>"
+        )
+        
+        # Solutions in accordion
+        with gr.Accordion("💡 Recommended Solutions", open=True):
+            solutions_display = gr.HTML(
+                value="<div style='padding: 20px; text-align: center; color: #999;'>Solutions will appear here</div>"
+            )
+        
+        # Additional details in tabs
+        with gr.Tabs():
+            with gr.Tab("📊 Error Visualization"):
+                viz_display = gr.HTML()
             
-            # Right Panel - Results Section
-            with gr.Column(scale=3, min_width=600):
-                gr.Markdown("### 🎯 Analysis Results")
-                
-                # 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
-                    )
-                
-                # Collapsible Sections
-                with gr.Group() as solutions_group:
-                    with gr.Accordion("💡 Recommended Solutions", open=True, visible=False) as solutions_accordion:
-                        solutions_html = gr.HTML()
-                
-                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
-                                )
+            with gr.Tab("🎙️ Voice Explanation"):
+                voice_output = gr.Audio(
+                    label="AI-Generated Explanation",
+                    autoplay=False
+                )
+            
+            with gr.Tab("📈 Technical Details"):
+                analysis_json = gr.JSON(label="Analysis Metrics")
+        
+        # Examples section
+        gr.Markdown("### 📚 Try These Examples")
         
-        # Quick Start Examples
-        gr.Markdown("### 📚 Quick Start Examples")
         gr.Examples(
             examples=[
                 [
@@ -360,31 +264,26 @@ json.decoder.JSONDecodeError: Expecting value: line 1 column 1 (char 0)""",
                 ],
                 [
                     """AttributeError: 'list' object has no attribute 'keys'
-  File "data_processor.py", line 28, in parse_config
+  File "data_processor.py", line 28
     for key in config.keys():""",
                     None,
                     None
                 ]
             ],
             inputs=[error_input, screenshot_input, codebase_files],
-            label=None,
-            examples_per_page=3
+            label=None
         )
         
-        # Event handlers
+        # Event handler
         analyze_btn.click(
             fn=ui.handle_analyze,
             inputs=[error_input, screenshot_input, codebase_files],
             outputs=[
-                chatbot,
-                solutions_html,
-                viz_3d,
+                root_cause_display,
+                solutions_display,
+                viz_display,
                 voice_output,
-                analysis_details,
-                solutions_accordion,
-                viz_accordion,
-                details_accordion,
-                status_text
+                analysis_json
             ]
         )
     
@@ -401,47 +300,51 @@ if __name__ == "__main__":
         show_error=True,
         theme=gr.themes.Soft(
             primary_hue="indigo",
-            secondary_hue="purple",
-            neutral_hue="slate",
-            radius_size="lg",
-            font=["Inter", "system-ui", "sans-serif"]
+            radius_size="lg"
         ),
         css="""
-        .hero-section {
+        /* Clean, minimal styling */
+        .header {
             text-align: center;
-            padding: 20px 0;
+            padding: 24px 0;
+            margin-bottom: 32px;
+        }
+        
+        .header h1 {
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 8px;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
-            background-clip: text;
         }
-        .status-bar {
-            text-align: center;
-            padding: 12px;
-            background: #f8fafc;
-            border-radius: 8px;
-            margin-top: 16px;
-            font-weight: 500;
+        
+        .header h3 {
+            color: #64748b;
+            font-weight: 400;
         }
+        
+        /* Container spacing */
         .gradio-container {
-            max-width: 1400px !important;
-            margin: auto;
+            max-width: 1200px;
+            margin: 0 auto;
         }
-        button {
-            border-radius: 12px !important;
-            font-weight: 600 !important;
-            transition: all 0.2s !important;
+        
+        /* Button styling */
+        button.primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border: none;
+            font-weight: 600;
         }
-        button:hover {
+        
+        button.primary: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;
+            box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
         }
-        .gr-accordion {
-            border-radius: 12px !important;
+        
+        /* Smooth transitions */
+        * {
+            transition: all 0.2s ease;
         }
         """
     )