Upload folder using huggingface_hub

gradio_app.py

@@ -302,7 +302,7 @@ def create_gradio_interface():
             display: flex !important;
         }
         
-        /* Modal Content - consistent light theme */
+        /* Modal Content - with dark mode support */
         .modal-content {
             background: #fefcfa !important;
             border: 2px solid #f0c5b8 !important;
@@ -360,6 +360,86 @@ def create_gradio_interface():
             flex: 1 !important;
         }
         
+        /* Dark mode overrides for system dark mode */
+        @media (prefers-color-scheme: dark) {
+            .modal-content {
+                background: #1a1a1a !important;
+                border: 2px solid #404040 !important;
+                color: #e5e5e5 !important;
+            }
+            
+            .modal-header {
+                border-bottom: 1px solid #404040 !important;
+            }
+            
+            .modal-header h3 {
+                color: #e5e5e5 !important;
+            }
+            
+            .modal-close-btn {
+                background: #404040 !important;
+                border: 1px solid #666 !important;
+                color: #e5e5e5 !important;
+            }
+            
+            .modal-close-btn:hover {
+                background: #555 !important;
+            }
+            
+            .prompt-container {
+                background: #2a2a2a !important;
+                border: 1px solid #404040 !important;
+            }
+        }
+        
+        /* Gradio dark mode overrides */
+        .dark .modal-content,
+        .gradio-container.dark .modal-content,
+        html.dark .modal-content,
+        body.dark .modal-content {
+            background: #1a1a1a !important;
+            border: 2px solid #404040 !important;
+            color: #e5e5e5 !important;
+        }
+        
+        .dark .modal-header,
+        .gradio-container.dark .modal-header,
+        html.dark .modal-header,
+        body.dark .modal-header {
+            border-bottom: 1px solid #404040 !important;
+        }
+        
+        .dark .modal-header h3,
+        .gradio-container.dark .modal-header h3,
+        html.dark .modal-header h3,
+        body.dark .modal-header h3 {
+            color: #e5e5e5 !important;
+        }
+        
+        .dark .modal-close-btn,
+        .gradio-container.dark .modal-close-btn,
+        html.dark .modal-close-btn,
+        body.dark .modal-close-btn {
+            background: #404040 !important;
+            border: 1px solid #666 !important;
+            color: #e5e5e5 !important;
+        }
+        
+        .dark .modal-close-btn:hover,
+        .gradio-container.dark .modal-close-btn:hover,
+        html.dark .modal-close-btn:hover,
+        body.dark .modal-close-btn:hover {
+            background: #555 !important;
+        }
+        
+        .dark .prompt-container,
+        .gradio-container.dark .prompt-container,
+        html.dark .prompt-container,
+        body.dark .prompt-container {
+            background: #2a2a2a !important;
+            border: 1px solid #404040 !important;
+        }
+        
         
         
         .generate-btn:hover {
@@ -829,6 +909,59 @@ def create_gradio_interface():
             text-transform: none !important;
         }
         
+        /* Dark mode accordion title styling - system dark mode */
+        @media (prefers-color-scheme: dark) {
+            button.label-wrap span:first-child,
+            button.label-wrap.svelte-1w6vloh span:first-child,
+            .label-wrap span:first-child,
+            button.label-wrap > span:first-child,
+            button[class*="label-wrap"] span:first-child {
+                color: #e5e5e5 !important;
+                text-shadow: 0 1px 2px rgba(255,255,255,0.1) !important;
+            }
+            
+            button.label-wrap {
+                background: #2a2a2a !important;
+                border: 1px solid #404040 !important;
+            }
+            
+            button.label-wrap:hover {
+                background: #353535 !important;
+            }
+        }
+        
+        /* Dark mode accordion title styling - Gradio dark mode */
+        .dark button.label-wrap span:first-child,
+        .gradio-container.dark button.label-wrap span:first-child,
+        html.dark button.label-wrap span:first-child,
+        body.dark button.label-wrap span:first-child,
+        .dark button.label-wrap.svelte-1w6vloh span:first-child,
+        .gradio-container.dark button.label-wrap.svelte-1w6vloh span:first-child,
+        html.dark button.label-wrap.svelte-1w6vloh span:first-child,
+        body.dark button.label-wrap.svelte-1w6vloh span:first-child,
+        .dark .label-wrap span:first-child,
+        .gradio-container.dark .label-wrap span:first-child,
+        html.dark .label-wrap span:first-child,
+        body.dark .label-wrap span:first-child {
+            color: #e5e5e5 !important;
+            text-shadow: 0 1px 2px rgba(255,255,255,0.1) !important;
+        }
+        
+        .dark button.label-wrap,
+        .gradio-container.dark button.label-wrap,
+        html.dark button.label-wrap,
+        body.dark button.label-wrap {
+            background: #2a2a2a !important;
+            border: 1px solid #404040 !important;
+        }
+        
+        .dark button.label-wrap:hover,
+        .gradio-container.dark button.label-wrap:hover,
+        html.dark button.label-wrap:hover,
+        body.dark button.label-wrap:hover {
+            background: #353535 !important;
+        }
+        
         /* Additional targeting for accordion buttons */
         button.label-wrap {
             background: #f9f0ec !important;