Update app.py

app.py

@@ -11,20 +11,11 @@ import networkx as nx
 # --- CONFIGURATION ---
 MODAL_API_URL = os.environ.get("MODAL_API_URL")
 
-# --- CUSTOM CSS ---
+# --- CUSTOM CSS (Moved to launch() in Gradio 6) ---
 HACKATHON_CSS = """
 /* 🎨 Global Styles */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=JetBrains+Mono:wght@400;700&display=swap');
 
-body {
-    font-family: 'Inter', sans-serif;
-    background-color: #f9fafb;
-}
-
-.dark body {
-    background-color: #0f172a;
-}
-
 .gradio-container {
     max-width: 1400px !important;
 }
@@ -38,8 +29,6 @@ body {
     text-align: center;
     margin-bottom: 2rem;
     box-shadow: 0 10px 25px rgba(30, 64, 175, 0.2);
-    position: relative;
-    overflow: hidden;
 }
 
 .hero-title {
@@ -49,7 +38,6 @@ body {
     background: linear-gradient(to right, #ffffff, #e0e7ff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
 }
 
 .hero-subtitle {
@@ -87,31 +75,19 @@ body {
     display: flex;
     justify-content: center;
     gap: 3rem;
-    margin-bottom: 2rem;
-    padding: 1rem;
+    margin: 2rem 0;
+    padding: 1.5rem;
     background: white;
     border-radius: 0.75rem;
     border: 1px solid #e5e7eb;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
 }
 
-.dark .stats-container {
-    background: #1e293b;
-    border-color: #334155;
-}
-
 .stat-item {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
     font-weight: 600;
     color: #4b5563;
 }
 
-.dark .stat-item {
-    color: #cbd5e1;
-}
-
 /* 🤖 Agent Activity Monitor */
 .agent-card {
     background: white;
@@ -125,11 +101,6 @@ body {
     gap: 1rem;
 }
 
-.dark .agent-card {
-    background: #1e293b;
-    border-color: #334155;
-}
-
 .agent-card:hover {
     transform: translateX(4px);
     border-color: #6366f1;
@@ -147,10 +118,6 @@ body {
     background: #f3f4f6;
 }
 
-.dark .agent-avatar {
-    background: #334155;
-}
-
 .agent-info {
     flex: 1;
 }
@@ -162,19 +129,11 @@ body {
     margin-bottom: 0.25rem;
 }
 
-.dark .agent-name {
-    color: #f3f4f6;
-}
-
 .agent-status {
     font-size: 0.8rem;
     color: #6b7280;
 }
 
-.dark .agent-status {
-    color: #9ca3af;
-}
-
 /* 🟢 Status Indicators */
 .status-dot {
     width: 10px;
@@ -183,9 +142,19 @@ body {
     display: inline-block;
 }
 
-.status-dot.waiting { background-color: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2); }
-.status-dot.processing { background-color: #f59e0b; animation: pulse 1.5s infinite; }
-.status-dot.complete { background-color: #10b981; }
+.status-dot.waiting { 
+    background-color: #ef4444; 
+    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2); 
+}
+
+.status-dot.processing { 
+    background-color: #f59e0b; 
+    animation: pulse 1.5s infinite; 
+}
+
+.status-dot.complete { 
+    background-color: #10b981; 
+}
 
 @keyframes pulse {
     0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
@@ -204,12 +173,6 @@ body {
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
 }
 
-.dark .solution-card {
-    background: #1e293b;
-    border-color: #334155;
-    border-left-color: #10b981;
-}
-
 .rank-badge {
     background: linear-gradient(135deg, #10b981 0%, #059669 100%);
     color: white;
@@ -230,10 +193,6 @@ body {
     overflow: hidden;
 }
 
-.dark .confidence-bar-bg {
-    background: #334155;
-}
-
 .confidence-bar-fill {
     height: 100%;
     background: linear-gradient(90deg, #10b981 0%, #3b82f6 100%);
@@ -254,13 +213,18 @@ def generate_agent_html(agent_name, status, message, progress):
     """Generates HTML for a single agent card."""
     
     status_class = "waiting"
-    if status == "processing": status_class = "processing"
-    elif status == "complete": status_class = "complete"
+    if status == "processing": 
+        status_class = "processing"
+    elif status == "complete": 
+        status_class = "complete"
     
     icon = "🤖"
-    if "Claude" in agent_name: icon = "🧠"
-    elif "Gemini" in agent_name: icon = "✨"
-    elif "GPT-4" in agent_name: icon = "⚡"
+    if "Claude" in agent_name: 
+        icon = "🧠"
+    elif "Gemini" in agent_name: 
+        icon = "✨"
+    elif "GPT-4" in agent_name: 
+        icon = "⚡"
     
     return f"""
     <div class="agent-card">
