Update app.py

app.py

@@ -152,20 +152,6 @@ class GradioInterface:
     def __init__(self, prompt_refiner: PromptRefiner):
         self.prompt_refiner = prompt_refiner
         custom_css = """
-/*
-.gradio-container {
-    background-color: #e3f2fd !important;
-}
-
-.gradio-container > div:first-child {
-    background-image: url('https://huggingface.co/spaces/baconnier/prompt-plus-plus/resolve/main/prompt_plus_plus.jpg');
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-color: rgba(255, 255, 255, 0.05);
-    background-blend-mode: overlay;
-}
-*/
 .container {
     border: 2px solid #2196F3;
     border-radius: 10px;
@@ -173,15 +159,11 @@ class GradioInterface:
     margin: 6px;
     background: white;
     position: relative;
+    width: 100% !important;
+    max-width: 800px !important;
+    margin: 0 auto 20px auto !important;
 }
-.container2 {
-    border: 2px solid #CBDCEB;
-    border-radius: 10px;
-    padding: 12px;
-    margin: 6px;
-    background: white;
-    position: relative;
-}
+
 .container::before {
     position: absolute;
     top: -10px;
@@ -192,10 +174,26 @@ class GradioInterface:
     font-weight: bold;
     font-size: 1.2em;
 }
+
+.container::after {
+    content: '' !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    background-image: url('your-image-url.jpg') !important;
+    background-size: cover !important;
+    background-position: center !important;
+    opacity: 0.05 !important;
+    z-index: -1 !important;
+    border-radius: 10px !important;
+}
+
 .title-container {
     width: fit-content !important;
     margin: 0 auto !important;
-    padding: 2px 40px !important;  /* Reduced vertical padding to 3px */
+    padding: 2px 40px !important;
     border: 1px solid #0066cc !important;
     border-radius: 10px !important;
     background-color: rgba(0, 102, 204, 0.05) !important;
@@ -203,11 +201,10 @@ class GradioInterface:
 
 .title-container * {
     text-align: center;
-    margin: 0 !important;  /* Removed vertical margins */
-    line-height: 1 !important;  /* Minimum line height */
+    margin: 0 !important;
+    line-height: 1.2 !important;
 }
 
-/* Specific size adjustments for each text element */
 .title-container h1 {
     font-size: 28px !important;
     margin-bottom: 1px !important;
@@ -222,16 +219,48 @@ class GradioInterface:
     font-size: 14px !important;
     margin-bottom: 1px !important;
 }
-/* Fix radio button visibility */
-.gradio-radio {
+
+.input-container::before { 
+    content: 'PROMPT REFINEMENT';
+}
+
+.analysis-container::before {
+    content: 'ANALYSIS';
+}
+
+.model-container::before {
+    content: 'MODEL APPLICATION';
+}
+
+.examples-container::before {
+    content: 'EXAMPLES';
+}
+
+.container2 {
+    border: 1px solid #CBDCEB !important;
+    border-radius: 8px !important;
+    padding: 8px !important;
+    margin: 6px 0 !important;
+    background: white !important;
+}
+
+.input-container textarea {
+    height: 200px !important;
+}
+
+.no-background {
+    background: transparent !important;
+}
+
+/* Radio group styling */
+.radio-group {
     display: flex !important;
     gap: 8px !important;
+    flex-wrap: wrap !important;
+    margin: 10px 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;
@@ -239,66 +268,43 @@ class GradioInterface:
     background: white !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: 'PROMPTS APPLICATION'; }
-.results-container::before { content: 'RESULTS'; }
-.examples-container::before { content: 'Examples'; }
-
-/* Radio group styling */
-.radio-group {
-    display: flex;
-    gap: 8px;
-    margin: 6px 0;
 }
 
-/* Input styling */
-.gradio-container input,
-.gradio-container textarea,
-.gradio-container select {
+/* Textbox styling */
+.gradio-textbox textarea {
     border: 1px solid #ddd !important;
-    background: white !important;
     border-radius: 4px !important;
+    padding: 8px !important;
+    min-height: 100px !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;
+/* Button styling */
+.gradio-button {
+    background-color: #2196F3 !important;
+    color: white !important;
+    border-radius: 4px !important;
+    padding: 8px 16px !important;
+    margin: 10px 0 !important;
 }
 
-input[type="radio"]:checked {
-    border-color: #2196F3 !important;
-    background: #2196F3 !important;
+/* Accordion styling */
+.gradio-accordion {
+    margin: 10px 0 !important;
+    border: none !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;
+/* Fix container alignment */
+.gradio-container {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    width: 100% !important;
+    max-width: 800px !important;
+    margin: 0 auto !important;
 }
 """
 
@@ -372,7 +378,7 @@ input[type="radio"]:checked::after {
               #  gr.Markdown("## See MetaPrompt Impact")            
                 with gr.Row():
                     apply_model = gr.Dropdown(models,
-                                            value="meta-llama/Meta-Llama-3-70B-Instruct",
+                                            value="meta-llama/Llama-3.1-8B-Instruct",
                                             label="Choose the Model",
                                             container=False,  # This removes the container around the dropdown
                                             scale=1,         # Controls the width relative to other components