Update app.py

app.py

@@ -102,72 +102,66 @@ class GradioInterface:
     def __init__(self, prompt_refiner: PromptRefiner):
         self.prompt_refiner = prompt_refiner
         custom_css = """
-            .container {
-                border: 2px solid #2196F3;
-                border-radius: 10px;
-                padding: 10px;  /* Reduced from 20px */
-                margin: 10px;   /* Reduced from 15px */
-                background: white;
-                position: relative;
-            }
-            
-            .container::before {
-                position: absolute;
-                top: -10px;    /* Reduced from -12px */
-                left: 10px;
-                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;
-            }
-            
-            /* Reduce spacing between elements */
-            .gradio-container {
-                gap: 0.5rem !important;  /* Reduced spacing between components */
-            }
-            
-            /* Reduce margins for markdown elements */
-            .markdown {
-                margin: 0.3em 0 !important;  /* Reduced top/bottom margins */
-            }
-            
-            /* Container labels */
-            .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'; }
-            
-            /* Radio group styling with reduced spacing */
-            .radio-group {
-                display: flex;
-                gap: 5px;      /* Reduced from 10px */
-                margin: 5px 0; /* Reduced from 10px */
-            }
-            
-            /* Reduce spacing in columns */
-            .gr-form > div {
-                gap: 0.5rem !important;
-            }
-            
-            /* Reduce padding in textboxes */
-            .gr-textbox {
-                padding: 0.3rem !important;
-            }
-            
-            /* Reduce accordion spacing */
-            .gr-accordion {
-                margin: 0.3rem 0 !important;
-            }
+           .container {
+    border: 2px solid #2196F3;
+    border-radius: 10px;
+    padding: 10px;
+    margin: 10px;
+    background: white;
+    position: relative;
+}
+
+.container::before {
+    position: absolute;
+    top: -10px;
+    left: 10px;
+    background: white;
+    padding: 0 10px;
+    color: #2196F3;
+    font-weight: bold;
+    font-size: 1.2em;
+}
+
+.no-background > div:first-child {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+}
+
+.gradio-container {
+    gap: 0.5rem !important;
+}
+
+.markdown {
+    margin: 0.3em 0 !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'; }
+
+.radio-group {
+    display: flex;
+    gap: 5px;
+    margin: 5px 0;
+}
+
+.gr-form > div {
+    gap: 0.5rem !important;
+}
+
+.gr-textbox {
+    padding: 0.3rem !important;
+    border: 2px solid #4CAF50 !important;
+    border-radius: 5px !important;
+}
+
+.gr-accordion {
+    margin: 0.3rem 0 !important;
+}
             """
 
         with gr.Blocks(css=custom_css, theme=gr.themes.Default()) as self.interface: