Update app.py

app.py

@@ -102,45 +102,140 @@ class GradioInterface:
     def __init__(self, prompt_refiner: PromptRefiner):
         self.prompt_refiner = prompt_refiner
         custom_css = """
-        .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;
-        }
-
-        .no-background > div:first-child {
-            border: none !important;
-            background: transparent !important;
-            box-shadow: none !important;
-        }
-
-        .title-container::before { content: ''; }
-        .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: 10px;
-            margin: 10px 0;
-        }
-        """
+            /* Main containers and borders */
+            .container {
+                border: 2px solid #2196F3;
+                border-radius: 10px;
+                padding: 20px;
+                margin: 15px;
+                background: white;
+                position: relative;
+            }
+            
+            /* Container labels */
+            .container::before {
+                position: absolute;
+                top: -12px;
+                left: 20px;
+                background: white;
+                padding: 0 10px;
+                color: #2196F3;
+                font-weight: bold;
+                font-size: 1.2em;
+            }
+            
+            /* Remove all Gradio default styles */
+            .gradio-container {
+                border: none !important;
+                background: none !important;
+            }
+            
+            /* Remove backgrounds and borders from inputs */
+            .no-background > div:first-child {
+                border: none !important;
+                background: transparent !important;
+                box-shadow: none !important;
+            }
+            
+            /* Title styling */
+            h1 {
+                color: #2196F3 !important;
+                font-size: 2.5em !important;
+                font-weight: bold !important;
+                margin-bottom: 0.5em !important;
+                text-align: center !important;
+            }
+            
+            h3 {
+                color: #666 !important;
+                font-size: 1.2em !important;
+                text-align: center !important;
+                margin-bottom: 1em !important;
+            }
+            
+            /* Container labels */
+            .title-container::before { content: ''; }
+            .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 button group */
+            .radio-group {
+                display: flex;
+                gap: 10px;
+                margin: 10px 0;
+            }
+            
+            /* Remove default Gradio container styles */
+            .gradio-container {
+                border: none !important;
+            }
+            
+            /* Remove input container borders */
+            .input-container div, 
+            .input-container textarea,
+            .input-container input {
+                border: none !important;
+                box-shadow: none !important;
+            }
+            
+            /* Remove textbox container borders */
+            .textbox-container {
+                border: none !important;
+                box-shadow: none !important;
+            }
+            
+            /* Remove focus outlines */
+            *:focus {
+                outline: none !important;
+                box-shadow: none !important;
+            }
+            
+            /* Remove nested container borders */
+            .container .gradio-container,
+            .container .gradio-container > div {
+                border: none !important;
+                box-shadow: none !important;
+            }
+            
+            /* Target specific Gradio elements */
+            .gr-box, 
+            .gr-form,
+            .gr-input,
+            .gr-panel {
+                border: none !important;
+                box-shadow: none !important;
+            }
+            
+            /* Remove any remaining borders */
+            .container * {
+                border-color: transparent !important;
+            }
+            
+            /* Markdown text styling */
+            .markdown {
+                font-size: 1em !important;
+                line-height: 1.6 !important;
+                color: #333 !important;
+            }
+            
+            /* Button styling */
+            button {
+                background: #2196F3 !important;
+                color: white !important;
+                border: none !important;
+                border-radius: 5px !important;
+                padding: 10px 20px !important;
+                cursor: pointer !important;
+                transition: background 0.3s !important;
+            }
+            
+            button:hover {
+                background: #1976D2 !important;
+            }
+            """
 
         with gr.Blocks(css=custom_css, theme=gr.themes.Default()) as self.interface:
             with gr.Column(elem_classes=["container", "title-container"]):