Update app.py

app.py

@@ -104,7 +104,7 @@ class GradioInterface:
     def __init__(self, prompt_refiner: PromptRefiner):
         self.prompt_refiner = prompt_refiner
 
-        # Define custom CSS for containers
+        # Define custom CSS for containers and to override input styling
         custom_css = """
         .container {
             border: 2px solid var(--primary-500);
@@ -116,32 +116,16 @@ class GradioInterface:
             position: relative;
         }
         
-        .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;
-        }
+        /* 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'; }
         
-        .analysis-container::before {
-            content: 'ANALYSIS & REFINEMENT';
+        /* Style for container titles */
+        .container::before {
             position: absolute;
             top: -12px;
             left: 20px;
@@ -151,41 +135,11 @@ class GradioInterface:
             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;
-            background: var(--background-fill-primary);
-            padding: 0 10px;
-            color: var(--primary-500);
-            font-weight: bold;
-            font-size: 1.2em;
+
+        /* Override input styling for output elements */
+        .output-text {
+            border: none !important;
+            background: transparent !important;
         }
         """
 
@@ -198,7 +152,6 @@ class GradioInterface:
 
             # Input Container
             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)")
                 with gr.Accordion("Meta Prompt explanation", open=False):
@@ -213,24 +166,16 @@ class GradioInterface:
 
             # Analysis Container
             with gr.Column(elem_classes=["container", "analysis-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")
+                gr.Markdown("### Initial prompt analysis")
+                analysis_evaluation = gr.Markdown()  # Removed label
+                gr.Markdown("### Refined Prompt")
+                refined_prompt = gr.Textbox(interactive=False, elem_classes="output-text")  # Added elem_classes
+                gr.Markdown("### Explanation of Refinements")
+                explanation_of_refinements = gr.Markdown()  # Removed label
             
             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]
-            )
-
             # Model Application Container
             with gr.Column(elem_classes=["container", "model-container"]):
                 gr.Markdown("## See MetaPrompt Impact")            
@@ -253,15 +198,9 @@ class GradioInterface:
             # Results Container
             with gr.Column(elem_classes=["container", "results-container"]):
                 with gr.Tab("Original Prompt Output"):
-                    original_output = gr.Markdown(label="Original Prompt Output")
+                    original_output = gr.Markdown()  # Removed label
                 with gr.Tab("Refined Prompt Output"):
-                    refined_output = gr.Markdown(label="Refined Prompt Output")
-
-            apply_button.click(
-                fn=self.apply_prompts,
-                inputs=[prompt_text, refined_prompt, apply_model],
-                outputs=[original_output, refined_output]
-            )
+                    refined_output = gr.Markdown()  # Removed label
 
             # Examples Container
             with gr.Column(elem_classes=["container", "examples-container"]):
@@ -282,9 +221,6 @@ 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)
         result = self.prompt_refiner.refine_prompt(input_data)