Update app.py

app.py

@@ -304,7 +304,7 @@ def create_demo():
             box-sizing: border-box !important;
             display: block !important;
         }
-        input, textarea {
+        input, textarea, select {
             background: #000000 !important;
             color: #FFFFFF !important;
             border: 1px solid #FFFFFF !important; /* White border */
@@ -313,8 +313,28 @@ def create_demo():
             width: 100% !important;
             max-width: 100vw !important;
             box-sizing: border-box !important;
+            font-family: 'Orbitron', sans-serif;
+        }
+        input:hover, textarea:hover, select:hover {
+            box-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
+            transition: box-shadow 0.3s;
+        }
+        .gr-dropdown select {
+            background: #000000 !important;
+            color: #FFFFFF !important;
+            border: 1px solid #FFFFFF !important;
+            border-radius: 4px;
+            padding: 0.5rem;
+            font-family: 'Orbitron', sans-serif;
+            width: 100% !important;
+            max-width: 100vw !important;
+            box-sizing: border-box !important;
         }
-        input:hover, textarea:hover {
+        .gr-dropdown select option {
+            background: #000000 !important;
+            color: #FFFFFF !important;
+        }
+        .gr-dropdown select:hover {
             box-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
             transition: box-shadow 0.3s;
         }
@@ -393,10 +413,14 @@ def create_demo():
                 box-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
                 border: 0.5px solid #FFFFFF !important; /* Thinner white border */
             }
+            .gr-dropdown select {
+                padding: 0.4rem !important;
+                font-size: 0.9rem !important;
+            }
         }
         </style>
         <script>
-        // Debug: Log container dimensions, glow, background, border, and radio styles
+        // Debug: Log container dimensions, glow, background, border, and dropdown styles
         document.addEventListener('DOMContentLoaded', () => {
             const containers = document.querySelectorAll('#general_items, #input_column, .image-container');
             containers.forEach(container => {
@@ -410,15 +434,10 @@ def create_demo():
                 const style = window.getComputedStyle(runButton);
                 console.log(`Run button: box-shadow=${style.boxShadow}, background=${style.background}, border=${style.border}, animation=${style.animation}, background-position=${style.backgroundPosition}`);
             }
-            const radio = document.querySelector('.gr-radio');
-            if (radio) {
-                const style = window.getComputedStyle(radio);
-                const labels = radio.querySelectorAll('label');
-                console.log(`Radio (default): border=${style.border}, background=${style.background}, color=${style.color}, display=${style.display}, flex-wrap=${style.flexWrap || 'none'}`);
-                labels.forEach((label, index) => {
-                    const labelStyle = window.getComputedStyle(label);
-                    console.log(`Radio label ${index}: text=${label.textContent}, border=${labelStyle.border}, padding=${labelStyle.padding}, font=${labelStyle.fontFamily}`);
-                });
+            const dropdown = document.querySelector('.gr-dropdown select');
+            if (dropdown) {
+                const style = window.getComputedStyle(dropdown);
+                console.log(`Dropdown: border=${style.border}, background=${style.background}, color=${style.color}, font=${style.fontFamily}, padding=${style.padding}`);
             }
             // Hide any technical output containers
             const outputContainers = document.querySelectorAll('.gr-prose, .gr-log, .progress-text, .gr-progress');
@@ -439,11 +458,11 @@ def create_demo():
                     lines=3,
                     elem_classes=["gradio-component"]
                 )
-                aspect_ratio = gr.Radio(
+                aspect_ratio = gr.Dropdown(
                     label="Aspect Ratio (width:height)",
                     choices=["1:1", "16:9", "9:16", "4:3", "3:4", "3:2", "2:3"],
                     value="1:1",
-                    elem_classes=[]  # No custom classes to ensure default Gradio styling
+                    elem_classes=["gradio-component"]
                 )
                 run_button = gr.Button(
                     "Generate",