Update app.py

app.py

@@ -106,7 +106,7 @@ class GradioInterface:
 
         # Define custom CSS for containers
         custom_css = """
-        .input-container, .output-container {
+        .container {
             border: 2px solid var(--primary-500);
             border-radius: 10px;
             padding: 20px;
@@ -116,19 +116,8 @@ class GradioInterface:
             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';
+        .container::before {
+            content: attr(data-title);
             position: absolute;
             top: -12px;
             left: 20px;
@@ -136,16 +125,21 @@ class GradioInterface:
             padding: 0 10px;
             color: var(--primary-500);
             font-weight: bold;
+            font-size: 1.2em;
         }
         """
 
         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.")
+            # Title Container
+            with gr.Column(elem_classes="container", elem_id="title-container") as title_container:
+                title_container.dataset["title"] = "PROMPT++"
+                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.")
 
             # Input Container
-            with gr.Column(elem_classes="input-container"):
+            with gr.Column(elem_classes="container", elem_id="input-container") as input_container:
+                input_container.dataset["title"] = "PROMPT REFINEMENT"
                 gr.Markdown("## Refine Prompt")
                 with gr.Row():
                     prompt_text = gr.Textbox(label="Type the prompt (or let it empty to see metaprompt)")
@@ -159,8 +153,9 @@ class GradioInterface:
                     )
                     refine_button = gr.Button("Refine Prompt")
 
-            # Output Container
-            with gr.Column(elem_classes="output-container"):
+            # Analysis Container
+            with gr.Column(elem_classes="container", elem_id="analysis-container") as analysis_container:
+                analysis_container.dataset["title"] = "ANALYSIS & REFINEMENT"
                 with gr.Row():
                     gr.Markdown("### Initial prompt analysis")
                 with gr.Column():
@@ -179,8 +174,9 @@ class GradioInterface:
                 outputs=[analysis_evaluation, refined_prompt, explanation_of_refinements, full_response_json]
             )
 
-            # Model Application Section
-            with gr.Column(elem_classes="input-container"):
+            # Model Application Container
+            with gr.Column(elem_classes="container", elem_id="model-container") as model_container:
+                model_container.dataset["title"] = "MODEL APPLICATION"
                 gr.Markdown("## See MetaPrompt Impact")            
                 with gr.Row():
                     apply_model = gr.Dropdown(
@@ -199,7 +195,8 @@ class GradioInterface:
                     apply_button = gr.Button("Apply MetaPrompt")
 
             # Results Container
-            with gr.Column(elem_classes="output-container"):
+            with gr.Column(elem_classes="container", elem_id="results-container") as results_container:
+                results_container.dataset["title"] = "RESULTS"
                 with gr.Tab("Original Prompt Output"):
                     original_output = gr.Markdown(label="Original Prompt Output")
                 with gr.Tab("Refined Prompt Output"):
@@ -211,23 +208,25 @@ class GradioInterface:
                 outputs=[original_output, refined_output]
             )
 
-            # Examples Section
-            with gr.Accordion("Examples", open=True):
-                gr.Examples(
-                    examples=[
-                        ["Write a story on the end of prompt engineering replaced by an Ai specialized in refining prompts.", "star"],
-                        ["Tell me about that guy who invented the light bulb", "physics"],
-                        ["Explain the universe.", "star"],
-                        ["What's the population of New York City and how tall is the Empire State Building and who was the first mayor?", "morphosis"],
-                        ["List American presidents.", "verse"],                        
-                        ["Explain why the experiment failed.", "morphosis"],
-                        ["Is nuclear energy good?", "verse"],
-                        ["How does a computer work?", "phor"],
-                        ["How to make money fast?", "done"],
-                        ["how can you  prove IT0's lemma in stochastic calculus ?", "arpe"],                    
-                    ],
-                    inputs=[prompt_text, meta_prompt_choice]
-                )
+            # Examples Container
+            with gr.Column(elem_classes="container", elem_id="examples-container") as examples_container:
+                examples_container.dataset["title"] = "EXAMPLES"
+                with gr.Accordion("Examples", open=True):
+                    gr.Examples(
+                        examples=[
+                            ["Write a story on the end of prompt engineering replaced by an Ai specialized in refining prompts.", "star"],
+                            ["Tell me about that guy who invented the light bulb", "physics"],
+                            ["Explain the universe.", "star"],
+                            ["What's the population of New York City and how tall is the Empire State Building and who was the first mayor?", "morphosis"],
+                            ["List American presidents.", "verse"],                        
+                            ["Explain why the experiment failed.", "morphosis"],
+                            ["Is nuclear energy good?", "verse"],
+                            ["How does a computer work?", "phor"],
+                            ["How to make money fast?", "done"],
+                            ["how can you  prove IT0's lemma in stochastic calculus ?", "arpe"],                    
+                        ],
+                        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: