Update app.py

app.py

@@ -104,43 +104,42 @@ class GradioInterface:
     def __init__(self, prompt_refiner: PromptRefiner):
         self.prompt_refiner = prompt_refiner
 
-        # Define custom CSS for containers and to override input styling
+        # Define custom CSS for containers with blue theme
         custom_css = """
         .container {
-            border: 2px solid var(--primary-500);
+            border: 2px solid #2196F3;  /* Blue border */
             border-radius: 10px;
             padding: 20px;
             margin: 15px;
-            background: var(--background-fill-primary);
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            background: white;
+            box-shadow: 0 4px 6px rgba(33, 150, 243, 0.1);
             position: relative;
         }
         
-        /* Add container titles */
-        .title-container::before { content: 'PROMPT++'; }
-        .input-container::before { content: 'PROMPT REFINEMENT'; }
-        .analysis-container::before { content: 'ANALYSIS & REFINEMENT'; }
-        .model-container::before { content: 'MODEL APPLICATION'; }
-        .results-container::before { content: 'RESULTS'; }
-        .examples-container::before { content: 'EXAMPLES'; }
-        
-        /* Style for container titles */
+        /* Container titles */
         .container::before {
             position: absolute;
             top: -12px;
             left: 20px;
-            background: var(--background-fill-primary);
+            background: white;
             padding: 0 10px;
-            color: var(--primary-500);
+            color: #2196F3;
             font-weight: bold;
             font-size: 1.2em;
         }
 
-        /* Override input styling for output elements */
-        .output-text {
-            border: none !important;
-            background: transparent !important;
+        /* Remove default Gradio input styling */
+        .remove-gradio-styles {
+            border: 1px solid #ddd !important;
+            background: white !important;
         }
+
+        .title-container::before { content: 'PROMPT++'; }
+        .input-container::before { content: 'PROMPT REFINEMENT'; }
+        .analysis-container::before { content: 'ANALYSIS & REFINEMENT'; }
+        .model-container::before { content: 'MODEL APPLICATION'; }
+        .results-container::before { content: 'RESULTS'; }
+        .examples-container::before { content: 'EXAMPLES'; }
         """
 
         with gr.Blocks(css=custom_css) as self.interface:
@@ -152,26 +151,31 @@ class GradioInterface:
 
             # Input Container
             with gr.Column(elem_classes=["container", "input-container"]):
-                with gr.Row():
-                    prompt_text = gr.Textbox(label="Type the prompt (or let it empty to see metaprompt)")
+                prompt_text = gr.Textbox(
+                    label="Type the prompt (or let it empty to see metaprompt)",
+                    elem_classes="remove-gradio-styles"
+                )
                 with gr.Accordion("Meta Prompt explanation", open=False):
                     gr.Markdown(explanation_markdown)
-                with gr.Row():
-                    meta_prompt_choice = gr.Radio(
-                        ["star","done","physics","morphosis", "verse", "phor","bolism","math","arpe"], 
-                        label="Choose Meta Prompt", 
-                        value="star"
-                    )
-                    refine_button = gr.Button("Refine Prompt")
+                meta_prompt_choice = gr.Radio(
+                    ["star","done","physics","morphosis", "verse", "phor","bolism","math","arpe"],
+                    label="Choose Meta Prompt",
+                    value="star",
+                    elem_classes="remove-gradio-styles"
+                )
+                refine_button = gr.Button("Refine Prompt")
 
             # Analysis Container
             with gr.Column(elem_classes=["container", "analysis-container"]):
                 gr.Markdown("### Initial prompt analysis")
-                analysis_evaluation = gr.Markdown()  # Removed label
+                analysis_evaluation = gr.Markdown()
                 gr.Markdown("### Refined Prompt")
-                refined_prompt = gr.Textbox(interactive=False, elem_classes="output-text")  # Added elem_classes
+                refined_prompt = gr.Textbox(
+                    interactive=False,
+                    elem_classes="remove-gradio-styles"
+                )
                 gr.Markdown("### Explanation of Refinements")
-                explanation_of_refinements = gr.Markdown()  # Removed label
+                explanation_of_refinements = gr.Markdown()
             
             with gr.Accordion("Full Response JSON", open=False, visible=False):
                 full_response_json = gr.JSON()
@@ -179,28 +183,28 @@ class GradioInterface:
             # Model Application Container
             with gr.Column(elem_classes=["container", "model-container"]):
                 gr.Markdown("## See MetaPrompt Impact")            
-                with gr.Row():
-                    apply_model = gr.Dropdown(
-                        [
-                            "Qwen/Qwen2.5-72B-Instruct",
-                            "meta-llama/Meta-Llama-3-70B-Instruct",
-                            "meta-llama/Llama-3.1-8B-Instruct",
-                            "NousResearch/Hermes-3-Llama-3.1-8B",
-                            "HuggingFaceH4/zephyr-7b-alpha",
-                            "meta-llama/Llama-2-7b-chat-hf",
-                            "microsoft/Phi-3.5-mini-instruct"
-                        ],
-                        value="meta-llama/Meta-Llama-3-70B-Instruct",
-                        label="Choose the Model to apply to the prompts (the one you will used)"
-                    )
-                    apply_button = gr.Button("Apply MetaPrompt")
+                apply_model = gr.Dropdown(
+                    [
+                        "Qwen/Qwen2.5-72B-Instruct",
+                        "meta-llama/Meta-Llama-3-70B-Instruct",
+                        "meta-llama/Llama-3.1-8B-Instruct",
+                        "NousResearch/Hermes-3-Llama-3.1-8B",
+                        "HuggingFaceH4/zephyr-7b-alpha",
+                        "meta-llama/Llama-2-7b-chat-hf",
+                        "microsoft/Phi-3.5-mini-instruct"
+                    ],
+                    value="meta-llama/Meta-Llama-3-70B-Instruct",
+                    label="Choose the Model to apply to the prompts (the one you will used)",
+                    elem_classes="remove-gradio-styles"
+                )
+                apply_button = gr.Button("Apply MetaPrompt")
 
             # Results Container
             with gr.Column(elem_classes=["container", "results-container"]):
                 with gr.Tab("Original Prompt Output"):
-                    original_output = gr.Markdown()  # Removed label
+                    original_output = gr.Markdown()
                 with gr.Tab("Refined Prompt Output"):
-                    refined_output = gr.Markdown()  # Removed label
+                    refined_output = gr.Markdown()
 
             # Examples Container
             with gr.Column(elem_classes=["container", "examples-container"]):
@@ -221,6 +225,8 @@ class GradioInterface:
                         inputs=[prompt_text, meta_prompt_choice]
                     )
 
+    # Rest of the class methods remain the same...
+
     def refine_prompt(self, prompt: str, meta_prompt_choice: str) -> tuple:
         input_data = PromptInput(text=prompt, meta_prompt_choice=meta_prompt_choice)
         result = self.prompt_refiner.refine_prompt(input_data)