Update app.py

app.py

@@ -531,23 +531,23 @@ def make_custom_css():
     base_progress_css = make_progress_bar_css()
     extra_css = """
     body {
-        background: #fafbfe !important;
+        background: #1a1b1e !important;
         font-family: "Noto Sans", sans-serif;
+        color: #e0e0e0;
     }
     #title-container {
         text-align: center;
         padding: 20px 0;
         margin-bottom: 30px;
-        background: linear-gradient(135deg, #4b9ffa 0%, #2d7eeb 100%);
-        border-radius: 15px;
-        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
     }
     #title-container h1 {
-        color: white;
+        color: #4b9ffa;
         font-size: 2.5rem;
         margin: 0;
         font-weight: 800;
-        text-shadow: 1px 2px 2px rgba(0,0,0,0.2);
+    }
+    #title-container p {
+        color: #e0e0e0;
     }
     .three-column-container {
         display: flex;
@@ -557,37 +557,40 @@ def make_custom_css():
         margin: 0 auto;
     }
     .settings-panel {
-        flex: 0 0 180px;  /* Made even narrower */
-        background: #ffffff;
-        padding: 12px;  /* Reduced padding */
+        flex: 0 0 150px;
+        background: #2a2b2e;
+        padding: 12px;
         border-radius: 15px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        border: 1px solid #3a3b3e;
     }
     .settings-panel .gr-slider {
-        width: calc(100% - 10px) !important;  /* Make sliders fit panel */
+        width: calc(100% - 10px) !important;
+    }
+    .settings-panel label {
+        color: #e0e0e0 !important;
     }
     .settings-panel label span:first-child {
-        font-size: 0.9rem !important;  /* Smaller labels */
+        font-size: 0.9rem !important;
     }
     .main-panel {
-        flex: 1;  /* Takes remaining space */
-        background: #ffffff;
+        flex: 1;
+        background: #2a2b2e;
         padding: 20px;
         border-radius: 15px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        border: 1px solid #3a3b3e;
         display: flex;
         flex-direction: column;
         gap: 20px;
     }
     .output-panel {
-        flex: 1;  /* Equal width as main panel */
-        background: #ffffff;
+        flex: 1;
+        background: #2a2b2e;
         padding: 20px;
         border-radius: 15px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        border: 1px solid #3a3b3e;
     }
     .settings-panel h3 {
-        color: #2d7eeb;
+        color: #4b9ffa;
         margin-bottom: 15px;
         font-size: 1.1rem;
         border-bottom: 2px solid #4b9ffa;
@@ -599,7 +602,7 @@ def make_custom_css():
     .quick-prompts {
         margin-top: 10px;
         padding: 10px;
-        background: #f8f9fe;
+        background: #1a1b1e;
         border-radius: 10px;
     }
     .button-container {
@@ -607,6 +610,30 @@ def make_custom_css():
         gap: 10px;
         margin-top: 15px;
     }
+    /* Override Gradio's default light theme */
+    .gr-box {
+        background: #2a2b2e !important;
+        border-color: #3a3b3e !important;
+    }
+    .gr-input, .gr-textbox {
+        background: #1a1b1e !important;
+        border-color: #3a3b3e !important;
+        color: #e0e0e0 !important;
+    }
+    .gr-form {
+        background: transparent !important;
+        border: none !important;
+    }
+    .gr-label {
+        color: #e0e0e0 !important;
+    }
+    .gr-button {
+        background: #4b9ffa !important;
+        color: white !important;
+    }
+    .gr-button.secondary-btn {
+        background: #ff4d4d !important;
+    }
     """
     return base_progress_css + extra_css
 
@@ -615,7 +642,7 @@ css = make_custom_css()
 block = gr.Blocks(css=css).queue()
 with block:
     with gr.Group(elem_id="title-container"):
-        gr.Markdown("<h1>FramePack I2V</h1>")
+        gr.Markdown("<h1>FramePack</h1>")
         gr.Markdown(
             """Generate amazing animations from a single image using AI. 
             Just upload an image, write a prompt, and watch the magic happen!"""
@@ -630,7 +657,7 @@ with block:
                 total_second_length = gr.Slider(
                     label="Duration (Seconds)",
                     minimum=1,
-                    maximum=60,
+                    maximum=15,
                     value=2,
                     step=0.1,
                     info='Length of generated video'