Update app.py

app.py

@@ -93,11 +93,8 @@ class ReasoningOrchestra:
             return {"error": "API key not set"}
         
         prompt = f"""You are the Deep Thinker in a collaborative reasoning system. Your role is to provide thorough, methodical analysis with extensive step-by-step reasoning.
-
 Problem: {problem}
-
 {f"Additional Context: {context}" if context else ""}
-
 Please provide a comprehensive analysis with deep reasoning. Think through all implications, consider multiple angles, and provide detailed step-by-step logic. Be thorough and methodical in your approach."""
 
         try:
@@ -130,18 +127,14 @@ Please provide a comprehensive analysis with deep reasoning. Think through all i
             return {"error": "API key not set"}
         
         prompt = f"""You are the Quick Strategist in a collaborative reasoning system. Your role is to provide fast, efficient strategic analysis with clear action plans.
-
 Problem: {problem}
-
 {f"Additional Context: {context}" if context else ""}
-
 Please provide a strategic analysis with:
 1. Key insights and patterns
 2. Practical solutions
 3. Implementation priorities
 4. Risk assessment
 5. Clear next steps
-
 Be decisive and solution-focused. Provide concrete, actionable recommendations."""
 
         try:
@@ -173,11 +166,8 @@ Be decisive and solution-focused. Provide concrete, actionable recommendations."
             return {"error": "API key not set"}
         
         prompt = f"""You are the Detail Detective in a collaborative reasoning system. Your role is to provide meticulous investigation and comprehensive fact-checking.
-
 Problem: {problem}
-
 {f"Additional Context: {context}" if context else ""}
-
 Please conduct a thorough investigation including:
 1. Detailed analysis of all aspects
 2. Potential edge cases and considerations
@@ -185,7 +175,6 @@ Please conduct a thorough investigation including:
 4. Historical context or precedents
 5. Comprehensive pros and cons
 6. Hidden connections or implications
-
 Be extremely thorough and leave no stone unturned. Provide detailed evidence and reasoning for your conclusions."""
 
         try:
@@ -242,18 +231,13 @@ Be extremely thorough and leave no stone unturned. Provide detailed evidence and
         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.
-
 ORIGINAL PROBLEM: {original_problem}
-
 DEEP THINKER ANALYSIS (🎭 DeepSeek R1):
 {deep_reasoning}
-
 STRATEGIC ANALYSIS (🚀 Qwen3 32B):
 {strategic_reasoning}
-
 DETECTIVE INVESTIGATION (🔍 QwQ 32B):
 {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
@@ -261,9 +245,7 @@ As the Orchestra Conductor, please create a unified synthesis that:
 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:
@@ -430,28 +412,25 @@ def run_full_orchestra(problem: str, context: str = "") -> Tuple[str, str, str,
     
     return deep_output, strategic_output, detective_output, synthesis_output
 
-# Custom CSS for better styling with consistent font sizes
+# Custom CSS for consistent width and styling
 custom_css = """
 .gradio-container {
-    max-width: 1400px !important;
+    max-width: 1200px !important;
     margin: 0 auto !important;
     font-size: 16px !important;
 }
-
 .api-key-section {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     padding: 20px;
     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%);
@@ -460,7 +439,6 @@ custom_css = """
     margin-bottom: 20px;
     font-size: 16px;
 }
-
 .status-box {
     background-color: #f8f9fa;
     border-left: 4px solid #28a745;
@@ -469,9 +447,15 @@ custom_css = """
     border-radius: 5px;
     font-size: 16px;
 }
-
-/* Custom styling for HTML outputs */
+/* Consistent width for all tabs */
+.tab {
+    width: 100% !important;
+    max-width: 1200px !important;
+}
+/* Custom styling for HTML outputs with fixed width */
 .html-content {
+    width: 100% !important;
+    max-width: 1200px !important;
     max-height: 600px;
     overflow-y: auto;
     border: 1px solid #ddd;
@@ -480,32 +464,47 @@ custom_css = """
     background-color: #fafafa;
     font-size: 16px !important;
 }
-
 /* Ensure all text has consistent font size */
 p, li, span, div, textarea, input, select, button {
     font-size: 16px !important;
 }
-
 h1 {
     font-size: 24px !important;
 }
-
 h2 {
     font-size: 22px !important;
 }
-
 h3 {
     font-size: 20px !important;
 }
-
 h4 {
     font-size: 18px !important;
 }
-
 /* Make sure code blocks are readable */
 pre, code {
     font-size: 15px !important;
 }
+/* Single model analysis layout */
+.single-model-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: 100% !important;
+}
+.single-model-inputs {
+    width: 100% !important;
+}
+.single-model-output {
+    width: 100% !important;
+    margin-top: 20px;
+}
+/* Full orchestra layout */
+.orchestra-outputs {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: 100% !important;
+}
 """
 
 # Build the Gradio interface
@@ -551,8 +550,8 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Ocean(), title="Reasoning Orchest
         with gr.TabItem("🎯 Single Model Analysis"):
             gr.Markdown("### Test individual reasoning models with beautiful HTML output")
             
-            with gr.Row():
-                with gr.Column(scale=1):
+            with gr.Column(elem_classes=["single-model-container"]):
+                with gr.Column(elem_classes=["single-model-inputs"]):
                     single_problem = gr.Textbox(
                         label="Problem Statement",
                         placeholder="Enter the problem you want to analyze...",
@@ -577,7 +576,7 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Ocean(), title="Reasoning Orchest
                     )
                     single_analyze_btn = gr.Button("🚀 Analyze with HTML Output", variant="primary", size="lg", elem_id="single_analyze_btn")
                 
-                with gr.Column(scale=2):
+                with gr.Column(elem_classes=["single-model-output"]):
                     single_output = gr.HTML(label="Analysis Result", elem_classes=["html-content"], elem_id="single_output")
             
             single_analyze_btn.click(
@@ -608,7 +607,7 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Ocean(), title="Reasoning Orchest
                         orchestra_analyze_btn = gr.Button("🎼 Start Orchestra Analysis", variant="primary", size="lg", elem_id="orchestra_analyze_btn")
                 
                 # Orchestra Results
-                with gr.Column():
+                with gr.Column(elem_classes=["orchestra-outputs"]):
                     deep_output = gr.HTML(label="🎭 Deep Thinker Analysis", elem_classes=["html-content"], elem_id="deep_output")
                     strategic_output = gr.HTML(label="🚀 Quick Strategist Analysis", elem_classes=["html-content"], elem_id="strategic_output")
                     detective_output = gr.HTML(label="🔍 Detail Detective Analysis", elem_classes=["html-content"], elem_id="detective_output")