Update app.py

app.py

@@ -185,13 +185,15 @@ h1 {
     letter-spacing: -0.5px !important;
 }
 
-/* Card styling */
-.gr-box, .gr-form, .gr-panel {
+/* Card styling for panels */
+.panel-box {
     border-radius: var(--border-radius) !important;
     box-shadow: 0 8px 16px var(--shadow-color) !important;
     background-color: var(--card-background) !important;
     border: none !important;
     overflow: hidden !important;
+    padding: 20px !important;
+    margin-bottom: 20px !important;
 }
 
 /* Button styling */
@@ -227,24 +229,35 @@ input:focus, select:focus, textarea:focus, .gr-input:focus {
 }
 
 /* Slider styling */
-.gr-slider {
-    --slider-color: var(--primary-color) !important;
+.gr-form input[type=range] {
+    appearance: none !important;
+    width: 100% !important;
+    height: 6px !important;
+    background: #e0e0e0 !important;
+    border-radius: 5px !important;
+    outline: none !important;
 }
 
-.gr-slider-handle {
-    background-color: white !important;
-    border: 2px solid var(--primary-color) !important;
+.gr-form input[type=range]::-webkit-slider-thumb {
+    appearance: none !important;
+    width: 16px !important;
+    height: 16px !important;
+    background: var(--primary-color) !important;
+    border-radius: 50% !important;
+    cursor: pointer !important;
+    border: 2px solid white !important;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
 }
 
 /* Dropdown styling */
-.gr-dropdown {
+.gr-form select {
     background-color: white !important;
     border: 2px solid #e0e0e0 !important;
     border-radius: 8px !important;
+    padding: 10px 15px !important;
 }
 
-.gr-dropdown option {
+.gr-form select option {
     padding: 10px !important;
 }
 
@@ -298,7 +311,7 @@ body::before {
 }
 
 /* Label styling */
-label {
+.gr-form label {
     font-weight: 600 !important;
     color: #673ab7 !important;
     margin-bottom: 5px !important;
@@ -313,46 +326,60 @@ label {
     gap: 15px !important;
 }
 
-.gr-form > *, .gr-box > * {
+.gr-form > div {
     margin-bottom: 16px !important;
 }
 
-/* Update Examples section */
-.gr-examples {
+/* Headings */
+.gr-form h3 {
+    color: #7b1fa2 !important;
+    margin-top: 5px !important;
+    margin-bottom: 15px !important;
+    border-bottom: 2px solid #e1bee7 !important;
+    padding-bottom: 8px !important;
+}
+
+/* Examples section */
+#examples-panel {
     background-color: #f3e5f5 !important;
     border-radius: var(--border-radius) !important;
     padding: 15px !important;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05) !important;
 }
 
-.gr-examples h2 {
+#examples-panel h2 {
     color: #7b1fa2 !important;
     font-size: 1.5rem !important;
     margin-bottom: 15px !important;
 }
 
-/* Dropdown menu adjustments */
-.gr-dropdowns {
-    display: flex !important;
-    gap: 10px !important;
-}
-
-/* Status messages */
-.gr-status {
-    border-radius: 8px !important;
-    padding: 10px 15px !important;
+/* Accordion styling */
+.gr-accordion {
+    border: 1px solid #e0e0e0 !important;
+    border-radius: var(--border-radius) !important;
+    overflow: hidden !important;
 }
 
-.gr-info {
-    background-color: var(--secondary-color) !important;
+.gr-accordion summary {
+    padding: 12px 16px !important;
+    background-color: #f9f9f9 !important;
+    cursor: pointer !important;
+    font-weight: 600 !important;
+    color: #673ab7 !important;
 }
 
-.gr-warning {
-    background-color: var(--warning-color) !important;
+/* Generate button special styling */
+#generate-btn {
+    background: linear-gradient(135deg, #ff9a9e, #fad0c4) !important;
+    font-size: 1.1rem !important;
+    padding: 12px 24px !important;
+    margin-top: 10px !important;
+    margin-bottom: 15px !important;
+    width: 100% !important;
 }
 
-.gr-error {
-    background-color: #ffcdd2 !important;
+#generate-btn:hover {
+    background: linear-gradient(135deg, #fad0c4, #ff9a9e) !important;
 }
 """
 
@@ -392,7 +419,8 @@ def create_demo():
 
         with gr.Row():
             with gr.Column(scale=6):
-                with gr.Box(elem_id="input-panel"):
+                # Input panel - using a Group div with custom class instead of Box
+                with gr.Group(elem_id="input-panel", elem_classes="panel-box"):
                     gr.Markdown("### 📸 Reference Images")
                     with gr.Row():
                         with gr.Column():
@@ -433,7 +461,8 @@ def create_demo():
                     gr.HTML(_CITE_)
 
             with gr.Column(scale=6):
-                with gr.Box(elem_id="output-panel"):
+                # Output panel - using a Group div with custom class instead of Box
+                with gr.Group(elem_id="output-panel", elem_classes="panel-box"):
                     gr.Markdown("### 🖼️ Generated Result")
                     output_image = gr.Image(label="Generated Image", elem_id="output-image", format='png')
                     seed_output = gr.Textbox(label="Used Seed", elem_id="seed-output")
@@ -444,7 +473,8 @@ def create_demo():
                         elem_id="debug-gallery",
                     )
 
-        with gr.Box(elem_id="examples-panel"):
+        # Examples panel - using a Group div with custom class instead of Box
+        with gr.Group(elem_id="examples-panel", elem_classes="panel-box"):
             gr.Markdown("## 📚 Examples")
             example_inps = [
                 [