Upload folder using huggingface_hub

gradio_interface.py

@@ -5,115 +5,106 @@ import asyncio
 from director_bake_off import run_bake_off
 import traceback
 
-# Swedish-inspired color palette and styling
+# --- Start of Updated CSS ---
+
+# Professional, theme-adaptive CSS for Gradio on Hugging Face Spaces
 SWEDISH_CSS = """
-/* Swedish Minimalist Design */
+/* Professional & Theme-Adaptive Design */
 :root {
-    --primary-white: #FFFFFF;
-    --soft-gray: #F5F5F5;
-    --muted-blue: #4A90A4;
+    /* Define a consistent font stack and custom accent colors */
+    --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    --accent-blue: #4A90A4;
+    --accent-blue-soft: #E8F4F8;
+    --accent-gold: #D4AF37;
+    --accent-green: #7FB069;
     --warm-beige: #E8DCC6;
     --charcoal: #2C2C2C;
-    --light-blue: #E8F4F8;
-    --accent-gold: #D4AF37;
-    --success-green: #7FB069;
-    --border-gray: #E0E0E0;
+
+    /* Light Mode Custom Colors */
+    --card-bg-color: var(--accent-blue-soft);
+    --card-border-color: var(--accent-blue);
+    --explanation-bg: var(--background-fill-secondary);
+    --details-bg-color: #f9fafb; /* A slightly off-white for light mode */
+}
+
+/* Define Dark Mode specific overrides */
+html[data-theme="dark"] {
+    --card-bg-color: #1e293b; /* A deep, cool blue for dark mode cards */
+    --card-border-color: var(--accent-blue);
+    --explanation-bg: #283647; /* Darker blue for explanation box */
+    --details-bg-color: #111827; /* Very dark gray for details dropdown */
 }
 
 /* Global styling */
 .gradio-container {
-    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
-    background: linear-gradient(135deg, var(--soft-gray) 0%, var(--primary-white) 100%) !important;
-    min-height: 100vh;
+    font-family: var(--font-family-sans) !important;
+    background-color: var(--body-background-fill) !important;
 }
 
 /* Header styling */
 .main-header {
     text-align: center;
-    padding: 2rem 0;
-    background: var(--primary-white);
-    border-bottom: 1px solid var(--border-gray);
+    padding: 2rem 1rem;
+    border-bottom: 1px solid var(--border-color-primary);
     margin-bottom: 2rem;
 }
 
 .main-title {
     font-size: 2.5rem;
-    font-weight: 300;
-    color: var(--charcoal);
+    font-weight: 600;
+    color: var(--text-color-primary);
     margin-bottom: 0.5rem;
     letter-spacing: -0.02em;
 }
 
 .main-subtitle {
     font-size: 1.1rem;
-    color: var(--muted-blue);
+    color: var(--accent-blue);
     font-weight: 400;
-    margin-bottom: 0;
 }
 
-/* Input section styling */
-.input-section {
-    background: var(--primary-white);
+/* Input/Results container shared style */
+.input-section, .results-container {
+    background: var(--background-fill-primary);
     border-radius: 12px;
     padding: 2rem;
-    box-shadow: 0 2px 20px rgba(0,0,0,0.05);
-    border: 1px solid var(--border-gray);
+    border: 1px solid var(--border-color-primary);
     margin-bottom: 2rem;
 }
 
-.input-label {
-    font-size: 1rem;
-    font-weight: 500;
-    color: var(--charcoal);
-    margin-bottom: 0.5rem;
-    display: block;
-}
-
 /* Button styling */
 .submit-btn {
-    background: linear-gradient(135deg, var(--muted-blue) 0%, #5BA0B5 100%) !important;
+    background: var(--accent-blue) !important;
     border: none !important;
     border-radius: 8px !important;
     padding: 12px 32px !important;
-    font-weight: 500 !important;
+    font-weight: 600 !important;
     font-size: 1rem !important;
     color: white !important;
-    transition: all 0.3s ease !important;
-    box-shadow: 0 4px 15px rgba(74, 144, 164, 0.3) !important;
+    transition: background 0.2s ease, transform 0.2s ease !important;
 }
 
 .submit-btn:hover {
+    background: #5BA0B5 !important; /* Slightly lighter blue on hover */
     transform: translateY(-2px) !important;
-    box-shadow: 0 6px 25px rgba(74, 144, 164, 0.4) !important;
-}
-
-/* Results section */
-.results-container {
-    background: var(--primary-white);
-    border-radius: 12px;
-    padding: 2rem;
-    box-shadow: 0 2px 20px rgba(0,0,0,0.05);
-    border: 1px solid var(--border-gray);
-    margin-top: 2rem;
 }
 
+/* Director card styling */
 .director-card {
-    background: var(--light-blue);
+    background: var(--card-bg-color);
     border-radius: 10px;
     padding: 1.5rem;
     margin-bottom: 1.5rem;
-    border-left: 4px solid var(--muted-blue);
-    transition: all 0.3s ease;
+    border-left: 4px solid var(--card-border-color);
+    transition: box-shadow 0.3s ease;
 }
 
 .director-card:hover {
-    transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(0,0,0,0.1);
 }
 
 .rank-badge {
     display: inline-block;
-    background: var(--accent-gold);
     color: white;
     padding: 4px 12px;
     border-radius: 20px;
@@ -122,85 +113,76 @@ SWEDISH_CSS = """
     margin-bottom: 0.5rem;
 }
 
