update gradio and add batch img2img

This commit is contained in:
Vladimir Mandic
2023-08-25 16:36:45 +00:00
parent 8ef4aa7a4a
commit e810d59fb8
12 changed files with 36 additions and 19 deletions
+10 -8
View File
@@ -3,12 +3,12 @@ a { font-weight: bold; cursor: pointer; }
h2 { margin-top: 1em !important; font-size: 1.4em !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 1em; }
div.form { border-width: 0; box-shadow: none; background: transparent; overflow: visible; gap: 0.5em 1em; flex-grow: 1 !important; }
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.padded:not(.gradio-accordion) { padding: 0 !important; }
.block.padded:not(.gradio-accordion) { padding: 0 !important; margin-right: 0; min-width: 100px !important; }
.compact{ background: transparent !important; padding: 0 !important; }
.dark .gradio-dropdown ul.options li.item:not(:has(.hide)) { background-color: var(--neutral-900); }
.gap.compact{ padding: 0; gap: 0.2em 0; }
@@ -24,7 +24,7 @@ div.gradio-html.min{ min-height: 0; }
.gradio-dropdown.multiselect .token-remove.remove-all.remove-all{ display: flex; }
.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; }
.gradio-slider input[type="number"]{ width: 6em; margin-left: 0.5em; }
.hidden { display: none; }
footer { display: none; }
td { border-bottom: none !important; }
@@ -34,7 +34,7 @@ td { border-bottom: none !important; }
.gradio-button.secondary-down{ background: var(--button-secondary-background-fill); color: var(--button-secondary-text-color); }
.gradio-button.secondary-down, .gradio-button.secondary-down:hover{ box-shadow: 1px 1px 1px rgba(0,0,0,0.25) inset, 0px 0px 3px rgba(0,0,0,0.15) inset; }
.gradio-button.secondary-down:hover{ background: var(--button-secondary-background-fill-hover); color: var(--button-secondary-text-color-hover); }
.checkboxes-row { margin-bottom: 1em; gap: 0 !important; justify-content: space-around; }
.checkboxes-row { margin-bottom: 1em; gap: 0 !important; justify-content: space-around; flex-wrap: unset !important; }
.checkboxes-row > div{ flex: 0; white-space: nowrap; min-width: auto; }
button.custom-button{
@@ -78,10 +78,11 @@ button.custom-button{
#txt2img_generate_line2 > button, #img2img_generate_line2 > button, #extras_generate_box > button { height: 2.2em; line-height: 0; min-width: unset; display: block !important; }
#txt2img_tools > div, #img2img_tools > div { justify-content: space-around; margin-top: 0.5em; margin-bottom: 0em; }
#txt2img_tools > div > button, #img2img_tools > div > button { scale: 120%; }
#txt2img_prompt, #txt2img_neg_prompt, #img2img_prompt, #img2img_neg_prompt { display: contents; }
.interrogate-col{ min-width: 0 !important; max-width: fit-content; gap: 0.5em; }
.interrogate-col > button{ flex: 1; }
#sampler_selection_img2img { margin-top: 1em; }
#txtimg_hr_finalres{ min-height: 0 !important; padding: .625rem .75rem; margin-left: -0.75em }
#txtimg_hr_finalres{ min-height: 0 !important; }
#img2img_scale_resolution_preview.block{ display: flex; align-items: end; }
#txtimg_hr_finalres .resolution, #img2img_scale_resolution_preview .resolution{ font-weight: bold; }
div#extras_scale_to_tab div.form{ flex-direction: row; }
@@ -119,8 +120,8 @@ div#extras_scale_to_tab div.form{ flex-direction: row; }
#quicksettings > button { margin-left: -0.5em; }
#settings { display: flex; flex-flow: row wrap; gap: var(--layout-gap); }
#settings div { border: none; }
#settings > div.tab-content { flex: 100000 0 75%; }
#settings div { border: none; min-width: max-content; overflow-x: auto; }
#settings > div.tab-content { flex: 10 0 75%; }
#settings > div.tab-content > div { border: none; padding: 0; }
#settings > div.tab-nav { display: grid; grid-template-columns: repeat(auto-fill, .3em minmax(10em, 1fr)); flex: 1 0 auto; width: 12em; align-self: flex-start; gap: var(--spacing-md); }
#settings > div.tab-nav button { display: block; border: none; text-align: left; white-space: initial; padding: 0; }
@@ -128,12 +129,13 @@ div#extras_scale_to_tab div.form{ flex-direction: row; }
#settings .block.gradio-checkbox { margin: 0; width: auto; }
#settings .dirtyable { display: grid; grid-template-columns: .3em auto; gap: .5em; }
#settings .dirtyable.hidden { display: none; }
#settings .modification-indicator { width: 100%; height: 100%; border-radius: 1em !important; padding: 0; width: 0 }
#settings .modification-indicator { height: 1.2em; border-radius: 1em !important; padding: 0; width: 0; margin-right: 0.5em; }
#settings .modification-indicator:disabled { visibility: hidden; }
#settings .modification-indicator.unsaved { background: var(--color-accent-soft); width: 4px; }
#settings .modification-indicator.changed { background: var(--color-accent); width: 4px; }
#settings .modification-indicator.changed.unsaved { background-image: linear-gradient(var(--color-accent) 25%, var(--color-accent-soft) 75%); width: 4px; }
#settings_result { margin: 0 1.2em; }
.styler { flex-direction: unset !important; }
/* live preview */
.progressDiv{ position: relative; height: 20px; background: #b4c0cc; margin-bottom: -3px; }