Update app.py

app.py

@@ -102,73 +102,32 @@ class GradioInterface:
     def __init__(self, prompt_refiner: PromptRefiner):
         self.prompt_refiner = prompt_refiner
         custom_css = """
-/* Main containers */
 .container {
-    border: 2px solid #4CAF50;  /* Green border for main containers */
+    border: 2px solid #4CAF50;  /* Changed from #2196F3 to green */
     border-radius: 10px;
-    padding: 12px;
-    margin: 8px;
+    padding: 20px;
+    margin: 15px;
     background: white;
     position: relative;
 }
 
-/* Container labels */
 .container::before {
     position: absolute;
-    top: -10px;
+    top: -12px;
     left: 20px;
     background: white;
     padding: 0 10px;
-    color: #4CAF50;  /* Green text for labels */
+    color: #4CAF50;  /* Changed from #2196F3 to green */
     font-weight: bold;
     font-size: 1.2em;
 }
 
-/* Remove all default Gradio container styles */
-.gradio-container {
-    border: none !important;
-    background: none !important;
-}
-
-/* Input elements styling */
-.gradio-container input,
-.gradio-container textarea,
-.gradio-container select {
-    border: none !important;
-    background: white !important;
-    box-shadow: none !important;
-}
-
-/* Remove backgrounds and borders */
 .no-background > div:first-child {
     border: none !important;
     background: transparent !important;
     box-shadow: none !important;
 }
 
-/* Remove focus outlines */
-*:focus {
-    outline: none !important;
-    box-shadow: none !important;
-}
-
-/* Title styling */
-h1 {
-    color: #4CAF50 !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'; }
@@ -176,84 +135,20 @@ h3 {
 .results-container::before { content: 'RESULTS'; }
 .examples-container::before { content: 'EXAMPLES'; }
 
-/* Radio button group */
 .radio-group {
     display: flex;
-    gap: 8px;
-    margin: 8px 0;
-}
-
-/* Remove nested container borders */
-.container .gradio-container,
-.container .gradio-container > div {
-    border: none !important;
-    box-shadow: none !important;
+    gap: 10px;
+    margin: 10px 0;
 }
 
-/* Target specific Gradio elements */
-.gr-box, 
-.gr-form,
-.gr-input,
-.gr-panel {
+/* Remove any unwanted borders */
+.gradio-container input:focus,
+.gradio-container textarea:focus,
+.gradio-container select:focus {
+    outline: none !important;
     border: none !important;
     box-shadow: none !important;
 }
-
-/* Markdown text styling */
-.markdown {
-    font-size: 1em !important;
-    line-height: 1.6 !important;
-    color: #333 !important;
-    margin: 0.3em 0 !important;
-}
-
-/* Button styling */
-button {
-    background: #4CAF50 !important;
-    color: white !important;
-    border: none !important;
-    border-radius: 5px !important;
-    padding: 8px 16px !important;
-    cursor: pointer !important;
-    transition: background 0.3s !important;
-}
-
-button:hover {
-    background: #45a049 !important;
-}
-
-/* Accordion styling */
-.gr-accordion {
-    margin: 0.3rem 0 !important;
-    border: none !important;
-}
-
-/* Reduce spacing in forms */
-.gr-form > div {
-    gap: 0.5rem !important;
-}
-
-/* Textbox padding */
-.gr-textbox {
-    padding: 0.3rem !important;
-}
-
-/* Remove any remaining borders */
-.container * {
-    border-color: transparent !important;
-}
-
-/* Tabs styling */
-.tabs {
-    border: none !important;
-    margin-top: 0.5rem !important;
-}
-
-/* Dropdown styling */
-.gr-dropdown {
-    border: none !important;
-    background: white !important;
-}
 """
 
         with gr.Blocks(css=custom_css, theme=gr.themes.Default()) as self.interface: