Upload folder using huggingface_hub

.hfignore

@@ -1 +1,8 @@
+# Python Virtual Environment
 venv/
+
+# Python cache
+__pycache__/
+
+# Mac specific
+.DS_Store

gradio_interface.py

@@ -5,187 +5,196 @@ import asyncio
 from director_bake_off import run_bake_off
 import traceback
 
-# --- Start of Updated CSS ---
-
-# Professional, theme-adaptive CSS for Gradio on Hugging Face Spaces
-SWEDISH_CSS = """
-/* Professional & Theme-Adaptive Design */
-:root {
-    /* 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 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 */
+# Clean, professional light mode styling
+LIGHT_MODE_CSS = """
+/* Force light mode and override system preferences */
+* {
+    color-scheme: light !important;
 }
 
-/* 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 */
+/* Override any dark mode media queries */
+@media (prefers-color-scheme: dark) {
+    :root {
+        color-scheme: light !important;
+    }
+    
+    body, .gradio-container {
+        background: #ffffff !important;
+        color: #1f2937 !important;
+    }
 }
 
-/* Global styling */
+/* Clean, professional styling */
 .gradio-container {
-    font-family: var(--font-family-sans) !important;
-    background-color: var(--body-background-fill) !important;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
+    background: #ffffff !important;
+    color: #1f2937 !important;
 }
 
 /* Header styling */
 .main-header {
     text-align: center;
-    padding: 2rem 1rem;
-    border-bottom: 1px solid var(--border-color-primary);
+    padding: 2rem 0;
+    background: #ffffff;
+    border-bottom: 1px solid #e5e7eb;
     margin-bottom: 2rem;
 }
 
 .main-title {
-    font-size: 2.5rem;
-    font-weight: 600;
-    color: var(--text-color-primary);
+    font-size: 2.25rem;
+    font-weight: 700;
+    color: #1f2937;
     margin-bottom: 0.5rem;
-    letter-spacing: -0.02em;
 }
 
 .main-subtitle {
-    font-size: 1.1rem;
-    color: var(--accent-blue);
+    font-size: 1.125rem;
+    color: #6b7280;
     font-weight: 400;
 }
 
