[Issue]: Modules and scritps layout following gradio update

[fbellgr]

Issue Description

After updating to e810d59fb898a6c61c613794f38630c6a5215796 and getting the gradio update, the modules and scripts layout has become horizontal, messy and things don't really fit anymore.

These screenshot are from img2img

Expanding Ultimate SD Upscale gives this:

The screenshot is not cropping anything, it is really how it looks on the right.

Also, some settings override don't take, such as

"img2img/Control Mode/value": "ControlNet is more important"

I don't know if the glitchy layout has a side effect on ui some overrides. Default resolution takes without an issue.

Version Platform Description

Theme: gradio/default light (I tried several and as far as I know it does not have any effect on the problem) Firefox 116 and Chromium 116

2023-08-25 12:58:57,895 | sd | INFO | launch | Starting SD.Next
2023-08-25 12:58:57,900 | sd | INFO | installer | Python 3.10.12 on Linux
2023-08-25 12:58:57,903 | sd | INFO | installer | Version: e810d59f Fri Aug 25 16:36:45 2023 +0000

Relevant log output

No response

Backend

Original

Model

SD 1.5

Acknowledgements

• [X] I have read the above and searched for existing issues
• [X] I confirm that this is classified correctly and its not an extension issue

[vladmandic]

How does it look with default theme?

[Nem-z]

Same issue with Gradio/Default for me

[fbellgr]

I deleted the ui and config overrides, so back to all defaults.

It's pretty much impossible to use multiple modules and scripts and even for just one, it's really messy.

[fbellgr]

When I was at the previous revision, I had an override for the default upscaler in Ultimate SD Upscale. The override does not take anymore. Could upgrading gradio render extensions and modules incompatible? ControlNet also has issues displaying properly and loading configs.

[vladmandic]

Gradio is notorious for making such breaking changes...

[fbellgr]

Kind of makes me have to stay behind.

[vladmandic]

which browser? i just checked with chrome and it doesn't look anywhere close to posted screenshots.

[fbellgr]

Firefox and Chromium 116.

This is from Chromium

I don't even see the resolution sliders...

[vladmandic]

Kind of makes me have to stay behind.

that is your right. now imagine if i had the same approach - no updates, no new features?

[vladmandic]

anyhow, i just pushed a small update, hope it helps.

[Monty1836]

Chrome dev tools make the issue fairly simple to find. The .styler class is overriding the flex direction because it has the !important flag enabled. Removing the important flag solves the issue, as does adding it to the container.

[fbellgr]

So fixable through user.css as a workaround? I haven't played much with this kind of tweaking in this project.

[vladmandic]

yes, i did that in the lastest update. but that on its own breaks settings, so a bit more was needed.

[vladmandic]

So fixable through user.css as a workaround? I haven't played much with this kind of tweaking in this project.

check update first.

[fbellgr]

ok I still see e810d59fb898a6c61c613794f38630c6a5215796 as the head. Will wait for your commit.

[vladmandic]

pushed

[Monty1836]

Looks good on my end, back to how it should be. Thanks!

[fbellgr]

The layout is fixed, and some ui overrides now do appear to work.

Something weird is going on, though.

At 0512e2973c584489a0d4f6149bd5b8435d6dfc56, all of these overrides take. Since e810d59fb898a6c61c613794f38630c6a5215796, the last one does not.

"customscript/ultimate-upscale.py/img2img/Scale/value": 3,
"customscript/ultimate-upscale.py/img2img/Seams fix/value": true,
"customscript/ultimate-upscale.py/img2img/Tile height/value": 768,
"customscript/ultimate-upscale.py/img2img/Tile width/value": 768,
"customscript/ultimate-upscale.py/img2img/Upscaler/value": "4x_ESRGAN"

Edit: to be clear, the extension is at the same revision in both cases.

[vladmandic]

AFAIK, there were no changes in that area of code. In either case, needs to be investigated separately.

[fbellgr]

Alright. Fair enough.

Closing note: it seems the overrides not taking issue affects radio buttons in modules and scripts.

Maybe it would do the same in the main UI, but the main UI appears to use only dropdowns and checkboxes for multiple selections.

[dan4ik94]

@vladmandic I have a similar problem, for example my "Inpaint" tab has double labels which makes it unusable. Any idea?

https://i.imgur.com/ChDXD3j.png

[vladmandic]

@dan4ik94

@vladmandic I have a similar problem, for example my "Inpaint" tab has double labels which makes it unusable.

i cant reproduce, see my screenshot below. try deletin ui-config.json.

[vladmandic]

@fbellgr

Closing note: it seems the overrides not taking issue affects radio buttons in modules and scripts.

Maybe it would do the same in the main UI, but the main UI appears to use only dropdowns and checkboxes for multiple selections.

its seems new gradio has different value format for radio controls - try selecting one value, go to settings -> ui defaults and apply - let me know if that works.

[dan4ik94]

@vladmandic

Reverting gradio to 3.32.0 fixed all the UI issues for me, strange it works on your side. I'll stick with 3.32, seems like 3.41 has some issues.

[vladmandic]

its not that new gradio has issues, its more that gradio doesn't care about backward compatibility that much, so every new version introduces number of changes that everyone has to adjust to. but i don't have luxury of leaving sdnext on old version forever.

[dan4ik94]

@vladmandic Little update on my issue: seems like I had some local git conflicts with various extensions, after updating every single one, everything is working fine even on **3.41.***.

Yahooo, thank you.