Update app.py

app.py

@@ -104,19 +104,17 @@ class GradioInterface:
     def __init__(self, prompt_refiner: PromptRefiner):
         self.prompt_refiner = prompt_refiner
 
-        # Define custom CSS for containers with blue theme
+        # Define custom CSS for containers
         custom_css = """
         .container {
-            border: 2px solid #2196F3;  /* Blue border */
+            border: 2px solid #2196F3;
             border-radius: 10px;
             padding: 20px;
             margin: 15px;
             background: white;
-            box-shadow: 0 4px 6px rgba(33, 150, 243, 0.1);
             position: relative;
         }
         
-        /* Container titles */
         .container::before {
             position: absolute;
             top: -12px;
@@ -128,10 +126,11 @@ class GradioInterface:
             font-size: 1.2em;
         }
 
-        /* Remove default Gradio input styling */
-        .remove-gradio-styles {
-            border: 1px solid #ddd !important;
-            background: white !important;
+        /* Remove default Gradio styles */
+        .no-background > div:first-child {
+            border: none !important;
+            background: transparent !important;
+            box-shadow: none !important;
         }
 
         .title-container::before { content: 'PROMPT++'; }
@@ -140,9 +139,16 @@ class GradioInterface:
         .model-container::before { content: 'MODEL APPLICATION'; }
         .results-container::before { content: 'RESULTS'; }
         .examples-container::before { content: 'EXAMPLES'; }
+
+        /* Custom styling for radio buttons */
+        .radio-group {
+            display: flex;
+            gap: 10px;
+            margin: 10px 0;
+        }
         """
 
-        with gr.Blocks(css=custom_css) as self.interface:
+        with gr.Blocks(css=custom_css, theme=gr.themes.Default()) as self.interface:
             # Title Container
             with gr.Column(elem_classes=["container", "title-container"]):
                 gr.Markdown("# PROMPT++")
@@ -153,7 +159,7 @@ class GradioInterface:
             with gr.Column(elem_classes=["container", "input-container"]):
                 prompt_text = gr.Textbox(
                     label="Type the prompt (or let it empty to see metaprompt)",
-                    elem_classes="remove-gradio-styles"
+                    elem_classes="no-background"
                 )
                 with gr.Accordion("Meta Prompt explanation", open=False):
                     gr.Markdown(explanation_markdown)
@@ -161,7 +167,7 @@ class GradioInterface:
                     ["star","done","physics","morphosis", "verse", "phor","bolism","math","arpe"],
                     label="Choose Meta Prompt",
                     value="star",
-                    elem_classes="remove-gradio-styles"
+                    elem_classes=["no-background", "radio-group"]
                 )
                 refine_button = gr.Button("Refine Prompt")
 
@@ -172,7 +178,7 @@ class GradioInterface:
                 gr.Markdown("### Refined Prompt")
                 refined_prompt = gr.Textbox(
                     interactive=False,
-                    elem_classes="remove-gradio-styles"
+                    elem_classes="no-background"
                 )
                 gr.Markdown("### Explanation of Refinements")
                 explanation_of_refinements = gr.Markdown()
@@ -183,28 +189,30 @@ class GradioInterface:
             # Model Application Container
             with gr.Column(elem_classes=["container", "model-container"]):
                 gr.Markdown("## See MetaPrompt Impact")            
-                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")
+                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)",
+                        elem_classes="no-background"
+                    )
+                    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()
-                with gr.Tab("Refined Prompt Output"):
-                    refined_output = gr.Markdown()
+                with gr.Tabs():
+                    with gr.TabItem("Original Prompt Output"):
+                        original_output = gr.Markdown()
+                    with gr.TabItem("Refined Prompt Output"):
+                        refined_output = gr.Markdown()
 
             # Examples Container
             with gr.Column(elem_classes=["container", "examples-container"]):
@@ -225,8 +233,20 @@ class GradioInterface:
                         inputs=[prompt_text, meta_prompt_choice]
                     )
 
-    # Rest of the class methods remain the same...
+            # Connect the buttons to their functions
+            refine_button.click(
+                fn=self.refine_prompt,
+                inputs=[prompt_text, meta_prompt_choice],
+                outputs=[analysis_evaluation, refined_prompt, explanation_of_refinements, full_response_json]
+            )
+
+            apply_button.click(
+                fn=self.apply_prompts,
+                inputs=[prompt_text, refined_prompt, apply_model],
+                outputs=[original_output, refined_output]
+            )
 
+    # Your existing 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)