add reprocess plus major processing refactor

javascript/contextMenus.js

@@ -31,7 +31,7 @@ const contextMenuInit = () => {
     if ((windowHeight - posy) < menuHeight) contextMenu.style.top = `${windowHeight - menuHeight}px`;
   }
 
-  function appendContextMenuOption(targetElementSelector, entryName, entryFunction) {
+  function appendContextMenuOption(targetElementSelector, entryName, entryFunction, primary = false) {
     let currentItems = menuSpecs.get(targetElementSelector);
     if (!currentItems) {
       currentItems = [];
@@ -41,7 +41,8 @@ const contextMenuInit = () => {
       id: `${targetElementSelector}_${uid()}`,
       name: entryName,
       func: entryFunction,
-      isNew: true,
+      primary,
+      // isNew: true,
     };
     currentItems.push(newItem);
     return newItem.id;
@@ -64,13 +65,21 @@ const contextMenuInit = () => {
       if (!e.isTrusted) return;
       const oldMenu = gradioApp().querySelector('#context-menu');
       if (oldMenu) oldMenu.remove();
+      menuSpecs.forEach((v, k) => {
+        const items = v.filter((item) => item.primary);
+        if (items.length > 0 && e.composedPath()[0].matches(k)) {
+          showContextMenu(e, e.composedPath()[0], items);
+          e.preventDefault();
+        }
+      });
     });
     gradioApp().addEventListener('contextmenu', (e) => {
       const oldMenu = gradioApp().querySelector('#context-menu');
       if (oldMenu) oldMenu.remove();
       menuSpecs.forEach((v, k) => {
-        if (e.composedPath()[0].matches(k)) {
-          showContextMenu(e, e.composedPath()[0], v);
+        const items = v.filter((item) => !item.primary);
+        if (items.length > 0 && e.composedPath()[0].matches(k)) {
+          showContextMenu(e, e.composedPath()[0], items);
           e.preventDefault();
         }
       });
@@ -80,10 +89,10 @@ const contextMenuInit = () => {
   return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener];
 };
 
-const initResponse = contextMenuInit();
-const appendContextMenuOption = initResponse[0];
-const removeContextMenuOption = initResponse[1];
-const addContextMenuEventListener = initResponse[2];
+const initContextResponse = contextMenuInit();
+const appendContextMenuOption = initContextResponse[0];
+const removeContextMenuOption = initContextResponse[1];
+const addContextMenuEventListener = initContextResponse[2];
 
 const generateForever = (genbuttonid) => {
   if (window.generateOnRepeatInterval) {
@@ -102,22 +111,25 @@ const generateForever = (genbuttonid) => {
   }
 };
 
-const reprocessLatent = (btnId) => {
-  const btn = document.getElementById(btnId);
+const reprocessClick = (tabId, state) => {
+  const btn = document.getElementById(`${tabId}_${state}`);
+  window.submit_state = state;
   if (btn) btn.click();
 };
 
 async function initContextMenu() {
+  let id = '';
   for (const tab of ['txt2img', 'img2img', 'control']) {
-    for (const el of ['generate', 'interrupt', 'skip', 'pause', 'paste', 'clear_prompt', 'extra_networks_btn']) {
-      const id = `#${tab}_${el}`;
-      appendContextMenuOption(id, 'Copy to clipboard', () => navigator.clipboard.writeText(document.querySelector(`#${tab}_prompt > label > textarea`).value));
-      appendContextMenuOption(id, 'Generate forever', () => generateForever(`#${tab}_generate`));
-      appendContextMenuOption(id, 'Apply selected style', quickApplyStyle);
-      appendContextMenuOption(id, 'Quick save style', quickSaveStyle);
-      appendContextMenuOption(id, 'nVidia overlay', initNVML);
-      appendContextMenuOption(id, 'Reprocess last image', () => reprocessLatent(`${tab}_reprocess`));
-    }
+    id = `#${tab}_generate`;
+    appendContextMenuOption(id, 'Copy to clipboard', () => navigator.clipboard.writeText(document.querySelector(`#${tab}_prompt > label > textarea`).value));
+    appendContextMenuOption(id, 'Generate forever', () => generateForever(`#${tab}_generate`));
+    appendContextMenuOption(id, 'Apply selected style', quickApplyStyle);
+    appendContextMenuOption(id, 'Quick save style', quickSaveStyle);
+    appendContextMenuOption(id, 'nVidia overlay', initNVML);
+    id = `#${tab}_reprocess`;
+    appendContextMenuOption(id, 'Decode full quality', () => reprocessClick(`${tab}`, 'reprocess_decode'), true);
+    appendContextMenuOption(id, 'Refine & HiRes pass', () => reprocessClick(`${tab}`, 'reprocess_refine'), true);
+    appendContextMenuOption(id, 'Face restore', () => reprocessClick(`${tab}`, 'reprocess_face'), true);
   }
   addContextMenuEventListener();
 }

javascript/emerald-paradise.css

@@ -115,8 +115,6 @@ button.selected {background: var(--button-primary-background-fill);}
 #txt2img_checkboxes, #img2img_checkboxes { background-color: transparent; }
 #txt2img_checkboxes, #img2img_checkboxes { margin-bottom: 0.2em; }
 #txt2img_actions_column, #img2img_actions_column { flex-flow: wrap; justify-content: space-between; }
-#txt2img_enqueue_wrapper, #img2img_enqueue_wrapper { min-width: unset; width: 48%; }
-#txt2img_generate_box, #img2img_generate_box { min-width: unset; width: 48%; }
 
 #extras_upscale { margin-top: 10px }
 #txt2img_progress_row > div { min-width: var(--left-column); max-width: var(--left-column); }

javascript/generationParams.js

@@ -1,20 +1,22 @@
 // attaches listeners to the txt2img and img2img galleries to update displayed generation param text when the image changes
 
-function attachGalleryListeners(tab_name) {
-  const gallery = gradioApp().querySelector(`#${tab_name}_gallery`);
+function attachGalleryListeners(tabName) {
+  const gallery = gradioApp().querySelector(`#${tabName}_gallery`);
   if (!gallery) return null;
-  gallery.addEventListener('click', () => setTimeout(() => {
-    log('galleryItemSelected:', tab_name);
-    gradioApp().getElementById(`${tab_name}_generation_info_button`)?.click();
-  }, 500));
+  gallery.addEventListener('click', () => {
+    // log('galleryItemSelected:', tabName);
+    const btn = gradioApp().getElementById(`${tabName}_generation_info_button`);
+    if (btn) btn.click();
+  });
   gallery?.addEventListener('keydown', (e) => {
-    if (e.keyCode === 37 || e.keyCode === 39) gradioApp().getElementById(`${tab_name}_generation_info_button`).click(); // left or right arrow
+    if (e.keyCode === 37 || e.keyCode === 39) gradioApp().getElementById(`${tabName}_generation_info_button`).click(); // left or right arrow
   });
   return gallery;
 }
 
 let txt2img_gallery;
 let img2img_gallery;
+let control_gallery;
 let modal;
 
 async function initiGenerationParams() {
@@ -23,14 +25,17 @@ async function initiGenerationParams() {
 
   const modalObserver = new MutationObserver((mutations) => {
     mutations.forEach((mutationRecord) => {
-      let selectedTab = gradioApp().querySelector('#tabs div button.selected')?.innerText;
-      if (!selectedTab) selectedTab = gradioApp().querySelector('#tabs div button')?.innerText;
-      if (mutationRecord.target.style.display === 'none' && (selectedTab === 'txt2img' || selectedTab === 'img2img')) { gradioApp().getElementById(`${selectedTab}_generation_info_button`)?.click(); }
+      const tabName = getENActiveTab();
+      if (mutationRecord.target.style.display === 'none') {
+        const btn = gradioApp().getElementById(`${tabName}_generation_info_button`);
+        if (btn) btn.click();
+      }
     });
   });
 
   if (!txt2img_gallery) txt2img_gallery = attachGalleryListeners('txt2img');
   if (!img2img_gallery) img2img_gallery = attachGalleryListeners('img2img');
+  if (!control_gallery) control_gallery = attachGalleryListeners('control');
   modalObserver.observe(modal, { attributes: true, attributeFilter: ['style'] });
   log('initGenerationParams');
 }

javascript/imageViewer.js

@@ -65,8 +65,8 @@ async function getExif(el) {
   // let html = `<b>Image</b> <a href="${el.src}" target="_blank">${el.src}</a> <b>Size</b> ${el.naturalWidth}x${el.naturalHeight}<br>`;
   let html = '';
   let params;
-  if (exif.paramters) {
-    params = exif.paramters;
+  if (exif.parameters) {
+    params = exif.parameters;
   } else if (exif.userComment) {
     params = Array.from(exif.userComment)
       .map((c) => String.fromCharCode(c))

javascript/orchid-dreams.css

@@ -115,8 +115,6 @@ button.selected {background: var(--button-primary-background-fill);}
 #txt2img_checkboxes, #img2img_checkboxes { background-color: transparent; }
 #txt2img_checkboxes, #img2img_checkboxes { margin-bottom: 0.2em; }
 #txt2img_actions_column, #img2img_actions_column { flex-flow: wrap; justify-content: space-between; }
-#txt2img_enqueue_wrapper, #img2img_enqueue_wrapper { min-width: unset; width: 48%; }
-#txt2img_generate_box, #img2img_generate_box { min-width: unset; width: 48%; }
 
 #extras_upscale { margin-top: 10px }
 #txt2img_progress_row > div { min-width: var(--left-column); max-width: var(--left-column); }

javascript/progressBar.js

@@ -42,7 +42,8 @@ function checkPaused(state) {
 function setProgress(res) {
   const elements = ['txt2img_generate', 'img2img_generate', 'extras_generate', 'control_generate'];
   const progress = (res?.progress || 0);
-  const job = res?.job || '';
+  let job = res?.job || '';
+  job = job.replace('txt2img', 'Generate').replace('img2img', 'Generate');
   const perc = res && (progress > 0) ? `${Math.round(100.0 * progress)}%` : '';
   let sec = res?.eta || 0;
   let eta = '';

javascript/sdnext.css

@@ -90,17 +90,17 @@ button.custom-button { border-radius: var(--button-large-radius); padding: var(-
 #control-inputs { margin-top: 1em; }
 #txt2img_prompt_container, #img2img_prompt_container, #control_prompt_container { margin-right: var(--layout-gap) }
 #txt2img_footer, #img2img_footer, #control_footer { height: fit-content; display: none; }
-#txt2img_generate_box, #img2img_generate_box, #control_general_box { gap: 0.5em; flex-wrap: wrap-reverse; height: fit-content; }
+#txt2img_generate_box, #img2img_generate_box, #control_generate_box { gap: 0.5em; flex-wrap: unset; min-width: unset; width: 66.6%; }
 #txt2img_actions_column, #img2img_actions_column, #control_actions_column { gap: 0.3em; height: fit-content; }
-#txt2img_generate_box>button, #img2img_generate_box>button, #control_generate_box>button, #txt2img_enqueue, #img2img_enqueue { min-height: 44px !important; max-height: 44px !important; line-height: 1em; }
+#txt2img_generate_box>button, #img2img_generate_box>button, #control_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>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 { display: contents; }
-#txt2img_generate_box, #img2img_generate_box { min-width: unset; width: 66%; }
-#control_generate_box { min-width: unset; width: 100%; }
 #txt2img_actions_column, #img2img_actions_column, #control_actions { flex-flow: wrap; justify-content: space-between; }
-#txt2img_enqueue_wrapper, #img2img_enqueue_wrapper, #control_enqueue_wrapper { min-width: unset !important; width: 32%; }
+
+
 .interrogate-clip { position: absolute; right: 6em; top: 8px; max-width: fit-content; background: none !important; z-index: 50; }
 .interrogate-blip { position: absolute; right: 4em; top: 8px; max-width: fit-content; background: none !important; z-index: 50; }
 .interrogate-col { min-width: 0 !important; max-width: fit-content; margin-right: var(--spacing-xxl); }

javascript/startup.js

@@ -7,7 +7,6 @@ async function initStartup() {
   // all items here are non-blocking async calls
   initModels();
   getUIDefaults();
-  initiGenerationParams();
   initPromptChecker();
   initLogMonitor();
   initContextMenu();
@@ -16,6 +15,7 @@ async function initStartup() {
   initSettings();
   initImageViewer();
   initGallery();
+  initiGenerationParams();
   setupControlUI();
 
   // reconnect server session

javascript/timeless-beige.css

@@ -115,8 +115,6 @@ button.selected {background: var(--button-primary-background-fill);}
 #txt2img_checkboxes, #img2img_checkboxes { background-color: transparent; }
 #txt2img_checkboxes, #img2img_checkboxes { margin-bottom: 0.2em; }
 #txt2img_actions_column, #img2img_actions_column { flex-flow: wrap; justify-content: space-between; }
-#txt2img_enqueue_wrapper, #img2img_enqueue_wrapper { min-width: unset; width: 48%; }
-#txt2img_generate_box, #img2img_generate_box { min-width: unset; width: 48%; }
 
 #extras_upscale { margin-top: 10px }
 #txt2img_progress_row > div { min-width: var(--left-column); max-width: var(--left-column); }

javascript/ui.js

@@ -204,6 +204,8 @@ function submit_txt2img(...args) {
   requestProgress(id, null, gradioApp().getElementById('txt2img_gallery'));
   const res = create_submit_args(args);
   res[0] = id;
+  res[1] = window.submit_state;
+  window.submit_state = '';
   return res;
 }
 
@@ -214,7 +216,9 @@ function submit_img2img(...args) {
   requestProgress(id, null, gradioApp().getElementById('img2img_gallery'));
   const res = create_submit_args(args);
   res[0] = id;
-  res[1] = get_tab_index('mode_img2img');
+  res[1] = window.submit_state;
+  res[2] = get_tab_index('mode_img2img');
+  window.submit_state = '';
   return res;
 }
 
@@ -225,7 +229,9 @@ function submit_control(...args) {
   requestProgress(id, null, gradioApp().getElementById('control_gallery'));
   const res = create_submit_args(args);
   res[0] = id;
-  res[1] = gradioApp().querySelector('#control-tabs > .tab-nav > .selected')?.innerText.toLowerCase() || ''; // selected tab name
+  res[1] = window.submit_state;
+  res[2] = gradioApp().querySelector('#control-tabs > .tab-nav > .selected')?.innerText.toLowerCase() || ''; // selected tab name
+  window.submit_state = '';
   return res;
 }
 
@@ -236,6 +242,7 @@ function submit_postprocessing(...args) {
 }
 
 window.submit = submit_txt2img;
+window.submit_state = '';
 
 function modelmerger(...args) {
   const id = randomId();