Upload folder using huggingface_hub

gradio_app.py

@@ -203,6 +203,27 @@ def create_gradio_interface():
             font-family: 'Georgia', 'Times New Roman', serif !important;
         }
         
+        /* Dark mode global background */
+        @media (prefers-color-scheme: dark) {
+            .gradio-container {
+                background: #1a1a1a !important;
+            }
+        }
+        
+        .dark,
+        .gradio-container.dark,
+        html.dark,
+        body.dark {
+            background: #1a1a1a !important;
+        }
+        
+        .dark .gradio-container,
+        .gradio-container.dark,
+        html.dark .gradio-container,
+        body.dark .gradio-container {
+            background: #1a1a1a !important;
+        }
+        
         /* Remove main tag margin and center */
         main {
             margin: 0 auto !important;
@@ -249,6 +270,62 @@ def create_gradio_interface():
             box-sizing: border-box !important;
         }
         
+        /* Dark mode hero header */
+        @media (prefers-color-scheme: dark) {
+            .hero-header {
+                background: #2a2a2a !important;
+                border: 2px solid #404040 !important;
+            }
+        }
+        
+        .dark .hero-header,
+        .gradio-container.dark .hero-header,
+        html.dark .hero-header,
+        body.dark .hero-header {
+            background: #2a2a2a !important;
+            border: 2px solid #404040 !important;
+        }
+        
+        /* Dark mode hero header text */
+        @media (prefers-color-scheme: dark) {
+            .hero-header h1 {
+                color: #e5e5e5 !important;
+            }
+            
+            .hero-header h2 {
+                color: #b3b3b3 !important;
+            }
+            
+            .hero-header span {
+                background: #2a2a2a !important;
+                color: #e5e5e5 !important;
+                border: 1px solid #404040 !important;
+            }
+        }
+        
+        .dark .hero-header h1,
+        .gradio-container.dark .hero-header h1,
+        html.dark .hero-header h1,
+        body.dark .hero-header h1 {
+            color: #e5e5e5 !important;
+        }
+        
+        .dark .hero-header h2,
+        .gradio-container.dark .hero-header h2,
+        html.dark .hero-header h2,
+        body.dark .hero-header h2 {
+            color: #b3b3b3 !important;
+        }
+        
+        .dark .hero-header span,
+        .gradio-container.dark .hero-header span,
+        html.dark .hero-header span,
+        body.dark .hero-header span {
+            background: #2a2a2a !important;
+            color: #e5e5e5 !important;
+            border: 1px solid #404040 !important;
+        }
+        
         
         /* Paper Buttons */
         .generate-btn {
@@ -837,6 +914,24 @@ def create_gradio_interface():
             font-family: 'Georgia', serif !important;
         }
         
+        /* Dark mode code header */
+        @media (prefers-color-scheme: dark) {
+            .code-container label {
+                background: #404040 !important;
+                color: #e5e5e5 !important;
+                border-bottom: 1px solid #666 !important;
+            }
+        }
+        
+        .dark .code-container label,
+        .gradio-container.dark .code-container label,
+        html.dark .code-container label,
+        body.dark .code-container label {
+            background: #404040 !important;
+            color: #e5e5e5 !important;
+            border-bottom: 1px solid #666 !important;
+        }
+        
         
         /* Custom scrollbar for code area */
         .code-container .cm-scroller::-webkit-scrollbar {