Upload folder using huggingface_hub

gradio_app.py

@@ -482,6 +482,57 @@ def create_gradio_interface():
             outline: none !important;
         }
         
+        /* Dark mode inputs */
+        @media (prefers-color-scheme: dark) {
+            input[type="text"], 
+            input[type="number"], 
+            textarea {
+                background: #2a2a2a !important;
+                border: 2px solid #404040 !important;
+                color: #e5e5e5 !important;
+            }
+            
+            input[type="text"]:focus, 
+            input[type="number"]:focus, 
+            textarea:focus {
+                background: #2a2a2a !important;
+                border-color: #666 !important;
+            }
+        }
+        
+        .dark input[type="text"],
+        .dark input[type="number"],
+        .dark textarea,
+        .gradio-container.dark input[type="text"],
+        .gradio-container.dark input[type="number"],
+        .gradio-container.dark textarea,
+        html.dark input[type="text"],
+        html.dark input[type="number"],
+        html.dark textarea,
+        body.dark input[type="text"],
+        body.dark input[type="number"],
+        body.dark textarea {
+            background: #2a2a2a !important;
+            border: 2px solid #404040 !important;
+            color: #e5e5e5 !important;
+        }
+        
+        .dark input[type="text"]:focus,
+        .dark input[type="number"]:focus,
+        .dark textarea:focus,
+        .gradio-container.dark input[type="text"]:focus,
+        .gradio-container.dark input[type="number"]:focus,
+        .gradio-container.dark textarea:focus,
+        html.dark input[type="text"]:focus,
+        html.dark input[type="number"]:focus,
+        html.dark textarea:focus,
+        body.dark input[type="text"]:focus,
+        body.dark input[type="number"]:focus,
+        body.dark textarea:focus {
+            background: #2a2a2a !important;
+            border-color: #666 !important;
+        }
+        
         /* CRITICAL: Reset all problematic CSS for dropdowns */
         label:has(+ [data-testid="dropdown"]),
         div:has([data-testid="dropdown"]),
@@ -805,6 +856,20 @@ def create_gradio_interface():
             font-family: 'Georgia', serif !important;
         }
         
+        /* Dark mode labels */
+        @media (prefers-color-scheme: dark) {
+            label {
+                color: #e5e5e5 !important;
+            }
+        }
+        
+        .dark label,
+        .gradio-container.dark label,
+        html.dark label,
+        body.dark label {
+            color: #e5e5e5 !important;
+        }
+        
         /* Memory Analysis Spacing */
         .memory-analysis-spacing {
             padding-top: 1rem !important;
@@ -839,6 +904,94 @@ def create_gradio_interface():
         [role="listbox"][style*="background"] {
             background: #ffffff !important;
         }
+        
+        /* Dark mode dropdown styling */
+        @media (prefers-color-scheme: dark) {
+            [data-testid="dropdown"] div[role="listbox"],
+            .dropdown-menu,
+            div[role="listbox"] {
+                background: #2a2a2a !important;
+                background-color: #2a2a2a !important;
+                border: 2px solid #404040 !important;
+            }
+            
+            [data-testid="dropdown"] div[role="listbox"] > *,
+            .dropdown-menu > *,
+            div[role="listbox"] > * {
+                background: #2a2a2a !important;
+                background-color: #2a2a2a !important;
+                color: #e5e5e5 !important;
+            }
+            
+            [data-testid="dropdown"] div[role="listbox"] > *:hover,
+            .dropdown-menu > *:hover,
+            div[role="listbox"] > *:hover {
+                background: #404040 !important;
+                color: #ffffff !important;
+            }
+            
+            [role="listbox"][style*="background"] {
+                background: #2a2a2a !important;
+            }
+        }
+        
+        /* Gradio dark mode dropdown styling */
+        .dark [data-testid="dropdown"] div[role="listbox"],
+        .dark .dropdown-menu,
+        .dark div[role="listbox"],
+        .gradio-container.dark [data-testid="dropdown"] div[role="listbox"],
+        .gradio-container.dark .dropdown-menu,
+        .gradio-container.dark div[role="listbox"],
+        html.dark [data-testid="dropdown"] div[role="listbox"],
+        html.dark .dropdown-menu,
+        html.dark div[role="listbox"],
+        body.dark [data-testid="dropdown"] div[role="listbox"],
+        body.dark .dropdown-menu,
+        body.dark div[role="listbox"] {
+            background: #2a2a2a !important;
+            background-color: #2a2a2a !important;
+            border: 2px solid #404040 !important;
+        }
+        
+        .dark [data-testid="dropdown"] div[role="listbox"] > *,
+        .dark .dropdown-menu > *,
+        .dark div[role="listbox"] > *,
+        .gradio-container.dark [data-testid="dropdown"] div[role="listbox"] > *,
+        .gradio-container.dark .dropdown-menu > *,
+        .gradio-container.dark div[role="listbox"] > *,
+        html.dark [data-testid="dropdown"] div[role="listbox"] > *,
+        html.dark .dropdown-menu > *,
+        html.dark div[role="listbox"] > *,
+        body.dark [data-testid="dropdown"] div[role="listbox"] > *,
+        body.dark .dropdown-menu > *,
+        body.dark div[role="listbox"] > * {
+            background: #2a2a2a !important;
+            background-color: #2a2a2a !important;
+            color: #e5e5e5 !important;
+        }
+        
+        .dark [data-testid="dropdown"] div[role="listbox"] > *:hover,
+        .dark .dropdown-menu > *:hover,
+        .dark div[role="listbox"] > *:hover,
+        .gradio-container.dark [data-testid="dropdown"] div[role="listbox"] > *:hover,
+        .gradio-container.dark .dropdown-menu > *:hover,
+        .gradio-container.dark div[role="listbox"] > *:hover,
+        html.dark [data-testid="dropdown"] div[role="listbox"] > *:hover,
+        html.dark .dropdown-menu > *:hover,
+        html.dark div[role="listbox"] > *:hover,
+        body.dark [data-testid="dropdown"] div[role="listbox"] > *:hover,
+        body.dark .dropdown-menu > *:hover,
+        body.dark div[role="listbox"] > *:hover {
+            background: #404040 !important;
+            color: #ffffff !important;
+        }
+        
+        .dark [role="listbox"][style*="background"],
+        .gradio-container.dark [role="listbox"][style*="background"],
+        html.dark [role="listbox"][style*="background"],
+        body.dark [role="listbox"][style*="background"] {
+            background: #2a2a2a !important;
+        }
         </script>
         
         <script>