-/* Input/Results container shared style */
-.input-section, .results-container {
-    background: var(--background-fill-primary);
-    border-radius: 12px;
-    padding: 2rem;
-    border: 1px solid var(--border-color-primary);
-    margin-bottom: 2rem;
+/* Ensure all text inputs are visible and readable */
+.gr-textbox, .gr-textarea, input, textarea {
+    background: #ffffff !important;
+    color: #1f2937 !important;
+    border: 1px solid #d1d5db !important;
+    border-radius: 6px !important;
+}
+
+.gr-textbox:focus, .gr-textarea:focus, input:focus, textarea:focus {
+    border-color: #3b82f6 !important;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
+    outline: none !important;
 }
 
 /* Button styling */
 .submit-btn {
-    background: var(--accent-blue) !important;
+    background: #3b82f6 !important;
+    color: #ffffff !important;
     border: none !important;
-    border-radius: 8px !important;
-    padding: 12px 32px !important;
+    border-radius: 6px !important;
+    padding: 0.75rem 1.5rem !important;
     font-weight: 600 !important;
-    font-size: 1rem !important;
-    color: white !important;
-    transition: background 0.2s ease, transform 0.2s ease !important;
+    transition: background-color 0.2s !important;
 }
 
 .submit-btn:hover {
-    background: #5BA0B5 !important; /* Slightly lighter blue on hover */
-    transform: translateY(-2px) !important;
+    background: #2563eb !important;
 }
 
-/* Director card styling */
-.director-card {
-    background: var(--card-bg-color);
-    border-radius: 10px;
+/* Results styling */
+.results-container {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
     padding: 1.5rem;
-    margin-bottom: 1.5rem;
-    border-left: 4px solid var(--card-border-color);
-    transition: box-shadow 0.3s ease;
+    margin-top: 1.5rem;
 }
 
-.director-card:hover {
-    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+.director-card {
+    background: #f9fafb;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin-bottom: 1rem;
 }
 
 .rank-badge {
     display: inline-block;
-    color: white;
-    padding: 4px 12px;
-    border-radius: 20px;
-    font-size: 0.85rem;
+    background: #3b82f6;
+    color: #ffffff;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.875rem;
     font-weight: 600;
     margin-bottom: 0.5rem;
 }
 
-/* Ranking badge colors */
-.rank-1 { background: var(--accent-gold); }
-.rank-2 { background: #A0A0A0; }
-.rank-3 { background: #CD7F32; }
+.rank-1 { background: #f59e0b; }
+.rank-2 { background: #6b7280; }
+.rank-3 { background: #d97706; }
 
 .director-name {
-    font-size: 1.3rem;
+    font-size: 1.25rem;
     font-weight: 600;
-    color: var(--text-color-primary);
+    color: #1f2937;
     margin-bottom: 1rem;
 }
 
 .prompt-text {
-    font-size: 1rem;
-    line-height: 1.6;
-    color: var(--text-color-secondary);
-    background: var(--background-fill-secondary);
+    background: #ffffff;
+    color: #1f2937;
     padding: 1rem;
-    border-radius: 8px;
-    border: 1px solid var(--border-color-primary);
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    line-height: 1.6;
     margin-bottom: 1rem;
 }
 
-/* Custom card for the additional director */
 .additional-director {
-    background: var(--warm-beige);
-    border-radius: 10px;
+    background: #ecfdf5;
+    border: 1px solid #d1fae5;
+    border-radius: 8px;
     padding: 1.5rem;
-    margin-bottom: 2rem;
-    border-left: 4px solid var(--accent-green);
-}
-.additional-director .section-title, .additional-director div {
-    color: var(--charcoal) !important; /* Force dark text on light background */
+    margin-bottom: 1.5rem;
 }
 
-/* Explanation section */
 .explanation-section {
-    background: var(--explanation-bg);
-    border-radius: 10px;
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
     padding: 1.5rem;
-    margin-top: 2rem;
-    border-left: 4px solid var(--accent-blue);
-}
-.explanation-section .section-title, .explanation-section div {
-    color: var(--text-color-primary);
+    margin-top: 1.5rem;
 }
 
 .section-title {
-    font-size: 1.2rem;
+    font-size: 1.125rem;
     font-weight: 600;
-    color: var(--text-color-primary);
+    color: #1f2937;
     margin-bottom: 1rem;
 }
 
-/* Details dropdown styling for director cards */
-details > summary {
-    cursor: pointer;
-    font-weight: 500;
-    color: var(--accent-blue);
+.loading {
+    text-align: center;
+    padding: 2rem;
+    color: #6b7280;
 }
-details > div {
-    margin-top: 1rem;
-    padding: 1rem;
-    background: var(--details-bg-color);
-    border-radius: 6px;
-    border: 1px solid var(--border-color-primary);
+
+/* Ensure all Gradio components use light mode */
+.gr-block, .gr-form, .gr-box {
+    background: #ffffff !important;
+    color: #1f2937 !important;
 }
-"""
-# --- End of Updated CSS ---
 
+/* Override any remaining dark mode styles */
+.dark, [data-theme="dark"] {
+    background: #ffffff !important;
+    color: #1f2937 !important;
+}
+
+/* Force all text elements to be visible */
+h1, h2, h3, h4, h5, h6, p, div, span, li, ol, ul {
+    color: #1f2937 !important;
+}
+
+/* Ensure HTML content is visible */
+.gr-html * {
+    color: #1f2937 !important;
+}
+
+/* Force visibility for all text content */
+* {
+    color: #1f2937 !important;
+}
+
+/* Override Gradio's default text colors */
+.gradio-container * {
+    color: #1f2937 !important;
+}
+"""
 
 def format_results_html(result):
-    """Format the results into beautiful HTML with Swedish design."""
+    """Format the results into clean, professional HTML."""
     if not result:
         return "<div class='loading'>No results to display.</div>"
     
@@ -195,7 +204,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;">
+                <div style="font-size: 1.1rem; color: #1f2937;">
                     <strong>{result.additional_director}</strong> - A perfect match for your vision!
                 </div>
             </div>
@@ -222,10 +231,10 @@ def format_results_html(result):
                 <div class="prompt-text">{director_cut.assemble_prompt()}</div>
                 
                 <details style="margin-top: 1rem;">
-                    <summary>
+                    <summary style="cursor: pointer; font-weight: 500; color: #3b82f6;">
                         View Detailed Breakdown
                     </summary>
-                    <div>
+                    <div style="margin-top: 1rem; padding: 1rem; background: #f8fafc; border-radius: 6px; color: #1f2937;">
                         <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>
@@ -242,7 +251,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; font-size: 1rem;">
+                <div style="line-height: 1.8; color: #1f2937; font-size: 1rem;">
                     {result.director_ranks.explanation}
                 </div>
             </div>
@@ -254,7 +263,7 @@ def format_results_html(result):
     except Exception as e:
         return f"""
         <div class="results-container">
-            <div style="color: #e74c3c; padding: 1rem; background: #fdf2f2; border-radius: 8px;">
+            <div style="color: #dc2626; padding: 1rem; background: #fef2f2; border-radius: 8px;">
                 <strong>Error formatting results:</strong> {str(e)}
             </div>
         </div>
@@ -268,18 +277,18 @@ def run_director_bakeoff(video_idea, directors):
     try:
         # Initial loading message with expectations
         yield """
-        <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;'>
+        <div class='loading' style='background: #f0f9ff; padding: 2rem; border-radius: 8px; border-left: 4px solid #3b82f6;'>
+            <div style='font-size: 1.3rem; font-weight: 600; color: #1f2937; margin-bottom: 1rem;'>
                 🎬 Director Bake-Off in Progress...
             </div>
-            <div style='font-size: 1rem; color: var(--text-color-secondary); margin-bottom: 1.5rem; line-height: 1.6;'>
+            <div style='font-size: 1rem; color: #6b7280; 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(--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);'>
+            <div style='background: #ffffff; padding: 1rem; border-radius: 8px; border-left: 3px solid #f59e0b;'>
+                <div style='font-size: 0.9rem; color: #1f2937;'>
                     <strong>What's happening:</strong><br>
                     • Finding the perfect additional director for your concept<br>
                     • Generating unique interpretations from each director<br>
@@ -315,7 +324,14 @@ def run_director_bakeoff(video_idea, directors):
 
 # Create the Gradio interface
 def create_interface():
-    with gr.Blocks(css=SWEDISH_CSS, title="Director Bake-Off Studio") as interface:
+    # Force light mode theme
+    light_theme = gr.themes.Default(
+        primary_hue="blue",
+        secondary_hue="gray", 
+        neutral_hue="gray"
+    )
+    
+    with gr.Blocks(css=LIGHT_MODE_CSS, theme=light_theme, title="Director Bake-Off Studio") as interface:
         # Header
         gr.HTML("""
         <div class="main-header">
@@ -326,9 +342,9 @@ def create_interface():
         
         # How it Works section - moved to top
         gr.HTML("""
-        <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;">
+        <div style="background: #f0f9ff; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem; border-left: 4px solid #3b82f6;">
+            <h3 style="margin-top: 0; color: #1f2937;">How it works:</h3>
+            <ol style="color: #1f2937; 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>
@@ -384,7 +400,7 @@ def create_interface():
         
         # Footer
         gr.HTML("""
-        <div style="text-align: center; padding: 2rem; color: var(--text-color-secondary); font-size: 0.9rem;">
+        <div style="text-align: center; padding: 2rem; color: #6b7280; font-size: 0.9rem;">
             <p>Powered by DSPy and the creative genius of legendary directors 🎬</p>
         </div>
         """)
@@ -401,4 +417,3 @@ if __name__ == "__main__":
         show_error=True,
         debug=True
     )
-