Upload folder using huggingface_hub

README.md

@@ -18,7 +18,7 @@ tags:
 
 6 powerful MCP tools for voice processing, all accepting base64-encoded audio.
 
-📢 **Social Post:** [View on X](https://x.com/dahee_pk/status/1994380787601576005)<br>
+📢 **Social Post:** [View on X](https://x.com/dahee_pk/status/1994389505898582442)<br>
 🎬 **Demo Video:** [Watch on YouTube](https://www.youtube.com/watch?v=1VIqvpwfyWU)<br>
 👥 **Team:** [@EricYoun](https://huggingface.co/EricYoun), [@NickEo](https://huggingface.co/NickEo), [@HYENA-WON](https://huggingface.co/HYENA-WON), [@jjin6573](https://huggingface.co/jjin6573), [@cocoajoa](https://huggingface.co/cocoajoa)
 

app.py

@@ -1115,26 +1115,84 @@ def create_similarity_visualization(result):
 # ============================================================================
 
 custom_css = """
-/* ===== DARK THEME STYLING ===== */
-/* Note: Dark mode is forced via JavaScript (force_dark_mode_js) using URL parameter ?__theme=dark */
-/* This CSS provides the visual styling for dark mode */
+/* ===== DARK THEME STYLING (CSS-ONLY) ===== */
+/* This CSS forces dark mode appearance regardless of system/Gradio theme */
+/* All colors are SOLID (not rgba/transparent) to ensure consistent appearance */
 
 :root {
     color-scheme: dark !important;
+    --body-background-fill: #0a0a1a !important;
+    --background-fill-primary: #0d0d1a !important;
+    --background-fill-secondary: #12122a !important;
+    --block-background-fill: #0d0d1a !important;
+    --input-background-fill: #1a1a35 !important;
+    --body-text-color: #e0e7ff !important;
+    --block-title-text-color: #a5b4fc !important;
+    --block-label-text-color: #a5b4fc !important;
+    --input-text-color: #e0e7ff !important;
+    --neutral-50: #0a0a1a !important;
+    --neutral-100: #0d0d1a !important;
+    --neutral-200: #12122a !important;
+    --neutral-300: #1a1a35 !important;
+    --neutral-400: #2d2d4a !important;
+    --neutral-500: #4a4a6a !important;
+    --neutral-600: #7c7c9a !important;
+    --neutral-700: #a5b4fc !important;
+    --neutral-800: #c7d2fe !important;
+    --neutral-900: #e0e7ff !important;
+    --neutral-950: #ffffff !important;
+}
+
+/* Force dark mode on html and body */
+html, body {
+    background: #0a0a1a !important;
+    background-color: #0a0a1a !important;
+    color: #e0e7ff !important;
 }
 
 /* ===== GLOBAL STYLES ===== */
 body {
     background: linear-gradient(180deg, #0a0a1a 0%, #0f0f23 100%) !important;
+    background-color: #0a0a1a !important;
     color: #ffffff !important;
     font-family: system-ui, -apple-system, sans-serif;
 }
 
+/* Override Gradio's light mode backgrounds AND text colors */
+.dark, .light, [data-theme="light"], [data-theme="dark"],
+html[data-theme="light"], html[data-theme="dark"],
+body.light, body.dark {
+    --body-background-fill: #0a0a1a !important;
+    --background-fill-primary: #0d0d1a !important;
+    --background-fill-secondary: #12122a !important;
+    --block-background-fill: #0d0d1a !important;
+    --input-background-fill: #1a1a35 !important;
+    --body-text-color: #e0e7ff !important;
+    --block-title-text-color: #a5b4fc !important;
+    --block-label-text-color: #a5b4fc !important;
+    --input-text-color: #e0e7ff !important;
+    --neutral-50: #0a0a1a !important;
+    --neutral-100: #0d0d1a !important;
+    --neutral-200: #12122a !important;
+    --neutral-300: #1a1a35 !important;
+    --neutral-400: #2d2d4a !important;
+    --neutral-500: #4a4a6a !important;
+    --neutral-600: #7c7c9a !important;
+    --neutral-700: #a5b4fc !important;
+    --neutral-800: #c7d2fe !important;
+    --neutral-900: #e0e7ff !important;
+    --neutral-950: #ffffff !important;
+    color: #e0e7ff !important;
+    background: #0a0a1a !important;
+    background-color: #0a0a1a !important;
+}
+
 .gradio-container {
     max-width: 100% !important;
     width: 100% !important;
     padding: 0px 16px 20px 16px !important;
-    background: transparent !important;
+    background: #0a0a1a !important;
+    background-color: #0a0a1a !important;
     margin: 0 !important;
 }
 
@@ -1344,9 +1402,9 @@ footer,
 
 /* ===== CARD STYLES ===== */
 .card {
-    background: rgba(15, 15, 35, 0.8);
-    backdrop-filter: blur(20px);
-    border: 1px solid rgba(124, 58, 237, 0.3);
+    background: #0f0f23 !important;
+    background-color: #0f0f23 !important;
+    border: 1px solid #3d2a6b !important;
     border-radius: 20px;
     padding: 30px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
@@ -1357,7 +1415,7 @@ footer,
 }
 
 .card:hover {
-    border-color: rgba(124, 58, 237, 0.5);
+    border-color: #5b3d99 !important;
     box-shadow: 0 12px 48px rgba(124, 58, 237, 0.3);
 }
 
@@ -1532,47 +1590,73 @@ footer,
 }
 
 /* ===== TOOLS TABLE ===== */
-.tools-table {
+.tools-table,
+table.tools-table,
+.light .tools-table,
+.dark .tools-table,
+[data-theme="light"] .tools-table,
+[data-theme="dark"] .tools-table {
     width: 100%;
     border-collapse: separate;
     border-spacing: 0;
-    background: rgba(10, 10, 26, 0.6);
+    background: #0d0d1f !important;
+    background-color: #0d0d1f !important;
     border-radius: 12px;
     overflow: hidden;
-    border: 1px solid rgba(124, 58, 237, 0.3);
+    border: 1px solid #3d2a6b !important;
     margin-bottom: 0;
     flex: 1;
+    color: #cbd5e1 !important;
 }
 
-.tools-table th {
-    background: rgba(124, 58, 237, 0.2);
-    color: #a5b4fc;
+.tools-table th,
+table.tools-table th,
+.light .tools-table th,
+.dark .tools-table th,
+[data-theme="light"] .tools-table th,
+[data-theme="dark"] .tools-table th {
+    background: #1f1545 !important;
+    background-color: #1f1545 !important;
+    color: #a5b4fc !important;
     font-weight: 700;
     font-size: 16px;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     padding: 20px 14px;
     text-align: left;
-    border-bottom: 1px solid rgba(124, 58, 237, 0.3);
+    border-bottom: 1px solid #3d2a6b !important;
 }
 
-.tools-table td {
+.tools-table td,
+table.tools-table td,
+.light .tools-table td,
+.dark .tools-table td,
+[data-theme="light"] .tools-table td,
+[data-theme="dark"] .tools-table td {
     padding: 20px 14px;
-    color: #cbd5e1;
+    color: #cbd5e1 !important;
+    background: #0d0d1f !important;
+    background-color: #0d0d1f !important;
     font-size: 16px;
-    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
+    border-bottom: 1px solid #1a1535 !important;
 }
 
 .tools-table tr:last-child td {
     border-bottom: none;
 }
 
-.tools-table tr:hover {
-    background: rgba(124, 58, 237, 0.08);
+.tools-table tr:hover,
+.tools-table tr:hover td {
+    background: #1a1540 !important;
+    background-color: #1a1540 !important;
 }
 
-.tool-name {
-    color: #22d3ee;
+.tool-name,
+.light .tool-name,
+.dark .tool-name,
+[data-theme="light"] .tool-name,
+[data-theme="dark"] .tool-name {
+    color: #22d3ee !important;
     font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
     font-weight: 600;
     font-size: 13px;
@@ -1580,24 +1664,38 @@ footer,
 }
 
 /* ===== COMPOSITE SECTION ===== */
-.composite-section {
-    background: rgba(10, 10, 26, 0.8);
-    border: 1px solid rgba(124, 58, 237, 0.3);
+.composite-section,
+.light .composite-section,
+.dark .composite-section,
+[data-theme="light"] .composite-section,
+[data-theme="dark"] .composite-section {
+    background: #0d0d1f !important;
+    background-color: #0d0d1f !important;
+    border: 1px solid #3d2a6b !important;
     border-radius: 12px;
     padding: 20px;
+    color: #cbd5e1 !important;
 }
 
-.composite-header {
+.composite-header,
+.light .composite-header,
+.dark .composite-header,
+[data-theme="light"] .composite-header,
+[data-theme="dark"] .composite-header {
     font-size: 11px;
     font-weight: 700;
-    color: #a5b4fc;
+    color: #a5b4fc !important;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     margin-bottom: 12px;
 }
 
-.composite-content {
-    color: #cbd5e1;
+.composite-content,
+.light .composite-content,
+.dark .composite-content,
+[data-theme="light"] .composite-content,
+[data-theme="dark"] .composite-content {
+    color: #cbd5e1 !important;
     font-size: 12px;
     line-height: 1.6;
     margin-bottom: 16px;
@@ -2064,15 +2162,23 @@ with gr.Blocks() as demo:
         </svg>
     </div>
     <script>
-    // Force dark mode on page load
+    // Force dark mode styling (no redirect, just add classes)
     (function() {{
-        const url = new URL(window.location);
-        if (url.searchParams.get('__theme') !== 'dark') {{
-            url.searchParams.set('__theme', 'dark');
-            window.location.href = url.href;
-        }}
-        document.body.classList.add('dark');
+        // Add dark mode classes immediately
+        document.documentElement.classList.add('dark');
         document.documentElement.setAttribute('data-theme', 'dark');
+        document.body.classList.add('dark');
+        document.body.setAttribute('data-theme', 'dark');
+
+        // Also observe for Gradio container and add dark class there
+        const observer = new MutationObserver(function(mutations) {{
+            const container = document.querySelector('.gradio-container');
+            if (container && !container.classList.contains('dark')) {{
+                container.classList.add('dark');
+                container.setAttribute('data-theme', 'dark');
+            }}
+        }});
+        observer.observe(document.body, {{ childList: true, subtree: true }});
     }})();
 
     // JavaScript to completely remove upload text from Audio components in demo-row