css optimizations

javascript/black-orange.css

@@ -1,5 +1,5 @@
 /* generic html tags */
-:root { --font: system-ui, "Segoe UI", "Roboto", "sans-serif"; }
+:root { --font: "Source Sans Pro", 'ui-sans-serif', 'system-ui', "Roboto", sans-serif; }
 html { font-size: 16px; }
 body, button, input, select, textarea { font-family: var(--font);}
 button { font-size: 1.2rem; }
@@ -86,7 +86,8 @@ svg.feather.feather-image, .feather .feather-image { display: none }
 #txt2img_cfg_scale { min-width: 200px; }
 #txt2img_checkboxes, #img2img_checkboxes { background-color: transparent; }
 #txt2img_checkboxes, #img2img_checkboxes { margin-bottom: 0.2em; }
-#txt2img_gallery, #img2img_gallery, #extras_gallery { background: black !important; padding: 0; margin: 0; object-fit: contain; box-shadow: none; min-height: 0; }
+#txt2img_gallery, #img2img_gallery, #extras_gallery { padding: 0; margin: 0; object-fit: contain; box-shadow: none; min-height: 0; }
+
 #extras_upscale { margin-top: 10px }
 #txt2img_progress_row > div { min-width: var(--left-column); max-width: var(--left-column); }
 #txt2img_results, #img2img_results, #extras_results { background-color: black; padding: 0; }

javascript/extraNetworks.js

@@ -24,11 +24,12 @@ function setupExtraNetworksForTab(tabname) {
   });
   intersectionObserver = new IntersectionObserver((entries) => {
     // if (entries[0].intersectionRatio <= 0) onHidden();
+    const en = gradioApp().getElementById(`${tabname}_extra_networks`);
     if (entries[0].intersectionRatio > 0) {
       for (el of Array.from(gradioApp().querySelectorAll('.extra-network-cards'))) {
         const rect = el.getBoundingClientRect();
+        en.style.transition = 'width 0.2s ease';
         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;
@@ -54,6 +55,9 @@ function setupExtraNetworksForTab(tabname) {
           }
         }
       }
+    } else {
+      en.style.width = 0;
+      gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 'unset'
     }
   });
   intersectionObserver.observe(search); // monitor visibility of 

javascript/logMonitor.js

@@ -33,7 +33,7 @@ async function logMonitorCreate() {
   if (!el) return;
   el.classList.add('log-monitor');
   el.innerHTML = `
-    <table style="width: 100%">
+    <table style="width: 100%;">
       <thead style="display: block; text-align: left; border-bottom: solid 1px var(--button-primary-border-color)">
         <tr>
           <th style="width: 170px">Time</th>

javascript/style.css

@@ -7,7 +7,6 @@ div.compact{ gap: 1em; }
 div.gradio-html.min{ min-height: 0; }
 .block.gradio-checkbox { margin: 0.75em 1.5em 0 0; }
 .block.gradio-dropdown, .block.gradio-slider, .block.gradio-checkbox, .block.gradio-textbox, .block.gradio-radio, .block.gradio-checkboxgroup, .block.gradio-number, .block.gradio-colorpicker { border-width: 0 !important; box-shadow: none !important;}
-.block.gradio-gallery{ background: var(--input-background-fill); }
 .block.padded:not(.gradio-accordion) { padding: 0 !important; }
 .compact{ background: transparent !important; padding: 0 !important; }
 .dark .gradio-dropdown ul.options li.item:not(:has(.hide)) { background-color: var(--neutral-900); }
@@ -25,7 +24,8 @@ div.gradio-html.min{ min-height: 0; }
 .gradio-dropdown.multiselect div.wrap-inner {	overflow-x: hidden; overflow-y: auto; max-height: 50vh; overflow-wrap: anywhere; }
 .gradio-html div.wrap{ height: 100%; }
 .gradio-slider input[type="number"]{ width: 6em; }
-.hidden{ display: none; }
+.hidden { display: none; }
+footer { display: none; }
 
 /* general styled components */
 .gradio-button.tool{ max-width: 2.3em;  min-width: 2.3em !important; height: 2.3em; align-self: end; line-height: 1em; border-radius: 0.5em; }
@@ -100,7 +100,7 @@ button.custom-button{
 }
 
 #txt2img_gallery img, #img2img_gallery img, #extras_gallery img { object-fit: scale-down; width: -webkit-fill-available !important; }
-
+#txt2img_footer, #img2img_footer, #extras_footer{ height: fit-content; display: none; }
 #txt2img_generate_box, #img2img_generate_box { gap: 0.5em; flex-wrap: wrap-reverse; }
 #txt2img_actions_column, #img2img_actions_column { gap: 0.5em; }
 #txt2img_generate_box > button, #img2img_generate_box > button { height: 2.2em; line-height: 0; }
@@ -546,10 +546,10 @@ table.settings-value-table td{
 .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 .name { font-size: 1.2em; font-weight: bold; line-break: anywhere; text-shadow: 1px 1px black; color: white; }
 .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 .overlay .description { line-break: anywhere; display: none; color: white; }
 .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; }
@@ -585,3 +585,4 @@ div.controlnet_main_options { display: grid; grid-template-columns: 1fr 1fr; gri
   font-size: 0.85em;
 }
 .log-monitor td, .log-monitor th { padding-left: 1em; }
+.logo { background-image: url("logo.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; }

javascript/ui.js

@@ -8,6 +8,14 @@ function set_theme(theme) {
   if (!gradioURL.includes('?__theme=')) window.location.replace(`${gradioURL}?__theme=${theme}`);
 }
 
+function clip_gallery_urls(gallery) {
+  const files = gallery.map((v) => v.data);
+  navigator.clipboard.writeText(JSON.stringify(files)).then(
+    () => console.log('clipboard set:', files),
+    (err) => console.log('clipboard error:', files, err)
+  );
+}
+
 function all_gallery_buttons() {
   const allGalleryButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small');
   const visibleGalleryButtons = [];
@@ -113,9 +121,18 @@ function create_submit_args(args) {
 
 function showSubmitButtons(tabname, show) {}
 
+function clearGallery(tabname) {
+  const gallery = gradioApp().getElementById(`${tabname}_gallery`)
+  gallery.classList.remove('logo');
+  gallery.style.height = window.innerHeight - gallery.getBoundingClientRect().top - 200 + 'px'
+  const footer = gradioApp().getElementById(`${tabname}_footer`)
+  footer.style.display = 'flex';
+}
+
 function submit(...args) {
   console.log('Submit txt2img');
   rememberGallerySelection('txt2img_gallery');
+  clearGallery('txt2img');
   const id = randomId();
   requestProgress(id, null, gradioApp().getElementById('txt2img_gallery'));
   const res = create_submit_args(args);
@@ -126,6 +143,7 @@ function submit(...args) {
 function submit_img2img(...args) {
   console.log('Submit img2img');
   rememberGallerySelection('img2img_gallery');
+  clearGallery('img2img');
   const id = randomId();
   requestProgress(id, null, gradioApp().getElementById('img2img_gallery'));
   const res = create_submit_args(args);
@@ -134,6 +152,13 @@ function submit_img2img(...args) {
   return res;
 }
 
+function submit_postprocessing(...args) {
+  console.log('Submit extras');
+  clearGallery('extras');
+  return args
+}
+
+
 function modelmerger(...args) {
   const id = randomId();
   const res = create_submit_args(args);