Update app.py

app.py

@@ -102,6 +102,11 @@ 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;
@@ -122,35 +127,36 @@ class GradioInterface:
     font-size: 1.2em;
 }
 
-/* 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;
-    padding: 8px !important;
-    width: 100% !important;
-    margin: 0 !important;
-    box-sizing: border-box !important;
+/* Fix radio button visibility */
+.gradio-radio {
+    display: flex !important;
+    gap: 8px !important;
 }
 
-/* Fix textbox container alignment */
-.gradio-container .gr-form {
-    gap: 0 !important;
+/* Style for radio button labels */
+.gradio-radio label {
+    display: flex !important;
+    align-items: center !important;
+    padding: 6px 12px !important;
+    border: 1px solid #ddd !important;
+    border-radius: 4px !important;
+    cursor: pointer !important;
+    background: white !important;
 }
 
-.gradio-container .form {
-    margin: 0 !important;
-    padding: 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;
 }
 
 /* Container labels */
 .title-container::before { content: ''; }
 .input-container::before { content: 'PROMPT REFINEMENT'; }
 .analysis-container::before { content: 'ANALYSIS & REFINEMENT'; }
-.model-container::before { content: 'MODEL APPLICATION'; }
+.model-container::before { content: 'PROMPTS APPLICATION'; }
 .results-container::before { content: 'RESULTS'; }
 .examples-container::before { content: 'EXAMPLES'; }
 
@@ -161,14 +167,43 @@ class GradioInterface:
     margin: 6px 0;
 }
 
-/* Remove any unwanted padding/margins */
-.gradio-container .block {
-    margin: 0 !important;
+/* 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;
 }
 
-.gradio-container .prose {
-    margin: 0 !important;
-    padding: 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;
 }
 """