Update app.py

app.py

@@ -33,18 +33,18 @@ class ReasoningOrchestra:
             return f"❌ API key validation failed: {str(e)}"
     
     def format_text_to_html(self, text: str) -> str:
-        """Convert text to HTML with proper formatting"""
+        """Convert text to HTML with proper formatting and consistent font size"""
         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>"
+            return "<p style='color: #666; font-style: italic; font-size: 16px;'>No content was generated. This might be due to API limitations or model availability issues.</p>"
         
         # Escape HTML characters first
         text = html.escape(text)
         
-        # Convert markdown-style formatting to HTML
+        # Convert markdown-style formatting to HTML with consistent font sizes
         # Headers
-        text = re.sub(r'^### (.*$)', r'<h3>\1</h3>', text, flags=re.MULTILINE)
-        text = re.sub(r'^## (.*$)', r'<h2>\1</h2>', text, flags=re.MULTILINE)
-        text = re.sub(r'^# (.*$)', r'<h1>\1</h1>', text, flags=re.MULTILINE)
+        text = re.sub(r'^### (.*$)', r'<h3 style="font-size: 18px;">\1</h3>', text, flags=re.MULTILINE)
+        text = re.sub(r'^## (.*$)', r'<h2 style="font-size: 20px;">\1</h2>', text, flags=re.MULTILINE)
+        text = re.sub(r'^# (.*$)', r'<h1 style="font-size: 22px;">\1</h1>', text, flags=re.MULTILINE)
         
         # Bold text
         text = re.sub(r'\*\*(.*?)\*\*', r'<strong>\1</strong>', text)
@@ -53,8 +53,8 @@ class ReasoningOrchestra:
         text = re.sub(r'\*(.*?)\*', r'<em>\1</em>', text)
         
         # Code blocks
-        text = re.sub(r'```(.*?)```', r'<pre><code>\1</code></pre>', text, flags=re.DOTALL)
-        text = re.sub(r'`(.*?)`', r'<code>\1</code>', text)
+        text = re.sub(r'```(.*?)```', r'<pre style="font-size: 15px; background: #f5f5f5; padding: 10px; border-radius: 5px;"><code>\1</code></pre>', text, flags=re.DOTALL)
+        text = re.sub(r'`(.*?)`', r'<code style="font-size: 15px; background: #f5f5f5; padding: 2px 4px; border-radius: 3px;">\1</code>', text)
         
         # Lists
         lines = text.split('\n')
@@ -65,12 +65,12 @@ class ReasoningOrchestra:
             stripped = line.strip()
             if stripped.startswith('- ') or stripped.startswith('* '):
                 if not in_list:
-                    formatted_lines.append('<ul>')
+                    formatted_lines.append('<ul style="font-size: 16px;">')
                     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>')
+                    formatted_lines.append('<ol style="font-size: 16px;">')
                     in_list = True
                 formatted_lines.append(f'<li>{stripped[3:]}</li>')
             else:
@@ -78,7 +78,7 @@ class ReasoningOrchestra:
                     formatted_lines.append('</ul>' if any('<li>' in line for line in formatted_lines[-5:]) else '</ol>')
                     in_list = False
                 if stripped:
-                    formatted_lines.append(f'<p>{line}</p>')
+                    formatted_lines.append(f'<p style="font-size: 16px; margin: 8px 0;">{line}</p>')
                 else:
                     formatted_lines.append('<br>')
         
