modernui framepack and history tabs

Signed-off-by: Vladimir Mandic <mandic00@live.com>

CHANGELOG.md

@@ -2,23 +2,34 @@
 
 ## Update for 2025-05-10
 
-- **NNCF**  
-  - Faster quantization  
-  - Faster inference with support for `torch.triton`  
-    up to 3.5x faster with INT4 and 2x faster with INT8  
-- **Other**  
+- **Compute**
+  - **NNCF**  
+    - Faster quantization  
+    - Faster inference with support for `torch.triton`  
+      up to 3.5x faster with INT4 and 2x faster with INT8  
+  - **ZLUDA**:
+    - *warning*: AMD Adrenaline 25.5.1 drivers are NOT COMPATIBLE with ZLUDA
+      see [issue](https://github.com/vladmandic/sdnext/issues/3918) for details
+  - **ROCm**
+    - first working builds of **Torch with ROCm on Windows**  
+      highly experimental  
+      reach out on Discord if you want to test it  
+- **Features**
   - Prompt Enhancer: support for *img2img* workflows  
     where prompt enhancer will first analyze input image and then incorporate user prompt to create enhanced prompt  
   - FramePack: improve LoRA compatibility  
-- **API**  
-  - add `/sdapi/v1/framepack` endpoint with full support for FramePack including all optional settings  
-    see example: `sd-extension-framepack/create-video.py`  
-  - add `/sdapi/v1/checkpoint` endpoint to get info on currently loaded model/checkpoint  
-    see example: `cli/api-checkpoint.py`  
-  - add `/sdapi/v1/prompt-enhance` endpoint to enhance prompt using LLM  
-    see example: `cli/api-enhance.py`  
-    supports text, image and video prompts with or without input image  
-    *note*: if input image is provided, model should be left at default `gemma-3-4b-it` as most other LLMs do not support hybrid workflows  
+  - **UI**
+    - ModernUI: support for History tab  
+    - ModernUI: support for FramePack tab  
+  - **API**  
+    - add `/sdapi/v1/framepack` endpoint with full support for FramePack including all optional settings  
+      see example: `sd-extension-framepack/create-video.py`  
+    - add `/sdapi/v1/checkpoint` endpoint to get info on currently loaded model/checkpoint  
+      see example: `cli/api-checkpoint.py`  
+    - add `/sdapi/v1/prompt-enhance` endpoint to enhance prompt using LLM  
+      see example: `cli/api-enhance.py`  
+      supports text, image and video prompts with or without input image  
+      *note*: if input image is provided, model should be left at default `gemma-3-4b-it` as most other LLMs do not support hybrid workflows  
 - **Fixes**
   - ROCm: disable cuDNN benchmark, fixes slow MIOpen tuning with `torch==2.7`  
   - Extensions: use in-process installer for extensions-builtin, improves startup performance  

TODO.md

@@ -7,9 +7,6 @@ Main ToDo list can be found at [GitHub projects](https://github.com/users/vladma
 - [Diffusers guiders](https://github.com/huggingface/diffusers/pull/11311)
 - [Nunchaku PulID](https://github.com/mit-han-lab/nunchaku/pull/274)
 - Video: API support  
-- ModernUI for Custom model loader  
-- ModernUI for History tab  
-- ModernUI for FramePack
 
 ### Issues/Limitations
 

javascript/extraNetworks.js

@@ -6,10 +6,17 @@ let totalCards = -1;
 
 const getENActiveTab = () => {
   let tabName = '';
+  if (gradioApp().getElementById('txt2img_prompt').checkVisibility()) return 'txt2img';
+  if (gradioApp().getElementById('img2img_prompt').checkVisibility()) return 'img2img';
+  if (gradioApp().getElementById('control_prompt').checkVisibility()) return 'control';
+  if (gradioApp().getElementById('video_prompt').checkVisibility()) return 'video';
+  if (gradioApp().getElementById('framepack_prompt_row').checkVisibility()) return 'framepack';
+  // legacy method
   if (gradioApp().getElementById('tab_txt2img').style.display === 'block') tabName = 'txt2img';
   else if (gradioApp().getElementById('tab_img2img').style.display === 'block') tabName = 'img2img';
   else if (gradioApp().getElementById('tab_control').style.display === 'block') tabName = 'control';
   else if (gradioApp().getElementById('tab_video').style.display === 'block') tabName = 'video';
+  else if (gradioApp().getElementById('tab_framepack_tab').style.display === 'block') tabName = 'framepack';
   // log('getENActiveTab', tabName);
   return tabName;
 };
@@ -31,8 +38,10 @@ const setENState = (state) => {
   state.page = getENActivePage();
   // log('setENState', state);
   const el = gradioApp().querySelector(`#${state.tab}_extra_state  > label > textarea`);
-  el.value = JSON.stringify(state);
-  updateInput(el);
+  if (el) {
+    el.value = JSON.stringify(state);
+    updateInput(el);
+  }
 };
 
 // methods
@@ -90,9 +99,11 @@ function readCardDescription(page, item) {
   xhrGet('/sd_extra_networks/description', { page, item }, (data) => {
     const tabname = getENActiveTab();
     const description = gradioApp().querySelector(`#${tabname}_description > label > textarea`);
-    description.value = data?.description?.trim() || '';
-    // description.focus();
-    updateInput(description);
+    if (description) {
+      description.value = data?.description?.trim() || '';
+      // description.focus();
+      updateInput(description);
+    }
     setENState({ op: 'readCardDescription', page, item });
   });
 }
@@ -232,6 +243,7 @@ function refreshENInput(tabname) {
 function cardClicked(textToAdd, allowNegativePrompt) {
   // log('cardClicked', textToAdd, allowNegativePrompt);
   const tabname = getENActiveTab();
+  log('cardClicked', tabname, textToAdd);
   const textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector(`#${tabname}_prompt > label > textarea`);
   if (textarea.value.indexOf(textToAdd) !== -1) textarea.value = textarea.value.replace(textToAdd, '');
   else textarea.value += textToAdd;

modules/ui_history.py

@@ -38,7 +38,7 @@ def select(evt: gr.SelectData, _data):
 
 def create_ui():
     with gr.Row():
-        btn_refresh = gr.Button("Refresh")
+        btn_refresh = gr.Button("Refresh", elem_id='btn_history_refresh')
     with gr.Row():
         history_table = gr.DataFrame(
             value=None,
@@ -49,8 +49,13 @@ def create_ui():
             wrap=True,
             overflow_row_behaviour='paginate',
             max_rows=50,
+            elem_id='history_table',
         )
     with gr.Row():
-        history_files = gr.Files(label="Task files", interactive=False)
+        history_files = gr.Files(
+            label="Task files",
+            interactive=False,
+            elem_id='history_files',
+        )
     btn_refresh.click(fn=refresh, inputs=[], outputs=[history_table])
     history_table.select(fn=select, inputs=[history_table], outputs=[history_files])