Update app.py

app.py

@@ -368,8 +368,99 @@ def generate_video(
         return None
 
 
-# Create Gradio interface
-with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
+css = """
+    #col-container {
+        margin: 0 auto;
+        max-width: 1600px;
+    }
+    #modal-container {
+    width: 100vw;            /* Take full viewport width */
+    height: 100vh;           /* Take full viewport height (optional) */
+    display: flex;           
+    justify-content: center; /* Center content horizontally */
+    align-items: center;     /* Center content vertically if desired */
+    }
+    #modal-content {
+    width: 100%;
+    max-width: 700px;         /* Limit content width */
+    margin: 0 auto;
+    border-radius: 8px;
+    padding: 1.5rem;
+    }
+    #step-column {
+        padding: 10px;
+        border-radius: 8px;
+        box-shadow: var(--card-shadow);
+        margin: 10px;
+    }
+    #col-showcase {
+        margin: 0 auto;
+        max-width: 1100px;
+    }
+    .button-gradient {
+        background: linear-gradient(45deg, rgb(255, 65, 108), rgb(255, 75, 43), rgb(255, 155, 0), rgb(255, 65, 108)) 0% 0% / 400% 400%;
+        border: none;
+        padding: 14px 28px;
+        font-size: 16px;
+        font-weight: bold;
+        color: white;
+        border-radius: 10px;
+        cursor: pointer;
+        transition: 0.3s ease-in-out;
+        animation: 2s linear 0s infinite normal none running gradientAnimation;
+        box-shadow: rgba(255, 65, 108, 0.6) 0px 4px 10px;
+    }
+    .toggle-container {
+    display: inline-flex;
+    background-color: #ffd6ff;  /* light pink background */
+    border-radius: 9999px;
+    padding: 4px;
+    position: relative;
+    width: fit-content;
+    font-family: sans-serif;
+    }
+    .toggle-container input[type="radio"] {
+    display: none;
+    }
+    .toggle-container label {
+    position: relative;
+    z-index: 2;
+    flex: 1;
+    text-align: center;
+    font-weight: 700;
+    color: #4b2ab5; /* dark purple text for unselected */
+    padding: 6px 22px;
+    border-radius: 9999px;
+    cursor: pointer;
+    transition: color 0.25s ease;
+    }
+    /* Moving highlight */
+    .toggle-highlight {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    width: calc(50% - 4px);
+    height: calc(100% - 8px);
+    background-color: #4b2ab5; /* dark purple background */
+    border-radius: 9999px;
+    transition: transform 0.25s ease;
+    z-index: 1;
+    }
+    /* When "True" is checked */
+    #true:checked ~ label[for="true"] {
+    color: #ffd6ff; /* light pink text */
+    }
+    /* When "False" is checked */
+    #false:checked ~ label[for="false"] {
+    color: #ffd6ff; /* light pink text */
+    }
+    /* Move highlight to right side when False is checked */
+    #false:checked ~ .toggle-highlight {
+    transform: translateX(100%);
+    }
+    """
+
+with gr.Blocks(css=css, title="LTX-2 Video Distilled 🎥🔈") as demo:
     gr.HTML(
         """
         <div style="text-align: left;">
@@ -388,7 +479,7 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
         """
     )
     with gr.Row():
-        with gr.Column():
+        with gr.Column(elem_id="col-container"):
             input_image = gr.Image(
                 label="Input Image (Optional)",
                 type="pil",
@@ -440,9 +531,9 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
                         precision=0
                     )
 
-        with gr.Column():
+        with gr.Column(elem_id="col-container"):
             output_video = gr.Video(label="Generated Video", autoplay=True, height=512)
-            generate_btn = gr.Button("Generate Video", variant="primary", size="lg")
+            generate_btn = gr.Button("Generate Video", variant="primary", elem_classes="button-gradient")
 
     generate_btn.click(
         fn=generate_video,
@@ -487,8 +578,6 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
     )
 
 
-css = '''
-.gradio-container .contain{max-width: 1200px !important; margin: 0 auto !important}
-'''
+
 if __name__ == "__main__":
     demo.launch()