Update app.py

app.py

@@ -22,9 +22,9 @@ class ReasoningOrchestra:
             self.client = Groq(api_key=api_key.strip())
             # Test the connection with a simple request
             test_completion = self.client.chat.completions.create(
-                model="qwen/qwen3-32b",
+                model="llama3-8b-8192", # Using a smaller model for a quick validation
                 messages=[{"role": "user", "content": "Hello"}],
-                max_completion_tokens=10
+                max_tokens=10
             )
             self.is_api_key_set = True
             return "✅ API key validated successfully! You can now use the Reasoning Orchestra."
@@ -37,7 +37,7 @@ class ReasoningOrchestra:
         if not text or text.strip() == "" or text == "No response generated":
             return "<p style='color: #666; font-style: italic;'>No content was generated. This might be due to API limitations or model availability issues.</p>"
         
-        # Escape HTML characters first
+        # Escape HTML characters first to prevent injection
         text = html.escape(text)
         
         # Convert markdown-style formatting to HTML
@@ -56,39 +56,53 @@ class ReasoningOrchestra:
         text = re.sub(r'```(.*?)```', r'<pre><code>\1</code></pre>', text, flags=re.DOTALL)
         text = re.sub(r'`(.*?)`', r'<code>\1</code>', text)
         
-        # Lists
+        # Lists (improved logic)
         lines = text.split('\n')
-        in_list = False
-        formatted_lines = []
-        
+        in_ul = False
+        in_ol = False
+        html_lines = []
+
         for line in lines:
             stripped = line.strip()
-            if stripped.startswith('- ') or stripped.startswith('* '):
-                if not in_list:
-                    formatted_lines.append('<ul>')
-                    in_list = True
-                formatted_lines.append(f'<li>{stripped[2:]}</li>')
-            elif stripped.startswith(('1. ', '2. ', '3. ', '4. ', '5. ', '6. ', '7. ', '8. ', '9. ')):
-                if not in_list:
-                    formatted_lines.append('<ol>')
-                    in_list = True
-                formatted_lines.append(f'<li>{stripped[3:]}</li>')
+            is_ul_item = stripped.startswith('- ') or stripped.startswith('* ')
+            is_ol_item = re.match(r'^\d+\.\s', stripped)
+
+            # Close lists if the pattern changes
+            if in_ul and not is_ul_item:
+                html_lines.append('</ul>')
+                in_ul = False
+            if in_ol and not is_ol_item:
+                html_lines.append('</ol>')
+                in_ol = False
+
+            # Process list items
+            if is_ul_item:
+                if not in_ul:
+                    html_lines.append('<ul>')
+                    in_ul = True
+                html_lines.append(f'<li>{stripped[2:]}</li>')
+            elif is_ol_item:
+                if not in_ol:
+                    html_lines.append('<ol>')
+                    in_ol = True
+                html_lines.append(f'<li>{re.sub(r"^\d+\.\\s", "", stripped)}</li>')
             else:
-                if in_list:
-                    formatted_lines.append('</ul>' if any('<li>' in line for line in formatted_lines[-5:]) else '</ol>')
-                    in_list = False
+                # Regular paragraph or empty line
                 if stripped:
-                    formatted_lines.append(f'<p>{line}</p>')
+                    html_lines.append(f'<p>{line}</p>')
                 else:
-                    formatted_lines.append('<br>')
-        
-        if in_list:
-            formatted_lines.append('</ul>')
+                    html_lines.append('<br>')
         
-        return '\n'.join(formatted_lines)
+        # Close any open lists at the end
+        if in_ul:
+            html_lines.append('</ul>')
+        if in_ol:
+            html_lines.append('</ol>')
+            
+        return '\n'.join(html_lines)
     
     def deep_thinker_analyze(self, problem: str, context: str = "") -> Dict:
-        """DeepSeek R1 - The Deep Thinker"""
+        """DeepSeek Coder V2 - The Deep Thinker"""
         if not self.is_api_key_set:
             return {"error": "API key not set"}
         
@@ -99,12 +113,11 @@ Please provide a comprehensive analysis with deep reasoning. Think through all i
 
         try:
             completion = self.client.chat.completions.create(
-                model="deepseek-r1-distill-llama-70b",
+                model="deepseek-coder-v2-lite-instruct",
                 messages=[{"role": "user", "content": prompt}],
                 temperature=0.6,
-                max_completion_tokens=8192,
+                max_tokens=8192,
                 top_p=0.95,
-                reasoning_format="raw"
             )
             
             response_content = completion.choices[0].message.content
@@ -112,7 +125,7 @@ Please provide a comprehensive analysis with deep reasoning. Think through all i
                 response_content = "The model did not generate a response. This could be due to content filtering, model limitations, or API issues."
             
             return {
-                "model": "DeepSeek R1 (Deep Thinker)",
+                "model": "DeepSeek Coder V2 (Deep Thinker)",
                 "role": "🎭 The Philosopher & Deep Analyzer",
                 "reasoning": response_content,
                 "timestamp": datetime.now().strftime("%H:%M:%S"),
@@ -122,7 +135,7 @@ Please provide a comprehensive analysis with deep reasoning. Think through all i
             return {"error": f"Deep Thinker error: {str(e)}"}
     
     def quick_strategist_analyze(self, problem: str, context: str = "") -> Dict:
-        """Qwen3 32B - The Quick Strategist"""
+        """Llama3 70B - The Quick Strategist"""
         if not self.is_api_key_set:
             return {"error": "API key not set"}
         
@@ -139,11 +152,11 @@ Be decisive and solution-focused. Provide concrete, actionable recommendations."
 
         try:
             completion = self.client.chat.completions.create(
-                model="qwen/qwen3-32b",
+                model="llama3-70b-8192",
                 messages=[{"role": "user", "content": prompt}],
                 temperature=0.6,
                 top_p=0.95,
-                max_completion_tokens=8192
+                max_tokens=8192
             )
             
             response_content = completion.choices[0].message.content
@@ -151,7 +164,7 @@ Be decisive and solution-focused. Provide concrete, actionable recommendations."
                 response_content = "The model did not generate a response. This could be due to content filtering, model limitations, or API issues."
             
             return {
-                "model": "Qwen3 32B (Quick Strategist)",
+                "model": "Llama3 70B (Quick Strategist)",
                 "role": "🚀 The Strategic Decision Maker",
                 "reasoning": response_content,
                 "timestamp": datetime.now().strftime("%H:%M:%S"),
@@ -161,7 +174,7 @@ Be decisive and solution-focused. Provide concrete, actionable recommendations."
             return {"error": f"Quick Strategist error: {str(e)}"}
     
     def detail_detective_analyze(self, problem: str, context: str = "") -> Dict:
-        """QwQ 32B - The Detail Detective"""
+        """Mixtral 8x7B - The Detail Detective"""
         if not self.is_api_key_set:
             return {"error": "API key not set"}
         
@@ -178,50 +191,33 @@ Please conduct a thorough investigation including:
 Be extremely thorough and leave no stone unturned. Provide detailed evidence and reasoning for your conclusions."""
 
         try:
-            # Try with different parameters for QwQ model
             completion = self.client.chat.completions.create(
-                model="qwen-qwq-32b",
+                model="mixtral-8x7b-32768",
                 messages=[{"role": "user", "content": prompt}],
                 temperature=0.7,
                 top_p=0.9,
-                max_completion_tokens=8192
+                max_tokens=8192
             )
             
             response_content = completion.choices[0].message.content
             if not response_content or response_content.strip() == "":
-                # Fallback: try with a simpler prompt
-                fallback_prompt = f"Analyze this problem in detail: {problem}"
-                fallback_completion = self.client.chat.completions.create(
-                    model="qwen-qwq-32b",
-                    messages=[{"role": "user", "content": fallback_prompt}],
-                    temperature=0.5,
-                    max_completion_tokens=8192
-                )
-                response_content = fallback_completion.choices[0].message.content
-                
-                if not response_content or response_content.strip() == "":
-                    response_content = "The QwQ model encountered an issue generating content. This could be due to the complexity of the prompt, content filtering, or temporary model availability issues. The model may work better with simpler, more direct questions."
-            
+                 response_content = "The model did not generate a response. This might be due to content filtering or other API issues."
+
             return {
-                "model": "QwQ 32B (Detail Detective)",
+                "model": "Mixtral 8x7B (Detail Detective)",
                 "role": "🔍 The Meticulous Investigator",
                 "reasoning": response_content,
                 "timestamp": datetime.now().strftime("%H:%M:%S"),
                 "tokens_used": getattr(completion.usage, 'total_tokens', 'N/A') if hasattr(completion, 'usage') and completion.usage else "N/A"
             }
         except Exception as e:
-            # If QwQ fails, provide a helpful error message
-            error_msg = f"Detail Detective error: {str(e)}"
-            if "model" in str(e).lower() or "not found" in str(e).lower():
-                error_msg += "\n\nNote: The QwQ model may not be available in your region or may have usage restrictions. You can still use the other models in the orchestra."
-            return {"error": error_msg}
+            return {"error": f"Detail Detective error: {str(e)}"}
     
     def synthesize_orchestra(self, deep_result: Dict, strategic_result: Dict, detective_result: Dict, original_problem: str) -> str:
-        """Synthesize all three perspectives into a final orchestrated solution using Llama 3.3 70B"""
+        """Synthesize all three perspectives into a final orchestrated solution using Llama3 70B"""
         if not self.is_api_key_set:
             return "API key not set"
         
-        # Extract reasoning content safely with better error handling
         def extract_reasoning(result: Dict, model_name: str) -> str:
             if result.get('error'):
                 return f"**{model_name} encountered an issue:** {result['error']}"
@@ -234,30 +230,30 @@ Be extremely thorough and leave no stone unturned. Provide detailed evidence and
         strategic_reasoning = extract_reasoning(strategic_result, "Quick Strategist")
         detective_reasoning = extract_reasoning(detective_result, "Detail Detective")
         
-        synthesis_prompt = f"""You are the Orchestra Conductor using Llama 3.3 70B Versatile model. You have received analytical perspectives from three different AI reasoning specialists on the same problem. Your job is to synthesize these into a comprehensive, unified solution.
+        synthesis_prompt = f"""You are the Orchestra Conductor using Llama3 70B. You have received analytical perspectives from three different AI reasoning specialists on the same problem. Your job is to synthesize these into a comprehensive, unified solution.
 ORIGINAL PROBLEM: {original_problem}
-DEEP THINKER ANALYSIS (🎭 DeepSeek R1):
+DEEP THINKER ANALYSIS (🎭 DeepSeek Coder V2):
 {deep_reasoning}
-STRATEGIC ANALYSIS (🚀 Qwen3 32B):
+STRATEGIC ANALYSIS (🚀 Llama3 70B):
 {strategic_reasoning}
-DETECTIVE INVESTIGATION (🔍 QwQ 32B):
+DETECTIVE INVESTIGATION (🔍 Mixtral 8x7B):
 {detective_reasoning}
 As the Orchestra Conductor, please create a unified synthesis that:
-1. Combines the best insights from all available analyses
-2. Addresses any gaps where models didn't provide input
-3. Resolves any contradictions between the analyses
-4. Provides a comprehensive final recommendation
-5. Highlights where the different reasoning styles complement each other
-6. Gives a clear, actionable conclusion
+1. Combines the best insights from all available analyses.
+2. Addresses any gaps where models didn't provide input.
+3. Resolves any contradictions between the analyses.
+4. Provides a comprehensive final recommendation.
+5. Highlights where the different reasoning styles complement each other.
+6. Gives a clear, actionable conclusion.
 If some models didn't provide analysis, work with what's available and note any limitations.
 Format your response as a well-structured final solution that leverages all available reasoning approaches. Use clear sections and bullet points where appropriate for maximum clarity."""
 
         try:
             completion = self.client.chat.completions.create(
-                model="llama-3.3-70b-versatile",
+                model="llama3-70b-8192",
                 messages=[{"role": "user", "content": synthesis_prompt}],
                 temperature=0.7,
-                max_completion_tokens=8192,
+                max_tokens=8192,
                 top_p=0.9
             )
             
@@ -292,11 +288,11 @@ def run_single_model(problem: str, model_choice: str, context: str = "") -> str:
     
     start_time = time.time()
     
-    if model_choice == "Deep Thinker (DeepSeek R1)":
+    if model_choice == "Deep Thinker (DeepSeek Coder V2)":
         result = orchestra.deep_thinker_analyze(problem, context)
-    elif model_choice == "Quick Strategist (Qwen3 32B)":
+    elif model_choice == "Quick Strategist (Llama3 70B)":
         result = orchestra.quick_strategist_analyze(problem, context)
-    elif model_choice == "Detail Detective (QwQ 32B)":
+    elif model_choice == "Detail Detective (Mixtral 8x7B)":
         result = orchestra.detail_detective_analyze(problem, context)
     else:
         return """<div style="color: red; padding: 20px; border: 2px solid red; border-radius: 10px; background-color: #ffe6e6;">
@@ -312,7 +308,6 @@ def run_single_model(problem: str, model_choice: str, context: str = "") -> str:
         <p>{result['error']}</p>
         </div>"""
     
-    # Format the response as HTML
     reasoning_html = orchestra.format_text_to_html(result['reasoning'])
     
     formatted_output = f"""
@@ -322,7 +317,7 @@ def run_single_model(problem: str, model_choice: str, context: str = "") -> str:
         </div>
         
         <div style="background-color: white; padding: 15px; border-radius: 10px; margin-bottom: 20px;">
-            <div style="display: flex; gap: 20px; font-size: 14px; color: #666;">
+            <div style="display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; color: #666;">
                 <span><strong>Model:</strong> {result['model']}</span>
                 <span><strong>Analysis Time:</strong> {elapsed_time:.2f} seconds</span>
                 <span><strong>Timestamp:</strong> {result['timestamp']}</span>
@@ -330,7 +325,7 @@ def run_single_model(problem: str, model_choice: str, context: str = "") -> str:
             </div>
         </div>
         
-        <div style="background-color: white; padding: 20px; border-radius: 10px; line-height: 1.6;">
+        <div style="background-color: white; padding: 20px; border-radius: 10px; line-height: 1.6; font-size: 16px;">
             {reasoning_html}
         </div>
     </div>
@@ -354,16 +349,11 @@ def run_full_orchestra(problem: str, context: str = "") -> Tuple[str, str, str,
         </div>"""
         return error_msg, error_msg, error_msg, error_msg
     
-    # Phase 1: Deep Thinker
+    # NOTE: These calls are synchronous. For a more advanced version,
+    # you could use threading to run them concurrently.
     deep_result = orchestra.deep_thinker_analyze(problem, context)
-    
-    # Phase 2: Quick Strategist  
     strategic_result = orchestra.quick_strategist_analyze(problem, context)
-    
-    # Phase 3: Detail Detective
     detective_result = orchestra.detail_detective_analyze(problem, context)
-    
-    # Phase 4: Synthesis using Llama 3.3 70B
     synthesis = orchestra.synthesize_orchestra(deep_result, strategic_result, detective_result, problem)
     
     def format_result_html(result: Dict, color: str, icon: str) -> str:
@@ -384,13 +374,13 @@ def run_full_orchestra(problem: str, context: str = "") -> Tuple[str, str, str,
             </div>
             
             <div style="background-color: white; padding: 15px; border-radius: 10px; margin-bottom: 20px;">
-                <div style="display: flex; gap: 20px; font-size: 14px; color: #666;">
+                <div style="display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; color: #666;">
                     <span><strong>Timestamp:</strong> {result['timestamp']}</span>
                     <span><strong>Tokens:</strong> {result['tokens_used']}</span>
                 </div>
             </div>
             
-            <div style="background-color: white; padding: 20px; border-radius: 10px; line-height: 1.6;">
+            <div style="background-color: white; padding: 20px; border-radius: 10px; line-height: 1.6; font-size: 16px;">
                 {reasoning_html}
             </div>
         </div>
@@ -405,10 +395,10 @@ def run_full_orchestra(problem: str, context: str = "") -> Tuple[str, str, str,
     <div style="border: 2px solid #dc3545; border-radius: 15px; padding: 25px; margin: 15px 0; background: linear-gradient(135deg, #fff5f5 0%, #fee);">
         <div style="display: flex; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #dc3545;">
             <span style="font-size: 24px; margin-right: 10px;">🎼</span>
-            <h2 style="margin: 0; color: #dc3545;">Orchestra Conductor - Final Synthesis (Llama 3.3 70B Versatile)</h2>
+            <h2 style="margin: 0; color: #dc3545;">Orchestra Conductor - Final Synthesis (Llama3 70B)</h2>
         </div>
         
-        <div style="background-color: white; padding: 20px; border-radius: 10px; line-height: 1.6;">
+        <div style="background-color: white; padding: 20px; border-radius: 10px; line-height: 1.6; font-size: 16px;">
             {synthesis_html}
         </div>
     </div>
@@ -418,6 +408,7 @@ def run_full_orchestra(problem: str, context: str = "") -> Tuple[str, str, str,
 
 # Custom CSS for better styling
 custom_css = """
+body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
 .gradio-container {
     max-width: 1400px !important;
     margin: 0 auto !important;
@@ -428,35 +419,29 @@ custom_css = """
     border-radius: 10px;
     margin-bottom: 20px;
 }
-.model-section {
-    border: 2px solid #e1e5e9;
-    border-radius: 10px;
-    padding: 15px;
-    margin: 10px 0;
-}
 .orchestra-header {
     text-align: center;
     background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
     padding: 20px;
     border-radius: 15px;
     margin-bottom: 20px;
+    color: white;
 }
-.status-box {
-    background-color: #f8f9fa;
-    border-left: 4px solid #28a745;
-    padding: 15px;
-    margin: 10px 0;
-    border-radius: 5px;
-}
-/* Custom styling for HTML outputs */
+/* Custom styling for HTML output containers */
 .html-content {
-    max-height: 600px;
-    overflow-y: auto;
+    max-height: 600px; /* Set a max height for scrollability */
+    overflow-y: auto;  /* Enable vertical scrolling */
     border: 1px solid #ddd;
     border-radius: 8px;
-    padding: 10px;
-    background-color: #fafafa;
+    padding: 15px;
+    background-color: #fdfdfd;
 }
+.html-content h1, .html-content h2, .html-content h3 { color: #333; }
+.html-content p { margin-bottom: 1em; }
+.html-content ul, .html-content ol { padding-left: 25px; }
+.html-content li { margin-bottom: 0.5em; }
+.html-content pre { background-color: #f4f4f4; padding: 10px; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; }
+.html-content code { font-family: 'Courier New', Courier, monospace; background-color: #eee; padding: 2px 4px; border-radius: 3px;}
 """
 
 # Build the Gradio interface
@@ -465,104 +450,91 @@ with gr.Blocks(css=custom_css, title="Reasoning Orchestra") as app:
     gr.HTML("""
     <div class="orchestra-header">
         <h1>🎼 The Collaborative Reasoning Orchestra</h1>
-        <p><em>Where AI models collaborate like musicians in an orchestra to solve complex problems</em></p>
-        <p><strong>Now with Llama 3.3 70B Versatile as Orchestra Conductor & Enhanced HTML-Formatted Responses!</strong></p>
+        <p><em>Where AI models collaborate like musicians to solve complex problems</em></p>
+        <p><strong>Powered by Groq's LPU™ Inference Engine for real-time results</strong></p>
     </div>
     """)
     
     # API Key Section
-    with gr.Group():
-        gr.HTML('<div class="api-key-section"><h3 style="color: white; margin-top: 0;">🔑 API Configuration</h3></div>')
-        with gr.Row():
-            api_key_input = gr.Textbox(
-                label="Enter your Groq API Key",
-                type="password",
-                placeholder="gsk_...",
-                info="Get your free API key from https://console.groq.com/keys"
-            )
-            api_status = gr.Textbox(
-                label="API Status",
-                interactive=False,
-                placeholder="Enter API key to validate..."
-            )
-        
-        validate_btn = gr.Button("🔍 Validate API Key", variant="primary")
-        validate_btn.click(
-            fn=validate_api_key,
-            inputs=[api_key_input],
-            outputs=[api_status]
-        )
+    with gr.Accordion("🔑 API Configuration", open=True):
+        with gr.Group():
+            gr.HTML('<div class="api-key-section"><h3 style="color: white; margin-top: 0;">Enter Your Groq API Key</h3></div>')
+            with gr.Row():
+                api_key_input = gr.Textbox(
+                    label="Groq API Key",
+                    type="password",
+                    placeholder="gsk_...",
+                    info="Get your free API key from https://console.groq.com/keys"
+                )
+                api_status = gr.Textbox(
+                    label="API Status",
+                    interactive=False,
+                    placeholder="Enter API key and click validate..."
+                )
+            
+            validate_btn = gr.Button("🔍 Validate API Key", variant="primary")
     
     # Main Interface Tabs
     with gr.Tabs() as tabs:
         
         # Single Model Tab
         with gr.TabItem("🎯 Single Model Analysis"):
-            gr.Markdown("### Test individual reasoning models with beautiful HTML output")
+            gr.Markdown("### Test individual reasoning models with formatted HTML output.")
             
-            with gr.Row():
+            with gr.Row(gap=16):
                 with gr.Column(scale=1):
                     single_problem = gr.Textbox(
                         label="Problem Statement",
                         placeholder="Enter the problem you want to analyze...",
-                        lines=4
+                        lines=5
                     )
                     single_context = gr.Textbox(
                         label="Additional Context (Optional)",
                         placeholder="Any additional context or constraints...",
-                        lines=2
+                        lines=3
                     )
                     model_choice = gr.Dropdown(
                         label="Choose Model",
                         choices=[
-                            "Deep Thinker (DeepSeek R1)",
-                            "Quick Strategist (Qwen3 32B)", 
-                            "Detail Detective (QwQ 32B)"
+                            "Deep Thinker (DeepSeek Coder V2)",
+                            "Quick Strategist (Llama3 70B)", 
+                            "Detail Detective (Mixtral 8x7B)"
                         ],
-                        value="Deep Thinker (DeepSeek R1)"
+                        value="Quick Strategist (Llama3 70B)"
                     )
-                    single_analyze_btn = gr.Button("🚀 Analyze with HTML Output", variant="primary", size="lg")
+                    single_analyze_btn = gr.Button("🚀 Analyze Problem", variant="primary")
                 
                 with gr.Column(scale=2):
                     single_output = gr.HTML(label="Analysis Result", elem_classes=["html-content"])
-            
-            single_analyze_btn.click(
-                fn=run_single_model,
-                inputs=[single_problem, model_choice, single_context],
-                outputs=[single_output]
-            )
         
         # Full Orchestra Tab  
         with gr.TabItem("🎼 Full Orchestra Collaboration"):
-            gr.Markdown("### Run all three models collaboratively with Llama 3.3 70B as Orchestra Conductor and stunning HTML-formatted output")
+            gr.Markdown("### Run all models collaboratively with a Llama3 70B conductor to synthesize a final solution.")
             
-            with gr.Column():
-                with gr.Row():
-                    with gr.Column(scale=1):
-                        orchestra_problem = gr.Textbox(
-                            label="Problem Statement",
-                            placeholder="Enter a complex problem that benefits from multiple reasoning perspectives...",
-                            lines=6
-                        )
-                        orchestra_context = gr.Textbox(
-                            label="Additional Context (Optional)",
-                            placeholder="Background information, constraints, or specific requirements...",
-                            lines=3
-                        )
-                        orchestra_analyze_btn = gr.Button("🎼 Start Orchestra Analysis", variant="primary", size="lg")
+            with gr.Row(gap=16):
+                with gr.Column(scale=1):
+                    orchestra_problem = gr.Textbox(
+                        label="Complex Problem Statement",
+                        placeholder="Enter a problem that benefits from multiple reasoning perspectives...",
+                        lines=8
+                    )
+                    orchestra_context = gr.Textbox(
+                        label="Additional Context (Optional)",
+                        placeholder="Background information, constraints, etc...",
+                        lines=4
+                    )
+                    orchestra_analyze_btn = gr.Button("🎼 Start Orchestra Analysis", variant="primary")
                 
-                # Orchestra Results
-                with gr.Column():
-                    deep_output = gr.HTML(label="🎭 Deep Thinker Analysis", elem_classes=["html-content"])
-                    strategic_output = gr.HTML(label="🚀 Quick Strategist Analysis", elem_classes=["html-content"])
-                    detective_output = gr.HTML(label="🔍 Detail Detective Analysis", elem_classes=["html-content"])
-                    synthesis_output = gr.HTML(label="🎼 Final Orchestrated Solution (Llama 3.3 70B)", elem_classes=["html-content"])
-            
-            orchestra_analyze_btn.click(
-                fn=run_full_orchestra,
-                inputs=[orchestra_problem, orchestra_context],
-                outputs=[deep_output, strategic_output, detective_output, synthesis_output]
-            )
+                with gr.Column(scale=2):
+                    with gr.Tabs():
+                        with gr.TabItem("🎼 Final Synthesis"):
+                            synthesis_output = gr.HTML(label="Final Orchestrated Solution (Llama3 70B)", elem_classes=["html-content"])
+                        with gr.TabItem("🎭 Deep Thinker"):
+                            deep_output = gr.HTML(label="Deep Thinker Analysis", elem_classes=["html-content"])
+                        with gr.TabItem("🚀 Quick Strategist"):
+                            strategic_output = gr.HTML(label="Quick Strategist Analysis", elem_classes=["html-content"])
+                        with gr.TabItem("🔍 Detail Detective"):
+                            detective_output = gr.HTML(label="Detail Detective Analysis", elem_classes=["html-content"])
         
         # Examples Tab
         with gr.TabItem("💡 Example Problems"):
@@ -572,51 +544,63 @@ with gr.Blocks(css=custom_css, title="Reasoning Orchestra") as app:
             **🏢 Business Strategy:**
             "Our tech startup has limited funding and needs to decide between focusing on product development or marketing. We have a working MVP but low user adoption. Budget is $50K for the next 6 months."
             
-            **🤖 Ethical AI:**  
-            "Should autonomous vehicles prioritize passenger safety over pedestrian safety in unavoidable accident scenarios? Consider the ethical, legal, and practical implications for mass adoption."
+            **🤖 Ethical AI:** "Should autonomous vehicles prioritize passenger safety over pedestrian safety in unavoidable accident scenarios? Consider the ethical, legal, and practical implications for mass adoption."
             
             **🌍 Environmental Policy:**
             "Design a policy framework to reduce carbon emissions in urban areas by 40% within 10 years while maintaining economic growth and social equity."
             
-            **🧬 Scientific Research:**
-            "We've discovered a potential breakthrough in gene therapy for treating Alzheimer's, but it requires human trials. How should we proceed given the risks, benefits, regulatory requirements, and ethical considerations?"
-            
             **🎓 Educational Innovation:**
             "How can we redesign traditional university education to better prepare students for the rapidly changing job market of the 2030s, considering AI, remote work, and emerging technologies?"
             
             **🏠 Urban Planning:**
             "A city of 500K people wants to build 10,000 affordable housing units but faces opposition from current residents, environmental concerns, and a $2B budget constraint. Develop a comprehensive solution."
-            
-            **🚗 Transportation Future:**
-            "Design a comprehensive transportation system for a smart city of 1 million people in 2035, integrating autonomous vehicles, public transit, and sustainable mobility."
             """)
     
     # Footer
     gr.HTML("""
-    <div style="text-align: center; margin-top: 30px; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; color: white;">
+    <div style="text-align: center; margin-top: 30px; padding: 20px; background: #f8f9fa; border-radius: 15px; border: 1px solid #dee2e6;">
         <h3>🎼 How the Orchestra Works</h3>
-        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 20px 0;">
-            <div style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 10px;">
-                <h4>🎭 Deep Thinker (DeepSeek R1)</h4>
-                <p>Provides thorough philosophical and theoretical analysis with comprehensive reasoning chains</p>
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 20px 0; text-align: left;">
+            <div style="background: #fff; padding: 15px; border-radius: 10px; border: 1px solid #eee;">
+                <h4>🎭 Deep Thinker</h4>
+                <p>Provides thorough philosophical and theoretical analysis with comprehensive reasoning chains.</p>
             </div>
-            <div style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 10px;">
-                <h4>🚀 Quick Strategist (Qwen3 32B)</h4>
-                <p>Delivers practical strategies, action plans, and rapid decision-making frameworks</p>
+            <div style="background: #fff; padding: 15px; border-radius: 10px; border: 1px solid #eee;">
+                <h4>🚀 Quick Strategist</h4>
+                <p>Delivers practical strategies, action plans, and rapid decision-making frameworks.</p>
             </div>
-            <div style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 10px;">
-                <h4>🔍 Detail Detective (QwQ 32B)</h4>
-                <p>Conducts comprehensive investigation, fact-checking, and finds hidden connections</p>
+            <div style="background: #fff; padding: 15px; border-radius: 10px; border: 1px solid #eee;">
+                <h4>🔍 Detail Detective</h4>
+                <p>Conducts comprehensive investigation, fact-checking, and finds hidden connections.</p>
             </div>
-            <div style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 10px;">
+            <div style="background: #fff; padding: 15px; border-radius: 10px; border: 1px solid #eee;">
                 <h4>🎼 Orchestra Conductor</h4>
-                <p>Synthesizes all perspectives into unified, comprehensive solutions</p>
+                <p>Synthesizes all perspectives into a unified, comprehensive final solution.</p>
             </div>
         </div>
-        <p style="margin-top: 20px;"><em>Built with ❤️ using Groq's lightning-fast inference, Gradio, and beautiful HTML formatting</em></p>
+        <p style="margin-top: 20px; color: #6c757d;"><em>Built with ❤️ using Groq, Gradio, and Python</em></p>
     </div>
     """)
 
+    # --- Event Handlers ---
+    validate_btn.click(
+        fn=validate_api_key,
+        inputs=[api_key_input],
+        outputs=[api_status]
+    )
+    
+    single_analyze_btn.click(
+        fn=run_single_model,
+        inputs=[single_problem, model_choice, single_context],
+        outputs=[single_output]
+    )
+    
+    orchestra_analyze_btn.click(
+        fn=run_full_orchestra,
+        inputs=[orchestra_problem, orchestra_context],
+        outputs=[deep_output, strategic_output, detective_output, synthesis_output]
+    )
+
 # Launch the app
 if __name__ == "__main__":
-    app.launch(share=False)  # Set share=False for local running; use share=True for public sharing
+    app.launch(share=False) # Set share=True to create a temporary public link