@@ -284,24 +248,20 @@ def create_3d_viz():
     edge_x = []
     edge_y = []
     edge_z = []
+    
     for edge in G.edges():
         x0, y0 = G.nodes[edge[0]]['pos']
         x1, y1 = G.nodes[edge[1]]['pos']
-        edge_x.append(x0)
-        edge_y.append(y0)
-        edge_z.append(0) # Flat for now, but 3D capable
-        edge_x.append(x1)
-        edge_y.append(y1)
-        edge_z.append(0)
-        edge_x.append(None)
-        edge_y.append(None)
-        edge_z.append(None)
+        edge_x.extend([x0, x1, None])
+        edge_y.extend([y0, y1, None])
+        edge_z.extend([0, 0, None])
 
     edge_trace = go.Scatter3d(
         x=edge_x, y=edge_y, z=edge_z,
         line=dict(width=0.5, color='#888'),
         hoverinfo='none',
-        mode='lines')
+        mode='lines'
+    )
 
     node_x = []
     node_y = []
@@ -328,32 +288,37 @@ def create_3d_viz():
                 xanchor='left',
                 titleside='right'
             ),
-            line_width=2))
-
-    fig = go.Figure(data=[edge_trace, node_trace],
-                    layout=go.Layout(
-                        title='Error Dependency Graph',
-                        titlefont_size=16,
-                        showlegend=False,
-                        hovermode='closest',
-                        margin=dict(b=20,l=5,r=5,t=40),
-                        scene=dict(
-                            xaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
-                            yaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
-                            zaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
-                        )
-                    ))
+            line_width=2
+        )
+    )
+
+    fig = go.Figure(
+        data=[edge_trace, node_trace],
+        layout=go.Layout(
+            title='Error Dependency Graph',
+            titlefont_size=16,
+            showlegend=False,
+            hovermode='closest',
+            margin=dict(b=20, l=5, r=5, t=40),
+            scene=dict(
+                xaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
+                yaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
+                zaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
+            )
+        )
+    )
     return fig
 
 # --- MAIN APP ---
 
 def create_app():
-    with gr.Blocks(css=HACKATHON_CSS, theme=gr.themes.Soft(primary_hue="indigo", neutral_hue="slate")) as demo:
+    # Create Blocks WITHOUT css and theme (moved to launch)
+    with gr.Blocks(title="DebugGenie 🧞") as demo:
         
         # 1. HERO SECTION
-        with gr.Row(elem_classes="hero-section"):
+        with gr.Row():
             gr.HTML("""
-            <div class="hero-content">
+            <div class="hero-section">
                 <h1 class="hero-title">DebugGenie 🧞</h1>
                 <p class="hero-subtitle">Multi-Agent AI Debugging Assistant</p>
                 <div class="feature-badges">
@@ -365,12 +330,13 @@ def create_app():
             """)
         
         # 2. STATS BAR
-        with gr.Row(elem_classes="stats-container"):
-            gr.HTML("""
+        gr.HTML("""
+        <div class="stats-container">
             <div class="stat-item">🤖 3 AI Agents Active</div>
             <div class="stat-item">🔧 5 MCP Tools Connected</div>
             <div class="stat-item">⚡ Real-time Analysis Ready</div>
-            """)
+        </div>
+        """)
 
         # 3. MAIN LAYOUT (Two Columns)
         with gr.Row():
@@ -382,23 +348,25 @@ def create_app():
                     error_input = gr.Code(
                         label="Error Trace / Code Snippet",
                         language="python",
-                        lines=10,
-                        elem_classes="input-code"
+                        lines=10
                     )
                     
                     with gr.Accordion("📸 Add Context (Optional)", open=False):
-                        screenshot_input = gr.Image(label="Upload Screenshot", type="pil", height=200)
+                        screenshot_input = gr.Image(
+                            label="Upload Screenshot", 
+                            type="pil", 
+                            height=200
+                        )
                     
                     analyze_btn = gr.Button(
                         "🔍 Analyze Error", 
                         variant="primary", 
-                        size="lg",
-                        elem_id="analyze-btn"
+                        size="lg"
                     )
                     
                     with gr.Row():
-                        gr.Button("🎲 Try Example", size="sm", variant="secondary")
-                        gr.Button("🗑️ Clear", size="sm", variant="secondary")
+                        example_btn = gr.Button("🎲 Try Example", size="sm", variant="secondary")
+                        clear_btn = gr.Button("🗑️ Clear", size="sm", variant="secondary")
 
             # RIGHT COLUMN: RESULTS (60%)
             with gr.Column(scale=3):
@@ -412,7 +380,8 @@ def create_app():
                 )
                 
                 # Results Tabs
-                with gr.Tabs(visible=False) as results_tabs:
+                results_tabs = gr.Tabs(visible=False)
+                with results_tabs:
                     
                     # Tab 1: Solutions
                     with gr.Tab("🎯 Solutions"):
@@ -424,10 +393,15 @@ def create_app():
                         
                     # Tab 3: Raw Logs
                     with gr.Tab("📜 Agent Logs"):
-                        chatbot = gr.Chatbot(label="Conversation", height=400, type="messages")
+                        chatbot = gr.Chatbot(
+                            label="Conversation", 
+                            height=400, 
+                            type="messages"
+                        )
 
                 # Voice Player (Bottom)
-                with gr.Group(visible=False) as voice_player:
+                voice_player = gr.Group(visible=False)
+                with voice_player:
                     gr.Markdown("### 🔊 Audio Briefing")
                     audio_out = gr.Audio(interactive=False)
 
@@ -495,15 +469,45 @@ def create_app():
                     {"role": "assistant", "content": "I've analyzed the stack trace. The root cause is a missing library."}
                 ]
             }
+        
+        def clear_inputs():
+            return "", None
+        
+        def load_example():
+            return """Traceback (most recent call last):
+  File "app.py", line 10, in <module>
+    import gradio as gr
+ModuleNotFoundError: No module named 'gradio'""", None
 
+        # Event handlers
         analyze_btn.click(
             analyze_error,
             inputs=[error_input, screenshot_input],
             outputs=[agent_monitor, results_tabs, voice_player, solutions_display, viz_plot, chatbot]
         )
+        
+        clear_btn.click(
+            clear_inputs,
+            outputs=[error_input, screenshot_input]
+        )
+        
+        example_btn.click(
+            load_example,
+            outputs=[error_input, screenshot_input]
+        )
 
     return demo
 
 if __name__ == "__main__":
     demo = create_app()
-    demo.launch(server_name="0.0.0.0", server_port=7860)
+    
+    # Launch with theme and CSS (Gradio 6 requirement)
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        theme=gr.themes.Soft(
+            primary_hue="indigo",
+            neutral_hue="slate"
+        ),
+        css=HACKATHON_CSS
+    )