Skip to content

Commit

Permalink
UI: Fixes for Gradio 4.7.1/4.8.0 update (#2024)
Browse files Browse the repository at this point in the history 
* Upgrade Gradio pin from 4.7.1 to 4.80.
* Make Nod AI logos visible again.
* Remove image toolbars from png import boxes.
* Set Input Images on img2img, outpaint and upscaler tabs to be upload
only.
* Change Image control to an ImageEditor control for masking on the
inpaint tab. Remove previous height restriction as this hides the
editing controls.
* Move Input Image/Masked Image on img2img, inpaint, outpaint and
upscaler tabs to be the first control on their tabs.
* Remove download buttons from all galleries as they download some
html rather the image (gradio issue #6595)
* Remove add new row and column from Output Gallery parameters
dataframe.
* Add partial workaround for not being able to select text in the Output
Gallery Gallery parameters dataframe (gradio issue #6086 )
* Fix uglified formatting of subdirectory selection dropown, refresh
button, and open folder buttons on the Output Gallery tab.
* Force Output Gallery to use the full width of the Gallery control
for the preview overlay when an image is selected, rather than
an overlay the width of the selected image.
* Fix sendto buttons.
* Reset Inpaint ImageEditor control with the Mask Layer after generation
is complete, as it gets lost if the image was sent to the tab from
another tab rather than being uploaded. Also rework queuing and
progress rendering along this codepath. This doesn't solve the
underlying problem of the Mask Layer being removed, but does get inpaint
fully working with the Gradio update.
  • Loading branch information
@one-lithe-rune
one-lithe-rune authored Dec 14, 2023
1 parent 3cc643b commit f692a01
Show file tree
Hide file tree
Showing 16 changed files with 290 additions and 118 deletions.
3 changes: 2 additions & 1 deletion apps/stable_diffusion/web/api/sdapi_v1.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -374,7 +374,8 @@ def inpaint_api(
res = inpaint_inf(
InputData.prompt,
InputData.negative_prompt,
{"image": init_image, "mask": mask},
init_image,
mask,
InputData.height,
InputData.width,
InputData.is_full_res,
Expand Down
104 changes: 66 additions & 38 deletions apps/stable_diffusion/web/index.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@
# It has to be in this order or gradio ignores what we've set up.
from apps.stable_diffusion.web.utils.tmp_configs import (
config_tmp,
shark_tmp,
)

config_tmp()
Expand All @@ -86,6 +87,8 @@
from apps.stable_diffusion.web.ui.utils import (
create_custom_models_folders,
nodicon_loc,
mask_editor_value_for_gallery_data,
mask_editor_value_for_image_file,
)

create_custom_models_folders()
Expand Down Expand Up @@ -177,10 +180,20 @@ def resource_path(relative_path):
# init global sd pipeline and config
global_obj._init()

def register_button_click(button, selectedid, inputs, outputs):
def register_sendto_click(button, selectedid, inputs, outputs):
button.click(
lambda x: (
x[0]["name"] if len(x) != 0 else None,
x.root[0].image.path if len(x.root) != 0 else None,
gr.Tabs(selected=selectedid),
),
inputs,
outputs,
)

def register_sendto_editor_click(button, selectedid, inputs, outputs):
button.click(
lambda x: (
mask_editor_value_for_gallery_data(x),
gr.Tabs(selected=selectedid),
),
inputs,
Expand All @@ -196,9 +209,12 @@ def register_modelmanager_button(button, selectedid, inputs, outputs):
),
inputs,
outputs,
queue=False,
)

def register_outputgallery_button(button, selectedid, inputs, outputs):
def register_outputgallery_sendto_button(
button, selectedid, inputs, outputs
):
button.click(
lambda x: (
x,
Expand All @@ -208,6 +224,18 @@ def register_outputgallery_button(button, selectedid, inputs, outputs):
outputs,
)

def register_outputgallery_sendto_editor_button(
button, selectedid, inputs, outputs
):
button.click(
lambda x: (
mask_editor_value_for_image_file(x),
gr.Tabs(selected=selectedid),
),
inputs,
outputs,
)

dark_theme = resource_path("ui/css/sd_dark_theme.css")

with gr.Blocks(
Expand Down Expand Up @@ -236,19 +264,6 @@ def register_outputgallery_button(button, selectedid, inputs, outputs):
if args.output_gallery:
with gr.TabItem(label="Output Gallery", id=5) as og_tab:
outputgallery_web.render()

# extra output gallery configuration
outputgallery_tab_select(og_tab.select)
outputgallery_watch(
[
txt2img_status,
img2img_status,
inpaint_status,
outpaint_status,
upscaler_status,
txt2img_sdxl_status,
]
)
# with gr.TabItem(label="Model Manager", id=6):
# model_web.render()
# with gr.TabItem(label="LoRA Training (Experimental)", id=7):
Expand All @@ -268,6 +283,19 @@ def register_outputgallery_button(button, selectedid, inputs, outputs):
with gr.TabItem(label="Text-to-Image (SDXL)", id=13):
txt2img_sdxl_web.render()

# extra output gallery configuration
outputgallery_tab_select(og_tab.select)
outputgallery_watch(
[
txt2img_status,
img2img_status,
inpaint_status,
outpaint_status,
upscaler_status,
txt2img_sdxl_status,
],
)

actual_port = app.usable_port()
if actual_port != args.server_port:
sd_web.load(
Expand All @@ -278,134 +306,134 @@ def register_outputgallery_button(button, selectedid, inputs, outputs):
)

# send to buttons
register_button_click(
register_sendto_click(
txt2img_sendto_img2img,
1,
[txt2img_gallery],
[img2img_init_image, tabs],
)
register_button_click(
register_sendto_editor_click(
txt2img_sendto_inpaint,
2,
[txt2img_gallery],
[inpaint_init_image, tabs],
)
register_button_click(
register_sendto_click(
txt2img_sendto_outpaint,
3,
[txt2img_gallery],
[outpaint_init_image, tabs],
)
register_button_click(
register_sendto_click(
txt2img_sendto_upscaler,
4,
[txt2img_gallery],
[upscaler_init_image, tabs],
)
register_button_click(
register_sendto_editor_click(
img2img_sendto_inpaint,
2,
[img2img_gallery],
[inpaint_init_image, tabs],
)
register_button_click(
register_sendto_click(
img2img_sendto_outpaint,
3,
[img2img_gallery],
[outpaint_init_image, tabs],
)
register_button_click(
register_sendto_click(
img2img_sendto_upscaler,
4,
[img2img_gallery],
[upscaler_init_image, tabs],
)
register_button_click(
register_sendto_click(
inpaint_sendto_img2img,
1,
[inpaint_gallery],
[img2img_init_image, tabs],
)
register_button_click(
register_sendto_click(
inpaint_sendto_outpaint,
3,
[inpaint_gallery],
[outpaint_init_image, tabs],
)
register_button_click(
register_sendto_click(
inpaint_sendto_upscaler,
4,
[inpaint_gallery],
[upscaler_init_image, tabs],
)
register_button_click(
register_sendto_click(
outpaint_sendto_img2img,
1,
[outpaint_gallery],
[img2img_init_image, tabs],
)
register_button_click(
register_sendto_editor_click(
outpaint_sendto_inpaint,
2,
[outpaint_gallery],
[inpaint_init_image, tabs],
)
register_button_click(
register_sendto_click(
outpaint_sendto_upscaler,
4,
[outpaint_gallery],
[upscaler_init_image, tabs],
)
register_button_click(
register_sendto_click(
upscaler_sendto_img2img,
1,
[upscaler_gallery],
[img2img_init_image, tabs],
)
register_button_click(
register_sendto_editor_click(
upscaler_sendto_inpaint,
2,
[upscaler_gallery],
[inpaint_init_image, tabs],
)
register_button_click(
register_sendto_click(
upscaler_sendto_outpaint,
3,
[upscaler_gallery],
[outpaint_init_image, tabs],
)
if args.output_gallery:
register_outputgallery_button(
register_outputgallery_sendto_button(
outputgallery_sendto_txt2img,
0,
[outputgallery_filename],
[txt2img_png_info_img, tabs],
)
register_outputgallery_button(
register_outputgallery_sendto_button(
outputgallery_sendto_img2img,
1,
[outputgallery_filename],
[img2img_init_image, tabs],
)
register_outputgallery_button(
register_outputgallery_sendto_editor_button(
outputgallery_sendto_inpaint,
2,
[outputgallery_filename],
[inpaint_init_image, tabs],
)
register_outputgallery_button(
register_outputgallery_sendto_button(
outputgallery_sendto_outpaint,
3,
[outputgallery_filename],
[outpaint_init_image, tabs],
)
register_outputgallery_button(
register_outputgallery_sendto_button(
outputgallery_sendto_upscaler,
4,
[outputgallery_filename],
[upscaler_init_image, tabs],
)
register_outputgallery_button(
register_outputgallery_sendto_button(
outputgallery_sendto_txt2img_sdxl,
0,
[outputgallery_filename],
Expand Down
2 changes: 2 additions & 0 deletions apps/stable_diffusion/web/ui/common_ui_events.py
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import gradio as gr

from apps.stable_diffusion.web.ui.utils import (
HSLHue,
hsl_color,
Expand Down
23 changes: 19 additions & 4 deletions apps/stable_diffusion/web/ui/css/sd_dark_theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,8 +239,9 @@ footer {
padding: 0 !important;
}

#output_subdir_container :first-child {
border: none;
#output_subdir_container {
background-color: var(--block-background-fill);
padding-right: 8px;
}

/* reduced animation load when generating */
Expand Down Expand Up @@ -279,10 +280,19 @@ footer {

/* output gallery tab */
.output_parameters_dataframe table.table {
/* works around a gradio bug that always shows scrollbars */
/* works around a gradio bug that always shows scrollbars */
overflow: clip auto;
}

.output_parameters_dataframe .cell-wrap span {
/* inadequate workaround for gradio issue #6086 */
user-select:text !important;
-moz-user-select:text !important;
-webkit-user-select:text !important;
-o-user-select:text !important;
-ms-user-select:text !important;
}

.output_parameters_dataframe tbody td {
font-size: small;
line-height: var(--line-xs);
Expand All @@ -291,7 +301,7 @@ footer {
.output_icon_button {
max-width: 30px;
align-self: end;
padding-bottom: 8px;
padding-bottom: 16px !important;
}

.outputgallery_sendto {
Expand All @@ -308,6 +318,11 @@ footer {
object-fit: contain !important;
}

/* use the whole gallery area for previeews */
#outputgallery_gallery .preview {
width: inherit;
}

/* centered logo for when there are no images */
#top_logo.logo_centered {
height: 100%;
Expand Down
19 changes: 10 additions & 9 deletions apps/stable_diffusion/web/ui/img2img_ui.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -326,14 +326,21 @@ def img2img_inf(
value=nod_logo,
show_label=False,
interactive=False,
show_download_button=False,
elem_id="top_logo",
width=150,
height=50,
show_download_button=False,
)
with gr.Row(elem_id="ui_body"):
with gr.Row():
with gr.Column(scale=1, min_width=600):
# TODO: make this import image prompt info if it exists
img2img_init_image = gr.Image(
label="Input Image",
type="pil",
interactive=True,
sources=["upload"],
)
with gr.Row():
# janky fix for overflowing text
i2i_model_info = (
Expand Down Expand Up @@ -380,14 +387,6 @@ def img2img_inf(
lines=2,
elem_id="negative_prompt_box",
)
# TODO: make this import image prompt info if it exists
img2img_init_image = gr.Image(
label="Input Image",
type="pil",
height=300,
interactive=True,
)

with gr.Accordion(label="Multistencil Options", open=False):
choices = [
"None",
Expand Down Expand Up @@ -958,6 +957,8 @@ def update_cn_input(
elem_id="gallery",
columns=2,
object_fit="contain",
# TODO: Re-enable download when fixed in Gradio
show_download_button=False,
)
std_output = gr.Textbox(
value=f"{i2i_model_info}\n"
Expand Down
Loading

0 comments on commit f692a01

Please sign in to comment.