Update app.py

app.py

@@ -102,11 +102,6 @@ class GradioInterface:
     def __init__(self, prompt_refiner: PromptRefiner):
         self.prompt_refiner = prompt_refiner
         custom_css = """
-/*
-.gradio-container {
-    background-color: #e3f2fd !important;
-}
-*/
 .container {
     border: 2px solid #2196F3;
     border-radius: 10px;
@@ -127,36 +122,35 @@ class GradioInterface:
     font-size: 1.2em;
 }
 
-/* Fix radio button visibility */
-.gradio-radio {
-    display: flex !important;
-    gap: 8px !important;
-}
-
-/* Style for radio button labels */
-.gradio-radio label {
-    display: flex !important;
-    align-items: center !important;
-    padding: 6px 12px !important;
+/* Fix input alignment and styling */
+.gradio-container input,
+.gradio-container textarea,
+.gradio-container select,
+.gradio-container .gr-text-input,
+.gradio-container .gr-box {
     border: 1px solid #ddd !important;
     border-radius: 4px !important;
-    cursor: pointer !important;
-    background: white !important;
+    padding: 8px !important;
+    width: 100% !important;
+    margin: 0 !important;
+    box-sizing: border-box !important;
+}
+
+/* Fix textbox container alignment */
+.gradio-container .gr-form {
+    gap: 0 !important;
 }
 
-/* Style for selected radio button */
-.gradio-radio input[type="radio"]:checked + label {
-    background: #e3f2fd !important;
-    border-color: #2196F3 !important;
-    color: #2196F3 !important;
-    font-weight: bold !important;
+.gradio-container .form {
+    margin: 0 !important;
+    padding: 0 !important;
 }
 
 /* Container labels */
 .title-container::before { content: ''; }
 .input-container::before { content: 'PROMPT REFINEMENT'; }
 .analysis-container::before { content: 'ANALYSIS & REFINEMENT'; }
-.model-container::before { content: 'PROMPTS APPLICATION'; }
+.model-container::before { content: 'MODEL APPLICATION'; }
 .results-container::before { content: 'RESULTS'; }
 .examples-container::before { content: 'EXAMPLES'; }
 
@@ -167,43 +161,14 @@ class GradioInterface:
     margin: 6px 0;
 }
 
-/* Input styling */
-.gradio-container input,
-.gradio-container textarea,
-.gradio-container select {
-    border: 1px solid #ddd !important;
-    background: white !important;
-    border-radius: 4px !important;
-}
-
-/* Make radio buttons more visible */
-input[type="radio"] {
-    appearance: none !important;
-    -webkit-appearance: none !important;
-    width: 16px !important;
-    height: 16px !important;
-    border: 2px solid #ddd !important;
-    border-radius: 50% !important;
-    margin-right: 6px !important;
-    position: relative !important;
-    top: 2px !important;
-}
-
-input[type="radio"]:checked {
-    border-color: #2196F3 !important;
-    background: #2196F3 !important;
+/* Remove any unwanted padding/margins */
+.gradio-container .block {
+    margin: 0 !important;
 }
 
-input[type="radio"]:checked::after {
-    content: "" !important;
-    width: 8px !important;
-    height: 8px !important;
-    background: white !important;
-    border-radius: 50% !important;
-    position: absolute !important;
-    top: 50% !important;
-    left: 50% !important;
-    transform: translate(-50%, -50%) !important;
+.gradio-container .prose {
+    margin: 0 !important;
+    padding: 0 !important;
 }
 """