+/* Ranking badge colors */
 .rank-1 { background: var(--accent-gold); }
-.rank-2 { background: #C0C0C0; }
+.rank-2 { background: #A0A0A0; }
 .rank-3 { background: #CD7F32; }
 
 .director-name {
     font-size: 1.3rem;
     font-weight: 600;
-    color: var(--charcoal);
+    color: var(--text-color-primary);
     margin-bottom: 1rem;
 }
 
 .prompt-text {
     font-size: 1rem;
     line-height: 1.6;
-    color: var(--charcoal);
-    background: var(--primary-white);
+    color: var(--text-color-secondary);
+    background: var(--background-fill-secondary);
     padding: 1rem;
     border-radius: 8px;
-    border: 1px solid var(--border-gray);
+    border: 1px solid var(--border-color-primary);
     margin-bottom: 1rem;
 }
 
+/* Custom card for the additional director */
 .additional-director {
     background: var(--warm-beige);
     border-radius: 10px;
     padding: 1.5rem;
     margin-bottom: 2rem;
-    border-left: 4px solid var(--success-green);
+    border-left: 4px solid var(--accent-green);
+}
+.additional-director .section-title, .additional-director div {
+    color: var(--charcoal) !important; /* Force dark text on light background */
 }
 
+/* Explanation section */
 .explanation-section {
-    background: var(--soft-gray);
+    background: var(--explanation-bg);
     border-radius: 10px;
     padding: 1.5rem;
     margin-top: 2rem;
-    border-left: 4px solid var(--muted-blue);
+    border-left: 4px solid var(--accent-blue);
+}
+.explanation-section .section-title, .explanation-section div {
+    color: var(--text-color-primary);
 }
 
 .section-title {
     font-size: 1.2rem;
     font-weight: 600;
-    color: var(--charcoal);
+    color: var(--text-color-primary);
     margin-bottom: 1rem;
 }
 
-/* Loading animation */
-.loading {
-    text-align: center;
-    padding: 2rem;
-    color: var(--muted-blue);
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-    .main-title {
-        font-size: 2rem;
-    }
-    
-    .input-section, .results-container {
-        padding: 1.5rem;
-        margin: 1rem;
-    }
-    
-    .director-card {
-        padding: 1rem;
-    }
-}
-
-/* Custom textbox styling */
-.gr-textbox {
-    border-radius: 8px !important;
-    border: 1px solid var(--border-gray) !important;
+/* Details dropdown styling for director cards */
+details > summary {
+    cursor: pointer;
+    font-weight: 500;
+    color: var(--accent-blue);
 }
-
-.gr-textbox:focus {
-    border-color: var(--muted-blue) !important;
-    box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.1) !important;
+details > div {
+    margin-top: 1rem;
+    padding: 1rem;
+    background: var(--details-bg-color);
+    border-radius: 6px;
+    border: 1px solid var(--border-color-primary);
 }
 """
+# --- End of Updated CSS ---
+
 
 def format_results_html(result):
     """Format the results into beautiful HTML with Swedish design."""
@@ -213,7 +195,7 @@ def format_results_html(result):
         <div class="results-container">
             <div class="additional-director">
                 <div class="section-title">🎬 AI Suggested Director</div>
-                <div style="font-size: 1.1rem; color: var(--charcoal);">
+                <div style="font-size: 1.1rem;">
                     <strong>{result.additional_director}</strong> - A perfect match for your vision!
                 </div>
             </div>
@@ -240,10 +222,10 @@ def format_results_html(result):
                 <div class="prompt-text">{director_cut.assemble_prompt()}</div>
                 
                 <details style="margin-top: 1rem;">
-                    <summary style="cursor: pointer; font-weight: 500; color: var(--muted-blue);">
+                    <summary>
                         View Detailed Breakdown
                     </summary>
-                    <div style="margin-top: 1rem; padding: 1rem; background: var(--soft-gray); border-radius: 6px;">
+                    <div>
                         <div style="margin-bottom: 0.8rem;"><strong>Subject:</strong> {director_cut.subject_description}</div>
                         <div style="margin-bottom: 0.8rem;"><strong>Action:</strong> {director_cut.action_description}</div>
                         <div style="margin-bottom: 0.8rem;"><strong>Setting:</strong> {director_cut.setting_description}</div>
@@ -260,7 +242,7 @@ def format_results_html(result):
         html += f"""
             <div class="explanation-section">
                 <div class="section-title">🤔 Judge's Reasoning</div>
-                <div style="line-height: 1.8; color: var(--charcoal); font-size: 1rem;">
+                <div style="line-height: 1.8; font-size: 1rem;">
                     {result.director_ranks.explanation}
                 </div>
             </div>
@@ -286,18 +268,18 @@ def run_director_bakeoff(video_idea, directors):
     try:
         # Initial loading message with expectations
         yield """
-        <div class='loading' style='background: var(--light-blue); padding: 2rem; border-radius: 12px; border-left: 4px solid var(--muted-blue);'>
-            <div style='font-size: 1.3rem; font-weight: 600; color: var(--charcoal); margin-bottom: 1rem;'>
+        <div class='loading' style='background: var(--background-fill-secondary); padding: 2rem; border-radius: 12px; border-left: 4px solid var(--accent-blue);'>
+            <div style='font-size: 1.3rem; font-weight: 600; color: var(--text-color-primary); margin-bottom: 1rem;'>
                 🎬 Director Bake-Off in Progress...
             </div>
-            <div style='font-size: 1rem; color: var(--muted-blue); margin-bottom: 1.5rem; line-height: 1.6;'>
+            <div style='font-size: 1rem; color: var(--text-color-secondary); margin-bottom: 1.5rem; line-height: 1.6;'>
                 Please be patient, this may take some minutes...<br>
                 We're consulting with legendary directors to bring your vision to life!<br>
                 <strong>This process typically takes 30-60 seconds.</strong><br>
                 ✨
             </div>
-            <div style='background: var(--primary-white); padding: 1rem; border-radius: 8px; border-left: 3px solid var(--accent-gold);'>
-                <div style='font-size: 0.9rem; color: var(--charcoal);'>
+            <div style='background: var(--background-fill-primary); padding: 1rem; border-radius: 8px; border-left: 3px solid var(--accent-gold);'>
+                <div style='font-size: 0.9rem; color: var(--text-color-primary);'>
                     <strong>What's happening:</strong><br>
                     • Finding the perfect additional director for your concept<br>
                     • Generating unique interpretations from each director<br>
@@ -344,9 +326,9 @@ def create_interface():
         
         # How it Works section - moved to top
         gr.HTML("""
-        <div style="background: var(--light-blue); padding: 1.5rem; border-radius: 10px; margin-bottom: 2rem; border-left: 4px solid var(--muted-blue);">
-            <h3 style="margin-top: 0; color: var(--charcoal);">How it works:</h3>
-            <ol style="color: var(--charcoal); line-height: 1.6;">
+        <div style="background: var(--card-bg-color); padding: 1.5rem; border-radius: 10px; margin-bottom: 2rem; border-left: 4px solid var(--accent-blue);">
+            <h3 style="margin-top: 0; color: var(--text-color-primary);">How it works:</h3>
+            <ol style="color: var(--text-color-secondary); line-height: 1.6;">
                 <li>Enter your video idea in the text area below</li>
                 <li>List your favorite directors (or use our defaults)</li>
                 <li>Our AI will suggest an additional director perfect for your vision</li>
@@ -402,7 +384,7 @@ def create_interface():
         
         # Footer
         gr.HTML("""
-        <div style="text-align: center; padding: 2rem; color: var(--muted-blue); font-size: 0.9rem;">
+        <div style="text-align: center; padding: 2rem; color: var(--text-color-secondary); font-size: 0.9rem;">
             <p>Powered by DSPy and the creative genius of legendary directors 🎬</p>
         </div>
         """)
@@ -419,3 +401,4 @@ if __name__ == "__main__":
         show_error=True,
         debug=True
     )
+