Update app.py

app.py

@@ -116,8 +116,68 @@ class GradioInterface:
             position: relative;
         }
         
-        .container::before {
-            content: attr(data-title);
+        .title-container::before {
+            content: 'PROMPT++';
+            position: absolute;
+            top: -12px;
+            left: 20px;
+            background: var(--background-fill-primary);
+            padding: 0 10px;
+            color: var(--primary-500);
+            font-weight: bold;
+            font-size: 1.2em;
+        }
+        
+        .input-container::before {
+            content: 'PROMPT REFINEMENT';
+            position: absolute;
+            top: -12px;
+            left: 20px;
+            background: var(--background-fill-primary);
+            padding: 0 10px;
+            color: var(--primary-500);
+            font-weight: bold;
+            font-size: 1.2em;
+        }
+        
+        .analysis-container::before {
+            content: 'ANALYSIS & REFINEMENT';
+            position: absolute;
+            top: -12px;
+            left: 20px;
+            background: var(--background-fill-primary);
+            padding: 0 10px;
+            color: var(--primary-500);
+            font-weight: bold;
+            font-size: 1.2em;
+        }
+        
+        .model-container::before {
+            content: 'MODEL APPLICATION';
+            position: absolute;
+            top: -12px;
+            left: 20px;
+            background: var(--background-fill-primary);
+            padding: 0 10px;
+            color: var(--primary-500);
+            font-weight: bold;
+            font-size: 1.2em;
+        }
+        
+        .results-container::before {
+            content: 'RESULTS';
+            position: absolute;
+            top: -12px;
+            left: 20px;
+            background: var(--background-fill-primary);
+            padding: 0 10px;
+            color: var(--primary-500);
+            font-weight: bold;
+            font-size: 1.2em;
+        }
+        
+        .examples-container::before {
+            content: 'EXAMPLES';
             position: absolute;
             top: -12px;
             left: 20px;
@@ -131,15 +191,13 @@ class GradioInterface:
 
         with gr.Blocks(css=custom_css) as self.interface:
             # Title Container
-            with gr.Column(elem_classes="container", elem_id="title-container") as title_container:
-                title_container.dataset["title"] = "PROMPT++"
+            with gr.Column(elem_classes=["container", "title-container"]):
                 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="container", elem_id="input-container") as input_container:
-                input_container.dataset["title"] = "PROMPT REFINEMENT"
+            with gr.Column(elem_classes=["container", "input-container"]):
                 gr.Markdown("## Refine Prompt")
                 with gr.Row():
                     prompt_text = gr.Textbox(label="Type the prompt (or let it empty to see metaprompt)")
@@ -154,8 +212,7 @@ class GradioInterface:
                     refine_button = gr.Button("Refine Prompt")
 
             # Analysis Container
-            with gr.Column(elem_classes="container", elem_id="analysis-container") as analysis_container:
-                analysis_container.dataset["title"] = "ANALYSIS & REFINEMENT"
+            with gr.Column(elem_classes=["container", "analysis-container"]):
                 with gr.Row():
                     gr.Markdown("### Initial prompt analysis")
                 with gr.Column():
@@ -175,8 +232,7 @@ class GradioInterface:
             )
 
             # Model Application Container
-            with gr.Column(elem_classes="container", elem_id="model-container") as model_container:
-                model_container.dataset["title"] = "MODEL APPLICATION"
+            with gr.Column(elem_classes=["container", "model-container"]):
                 gr.Markdown("## See MetaPrompt Impact")            
                 with gr.Row():
                     apply_model = gr.Dropdown(
@@ -195,8 +251,7 @@ class GradioInterface:
                     apply_button = gr.Button("Apply MetaPrompt")
 
             # Results Container
-            with gr.Column(elem_classes="container", elem_id="results-container") as results_container:
-                results_container.dataset["title"] = "RESULTS"
+            with gr.Column(elem_classes=["container", "results-container"]):
                 with gr.Tab("Original Prompt Output"):
                     original_output = gr.Markdown(label="Original Prompt Output")
                 with gr.Tab("Refined Prompt Output"):
@@ -209,8 +264,7 @@ class GradioInterface:
             )
 
             # Examples Container
-            with gr.Column(elem_classes="container", elem_id="examples-container") as examples_container:
-                examples_container.dataset["title"] = "EXAMPLES"
+            with gr.Column(elem_classes=["container", "examples-container"]):
                 with gr.Accordion("Examples", open=True):
                     gr.Examples(
                         examples=[
@@ -228,6 +282,8 @@ class GradioInterface:
                         inputs=[prompt_text, meta_prompt_choice]
                     )
 
+    # Rest of the class methods remain the same...
+
     # 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)