Update app.py

app.py

@@ -104,60 +104,105 @@ class GradioInterface:
     def __init__(self, prompt_refiner: PromptRefiner):
         self.prompt_refiner = prompt_refiner
 
-        with gr.Blocks() as self.interface:
+        # Define custom CSS for containers
+        custom_css = """
+        .input-container, .output-container {
+            border: 2px solid var(--primary-500);
+            border-radius: 10px;
+            padding: 20px;
+            margin: 15px;
+            background: var(--background-fill-primary);
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            position: relative;
+        }
+        
+        .input-container::before {
+            content: 'Input Section';
+            position: absolute;
+            top: -12px;
+            left: 20px;
+            background: var(--background-fill-primary);
+            padding: 0 10px;
+            color: var(--primary-500);
+            font-weight: bold;
+        }
+        
+        .output-container::before {
+            content: 'Output Section';
+            position: absolute;
+            top: -12px;
+            left: 20px;
+            background: var(--background-fill-primary);
+            padding: 0 10px;
+            color: var(--primary-500);
+            font-weight: bold;
+        }
+        """
+
+        with gr.Blocks(css=custom_css) as self.interface:
             gr.Markdown("# PROMPT++")
             gr.Markdown("### Automating Prompt Engineering by Refining your Prompts")
             gr.Markdown("Learn how to generate an improved version of your prompts. Enter a main idea for a prompt, choose a meta prompt, and the model will attempt to generate an improved version.")
 
-            gr.Markdown("## Refine Prompt")
-            with gr.Row():
-                prompt_text = gr.Textbox(label="Type the prompt (or let it empty to see metaprompt)")
-            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")
-            with gr.Row():
-                gr.Markdown("### Initial prompt analysis")
-            with gr.Column():
-                analysis_evaluation = gr.Markdown(label="Analysis and Evaluation")
-                gr.Markdown("### Refined Prompt")
-                refined_prompt = gr.Textbox(label="Refined Prompt")
-                gr.Markdown("### Explanation of Refinements")
-                explanation_of_refinements = gr.Markdown(label="Explanation of Refinements")
+            # Input Container
+            with gr.Column(elem_classes="input-container"):
+                gr.Markdown("## Refine Prompt")
+                with gr.Row():
+                    prompt_text = gr.Textbox(label="Type the prompt (or let it empty to see metaprompt)")
+                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")
+
+            # Output Container
+            with gr.Column(elem_classes="output-container"):
+                with gr.Row():
+                    gr.Markdown("### Initial prompt analysis")
+                with gr.Column():
+                    analysis_evaluation = gr.Markdown(label="Analysis and Evaluation")
+                    gr.Markdown("### Refined Prompt")
+                    refined_prompt = gr.Textbox(label="Refined Prompt")
+                    gr.Markdown("### Explanation of Refinements")
+                    explanation_of_refinements = gr.Markdown(label="Explanation of Refinements")
             
-            with gr.Accordion("Full Response JSON", open=False,visible=False):
+            with gr.Accordion("Full Response JSON", open=False, visible=False):
                 full_response_json = gr.JSON()
 
-
             refine_button.click(
                 fn=self.refine_prompt,
                 inputs=[prompt_text, meta_prompt_choice],
                 outputs=[analysis_evaluation, refined_prompt, explanation_of_refinements, full_response_json]
             )
-            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")
-                
-            with gr.Tab("Original Prompt Output"):
-                   # gr.Markdown("### Original Prompt Output")
+            # Model Application Section
+            with gr.Column(elem_classes="input-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")
+
+            # Results Container
+            with gr.Column(elem_classes="output-container"):
+                with gr.Tab("Original Prompt Output"):
                     original_output = gr.Markdown(label="Original Prompt Output")
-            with gr.Tab("Refined Prompt Output"):
-                    #gr.Markdown("### Refined Prompt Output")
+                with gr.Tab("Refined Prompt Output"):
                     refined_output = gr.Markdown(label="Refined Prompt Output")
 
             apply_button.click(
@@ -165,6 +210,8 @@ class GradioInterface:
                 inputs=[prompt_text, refined_prompt, apply_model],
                 outputs=[original_output, refined_output]
             )
+
+            # Examples Section
             with gr.Accordion("Examples", open=True):
                 gr.Examples(
                     examples=[
@@ -182,6 +229,7 @@ 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)