Update app.py

app.py

@@ -102,71 +102,163 @@ class GradioInterface:
     def __init__(self, prompt_refiner: PromptRefiner):
         self.prompt_refiner = prompt_refiner
         custom_css = """
+/* Main containers */
 .container {
-    border: 2px solid #2196F3;
+    border: 2px solid #4CAF50;  /* Green border for main containers */
     border-radius: 10px;
-    padding: 10px;
-    margin: 10px;
+    padding: 12px;
+    margin: 8px;
     background: white;
     position: relative;
 }
 
+/* Container labels */
 .container::before {
     position: absolute;
     top: -10px;
-    left: 10px;
+    left: 20px;
     background: white;
     padding: 0 10px;
-    color: #2196F3;
+    color: #4CAF50;  /* Green text for labels */
     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;
 }
 
-.gradio-container {
-    gap: 0.5rem !important;
+/* Remove focus outlines */
+*:focus {
+    outline: none !important;
+    box-shadow: none !important;
 }
 
-.markdown {
-    margin: 0.3em 0 !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;
 }
 
-.title-container::before { content: 'PROMPT++'; }
+/* 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: 5px;
-    margin: 5px 0;
+    gap: 8px;
+    margin: 8px 0;
+}
+
+/* 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;
 }
 
+/* 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;
-    border: 2px solid #4CAF50 !important;
-    border-radius: 5px !important;
 }
 
-.gr-accordion {
-    margin: 0.3rem 0 !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:
             with gr.Column(elem_classes=["container", "title-container"]):
-            #    gr.Markdown("# PROMPT++")
+                gr.Markdown("# PROMPT++")
                 gr.Markdown("### Automating Prompt Engineering by Refining your Prompts")
                 gr.Markdown("Learn how to generate an improved version of your prompts.")
 
@@ -200,7 +292,7 @@ class GradioInterface:
                 full_response_json = gr.JSON()
 
             with gr.Column(elem_classes=["container", "model-container"]):
-                gr.Markdown("## See MetaPrompt Impact")            
+              #  gr.Markdown("## See MetaPrompt Impact")            
                 with gr.Row():
                     apply_model = gr.Dropdown(
                         [