Update app.py

app.py

@@ -570,19 +570,19 @@ class RadioAnimated(gr.HTML):
 
 class PromptBox(gr.HTML):
     """
-    DeepSite-like prompt box (HTML textarea) that behaves like an input component.
-    Outputs: the current text value (string)
+    Prompt textarea with an internal footer slot (.ds-footer) where we can inject dropdowns.
     """
-    def __init__(self, value="", placeholder="Describe the video with audio you want to generate...", **kwargs):
+    def __init__(self, value="", placeholder="Describe what you want...", **kwargs):
         uid = uuid.uuid4().hex[:8]
 
         html_template = f"""
-        <div style="text-align:center; font-weight:600; margin-bottom:6px;">
-            Prompt
-        </div>
-        <div class="ds-prompt" data-ds="{uid}">
-          <textarea class="ds-textarea" rows="3"
-            placeholder="{placeholder}"></textarea>
+        <div class="ds-card" data-ds="{uid}">
+          <div class="ds-top">
+            <textarea class="ds-textarea" rows="3" placeholder="{placeholder}"></textarea>
+
+            <!-- footer slot -->
+            <div class="ds-footer" aria-label="prompt-footer"></div>
+          </div>
         </div>
         """
 
@@ -590,50 +590,65 @@ class PromptBox(gr.HTML):
         (() => {
           const textarea = element.querySelector(".ds-textarea");
           if (!textarea) return;
-
-          // Auto-resize (optional, but nice)
+        
           const autosize = () => {
             textarea.style.height = "0px";
             textarea.style.height = Math.min(textarea.scrollHeight, 240) + "px";
           };
-
-          // Set initial value from props.value
+        
           const setValue = (v, triggerChange=false) => {
             const val = (v ?? "");
             if (textarea.value !== val) textarea.value = val;
             autosize();
-
             props.value = textarea.value;
             if (triggerChange) trigger("change", props.value);
           };
-
+        
           setValue(props.value, false);
-
-          // Update Gradio value on input
+        
           textarea.addEventListener("input", () => {
             autosize();
             props.value = textarea.value;
             trigger("change", props.value);
           });
-
+        
+          // ✅ Focus-on-load (robust)
+          const shouldAutoFocus = () => {
+            // don’t steal focus if user already clicked/typed somewhere
+            const ae = document.activeElement;
+            if (ae && ae !== document.body && ae !== document.documentElement) return false;
+            // don’t auto-focus on small screens (optional; avoids mobile keyboard pop)
+            if (window.matchMedia && window.matchMedia("(max-width: 768px)").matches) return false;
+            return true;
+          };
+        
+          const focusWithRetry = (tries = 30) => {
+            if (!shouldAutoFocus()) return;
+            // only focus if still not focused
+            if (document.activeElement !== textarea) textarea.focus({ preventScroll: true });
+            if (document.activeElement === textarea) return;
+            if (tries > 0) requestAnimationFrame(() => focusWithRetry(tries - 1));
+          };
+        
+          // wait a tick so Gradio/layout settles
+          requestAnimationFrame(() => focusWithRetry());
+        
+          // keep your sync loop
           let last = props.value;
           const syncFromProps = () => {
             if (props.value !== last) {
               last = props.value;
-              setValue(last, false); // don't re-trigger change loop
+              setValue(last, false);
             }
             requestAnimationFrame(syncFromProps);
           };
           requestAnimationFrame(syncFromProps);
         })();
+
         """
 
-        super().__init__(
-            value=value,
-            html_template=html_template,
-            js_on_load=js_on_load,
-            **kwargs
-        )
+        super().__init__(value=value, html_template=html_template, js_on_load=js_on_load, **kwargs)
+
 
 class CameraDropdown(gr.HTML):
     """
@@ -1010,7 +1025,7 @@ css = """
 
     /* Make the row behave nicely */
     #controls-row {
-    display: flex;
+    display: none !important;
     align-items: center;
     gap: 12px;
     flex-wrap: nowrap; /* or wrap if you prefer on small screens */
@@ -1023,14 +1038,6 @@ css = """
     min-width: 0 !important;
     }
 
