Update app.py

app.py

@@ -106,36 +106,47 @@ class GradioInterface:
 
         # Define custom CSS for containers
         custom_css = """
-            .container {
-                border: 2px solid #2196F3;
-                border-radius: 10px;
-                padding: 20px;
-                margin: 15px;
-                background: white;
-                position: relative;
-            }
-            
-            /* Remove Gradio's default container styling */
-            .gradio-container {
-                background: none !important;
-                border: none !important;
-                box-shadow: none !important;
-            }
-            
-            /* Remove default input container styling */
-            .input-container > div:first-child {
-                border: none !important;
-                background: none !important;
-                box-shadow: none !important;
-            }
-            
-            /* Keep textbox styling but remove container */
-            .textbox {
-                border: 1px solid #ddd !important;
-                background: white !important;
-                box-shadow: none !important;
-            }
-            """
+        .container {
+            border: 2px solid #2196F3;
+            border-radius: 10px;
+            padding: 20px;
+            margin: 15px;
+            background: white;
+            position: relative;
+        }
+        
+        .container::before {
+            position: absolute;
+            top: -12px;
+            left: 20px;
+            background: white;
+            padding: 0 10px;
+            color: #2196F3;
+            font-weight: bold;
+            font-size: 1.2em;
+        }
+
+        /* Remove default Gradio styles */
+        .no-background > div:first-child {
+            border: none !important;
+            background: transparent !important;
+            box-shadow: none !important;
+        }
+
+        .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'; }
+
+        /* Custom styling for radio buttons */
+        .radio-group {
+            display: flex;
+            gap: 10px;
+            margin: 10px 0;
+        }
+        """
 
         with gr.Blocks(css=custom_css, theme=gr.themes.Default()) as self.interface:
             # Title Container
@@ -145,10 +156,10 @@ class GradioInterface:
                 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","input-container"]):
+            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="no-background"
+                    elem_classes="no-background"
                 )
                 with gr.Accordion("Meta Prompt explanation", open=False):
                     gr.Markdown(explanation_markdown)
@@ -156,7 +167,7 @@ class GradioInterface:
                     ["star","done","physics","morphosis", "verse", "phor","bolism","math","arpe"],
                     label="Choose Meta Prompt",
                     value="star",
-                  #  elem_classes=["no-background", "radio-group"]
+                    elem_classes=["no-background", "radio-group"]
                 )
                 refine_button = gr.Button("Refine Prompt")