video tab modernui layout

Signed-off-by: Vladimir Mandic <[email protected]>

Author: vladmandic

CHANGELOG.md

@@ -14,7 +14,7 @@
   - Video: HunyuanVideo-I2V incompatible with latest transformers <https://github.com/huggingface/diffusers/issues/11118>  
   - Video: FasterCache and PyramidAttentionBroadcast granular config  
   - Video: FasterCache and PyramidAttentionBroadcast for LTX and WAN <https://github.com/huggingface/diffusers/issues/11134>  
-  - Video: HunyuanVideo-I2V-16ch <https://github.com/huggingface/diffusers/pull/11066>
+  - Video: HunyuanVideo-I2V-16/33ch <https://github.com/huggingface/diffusers/pull/11066>
   - Video: CogVideo-15 support
 
 ### Highlights for 2025-03-21

TODO.md

@@ -4,14 +4,6 @@ Main ToDo list can be found at [GitHub projects](https://github.com/users/vladma
 
 ## Current
 
-- Video tab:
-  - remote vae
-  - tiny vae
-  - lora
-  - accelerators: teacache, pab, fastercache, paraattention, perflow
-  - modernui tab
-- Detailer daemon: https://github.com/muerrilla/sd-webui-detail-daemon/blob/main/scripts/detail_daemon.py
-
 ## Future Candidates
 
 - Redesign postprocessing  

extensions-builtin/sdnext-modernui

@@ -9,6 +9,7 @@ async function initDragDrop() {
     if (tab === 0) promptTarget = 'txt2img_prompt_image';
     else if (tab === 1) promptTarget = 'img2img_prompt_image';
     else if (tab === 2) promptTarget = 'control_prompt_image';
+    else if (tab === 3) promptTarget = 'video_prompt_image';
     else return;
     const imgParent = gradioApp().getElementById(promptTarget);
     const fileInput = imgParent.querySelector('input[type="file"]');

javascript/imageParams.js

@@ -14,9 +14,11 @@ function checkPaused(state) {
   lastState.paused = state ? !state : !lastState.paused;
   const t_el = document.getElementById('txt2img_pause');
   const i_el = document.getElementById('img2img_pause');
+  const c_el = document.getElementById('control_pause');
   const v_el = document.getElementById('video_pause');
   if (t_el) t_el.innerText = lastState.paused ? 'Resume' : 'Pause';
   if (i_el) i_el.innerText = lastState.paused ? 'Resume' : 'Pause';
+  if (c_el) c_el.innerText = lastState.paused ? 'Resume' : 'Pause';
   if (v_el) v_el.innerText = lastState.paused ? 'Resume' : 'Pause';
 }
 

javascript/progressBar.js

@@ -102,13 +102,13 @@ button.custom-button { border-radius: var(--button-large-radius); padding: var(-
 #txt2img_prompt_container, #img2img_prompt_container, #control_prompt_container, #video_prompt_container { margin-right: var(--layout-gap) }
 #txt2img_footer, #img2img_footer, #control_footer { height: fit-content; display: none; }
 #txt2img_generate_box, #img2img_generate_box { gap: 0.5em; flex-wrap: unset; min-width: unset; width: 66.6%; }
-#control_generate_box { gap: 0.5em; flex-wrap: unset; min-width: unset; width: 100%; }
-#control_generate_box button:nth-child(1) { flex-grow: 2; }
-#control_generate_box button:nth-child(2) { flex-grow: 1; }
+#control_generate_box, #video_generate_box { gap: 0.5em; flex-wrap: unset; min-width: unset; width: 100%; }
+#control_generate_box button:nth-child(1), #video_generate_box button:nth-child(1) { flex-grow: 2; }
+#control_generate_box button:nth-child(2), #video_generate_box button:nth-child(2) { flex-grow: 1; }
 #txt2img_actions_column, #img2img_actions_column, #control_actions_column, #video_actions_column { gap: 0.3em; height: fit-content; }
 #txt2img_generate_box>button, #img2img_generate_box>button, #control_generate_box>button, #video_generate_box>button, #txt2img_enqueue, #img2img_enqueue, #txt2img_enqueue>button, #img2img_enqueue>button { min-height: 44px !important; max-height: 44px !important; line-height: 1em; white-space: break-spaces; min-width: unset; }
 #txt2img_enqueue_wrapper, #img2img_enqueue_wrapper, #control_enqueue_wrapper { min-width: unset !important; width: 31%; }
-#txt2img_generate_line2, #img2img_generate_line2, #txt2img_tools, #img2img_tools, #control_generate_line2, #control_tools { display: flex; }
+#txt2img_generate_line2, #img2img_generate_line2, #txt2img_tools, #img2img_tools, #control_generate_line2, #control_tools, #video_generate_line2, #video_tools { display: flex; }
 #txt2img_generate_line2>button, #img2img_generate_line2>button, #extras_generate_box>button, #control_generate_line2>button, #txt2img_tools>button, #img2img_tools>button, #control_tools>button { height: 2em; line-height: 0; font-size: var(--text-md);
   min-width: unset; display: block !important; }
 #txt2img_prompt, #txt2img_neg_prompt, #img2img_prompt, #img2img_neg_prompt, #control_prompt, #control_neg_prompt, #video_prompt, #video_neg_prompt { display: contents; }

javascript/sdnext.css

@@ -15,9 +15,9 @@
 - LTXVideo 0.9.5 T2V: pass/pass/fail, v095 pipeline is tbd
 - LTXVideo 0.9.5 I2V: pass/pass/fail, v095 pipeline is tbd
 - LTXVideo 0.9.1 T2V: pass/pass/pass
-- LTXVideo 0.9.1 I2V: pass/pass/tbd
+- LTXVideo 0.9.1 I2V: pass/pass/pass
 - LTXVideo 0.9.0 T2V: pass/pass/pass
-- LTXVideo 0.9.0 I2V: pass/pass/tbd
+- LTXVideo 0.9.0 I2V: pass/pass/pass
 
 - WAN 2.1 1.3B T2V: pass/pass/pass
 - WAN 2.1 14B T2V: pass/pass/pass

modules/video_models/models_def.py

@@ -95,5 +95,5 @@ def run(self, p: processing.StableDiffusionProcessing, auto_apply, temperature,
             shared.log.debug(f'Prompt enhance: prompt="{p.prompt}"')
 
     def after_component(self, component, **kwargs): # searching for actual ui prompt components
-        if getattr(component, 'elem_id', '') in ['txt2img_prompt', 'img2img_prompt', 'control_prompt']:
+        if getattr(component, 'elem_id', '') in ['txt2img_prompt', 'img2img_prompt', 'control_prompt', 'video_prompt']:
             self.prompt = component