-
-    /* Same idea for your radio HTML blocks (optional but helps) */
-    #radioanimated_duration,
-    #radioanimated_duration > div,
-    #radioanimated_resolution,
-    #radioanimated_resolution > div {
-    width: fit-content !important;
-    }
     
     #col-container {
         margin: 0 auto;
@@ -1210,35 +1217,88 @@ css += """
     .ds-textarea{
       width: 100%;
       box-sizing: border-box;
-    
       background: #2b2b2b;
       color: rgba(255,255,255,0.9);
-    
       border: 1px solid rgba(255,255,255,0.12);
       border-radius: 14px;
-    
       padding: 14px 16px;
       outline: none;
-    
       font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
       font-size: 15px;
       line-height: 1.35;
-    
       resize: none;
-      height: 94px;
-      min-height: 94px;
-      max-height: 94px;
+      min-height: 210px;
+      max-height: 210px;
       overflow-y: auto;
+    
+      /* IMPORTANT: space for the footer controls */
+      padding-bottom: 72px;
+    }
+
+
+    .ds-card{
+      width: 100%;
+      max-width: 720px;
+      margin: 0 auto;
+    }
+    .ds-top{
+      position: relative;
+    }
+    
+    /* Make room for footer inside textarea */
+    .ds-textarea{
+      padding-bottom: 72px;
     }
     
-    .ds-textarea::placeholder{
-      color: rgba(255,255,255,0.55);
+    /* Footer positioning */
+    .ds-footer{
+      position: absolute;
+      right: 12px;
+      bottom: 10px;
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      justify-content: flex-end;
+      z-index: 3;
     }
     
-    .ds-textarea:focus{
-      border-color: rgba(255,255,255,0.22);
-      box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
+    /* Smaller pill buttons inside footer */
+    .ds-footer .cd-trigger{
+      min-height: 32px;
+      padding: 6px 10px;
+      font-size: 12px;
+      gap: 6px;
+      border-radius: 9999px;
+    }
+    .ds-footer .cd-trigger-icon,
+    .ds-footer .cd-icn{
+      width: 14px;
+      height: 14px;
+    }
+    .ds-footer .cd-trigger-icon svg,
+    .ds-footer .cd-icn svg{
+      width: 14px;
+      height: 14px;
+    }
+    .ds-footer .cd-caret{
+      font-size: 11px;
+    }
+    
+    /* Bottom safe area bar (optional but looks nicer) */
+    .ds-top::after{
+      content: "";
+      position: absolute;
+      left: 1px;
+      right: 1px;
+      bottom: 1px;
+      height: 56px;
+      background: #2b2b2b;
+      border-bottom-left-radius: 13px;
+      border-bottom-right-radius: 13px;
+      pointer-events: none;
+      z-index: 2;
     }
+
     """
 
 css += """
@@ -1418,6 +1478,172 @@ css += """
 .cd-label{
   flex: 1;
 }
+
+/* =========================
+   FIX: prompt border + scrollbar bleed
+   ========================= */
+
+/* Put the border + background on the wrapper, not the textarea */
+.ds-top{
+  position: relative;
+  background: #2b2b2b;
+  border: 1px solid rgba(255,255,255,0.12);
+  border-radius: 14px;
+  overflow: hidden; /* ensures the footer bar is clipped to rounded corners */
+}
+
+/* Make textarea "transparent" so wrapper owns the border/background */
+.ds-textarea{
+  background: transparent !important;
+  border: none !important;
+  border-radius: 0 !important; /* wrapper handles radius */
+  outline: none;
+
+  /* keep your spacing */
+  padding: 14px 16px;
+  padding-bottom: 72px; /* room for footer */
+  width: 100%;
+  box-sizing: border-box;
+
+  /* keep scroll behavior */
+  overflow-y: auto;
+
+  /* prevent scrollbar bleed by hiding native scrollbar */
+  scrollbar-width: none;          /* Firefox */
+}
+.ds-textarea::-webkit-scrollbar{  /* Chrome/Safari */
+  width: 0;
+  height: 0;
+}
+
+/* Safe-area bar: now it matches perfectly because it's inside the same bordered wrapper */
+.ds-top::after{
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 56px;
+  background: #2b2b2b;
+  pointer-events: none;
+  z-index: 2;
+}
+
+/* Footer above the bar */
+.ds-footer{
+  position: absolute;
+  right: 12px;
+  bottom: 10px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-end;
+  z-index: 3;
+}
+
+/* Ensure textarea content sits below overlays */
+.ds-textarea{
+  position: relative;
+  z-index: 1;
+}
+
+/* ===== FIX dropdown menu being clipped/behind ===== */
+
+/* Let the dropdown menu escape the prompt wrapper */
+.ds-top{
+  overflow: visible !important;  /* IMPORTANT: do not clip the menu */
+}
+
+/* Keep the rounded "safe area" look without clipping the menu */
+.ds-top::after{
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  border-bottom-left-radius: 14px !important;
+  border-bottom-right-radius: 14px !important;
+}
+
+/* Ensure the footer stays above the safe-area bar */
+.ds-footer{
+  z-index: 20 !important;
+}
+
+/* Make sure the opened menu is above EVERYTHING */
+.ds-footer .cd-menu{
+  z-index: 999999 !important;
+}
+
+/* Sometimes Gradio/columns/cards create stacking contexts;
+   force the whole prompt card above nearby panels */
+.ds-card{
+  position: relative;
+  z-index: 50;
+}
+
+/* --- Fix focus highlight shape (make it match rounded container) --- */
+
+/* Kill any theme focus ring on the textarea itself */
+.ds-textarea:focus,
+.ds-textarea:focus-visible{
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+/* Optional: if some themes apply it even when not focused */
+.ds-textarea{
+  outline: none !important;
+}
+
+/* Apply the focus ring to the rounded wrapper instead */
+.ds-top:focus-within{
+  border-color: rgba(255,255,255,0.22) !important;
+  box-shadow: 0 0 0 3px rgba(255,255,255,0.06) !important;
+  border-radius: 14px !important;
+}
+
+/* If you see any tiny square corners, ensure the wrapper clips its own shadow properly */
+.ds-top{
+  border-radius: 14px !important;
+}
+
+/* =========================
+   CameraDropdown: force readable menu text in BOTH themes
+   ========================= */
+
+/* Menu surface */
+.cd-menu{
+  background: #2b2b2b !important;
+  border: 1px solid rgba(255,255,255,0.14) !important;
+}
+
+/* Title */
+.cd-title{
+  color: rgba(255,255,255,0.55) !important;
+}
+
+/* Items + all descendants (fixes spans / inherited theme colors) */
+.cd-item,
+.cd-item *{
+  color: rgba(255,255,255,0.92) !important;
+}
+
+/* Hover state */
+.cd-item:hover{
+  background: rgba(255,255,255,0.10) !important;
+}
+
+/* Checkmark */
+.cd-item::after{
+  color: rgba(255,255,255,0.92) !important;
+}
+
+/* (Optional) make sure the trigger stays readable too */
+.cd-trigger,
+.cd-trigger *{
+  color: rgba(255,255,255,0.75) !important;
+}
+
+
 """
 
 
@@ -1454,11 +1680,45 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
             with gr.Column(elem_id="step-column"):
             
                 input_image = gr.Image(
-                    label="Input Image (Optional)",
-                    type="filepath",   # <-- was "pil"
-                    height=512
+                    label="First Frame (Optional)",
+                    type="filepath",
+                    height=256
                 )
 
+                relocate = gr.HTML(
+                    value="",
+                    html_template="<div></div>",
+                    js_on_load=r"""
+                (() => {
+                  function moveIntoFooter() {
+                    const promptRoot = document.querySelector("#prompt_ui");
+                    if (!promptRoot) return false;
+                
+                    const footer = promptRoot.querySelector(".ds-footer");
+                    if (!footer) return false;
+                
+                    const dur = document.querySelector("#duration_ui .cd-wrap");
+                    const res = document.querySelector("#resolution_ui .cd-wrap");
+                    const cam = document.querySelector("#camera_ui .cd-wrap");
+                
+                    if (!dur || !res || !cam) return false;
+                
+                    footer.appendChild(dur);
+                    footer.appendChild(res);
+                    footer.appendChild(cam);
+                
+                    return true;
+                  }
+                
+                  const tick = () => {
+                    if (!moveIntoFooter()) requestAnimationFrame(tick);
+                  };
+                  requestAnimationFrame(tick);
+                })();
+                """
+                )
+                
+
                 prompt_ui = PromptBox(
                     value="Make this image come alive with cinematic motion, smooth animation",
                     elem_id="prompt_ui",
@@ -1498,11 +1758,11 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
             
                 with gr.Row(elem_id="controls-row"):
                         
-                        radioanimated_duration = CameraDropdown(
+                        duration_ui = CameraDropdown(
                             choices=["3s", "5s", "10s", "15s"],
                             value="5s",
                             title="Clip Duration",
-                            elem_id="radioanimated_duration"
+                            elem_id="duration_ui"
                         )
                     
                         duration = gr.Slider(
@@ -1527,7 +1787,7 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
                         </svg>"""
 
                         
-                        radioanimated_resolution = CameraDropdown(
+                        resolution_ui = CameraDropdown(
                             choices=[
                                 {"label": "16:9", "value": "16:9", "icon": ICON_16_9},
                                 {"label": "1:1",  "value": "1:1",  "icon": ICON_1_1},
@@ -1535,18 +1795,18 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
                             ],
                             value="16:9",
                             title="Resolution",
-                            elem_id="radioanimated_resolution"
+                            elem_id="resolution_ui"
                         )
 
                         
                         width = gr.Number(label="Width", value=DEFAULT_1_STAGE_WIDTH, precision=0, visible=False)
                         height = gr.Number(label="Height", value=DEFAULT_1_STAGE_HEIGHT, precision=0, visible=False)   
 
-                        camera_lora_ui = CameraDropdown(
+                        camera_ui = CameraDropdown(
                             choices=[name for name, _ in RUNTIME_LORA_CHOICES],
                             value="No LoRA",
                             title="Camera LoRA",
-                            elem_id="camera_lora_ui",
+                            elem_id="camera_ui",
                         )
 
                         # Hidden real dropdown (backend value)
@@ -1559,22 +1819,22 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
                     
                 generate_btn = gr.Button("🤩 Generate Video", variant="primary", elem_classes="button-gradient")
 
-    camera_lora_ui.change(
+    camera_ui.change(
         fn=lambda x: x,
-        inputs=camera_lora_ui,
+        inputs=camera_ui,
         outputs=camera_lora,
         api_visibility="private"
     )
 
-    radioanimated_duration.change(
+    duration_ui.change(
         fn=apply_duration,
-        inputs=radioanimated_duration,
+        inputs=duration_ui,
         outputs=[duration],
         api_visibility="private"
     )
-    radioanimated_resolution.change(
+    resolution_ui.change(
         fn=apply_resolution,
-        inputs=radioanimated_resolution,
+        inputs=resolution_ui,
         outputs=[width, height],
         api_visibility="private"
     )
@@ -1645,7 +1905,7 @@ with gr.Blocks(title="LTX-2 Video Distilled 🎥🔈") as demo:
             
         ],
         fn=generate_video_example,
-        inputs=[input_image, prompt_ui, camera_lora_ui, radioanimated_resolution, audio_input],
+        inputs=[input_image, prompt_ui, camera_ui, resolution_ui, audio_input],
         outputs = [output_video],
         label="I2V Examples",
         cache_examples=True,