new extra networks

javascript/black-orange.css

@@ -39,10 +39,6 @@ div.gradio-container.dark > div.w-full.flex.flex-col.min-h-screen > div { backgr
 .dark fieldset span.text-gray-500, .dark .gr-block.gr-box span.text-gray-500, .dark label.block span { padding: 0; margin-top: -4px; }
 .dark fieldset span.text-gray-500, .dark .gr-block.gr-box span.text-gray-500, .dark label.block span { border-radius: 0;}
 .eta-bar { display: none !important }
-.extra-networks .tab-nav .search { max-height: 2em; }
-.extra-network-cards .card .actions .name { font-weight: 400; font-size: 1.2rem; }
-.extra-network-cards .card { width: 18em; height: 12em; box-shadow: none; }
-.extra-network-cards .card:hover { transform: scale(1.15); transition: all 0.2s ease; z-index: 99; box-shadow: none; }
 svg.feather.feather-image, .feather .feather-image { display: none }
 .gap-2 { padding-top: 8px; }
 .gr-box > div > div > input.gr-text-input { right: 0; width: 4em; padding: 0; top: -12px; border: none; max-height: 20px; }
@@ -56,7 +52,7 @@ svg.feather.feather-image, .feather .feather-image { display: none }
 .tabs { background-color: black; }
 .gradio-button.tool { border-radius: 0; }
 .block.token-counter span { background-color: #222 !important; box-shadow: 2px 2px 2px #111; border: none !important; border-radius: 0; font-size: 0.8rem; }
-.tab-nav { zoom: 130%; margin-bottom: 16px; border-bottom: 2px solid #CE6400 !important; padding-bottom: 2px; }
+.tab-nav { zoom: 120%; margin-bottom: 10px; border-bottom: 2px solid #CE6400 !important; padding-bottom: 2px; }
 .label-wrap { margin: 16px 0px 8px 0px; }
 .gradio-slider input[type="number"] { width: 4.5em; font-size: 0.8rem; }
 #tab_extensions table td, #tab_extensions table th { border: none; padding: 0.5em; }
@@ -68,6 +64,8 @@ svg.feather.feather-image, .feather .feather-image { display: none }
 .progressDiv .progress { border-radius: 0 !important; background: var(--highlight-color); line-height: 3rem; height: 48px; }
 .gallery-item { box-shadow: none !important; }
 .performance { color: #888; }
+.extra-networks { border-left: 2px solid #CE6400 !important; padding-left: 4px; }
+.image-buttons { gap: 10px !important}
 
 /* gradio elements overrides */
 #div.gradio-container.dark { overflow-x: hidden; }
@@ -99,7 +97,6 @@ svg.feather.feather-image, .feather .feather-image { display: none }
 #txt2img_subseed_strength { margin-top: 0; }
 #txtimg_hr_finalres { max-width: 200px; }
 #pnginfo_html2_info { margin-top: -18px; background-color: var(--input-background-fill); padding: var(--input-padding) }
-#txt2img_extra_refresh, #txt2img_extra_close { height: 1.7em; }
 #txt2img_tools > div > button, #img2img_tools > div > button { filter: hue-rotate(180deg) saturate(0.5); }
 
 /* custom elements overrides */

javascript/extraNetworks.js

@@ -1,15 +1,20 @@
+let globalPopup = null;
+let globalPopupInner = null;
+const activePromptTextarea = {};
+
 function setupExtraNetworksForTab(tabname) {
   gradioApp().querySelector(`#${tabname}_extra_tabs`).classList.add('extra-networks');
   const tabs = gradioApp().querySelector(`#${tabname}_extra_tabs > div`);
   const search = gradioApp().querySelector(`#${tabname}_extra_search textarea`);
   const refresh = gradioApp().getElementById(`${tabname}_extra_refresh`);
-  const descriptInput = gradioApp().getElementById(`${tabname}_description_input`);
+  const description = gradioApp().getElementById(`${tabname}_description`);
   const close = gradioApp().getElementById(`${tabname}_extra_close`);
   search.classList.add('search');
-  tabs.appendChild(search);
+  description.classList.add('description');
   tabs.appendChild(refresh);
   tabs.appendChild(close);
-  tabs.appendChild(descriptInput);
+  tabs.appendChild(search);
+  tabs.appendChild(description);
   search.addEventListener('input', (evt) => {
     searchTerm = search.value.toLowerCase();
     gradioApp().querySelectorAll(`#${tabname}_extra_tabs div.card`).forEach((elem) => {
@@ -17,13 +22,47 @@ function setupExtraNetworksForTab(tabname) {
       elem.style.display = text.indexOf(searchTerm) == -1 ? 'none' : '';
     });
   });
+  intersectionObserver = new IntersectionObserver((entries) => {
+    // if (entries[0].intersectionRatio <= 0) onHidden();
+    if (entries[0].intersectionRatio > 0) {
+      for (el of Array.from(gradioApp().querySelectorAll('.extra-network-cards'))) {
+        const rect = el.getBoundingClientRect();
+        if (rect.top > 0) {
+          const en = gradioApp().getElementById(`${tabname}_extra_networks`);
+          if (!en) return
+          if (window.opts.extra_networks_card_cover == 'cover') {
+            en.style.zIndex = 0;
+            en.style.position = 'absolute';
+            en.style.right = 'unset';
+            en.style.width = 'unset';
+            el.style.height = document.body.offsetHeight - el.getBoundingClientRect().top + 'px'; 
+            gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 'unset'
+          } if (window.opts.extra_networks_card_cover == 'sidebar') {
+            en.style.zIndex = 9999;
+            en.style.position = 'absolute';
+            en.style.right = '0';
+            en.style.width = '38vw';
+            el.style.height = gradioApp().getElementById(`${tabname}_settings`).offsetHeight - 90 + 'px'; 
+            gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = '60vw'
+          } else {
+            en.style.zIndex = 0;
+            en.style.position = 'relative';
+            en.style.right = 'unset';
+            en.style.width = 'unset';
+            el.style.height = window.innerHeight - el.getBoundingClientRect().top + 'px'; 
+            gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 'unset'
+          }
+        }
+      }
+    }
+  });
+  intersectionObserver.observe(search); // monitor visibility of 
 }
 
-const activePromptTextarea = {};
-
 function setupExtraNetworks() {
   setupExtraNetworksForTab('txt2img');
   setupExtraNetworksForTab('img2img');
+  
   function registerPrompt(tabname, id) {
     const textarea = gradioApp().querySelector(`#${id} > label > textarea`);
     if (!activePromptTextarea[tabname]) activePromptTextarea[tabname] = textarea;
@@ -31,6 +70,7 @@ function setupExtraNetworks() {
       activePromptTextarea[tabname] = textarea;
     });
   }
+
   registerPrompt('txt2img', 'txt2img_prompt');
   registerPrompt('txt2img', 'txt2img_neg_prompt');
   registerPrompt('img2img', 'img2img_prompt');
@@ -93,9 +133,10 @@ function saveCardPreview(event, tabname, filename) {
 }
 
 function saveCardDescription(event, tabname, filename, descript) {
+  console.log('saveCardDescription', event, tabname, filename, descript);
   const textarea = gradioApp().querySelector(`#${tabname}_description_filename  > label > textarea`);
   const button = gradioApp().getElementById(`${tabname}_save_description`);
-  const description = gradioApp().getElementById(`${tabname}_description_input`);
+  const description = gradioApp().getElementById(`${tabname}_description`);
   textarea.value = filename;
   description.value = descript;
   updateInput(textarea);
@@ -105,13 +146,15 @@ function saveCardDescription(event, tabname, filename, descript) {
 }
 
 function readCardDescription(event, tabname, filename, descript, extraPage, cardName) {
+  console.log('readCardDescription', event, tabname, filename, descript, extraPage, cardName);
   const textarea = gradioApp().querySelector(`#${tabname}_description_filename  > label > textarea`);
-  const description_textarea = gradioApp().querySelector(`#${tabname}_description_input > label > textarea`);
+  const description = gradioApp().querySelector(`#${tabname}_description > label > textarea`);
   const button = gradioApp().getElementById(`${tabname}_read_description`);
   textarea.value = filename;
-  description_textarea.value = descript;
+  description.value = descript;
+  console.log(textarea.value, description.value);
   updateInput(textarea);
-  updateInput(description_textarea);
+  updateInput(description);
   button.click();
   event.stopPropagation();
   event.preventDefault();
@@ -125,8 +168,6 @@ function extraNetworksSearchButton(tabs_id, event) {
   updateInput(searchTextarea);
 }
 
-let globalPopup = null;
-let globalPopupInner = null;
 function popup(contents) {
   if (!globalPopup) {
     globalPopup = document.createElement('div');
@@ -150,7 +191,7 @@ function popup(contents) {
 
 function readCardMetadata(event, extraPage, cardName) {
   requestGet('./sd_extra_networks/metadata', { page: extraPage, item: cardName }, (data) => {
-    if (data && data.metadata) {
+    if (data?.metadata && (typeof(data?.metadata) === 'string')) {
       elem = document.createElement('pre');
       elem.classList.add('popup-metadata');
       elem.textContent = data.metadata;
@@ -161,6 +202,19 @@ function readCardMetadata(event, extraPage, cardName) {
   event.preventDefault();
 }
 
+function readCardInformation(event, extraPage, cardName) {
+  requestGet('./sd_extra_networks/info', { page: extraPage, item: cardName }, (data) => {
+    if (data?.info && (typeof(data?.info) === 'string')) {
+      elem = document.createElement('pre');
+      elem.classList.add('popup-metadata');
+      elem.textContent = data.info;
+      popup(elem);
+    }
+  }, () => {});
+  event.stopPropagation();
+  event.preventDefault();
+}
+
 function requestGet(url, data, handler, errorHandler) {
   const xhr = new XMLHttpRequest();
   const args = Object.keys(data).map((k) => `${encodeURIComponent(k)}=${encodeURIComponent(data[k])}`).join('&');

javascript/logMonitor.js

@@ -1,11 +1,15 @@
 let logMonitorEl = null;
+let logMonitorStatus = true;
 
 async function logMonitor() {
-  setTimeout(logMonitor, opts.logmonitor_refresh_period);
+  if (logMonitorStatus) setTimeout(logMonitor, opts.logmonitor_refresh_period);
   if (logMonitorEl) logMonitorEl.parentElement.style.display = opts.logmonitor_show ? 'block' : 'none';
   if (!opts.logmonitor_show) return;
-  const res = await fetch('/sdapi/v1/log?clear=True');
+  logMonitorStatus = false;
+  let res;
+  try { res = await fetch('/sdapi/v1/log?clear=True'); } catch {}
   if (res?.ok) {
+    logMonitorStatus = true;
     if (!logMonitorEl) logMonitorEl = document.getElementById('logMonitorData');
     if (!logMonitorEl) return;
     logMonitorEl.parentElement.style.display = 'block';

javascript/style.css

@@ -1,6 +1,7 @@
 :root, .dark{ --checkbox-label-gap: 0.25em 0.1em; --section-header-text-size: 12pt; --block-background-fill: transparent;}
 a { font-weight: bold; cursor: pointer; }
-div.gradio-container{ max-width: unset !important; }
+div.gradio-container{ max-width: unset !important; padding: 8px !important; }
+div.tabitem { padding: 0 !important; }
 div.form{ border-width: 0; box-shadow: none; background: transparent; overflow: visible; gap: 0.5em; }
 div.compact{ gap: 1em; }
 div.gradio-html.min{ min-height: 0; }
@@ -33,6 +34,7 @@ div.gradio-html.min{ min-height: 0; }
 .gradio-button.secondary-down:hover{ background: var(--button-secondary-background-fill-hover); color: var(--button-secondary-text-color-hover); }
 .checkboxes-row{ margin-bottom: 0.5em; margin-left: 0em; }
 .checkboxes-row > div{ flex: 0; white-space: nowrap; min-width: auto; }
+
 button.custom-button{
     border-radius: var(--button-large-radius);
     padding: var(--button-large-padding);
@@ -141,30 +143,22 @@ div#extras_scale_to_tab div.form{
   margin-bottom: 0.9em;
 }
 
-#img2img_unused_scale_by_slider{
+#img2img_unused_scale_by_slider {
   visibility: hidden;
   width: 0.5em;
   max-width: 0.5em;
   min-width: 0.5em;
 }
 
-.extra-network-cards{
-  height: fit-content;
-  max-height: 50vh;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  resize: vertical;
-}
-
 .inactive{
     opacity: 0.5;
 }
 
-[id$=_column_batch]{
+[id$=_column_batch] {
     min-width: min(13.5em, 100%) !important;
 }
 
-div.dimensions-tools{
+div.dimensions-tools {
     min-width: 0 !important;
     max-width: fit-content;
     flex-direction: row;
@@ -344,38 +338,15 @@ div#extras_scale_to_tab div.form{
     padding: 0 0.5em;
 }
 
-.livePreview{
-    position: absolute;
-    z-index: 300;
-    background-color: transparent;
-    width: -webkit-fill-available;
-}
-
-.dark .livePreview{
-    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-}
-
-.livePreview img{
-    position: absolute;
-    object-fit: contain;
-    width: 100%;
-    height: 100%;
-}
-
-/* fullscreen popup (ie in Lora's (i) button) */
-
-.popup-metadata{
-    color: black;
-    background: white;
-    display: inline-block;
-    padding: 1em;
-    white-space: pre-wrap;
-}
+.livePreview { position: absolute; z-index: 300; background-color: transparent; width: -webkit-fill-available; }
+.livePreview img { position: absolute; object-fit: contain; width: 100%; height: 100%; }
+.dark .livePreview { background-color: rgb(17 24 39 / var(--tw-bg-opacity)); }
+.popup-metadata { color: black; background: white; display: inline-block; padding: 1em; white-space: pre-wrap; font-size: 0.8em; opacity: 80%; }
 
 .global-popup{
     display: flex;
     position: fixed;
-    z-index: 1001;
+    z-index: 10001;
     left: 0;
     top: 0;
     width: 100%;
@@ -548,7 +519,6 @@ table.settings-value-table td{
 
 
 /* extensions */
-
 #tab_extensions table{ border-collapse: collapse; }
 #tab_extensions table td, #tab_extensions table th { border: 1px solid #ccc; padding: 0.25em 0.5em; }
 #tab_extensions table input[type="checkbox"] { margin-right: 0.5em; appearance: checkbox; }
@@ -563,87 +533,26 @@ table.settings-value-table td{
 .extension-button { font-size: 95% !important; width: 6em; }
 
 /* extra networks */
-.extra-networks > div > [id *= '_extra_']{ margin: 0.3em; }
-.extra-network-subdirs { padding: 0.2em 0.35em; }
-.extra-network-subdirs button { margin: 0 0.15em; box-shadow: none; }
-.extra-networks .tab-nav .search { display: inline-block; max-width: 16em; margin: 0.3em; align-self: center; width: 16em; }
-#txt2img_extra_view, #img2img_extra_view { width: auto; }
-.extra-network-cards .nocards, .extra-network-thumbs .nocards{ margin: 1.25em 0.5em 0.5em 0.5em; }
-.extra-network-cards .nocards h1, .extra-network-thumbs .nocards h1{ font-size: 1.5em; margin-bottom: 1em; }
-.extra-network-cards .nocards li, .extra-network-thumbs .nocards li{ margin-left: 0.5em; }
-.extra-network-cards .card .metadata-button, .extra-network-thumbs .card .metadata-button{
-    display: none;
-    position: absolute;
-    right: 0;
-    color: white;
-    text-shadow: 2px 2px 3px black;
-    padding: 0.25em;
-    font-size: 22pt;
-    width: 1.5em;
-}
-.extra-network-cards .card:hover .metadata-button, .extra-network-thumbs .card:hover .metadata-button{ display: inline-block; }
-.extra-network-thumbs { display: flex; flex-flow: row wrap; gap: 10px; }
-.extra-network-cards .card .additional a:hover, .extra-network-thumbs .card .additional a:hover { color: darkorange }
-.extra-network-thumbs .card {
-    display: inline-block;
-    height: 9em;
-    width: 9em;
-    cursor: pointer;
-    background-image: url('../html/card-no-preview.png');
-    background-size: cover;
-    background-position: center center;
-    position: relative;
-}
-.extra-network-cards .card .additional, .extra-network-thumbs .card .additional { white-space: nowrap; overflow: hidden; }
-.extra-network-thumbs .card:hover .additional a { display: inline-block; }
-.extra-network-thumbs .actions .name {
-    position: absolute;
-    bottom: 0;
-    font-size: 10px;
-    padding: 3px;
-    width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    background: rgba(0,0,0,.5);
-    color: white;
-}
-.extra-network-thumbs .card:hover .actions .name { white-space: normal; word-break: break-all; }
-.extra-network-cards .card{
-    display: inline-block;
-    margin: 0.5em;
-    width: 16em;
-    height: 24em;
-    box-shadow: 0 0 5px rgba(128, 128, 128, 0.5);
-    border-radius: 0.2em;
-    position: relative;
-    background-size: cover;
-    background-position: center;
-    overflow: hidden;
-    cursor: pointer;
-    background-image: url('../html/card-no-preview.png')
-}
-.extra-network-cards .card:hover { box-shadow: 0 0 2px 0.3em rgba(0, 128, 255, 0.35); }
-.extra-network-cards .card .actions .additional, .extra-network-thumbs .card .actions .additional{ display: none; }
-.extra-network-cards .card .actions{
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: 0.5em;
-    background: rgba(0,0,0,0.5);
-    box-shadow: 0 0 0.25em 0.25em rgba(0,0,0,0.5);
-    text-shadow: 0 0 0.2em black;
-}
-.extra-network-cards .card .actions *{ color: white; }
-.extra-network-cards .card .actions:hover { box-shadow: 0 0 0.75em 0.75em rgba(0,0,0,0.5) !important; }
-.extra-network-cards .card .actions .name { font-size: 1.7em; font-weight: bold; line-break: anywhere; }
-.extra-network-cards .card .actions .description { display: block; max-height: 3em; white-space: pre-wrap; line-height: 1.1; }
-.extra-network-cards .card .actions .description:hover { max-height: none; }
-.extra-network-cards .card .actions:hover .additional, .extra-network-thumbs .card:hover .additional{ display: block; }
-.extra-network-cards .card ul{ margin: 0.25em 0 0.75em 0.25em; cursor: unset; }
-.extra-network-cards .card ul a{ cursor: pointer; }
-.extra-network-cards .card ul a:hover{ color: red; }
+.extra-networks > div { margin: 0; border-bottom: none !important; }
+.extra-networks .search { width: 150px; position: absolute; right: 0; height: unset !important; }
+.extra-networks .description { margin-top: 8px; }
+.extra-networks .tab-nav > button { margin-right: 0; height: auto; padding: 2px 4px 2px 4px; }
+.extra-networks-tab { padding: 0 !important; }
+.extra-network-subdirs { background: var(--input-background-fill); }
+.extra-networks-page { display: flex }
+.extra-networks .custom-button { min-width: 60px; width: 100%; background: none; justify-content: left; padding: 2px 8px 2px 8px; box-shadow: none; }
+.extra-networks .custom-button:hover { background: var(--button-primary-background-fill) }
+.extra-network-cards { display: flex; flex-wrap: wrap; height: 50vh; overflow-y: scroll; overflow-x: hidden; scroll-snap-type: y mandatory; }
+.extra-network-cards .card { height: fit-content; margin: 0.5em; position: relative; scroll-snap-align: start; scroll-margin-top: 0; }
+.extra-network-cards .card .overlay { position: absolute; bottom: 0; padding: 0.2em; z-index: 10; width: 100%; background: none; }
+.extra-network-cards .card:hover .overlay { background: rgba(0, 0, 0, 0.40); }
+.extra-network-cards .card .overlay .name { font-size: 1.2em; font-weight: bold; line-break: anywhere; text-shadow: 1px 1px black; }
+.extra-network-cards .card .overlay .actions { font-size: 1.8em; display: none; text-align-last: justify; cursor: pointer; word-spacing: -6px; }
+.extra-network-cards .card:hover .overlay .actions { display: block; }
+.extra-network-cards .card .overlay .description { line-break: anywhere; display: none; }
+.extra-network-cards .card:hover .overlay .description { display: block; }
+.extra-network-cards .card .preview { box-shadow: var(--button-shadow); min-height: 30px; }
+.extra-network-cards .card:hover .preview { box-shadow: none; }
 
 /* controlnet */
 .controlnet_control_type .controlnet_control_type_filter_group .wrap:last-of-type { display: grid; grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }