post merge items

CHANGELOG.md

@@ -5,6 +5,10 @@
 - reference styles
 - quick apply style
 
+## Update for 2024-03-20
+
+- Make metadata in full screen viewer optional
+
 ## Update for 2024-03-19
 
 ### Highlights 2024-03-19
@@ -32,7 +36,7 @@ What else?
 - **Styles**: Not just for prompts! Styles can apply *generate parameters* as templates and can be used to *apply wildcards* to prompts  
 improvements, Additional API endpoints  
 - Given the high interest in [ZLUDA](https://github.com/vosen/ZLUDA) engine introduced in last release we've updated much more flexible/automatic install procedure (see [wiki](https://github.com/vladmandic/automatic/wiki/ZLUDA) for details)  
-- Plus Additional Improvements such as: Smooth tiling, Refine/HiRes workflow improvements, Control workflow 
+- Plus Additional Improvements such as: Smooth tiling, Refine/HiRes workflow improvements, Control workflow  
 
 Further details:  
 - For basic instructions, see [README](https://github.com/vladmandic/automatic/blob/master/README.md)  

javascript/base.css

@@ -116,6 +116,15 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt
 .nvml { position: fixed; bottom: 10px; right: 10px; background: var(--background-fill-primary); border: 1px solid var(--button-primary-border-color); padding: 6px; color: var(--button-primary-text-color);
   font-size: 0.7em; z-index: 50; font-family: monospace; display: none; }
 
+/* image browser */
+#tab-browser-folders { width: max-content; }
+#tab-browser-files { display: block; overflow-x: hidden !important; overflow-y: auto !important; height: 75vh; }
+#tab-browser-image { height: 100%; }
+#tab-browser-search { padding: 0; }
+#tab-browser-status { align-content: center; text-align: right; background: var(--input-background-fill); padding-right: 1em; margin-left: -1em; }
+div:has(>#tab-browser-folders) { flex-grow: 0 !important; background-color: var(--input-background-fill); min-width: max-content !important; }
+.browser-separator { background-color: var(--input-background-fill); font-size: larger; padding: 0.5em; display: block !important; } 
+
 /* loader */
 .splash { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000; display: block; text-align: center; }
 .motd { margin-top: 2em; color: var(--body-text-color-subdued); font-family: monospace; font-variant: all-petite-caps; }

javascript/imageViewer.js

@@ -54,22 +54,35 @@ function modalKeyHandler(event) {
   event.stopPropagation();
 }
 
+async function getExif(el) {
+  const exif = await window.exifr.parse(el, { userComment: true });
+  // 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;
+  } else if (exif.userComment) {
+    params = Array.from(exif.userComment)
+      .map((c) => String.fromCharCode(c))
+      .filter((c) => c !== '\x00')
+      .join('')
+      .replace('UNICODE', '');
+  } else {
+    params = '';
+  }
+  if (params.length > 0) html += `<b>Prompt</b> ${params || ''}<br>`;
+  html = html.replace('Negative prompt:', '<br><b>Negative</b>');
+  html = html.replace('Steps:', '<br><b>Params</b> Steps:');
+  html = html.replaceAll('\n', '<br>');
+  html = html.replaceAll('<br><br>', '<br>');
+  return html;
+}
+window.getExif = getExif;
+
 async function displayExif(el) {
   const modalExif = gradioApp().getElementById('modalExif');
-  modalExif.innerHTML = '';
-  const exif = await window.exifr.parse(el);
-  if (!exif) return;
-  // log('exif', exif);
-  try {
-    let html = `
-      <b>Image</b> <a href="${el.src}" target="_blank">${el.src}</a> <b>Size</b> ${el.naturalWidth}x${el.naturalHeight}<br>
-      <b>Prompt</b> ${exif.parameters || ''}<br>
-      `;
-    html = html.replace('\n', '<br>');
-    html = html.replace('Negative prompt:', '<br><b>Negative</b>');
-    html = html.replace('Steps:', '<br><b>Params</b> Steps:');
-    modalExif.innerHTML = html;
-  } catch (e) { }
+  const html = await getExif(el);
+  modalExif.innerHTML = html;
 }
 
 function showModal(event) {
@@ -80,7 +93,7 @@ function showModal(event) {
   modalImage.onload = () => {
     previewInstance.moveTo(0, 0);
     modalPreviewZone.focus();
-    displayExif(modalImage);
+    if (opts.viewer_show_metadata) displayExif(modalImage);
   };
   modalImage.src = source.src;
   if (modalImage.style.display === 'none') lb.style.setProperty('background-image', `url(${source.src})`);
@@ -225,7 +238,7 @@ async function initImageViewer() {
   // exif
   const modalExif = document.createElement('div');
   modalExif.id = 'modalExif';
-  modalExif.style = 'position: absolute; bottom: 0px; width: 98%; background-color: rgba(0, 0, 0, 0.5); color: var(--neutral-300); padding: 1em; font-size: small;';
+  modalExif.style = 'position: absolute; bottom: 0px; width: 98%; background-color: rgba(0, 0, 0, 0.5); color: var(--neutral-300); padding: 1em; font-size: small; line-height: 1.2em;';
 
   // handlers
   modalPreviewZone.addEventListener('mousedown', () => { previewDrag = false; });

modules/shared.py

@@ -529,6 +529,10 @@ options_templates.update(options_section(('saving-images', "Image Options"), {
     "font": OptionInfo("", "Font file"),
     "font_color": OptionInfo("#FFFFFF", "Font color", gr.ColorPicker, {}),
 
+    "image_sep_browser": OptionInfo("<h2>Image Browser</h2>", "", gr.HTML),
+    "browser_folders": OptionInfo("", "Additional image browser folders"),
+    "viewer_show_metadata": OptionInfo(True, "Show metadata in full screen image browser"),
+
     "save_sep_options": OptionInfo("<h2>Intermediate Image Saving</h2>", "", gr.HTML),
     "save_init_img": OptionInfo(False, "Save init images"),
     "save_images_before_highres_fix": OptionInfo(False, "Save image before hires"),
@@ -648,9 +652,7 @@ options_templates.update(options_section(('sampler-params', "Sampler Settings"),
     'uni_pc_variant': OptionInfo("bh1", "UniPC variant", gr.Radio, {"choices": ["bh1", "bh2", "vary_coeff"]}),
     'uni_pc_skip_type': OptionInfo("time_uniform", "UniPC skip type", gr.Radio, {"choices": ["time_uniform", "time_quadratic", "logSNR"]}),
     "ddim_discretize": OptionInfo('uniform', "DDIM discretize img2img", gr.Radio, {"choices": ['uniform', 'quad']}),
-    # TODO pad_cond_uncond implementation missing for original backend
     "pad_cond_uncond": OptionInfo(True, "Pad prompt and negative prompt to be same length", gr.Checkbox, {"visible": False}),
-    # TODO batch_cond-uncond implementation missing for original backend
     "batch_cond_uncond": OptionInfo(True, "Do conditional and unconditional denoising in one batch", gr.Checkbox, {"visible": False}),
 }))