Upload folder using huggingface_hub

gradio_app.py

@@ -905,11 +905,13 @@ def create_gradio_interface():
             background: #ffffff !important;
         }
         
-        /* Dark mode dropdown styling */
+        /* Dark mode dropdown styling - enhanced for dropdown items */
         @media (prefers-color-scheme: dark) {
             [data-testid="dropdown"] div[role="listbox"],
             .dropdown-menu,
-            div[role="listbox"] {
+            div[role="listbox"],
+            div[id*="dropdown-options"],
+            div[aria-labelledby*="dropdown"] {
                 background: #2a2a2a !important;
                 background-color: #2a2a2a !important;
                 border: 2px solid #404040 !important;
@@ -917,7 +919,11 @@ def create_gradio_interface():
             
             [data-testid="dropdown"] div[role="listbox"] > *,
             .dropdown-menu > *,
-            div[role="listbox"] > * {
+            div[role="listbox"] > *,
+            div[id*="dropdown-options"] > *,
+            div[aria-labelledby*="dropdown"] > *,
+            div[role="option"],
+            [role="option"] {
                 background: #2a2a2a !important;
                 background-color: #2a2a2a !important;
                 color: #e5e5e5 !important;
@@ -925,7 +931,11 @@ def create_gradio_interface():
             
             [data-testid="dropdown"] div[role="listbox"] > *:hover,
             .dropdown-menu > *:hover,
-            div[role="listbox"] > *:hover {
+            div[role="listbox"] > *:hover,
+            div[id*="dropdown-options"] > *:hover,
+            div[aria-labelledby*="dropdown"] > *:hover,
+            div[role="option"]:hover,
+            [role="option"]:hover {
                 background: #404040 !important;
                 color: #ffffff !important;
             }
@@ -935,19 +945,27 @@ def create_gradio_interface():
             }
         }
         
-        /* Gradio dark mode dropdown styling */
+        /* Gradio dark mode dropdown styling - enhanced for dropdown items */
         .dark [data-testid="dropdown"] div[role="listbox"],
         .dark .dropdown-menu,
         .dark div[role="listbox"],
+        .dark div[id*="dropdown-options"],
+        .dark div[aria-labelledby*="dropdown"],
         .gradio-container.dark [data-testid="dropdown"] div[role="listbox"],
         .gradio-container.dark .dropdown-menu,
         .gradio-container.dark div[role="listbox"],
+        .gradio-container.dark div[id*="dropdown-options"],
+        .gradio-container.dark div[aria-labelledby*="dropdown"],
         html.dark [data-testid="dropdown"] div[role="listbox"],
         html.dark .dropdown-menu,
         html.dark div[role="listbox"],
+        html.dark div[id*="dropdown-options"],
+        html.dark div[aria-labelledby*="dropdown"],
         body.dark [data-testid="dropdown"] div[role="listbox"],
         body.dark .dropdown-menu,
-        body.dark div[role="listbox"] {
+        body.dark div[role="listbox"],
+        body.dark div[id*="dropdown-options"],
+        body.dark div[aria-labelledby*="dropdown"] {
             background: #2a2a2a !important;
             background-color: #2a2a2a !important;
             border: 2px solid #404040 !important;
@@ -956,15 +974,31 @@ def create_gradio_interface():
         .dark [data-testid="dropdown"] div[role="listbox"] > *,
         .dark .dropdown-menu > *,
         .dark div[role="listbox"] > *,
+        .dark div[id*="dropdown-options"] > *,
+        .dark div[aria-labelledby*="dropdown"] > *,
+        .dark div[role="option"],
+        .dark [role="option"],
         .gradio-container.dark [data-testid="dropdown"] div[role="listbox"] > *,
         .gradio-container.dark .dropdown-menu > *,
         .gradio-container.dark div[role="listbox"] > *,
+        .gradio-container.dark div[id*="dropdown-options"] > *,
+        .gradio-container.dark div[aria-labelledby*="dropdown"] > *,
+        .gradio-container.dark div[role="option"],
+        .gradio-container.dark [role="option"],
         html.dark [data-testid="dropdown"] div[role="listbox"] > *,
         html.dark .dropdown-menu > *,
         html.dark div[role="listbox"] > *,
+        html.dark div[id*="dropdown-options"] > *,
+        html.dark div[aria-labelledby*="dropdown"] > *,
+        html.dark div[role="option"],
+        html.dark [role="option"],
         body.dark [data-testid="dropdown"] div[role="listbox"] > *,
         body.dark .dropdown-menu > *,
-        body.dark div[role="listbox"] > * {
+        body.dark div[role="listbox"] > *,
+        body.dark div[id*="dropdown-options"] > *,
+        body.dark div[aria-labelledby*="dropdown"] > *,
+        body.dark div[role="option"],
+        body.dark [role="option"] {
             background: #2a2a2a !important;
             background-color: #2a2a2a !important;
             color: #e5e5e5 !important;
@@ -973,15 +1007,31 @@ def create_gradio_interface():
         .dark [data-testid="dropdown"] div[role="listbox"] > *:hover,
         .dark .dropdown-menu > *:hover,
         .dark div[role="listbox"] > *:hover,
+        .dark div[id*="dropdown-options"] > *:hover,
+        .dark div[aria-labelledby*="dropdown"] > *:hover,
+        .dark div[role="option"]:hover,
+        .dark [role="option"]:hover,
         .gradio-container.dark [data-testid="dropdown"] div[role="listbox"] > *:hover,
         .gradio-container.dark .dropdown-menu > *:hover,
         .gradio-container.dark div[role="listbox"] > *:hover,
+        .gradio-container.dark div[id*="dropdown-options"] > *:hover,
+        .gradio-container.dark div[aria-labelledby*="dropdown"] > *:hover,
+        .gradio-container.dark div[role="option"]:hover,
+        .gradio-container.dark [role="option"]:hover,
         html.dark [data-testid="dropdown"] div[role="listbox"] > *:hover,
         html.dark .dropdown-menu > *:hover,
         html.dark div[role="listbox"] > *:hover,
+        html.dark div[id*="dropdown-options"] > *:hover,
+        html.dark div[aria-labelledby*="dropdown"] > *:hover,
+        html.dark div[role="option"]:hover,
+        html.dark [role="option"]:hover,
         body.dark [data-testid="dropdown"] div[role="listbox"] > *:hover,
         body.dark .dropdown-menu > *:hover,
-        body.dark div[role="listbox"] > *:hover {
+        body.dark div[role="listbox"] > *:hover,
+        body.dark div[id*="dropdown-options"] > *:hover,
+        body.dark div[aria-labelledby*="dropdown"] > *:hover,
+        body.dark div[role="option"]:hover,
+        body.dark [role="option"]:hover {
             background: #404040 !important;
             color: #ffffff !important;
         }