@@ -93,8 +93,11 @@ 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:
@@ -127,14 +130,18 @@ 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:
@@ -166,8 +173,11 @@ 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
@@ -175,10 +185,10 @@ 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:
-            # Try with different parameters for QwQ model
             completion = self.client.chat.completions.create(
                 model="qwen-qwq-32b",
                 messages=[{"role": "user", "content": prompt}],
@@ -189,7 +199,6 @@ Be extremely thorough and leave no stone unturned. Provide detailed evidence and
             
             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",
@@ -210,7 +219,6 @@ Be extremely thorough and leave no stone unturned. Provide detailed evidence and
                 "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."
@@ -221,7 +229,6 @@ Be extremely thorough and leave no stone unturned. Provide detailed evidence and
         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']}"
@@ -235,13 +242,18 @@ 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
@@ -249,7 +261,9 @@ 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:
@@ -279,15 +293,15 @@ def validate_api_key(api_key: str) -> str:
 def run_single_model(problem: str, model_choice: str, context: str = "") -> str:
     """Run a single model analysis"""
     if not orchestra.is_api_key_set:
-        return """<div style="color: red; padding: 20px; border: 2px solid red; border-radius: 10px; background-color: #ffe6e6;">
-        <h3>❌ API Key Required</h3>
-        <p>Please set your Groq API key first in the API Configuration section above.</p>
+        return """<div style="color: red; padding: 20px; border: 2px solid red; border-radius: 10px; background-color: #ffe6e6; font-size: 16px;">
+        <h3 style="font-size: 18px;">❌ API Key Required</h3>
+        <p style="font-size: 16px;">Please set your Groq API key first in the API Configuration section above.</p>
         </div>"""
     
     if not problem.strip():
-        return """<div style="color: orange; padding: 20px; border: 2px solid orange; border-radius: 10px; background-color: #fff3e6;">
-        <h3>⚠️ Problem Required</h3>
-        <p>Please enter a problem to analyze.</p>
+        return """<div style="color: orange; padding: 20px; border: 2px solid orange; border-radius: 10px; background-color: #fff3e6; font-size: 16px;">
+        <h3 style="font-size: 18px;">⚠️ Problem Required</h3>
+        <p style="font-size: 16px;">Please enter a problem to analyze.</p>
         </div>"""
     
     start_time = time.time()
@@ -299,17 +313,17 @@ def run_single_model(problem: str, model_choice: str, context: str = "") -> str:
     elif model_choice == "Detail Detective (QwQ 32B)":
         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;">
-        <h3>❌ Invalid Model Selection</h3>
-        <p>Please select a valid model from the dropdown.</p>
+        return """<div style="color: red; padding: 20px; border: 2px solid red; border-radius: 10px; background-color: #ffe6e6; font-size: 16px;">
+        <h3 style="font-size: 18px;">❌ Invalid Model Selection</h3>
+        <p style="font-size: 16px;">Please select a valid model from the dropdown.</p>
         </div>"""
     
     elapsed_time = time.time() - start_time
     
     if "error" in result:
-        return f"""<div style="color: red; padding: 20px; border: 2px solid red; border-radius: 10px; background-color: #ffe6e6;">
-        <h3>❌ Error</h3>
-        <p>{result['error']}</p>
+        return f"""<div style="color: red; padding: 20px; border: 2px solid red; border-radius: 10px; background-color: #ffe6e6; font-size: 16px;">
+        <h3 style="font-size: 18px;">❌ Error</h3>
+        <p style="font-size: 16px;">{result['error']}</p>
         </div>"""
     
     # Format the response as HTML
@@ -318,11 +332,11 @@ def run_single_model(problem: str, model_choice: str, context: str = "") -> str:
     formatted_output = f"""
     <div style="border: 2px solid #28a745; border-radius: 15px; padding: 25px; margin: 15px 0; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
         <div style="display: flex; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #28a745;">
-            <h2 style="margin: 0; color: #28a745;">{result['role']}</h2>
+            <h2 style="margin: 0; color: #28a745; font-size: 22px;">{result['role']}</h2>
         </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; gap: 20px; font-size: 16px; 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 +344,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>
@@ -341,16 +355,16 @@ def run_single_model(problem: str, model_choice: str, context: str = "") -> str:
 def run_full_orchestra(problem: str, context: str = "") -> Tuple[str, str, str, str]:
     """Run the full collaborative reasoning orchestra"""
     if not orchestra.is_api_key_set:
-        error_msg = """<div style="color: red; padding: 20px; border: 2px solid red; border-radius: 10px; background-color: #ffe6e6;">
-        <h3>❌ API Key Required</h3>
-        <p>Please set your Groq API key first in the API Configuration section above.</p>
+        error_msg = """<div style="color: red; padding: 20px; border: 2px solid red; border-radius: 10px; background-color: #ffe6e6; font-size: 16px;">
+        <h3 style="font-size: 18px;">❌ API Key Required</h3>
+        <p style="font-size: 16px;">Please set your Groq API key first in the API Configuration section above.</p>
         </div>"""
         return error_msg, error_msg, error_msg, error_msg
     
     if not problem.strip():
-        error_msg = """<div style="color: orange; padding: 20px; border: 2px solid orange; border-radius: 10px; background-color: #fff3e6;">
-        <h3>⚠️ Problem Required</h3>
-        <p>Please enter a problem to analyze.</p>
+        error_msg = """<div style="color: orange; padding: 20px; border: 2px solid orange; border-radius: 10px; background-color: #fff3e6; font-size: 16px;">
+        <h3 style="font-size: 18px;">⚠️ Problem Required</h3>
+        <p style="font-size: 16px;">Please enter a problem to analyze.</p>
         </div>"""
         return error_msg, error_msg, error_msg, error_msg
     
@@ -368,10 +382,10 @@ def run_full_orchestra(problem: str, context: str = "") -> Tuple[str, str, str,
     
     def format_result_html(result: Dict, color: str, icon: str) -> str:
         if "error" in result:
-            return f"""<div style="color: red; padding: 20px; border: 2px solid red; border-radius: 10px; background-color: #ffe6e6;">
-            <h3>❌ Model Error</h3>
-            <p>{result['error']}</p>
-            <p style="font-size: 12px; color: #666; margin-top: 10px;"><em>This model may have restrictions or temporary availability issues. The other models can still provide analysis.</em></p>
+            return f"""<div style="color: red; padding: 20px; border: 2px solid red; border-radius: 10px; background-color: #ffe6e6; font-size: 16px;">
+            <h3 style="font-size: 18px;">❌ Model Error</h3>
+            <p style="font-size: 16px;">{result['error']}</p>
+            <p style="font-size: 14px; color: #666; margin-top: 10px;"><em>This model may have restrictions or temporary availability issues. The other models can still provide analysis.</em></p>
             </div>"""
         
         reasoning_html = orchestra.format_text_to_html(result['reasoning'])
@@ -380,17 +394,17 @@ def run_full_orchestra(problem: str, context: str = "") -> Tuple[str, str, str,
         <div style="border: 2px solid {color}; border-radius: 15px; padding: 25px; margin: 15px 0; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
             <div style="display: flex; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid {color};">
                 <span style="font-size: 24px; margin-right: 10px;">{icon}</span>
-                <h2 style="margin: 0; color: {color};">{result['model']}</h2>
+                <h2 style="margin: 0; color: {color}; font-size: 22px;">{result['model']}</h2>
             </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; gap: 20px; font-size: 16px; 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 +419,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; font-size: 22px;">Orchestra Conductor - Final Synthesis (Llama 3.3 70B Versatile)</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>
@@ -416,38 +430,46 @@ 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
+# Custom CSS for better styling with consistent font sizes
 custom_css = """
 .gradio-container {
     max-width: 1400px !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%);
     padding: 20px;
     border-radius: 15px;
     margin-bottom: 20px;
+    font-size: 16px;
 }
+
 .status-box {
     background-color: #f8f9fa;
     border-left: 4px solid #28a745;
     padding: 15px;
     margin: 10px 0;
     border-radius: 5px;
+    font-size: 16px;
 }
+
 /* Custom styling for HTML outputs */
 .html-content {
     max-height: 600px;
@@ -456,6 +478,33 @@ custom_css = """
     border-radius: 8px;
     padding: 10px;
     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;
 }
 """
 
@@ -464,29 +513,31 @@ with gr.Blocks(css=custom_css, title="Reasoning Orchestra") as app:
     # Header
     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>
+        <h1 style="font-size: 28px;">🎼 The Collaborative Reasoning Orchestra</h1>
+        <p style="font-size: 18px;"><em>Where AI models collaborate like musicians in an orchestra to solve complex problems</em></p>
+        <p style="font-size: 18px;"><strong>Now with Llama 3.3 70B Versatile as Orchestra Conductor & Enhanced HTML-Formatted Responses!</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>')
+        gr.HTML('<div class="api-key-section"><h3 style="color: white; margin-top: 0; font-size: 20px;">🔑 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"
+                info="Get your free API key from https://console.groq.com/keys",
+                elem_id="api_key_input"
             )
             api_status = gr.Textbox(
                 label="API Status",
                 interactive=False,
-                placeholder="Enter API key to validate..."
+                placeholder="Enter API key to validate...",
+                elem_id="api_status"
             )
         
-        validate_btn = gr.Button("🔍 Validate API Key", variant="primary")
+        validate_btn = gr.Button("🔍 Validate API Key", variant="primary", elem_id="validate_btn")
         validate_btn.click(
             fn=validate_api_key,
             inputs=[api_key_input],
@@ -505,12 +556,14 @@ with gr.Blocks(css=custom_css, title="Reasoning Orchestra") as app:
                     single_problem = gr.Textbox(
                         label="Problem Statement",
                         placeholder="Enter the problem you want to analyze...",
-                        lines=4
+                        lines=4,
+                        elem_id="single_problem"
                     )
                     single_context = gr.Textbox(
                         label="Additional Context (Optional)",
                         placeholder="Any additional context or constraints...",
-                        lines=2
+                        lines=2,
+                        elem_id="single_context"
                     )
                     model_choice = gr.Dropdown(
                         label="Choose Model",
@@ -519,12 +572,13 @@ with gr.Blocks(css=custom_css, title="Reasoning Orchestra") as app:
                             "Quick Strategist (Qwen3 32B)", 
                             "Detail Detective (QwQ 32B)"
                         ],
-                        value="Deep Thinker (DeepSeek R1)"
+                        value="Deep Thinker (DeepSeek R1)",
+                        elem_id="model_choice"
                     )
-                    single_analyze_btn = gr.Button("🚀 Analyze with HTML Output", variant="primary", size="lg")
+                    single_analyze_btn = gr.Button("🚀 Analyze with HTML Output", variant="primary", size="lg", elem_id="single_analyze_btn")
                 
                 with gr.Column(scale=2):
-                    single_output = gr.HTML(label="Analysis Result", elem_classes=["html-content"])
+                    single_output = gr.HTML(label="Analysis Result", elem_classes=["html-content"], elem_id="single_output")
             
             single_analyze_btn.click(
                 fn=run_single_model,
@@ -542,21 +596,23 @@ with gr.Blocks(css=custom_css, title="Reasoning Orchestra") as app:
                         orchestra_problem = gr.Textbox(
                             label="Problem Statement",
                             placeholder="Enter a complex problem that benefits from multiple reasoning perspectives...",
-                            lines=6
+                            lines=6,
+                            elem_id="orchestra_problem"
                         )
                         orchestra_context = gr.Textbox(
                             label="Additional Context (Optional)",
                             placeholder="Background information, constraints, or specific requirements...",
-                            lines=3
+                            lines=3,
+                            elem_id="orchestra_context"
                         )
-                        orchestra_analyze_btn = gr.Button("🎼 Start Orchestra Analysis", variant="primary", size="lg")
+                        orchestra_analyze_btn = gr.Button("🎼 Start Orchestra Analysis", variant="primary", size="lg", elem_id="orchestra_analyze_btn")
                 
                 # 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"])
+                    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")
+                    synthesis_output = gr.HTML(label="🎼 Final Orchestrated Solution (Llama 3.3 70B)", elem_classes=["html-content"], elem_id="synthesis_output")
             
             orchestra_analyze_btn.click(
                 fn=run_full_orchestra,
@@ -593,30 +649,30 @@ with gr.Blocks(css=custom_css, title="Reasoning Orchestra") as app:
     
     # 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;">
-        <h3>🎼 How the Orchestra Works</h3>
+    <div style="text-align: center; margin-top: 30px; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; color: white; font-size: 16px;">
+        <h3 style="font-size: 22px;">🎼 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>
+                <h4 style="font-size: 18px;">🎭 Deep Thinker (DeepSeek R1)</h4>
+                <p style="font-size: 16px;">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>
+                <h4 style="font-size: 18px;">🚀 Quick Strategist (Qwen3 32B)</h4>
+                <p style="font-size: 16px;">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>
+                <h4 style="font-size: 18px;">🔍 Detail Detective (QwQ 32B)</h4>
+                <p style="font-size: 16px;">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;">
-                <h4>🎼 Orchestra Conductor</h4>
-                <p>Synthesizes all perspectives into unified, comprehensive solutions</p>
+                <h4 style="font-size: 18px;">🎼 Orchestra Conductor</h4>
+                <p style="font-size: 16px;">Synthesizes all perspectives into unified, comprehensive solutions</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; font-size: 16px;"><em>Built with ❤️ using Groq's lightning-fast inference, Gradio, and beautiful HTML formatting</em></p>
     </div>
     """)
 
 # 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)