Update App.py

Switched model 2 to gemma 3, made it look wayy better

App.py

@@ -338,7 +338,7 @@ class ModelRegistry:
                 {"name": "Claude 3 Haiku", "id": "claude-3-haiku-20240307", "provider": "anthropic", "type": ["solver"], "icon": "📜"}
             ],
             "OpenAI": [
-                {"name": "GPT-4o", "id": "gpt-4o", "provider": "openai", "type": ["solver"], "icon": "��"},
+                {"name": "GPT-4o", "id": "gpt-4o", "provider": "openai", "type": ["solver"], "icon": "🤖"},
                 {"name": "GPT-4 Turbo", "id": "gpt-4-turbo", "provider": "openai", "type": ["solver"], "icon": "🤖"},
                 {"name": "GPT-4", "id": "gpt-4", "provider": "openai", "type": ["solver"], "icon": "🤖"},
                 {"name": "GPT-3.5 Turbo", "id": "gpt-3.5-turbo", "provider": "openai", "type": ["solver"], "icon": "🤖"},
@@ -602,105 +602,55 @@ class PolyThinkOrchestrator:
 # --- Gradio Interface ---
 def create_polythink_interface():
     custom_css = """
-    /* Reverted to Original Black Theme */
+    /* Solid black background */
     body {
         background: #000000;
         color: #ffffff;
         font-family: 'Arial', sans-serif;
+        margin: 0;
+        padding: 0;
+        min-height: 100vh;
     }
-    .gradio-container {
-        background: #1a1a1a;
-        border-radius: 10px;
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
+    
+    footer {visibility: hidden}
+    
+    /* Enhanced heading without the green light */
+    .polythink-header {
+        text-align: center;
+        margin-bottom: 30px;
         padding: 20px;
     }
-    .gr-button {
-        background: linear-gradient(45deg, #666666, #999999);
-        color: #ffffff;
-        border: none;
-        padding: 10px 20px;
-        border-radius: 5px;
-        transition: all 0.3s ease;
-    }
-    .gr-button:hover {
-        background: linear-gradient(45deg, #555555, #888888);
-        transform: translateY(-2px);
-    }
-    .gr-textbox {
-        background: #333333;
-        color: #ffffff;
-        border: 1px solid #444444;
-        border-radius: 5px;
-        padding: 10px;
-    }
-    .gr-slider {
-        background: #333333;
-        border-radius: 5px;
-    }
-    .gr-slider .track-fill {
-        background: #cccccc;
-    }
-    .step-section {
-        background: #1a1a1a;
-        border-radius: 8px;
-        padding: 15px;
-        margin-bottom: 20px;
-        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-    }
-    .step-section h3 {
-        color: #cccccc;
-        margin-top: 0;
-        font-size: 1.5em;
-    }
-    .step-section p {
-        color: #aaaaaa;
-        line-height: 1.6;
-    }
-    .step-section code {
-        background: #333333;
-        padding: 2px 6px;
-        border-radius: 3px;
-        color: #ff6b6b;
-    }
-    .step-section strong {
-        color: #ffffff;
-    }
-    .status-bar {
-        background: #1a1a1a;
-        padding: 10px;
-        border-radius: 5px;
-        font-size: 1.1em;
-        margin-bottom: 20px;
-        border-left: 4px solid #666666;
-    }
     
-    /* Agreement/Disagreement styling */
-    .agreement {
-        color: #4CAF50 !important;
-        border: 1px solid #4CAF50;
-        background-color: rgba(76, 175, 80, 0.1) !important;
-        padding: 10px;
-        border-radius: 5px;
+    .polythink-title {
+        font-size: 48px;
+        font-weight: 800;
+        margin: 0;
+        padding: 0;
+        background: linear-gradient(90deg, #ffffff, #aaaaaa, #ffffff);
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        animation: shine 3s linear infinite;
+        text-transform: uppercase;
+        letter-spacing: 3px;
+        text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
     }
     
-    .disagreement {
-        color: #F44336 !important;
-        border: 1px solid #F44336;
-        background-color: rgba(244, 67, 54, 0.1) !important;
-        padding: 10px;
-        border-radius: 5px;
+    @keyframes shine {
+        0% {background-position: 0%;}
+        100% {background-position: 200%;}
     }
     
-    /* Enhanced Final Report Styling */
-    .final-report {
-        background: #111111;
-        padding: 0;
-        border-radius: 8px;
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
-        margin-top: 20px;
-        overflow: hidden;
+    .polythink-subtitle {
+        font-size: 18px;
+        color: #cccccc;
+        margin: 10px 0 0 0;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-weight: 300;
     }
     
+    /* Original Final Report Styling */
     .final-report-container {
         font-family: 'Arial', sans-serif;
     }
@@ -821,6 +771,23 @@ def create_polythink_interface():
         color: #bbbbbb;
     }
     
+    /* Keep green highlights for agreement/disagreement */
+    .agreement {
+        color: #4CAF50 !important;
+        border: 1px solid #4CAF50;
+        background-color: rgba(76, 175, 80, 0.1) !important;
+        padding: 10px;
+        border-radius: 5px;
+    }
+    
+    .disagreement {
+        color: #F44336 !important;
+        border: 1px solid #F44336;
+        background-color: rgba(244, 67, 54, 0.1) !important;
+        padding: 10px;
+        border-radius: 5px;
+    }
+    
     .judgment-container {
         display: flex;
         align-items: center;
@@ -857,48 +824,6 @@ def create_polythink_interface():
         margin: 5px 0;
     }
     
-    /* Header styling */
-    .app-header {
-        background: linear-gradient(45deg, #222222, #333333);
-        padding: 20px;
-        border-radius: 10px;
-        margin-bottom: 20px;
-        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-        border: 1px solid #444444;
-    }
-    
-    .app-title {
-        font-size: 28px;
-        margin: 0 0 10px 0;
-        background: -webkit-linear-gradient(45deg, #cccccc, #ffffff);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        display: inline-block;
-    }
-    
-    .app-subtitle {
-        font-size: 16px;
-        color: #aaaaaa;
-        margin: 0;
-    }
-    
-    /* Button style */
-    .primary-button {
-        background: linear-gradient(45deg, #555555, #777777) !important;
-        border: none !important;
-        color: white !important;
-        padding: 12px 24px !important;
-        font-weight: bold !important;
-        transition: all 0.3s ease !important;
-        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
-    }
-    
-    .primary-button:hover {
-        transform: translateY(-2px) !important;
-        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4) !important;
-        background: linear-gradient(45deg, #666666, #888888) !important;
-    }
-    
     /* Best Answer styling */
     .best-answer-container {
         background: #1a1a1a;
@@ -939,6 +864,50 @@ def create_polythink_interface():
     .best-answer-text strong {
         color: #4CAF50;
     }
+    
+    /* Gradio container */
+    .gradio-container {
+        background: #1a1a1a;
+        border-radius: 10px;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
+        padding: 20px;
+    }
+    
+    /* Status bar styling */
+    .status-bar {
+        background: #1a1a1a;
+        padding: 10px;
+        border-radius: 5px;
+        font-size: 1.1em;
+        margin-bottom: 20px;
+        border-left: 4px solid #666666;
+    }
+    
+    /* Step section styling */
+    .step-section {
+        background: #1a1a1a;
+        border-radius: 8px;
+        padding: 15px;
+        margin-bottom: 20px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+    }
+    
+    /* Primary button */
+    .primary-button {
+        background: linear-gradient(45deg, #555555, #777777) !important;
+        border: none !important;
+        color: white !important;
+        padding: 12px 24px !important;
+        font-weight: bold !important;
+        transition: all 0.3s ease !important;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
+    }
+    
+    .primary-button:hover {
+        transform: translateY(-2px) !important;
+        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4) !important;
+        background: linear-gradient(45deg, #666666, #888888) !important;
+    }
     """
 
     # Hardcoded model configurations
@@ -949,9 +918,9 @@ def create_polythink_interface():
     }
     
     solver2_config = {
-        "name": "Llama 3.2 3B Instruct",
-        "id": "meta-llama/Llama-3.2-3B-Instruct",
-        "provider": "huggingface"
+        "name": "Gemma 3 27B",
+        "id": "gemma-3-27b-it",
+        "provider": "gemini"
     }
     
     judge_config = {
@@ -968,7 +937,7 @@ def create_polythink_interface():
         cohere_key = os.getenv("COHERE_API_KEY")
         if cohere_key:
             api_clients["cohere"] = cohere.Client(cohere_key)
-            
+                
         # Hugging Face client
         hf_key = os.getenv("HF_API_KEY")
         if hf_key:
@@ -1087,10 +1056,24 @@ def create_polythink_interface():
             gr.update(value=f"### Status: ✨ Process complete! Completed {round_num + 1} round(s)", visible=True)
         ]
 
-    with gr.Blocks(title="PolyThink Alpha", css=custom_css) as demo:
-        with gr.Column(elem_classes=["app-header"]):
-            gr.Markdown("<h1 class='app-title'>PolyThink Alpha</h1>", show_label=False)
-            gr.Markdown("<p class='app-subtitle'>Multi-Agent Problem Solving System</p>", show_label=False)
+    # Apply Monochrome theme and customize it 
+    theme = gr.themes.Monochrome(
+        primary_hue="slate",
+        secondary_hue="gray",
+        neutral_hue="neutral",
+    ).set(
+        body_text_color="white",
+        background_fill_secondary="rgba(26, 26, 26, 0.9)",
+        background_fill_primary="rgba(0, 0, 0, 0)",
+    )
+
+    with gr.Blocks(title="PolyThink Alpha", css=custom_css, theme=theme) as demo:
+        # Enhanced header section
+        with gr.Column(elem_classes=["polythink-header"]):
+            gr.HTML("""
+                <h1 class='polythink-title'>PolyThink</h1>
+                <p class='polythink-subtitle'>Multi-Agent Problem Solving System</p>
+            """, show_label=False)
 
         with gr.Row():
             with gr.Column(scale=2):