UX/UI design improvements

[anapnoe]

Describe what this pull request is trying to achieve. Create a pixel perfect interface that is user friendly, well designed, easy to focus, mobile friendly, customizable

features and to do list

• [x] resizable viewport
• [x] switchable viewports (DoubleClick on the split handler to swap views) option in settings for default position
• [x] mobile navigation
• [x] top header tabs (option setting)
• [x] hidden tabs (option setting) no need to restart this is a different implementation
• [x] drag and drop reordable quick settings offcanvas aside view
• [x] drag and drop images to txt2img and img2img and import metadata directly
• [x] ignore - remove overrides when import [multiselect] (option setting)
• [x] resizable cards for extra networks and number of rows (option setting)
• [x] alternative offcanvas aside view for extra networks (option setting)
• [x] live preview image fit method (option setting)
• [x] generated image fit method (option setting)
• [x] max resolution output for txt2img and img2img (option setting)
• [x] performant dispatch for gradio's range slider and input number field issue: https://github.com/gradio-app/gradio/issues/3204 (option setting) latest update uses only one instance clone to mediate for the release event
• [x] ticks for performant input range sliders (option setting)
• [x] pacman preloader unified colors on reload ui
• [x] frame border animation when generating images
• [x] progress bar on top of the page always visible (when scroll for mobile)
• [x] remix icons
• [ ] add small arrows next to icons sent to inpaint, extras, img2img etc
• [x] style the rest extras, png info, train, checkpoint merger
• [x] style theme configurator extension to customize theme
• [x] maximize view when edit sketch, or paint mask, with zoom in out functionality
• [ ] extend gradio component gallery navigate to previous generations inside the txt2img, img2img interface
• [ ] and auto load the current generation settings
• [x] better lightbox with zoom in-out mobile gestures support etc..
• [ ] credits/about page display all 300+ contributors so far inside the UI

for extension developers 1) if you want to utilize the subgroup style on your module - script you need to add the keyword "sub-group" towards the end of the elem_id container, that is because gradio doesnt have support for adding style classes to components yet e.g with FormGroup(visible=False, elem_id="txt2img_hires_fix_sub-group") as hr_options:

2) if you are creating a lot of nested rows columns on your module but you don't want all the extra padding on the components you can remove it with collapse and ( collapse-all / experimental it doesn't work for all cases depends on the complexity ) e.g with FormGroup(elem_id="inpaint_controls_sub-group-collapse", visible=False) - collapse the group and style it as subgroup e.g with gr.Row(elem_id= target_interface + '_subseed_row-collapse-all'): - collapse all the nested padding

for the people that want to remove the donation button it is located here /html/footer.html lines 36 to 64 it will be removed from the pull request and be placed in my fork repository when all the remaining tasks have been completed unless the owner of the repository decides that it is a good thing for the stable-diffusion-ui to have a donation button in that case we will change the link to reflect the stable-diffusion-ui project funding until then if you like my work you can support me thank you

this is my first ever time involved on a github project

Environment this was tested in

• Browser: [chrome, firefox]

Screenshots or videos of your changes

Default theme

Extra Networks aside off-canvas alternative view

Quick Settings aside off-canvas view - drag and drop to custom sort your settings save is done on the fly

Zooming and panning for im2img sketch, inpaint, inpaint sketch

Theme Configurator - aside off-canvas view

Theme Configurator is an inbuild extension once you select - create the theme you like and click SAVE you can disable the extension and your theme is set it has some cool functions to HSL your theme or INVERT it all changes are applied on the fly and you can preview your theme on all sections of the UI without saving it

Mobile 395px width

[Liso7150]

good

[Kilvoctu]

I use Web UI primarily on mobile; this is just my opinion from this perspective.

For me, I like the preview window on the left, and placement of the Generate button. This places Generate between preview and prompt. (I actually move preview to left on my Web UI so it's closer to Generate) Having parts of the UI being collapsible is good. For example, generation info takes up a lot of space and I hardly ever want to see it.

The rest of the design is not very friendly to mobile 🤔
Each element is very large, very tall. A lot of empty space.
With the current UI, I can access everything in under one scroll. And prompt + generate + preview is viewable on one screen.
With this design, there is a bit of scrolling, and scrolling within scrolling (it's a bit unintuitive to scroll the correct part of the screen). There is also an issue with the buttons near the prompt.

I took some screenshots to get an idea of the comparison

Current. Base UI elements viewable in ~2 screens


This PR. Base UI elements viewable in ~4 screens (I only took 3 screenshots)


I think this design could be superior if some of these elements are more condensed, in consideration for mobile.

[DobrovSs]

Hi Hi Hi! Very nice UI, just one thing i want to mention, seems like "object-fit: scale-down" makes the initial image really small, so i changed it to "contain" and it fixed all the problems for me, maybe take a look on this:P

.livePreview img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

PS. Maybe it's my Microsoft Edge browser makes things a bit weird, i didnt tried on different browsers so..

PSS. Comparison "scale-down" "contain"

[anapnoe]

This can be fixed on mobile the overflow-y property for the left and right areas can be disabled i agree it is not good on mobile to have multiply scrolling areas the tool buttons also can be easily fixed flex-direction from row to column so they lay horizontally on mobile i will make these changes

[anapnoe]

[DobrovSs] "object-fit: scale-down" makes the generated image not to blow larger is intentional one pixel to one pixel 512px generated image should be same size on screen only scale down if the generated image is larger than the available container preview size

also you should check in settings that Image creation progress preview mode - is set to - Full (so the full resolution is generated)

[DobrovSs]

[DobrovSs] "object-fit: scale-down" makes the generated image not to blow larger is intentional one pixel to one pixel 512px generated image should be same size on screen only scale down if the generated image is larger than the screen size

Yeah i got the idea, just feels a bit too small for me, sometimes very hard too see whats going on in generation, sometimes you need to interrupt and try again, but anyways, i love the UI, i can do this changes for myself so it's not a real deal <3

Edit: Ah sorry my english is not perfect, so maybe in my case it's bugged? It shouldnt be that small for me? I need to try that on another browser then

[DarkAndBlue]

I tested a bit and I like the UI changes. Some things which I noticed:

• Maybe making the image generation progress bar stationary so it won't disappear when scrolling down.
• The preview image disappears when the next image starts generating. (I disabled the live preview feature) (It doesn't happen without the pull request)
• The input tag with type="value" don't look the same on FireFox like in the pull request preview (maybe not as important)

[ThereforeGames]

Very cool! Can't wait to try this out. I just have a couple observations/suggestions:

• Given that this is a pretty substantial redesign, I'm not sure it's best to flip the settings and previews panels - most people don't like change, and this is just another thing they would have to get used to. Is there a usability benefit to having preview on the left?
• Is the accent color customizable?

[anapnoe]

[DarkAndBlue] i fixed the livepreview disappearing issue thanks for your feedback i have to think a bit more about the stationary staff it should also be the interrupt + skip + generate buttons on mobile its a lot of content to scroll up and down

[anapnoe]

Very cool! Can't wait to try this out. I just have a couple observations/suggestions:

• Given that this is a pretty substantial redesign, I'm not sure it's best to flip the settings and previews panels - most people don't like change, and this is just another thing they would have to get used to. Is there a usability benefit to having preview on the left?
• Is the accent color customizable?

i would like to do more than the accent color (border-radius, border-color, tint color for panels, dark-white theme ) now we have the Settings - User interface control panel !!! this also applies to the left - right preferences in css is just one line flexbox row-reverse to flip them

[ThereforeGames]

i would like to do more than the accent color (border-radius, border-color, tint color for panels, dark-white theme ) now we have the Settings - User interface control panel !!! this also applies to the left - right preferences in css is just one line flexbox row-reverse to flip them

Excellent, I'm glad to hear that! I'm trying your UI right now, and my first impressions are very positive. Fixing the "Generate" button to the top is a big improvement.

EDIT: It might be useful to group the main inference settings into a collapsible menu, similar to "Prompt." There are a lot of times when I dial these settings in and don't need to see them again.

Just a thought.

[Panchovix]

I'm testing and I feel it looks pretty fine, but I had the same thing as @DobrovSs, and enabling full full preview slows down a lot the generation of the image itself. Using "contain" at least on my PC makes the preview generation the complete size of the left side.

[DobrovSs]

[DobrovSs] "object-fit: scale-down" makes the generated image not to blow larger is intentional one pixel to one pixel 512px generated image should be same size on screen only scale down if the generated image is larger than the available container preview size

also you should check in settings that Image creation progress preview mode - is set to - Full (so the full resolution is generated)

Sadly i cant use that due to my low vram:(

[DobrovSs]

I'm testing and I feel it looks pretty fine, but I had the same thing as @DobrovSs, and enabling full full preview slows down a lot the generation of the image itself. Using "contain" at least on my PC makes the preview generation the complete size of the left side.

Just in case you want to change that so it shows in a full scale, look for my comment above and swap it yourself in "style.css" Thats pretty easy to do:)

[DobrovSs]

Btw, i just noticed you missed the loading color in extras tab, easy fix for you so you dont need to search for the element @anapnoe

#extras_gallery .cover-bg{
 background-color:#1a1a1a;
}

Before After

[anapnoe]

Kilvoctu

I think we are on the right track thanks for the feedback much appreciated

[anapnoe]

Btw, i just noticed you missed the loading color in extras tab, easy fix for you so you dont need to search for the element @anapnoe

#extras_gallery .cover-bg{
 background-color:#1a1a1a;
}

Before After ![after](https://user-images.githubusercontent.com/30358314/216784361-af9056a9-5e29-4c41-a710-27c0e90981c9

[anapnoe]

Btw, i just noticed you missed the loading color in extras tab, easy fix for you so you dont need to search for the element @anapnoe

#extras_gallery .cover-bg{
 background-color:#1a1a1a;
}

Before After ![after](https://user-images.githubusercontent.com/30358314/216784361-af9056a9-5e29-4c41-a710-27c0e90981c9

thanks please send your findings so i can fix them best regards

[Kilvoctu]

This can be fixed on mobile the overflow-y property for the left and right areas can be disabled i agree it is not good on mobile to have multiply scrolling areas the tool buttons also can be easily fixed flex-direction from row to column so they lay horizontally on mobile i will make these changes

I tried your new changes on my mobile. It looks and feels a lot better, everything can be accessed with minimal scrolling

Screenshot


As it stands right now, I think I would use your UI over the current one. Thanks for making the changes 👍👍

However, a couple more things, for me.
In the current UI, the prompt fields begin at few lines of height (prompt = 3 lines, nprompt = 2 lines) and increases line height as needed. With this PR changes, both prompt fields are fixed at 7 lines regardless of how much text is in them. Are you able to return the previous behavior? In addition, as can be seen in screenshot, the buttons next to seed field do not quite fit. I'm also not sure why my restore faces/tiling/hires fix checkboxes are in a different place than your preview pictures. I'm testing on a fresh clone of repo with only your PR included.

Everything else looks great. I should have mentioned before, my display is 3,840x1,644 (21:9); quite thin. Thanks again for taking feedback.

[Nacurutu]

@Gerschel check this..!

[anapnoe]

This can be fixed on mobile the overflow-y property for the left and right areas can be disabled i agree it is not good on mobile to have multiply scrolling areas the tool buttons also can be easily fixed flex-direction from row to column so they lay horizontally on mobile i will make these changes

I tried your new changes on my mobile. It looks and feels a lot better, everything can be accessed with minimal scrolling

Screenshot As it stands right now, I think I would use your UI over the current one. Thanks for making the changes 👍👍

However, a couple more things, for me. In the current UI, the prompt fields begin at few lines of height (prompt = 3 lines, nprompt = 2 lines) and increases line height as needed. With this PR changes, both prompt fields are fixed at 7 lines regardless of how much text is in them. Are you able to return the previous behavior? In addition, as can be seen in screenshot, the buttons next to seed field do not quite fit. I'm also not sure why my restore faces/tiling/hires fix checkboxes are in a different place than your preview pictures. I'm testing on a fresh clone of repo with only your PR included.

Everything else looks great. I should have mentioned before, my display is 3,840x1,644 (21:9); quite thin. Thanks again for taking feedback.

You can check the latest additions 😉 as for the order of the ui components you can rearrange them in the settings tab - user interface category separated by comma copy paste the line below inpaint, dimensions, sampler, cfg, seed, checkboxes, hires_fix, batch, override_settings, scripts

best regards

[Nacurutu]

@anapnoe

Thank you very much for this work, it's looking great.

A question, as you are messing around with the UI and the code, could you please check why is this happening? and maybe how to fix it?

This bug occurs on inpaint tab. it doubles the image after I start painting the mask.

I have created a Bug report a while ago, most of the issues were already fixed but this one. https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/6388

I have tried this PR and the issue persists, but I didn't take screenshots....

again, amazing work..!

PS: Im using Win10/Chrome

[Kilvoctu]

You can check the latest additions 😉 as for the order of the ui components you can rearrange them in the settings tab - user interface category separated by comma copy paste the line below inpaint, dimensions, sampler, cfg, seed, checkboxes, hires_fix, batch, override_settings, scripts

best regards

Wow, you are quick 👍 Much appreciated making those adjustments, and you even got the faces/tiling/hires fix checkboxes on one line! It is perfect for me now. Also thanks for the tip about parameter order in settings. I didn't realize that was a thing.

This is fantastic work you're doing, hoping the PR will be merged once it's ready.

[anapnoe]

@anapnoe

Thank you very much for this work, it's looking great.

A question, as you are messing around with the UI and the code, could you please check why is this happening? and maybe how to fix it?

This bug occurs on inpaint tab. it doubles the image after I start painting the mask.

I have created a Bug report a while ago, most of the issues were already fixed but this one. #6388

I have tried this PR and the issue persists, but I didn't take screenshots....

again, amazing work..!

PS: Im using Win10/Chrome

it seems the issue has been resolved you should update to the latest version

edit your windows batch file webui-user.bat put these 2 lines before

git reset --hard HEAD git pull origin master

call webui.bat

you should backup your changes if you have made any before run the webui-user.bat scripts, modules it will take some time backup your webui-user.bat you need to run it 2 times first time it will reset to the original files then it will update to the latest version with all the dependencies

[Nacurutu]

@anapnoe

I'm using the last update, even the one uploaded 1 hour ago, I have made 3 or 4 fresh installs already... always same error on inpaint...

try with a 512x512 image or lower resolution, with larger images it doesn't happen

Also try with your browser's zoom at 75%

[anapnoe]

@anapnoe

I'm using the last update, even the one uploaded 1 hour ago, I have made 3 or 4 fresh installs already... always same error on inpaint...

try with a 512x512 image or lower resolution, with larger images it doesn't happen

Also try with your browser's zoom at 75%

did you try with my fork ? i can't reproduce the issue the image is 512x512 i fixed a lot of stuff in the process can you check and let me know ? the files you will need if you want to test are ui.py ui_common.py style.css ui.js

but please use the original PR i will try to find what is causing the issue

[Nacurutu]

@anapnoe

yes, I also used your repo and got the same error, however, didn't try ur last PR, let my try it and will let you know

[Nacurutu]

@anapnoe

Also, something i notice, the quicksettings menu:

Could you invert the order? to keep the models at the right and the sliders at the left? and also, to align everything.?

[ThereforeGames]

There might be a better selector for this, but here's how I flipped the settings/preview panels:

#tab_img2img > .flex > .flex, #tab_txt2img > .flex > .flex {flex-direction:row-reverse}

A bit more comfy for me. 😛

[ThereforeGames]

Here's my modified style.css for anyone who might be interested. @anapnoe, you're welcome to incorporate any of these changes if you're so inclined.

• Swaps order of preview/settings panels on txt2img and img2img tabs
• Replaces accent color with a blue that more closely resembles the original UI
• Greatly reduces the size of the "extra network" items
• Replaces ugly orange color of #context-menu with the accent color
• Replaces ugly red color of .extra-network-cards .card ul a:hover with the accent color
• Adds missing style for .gr-prose pre background color

Download: style.zip

[anapnoe]

Here's my modified style.css for anyone who might be interested. @anapnoe, you're welcome to incorporate any of these changes if you're so inclined.

• Swaps order of preview/settings panels on txt2img and img2img tabs
• Replaces accent color with a blue that more closely resembles the original UI
• Greatly reduces the size of the "extra network" items
• Replaces ugly orange color of #context-menu with the accent color
• Replaces ugly red color of .extra-network-cards .card ul a:hover with the accent color
• Adds missing style for .gr-prose pre background color

Download: style.zip

can you post the additions separately colors and preview would be adjustable to user prefs as mentioned but any new selectors it would be nice to post them here so i can copy paste them there are a lot of them and gradio doesn't support adding custom classes yet only elem_id and hard to find them all best regards

[ThereforeGames]

can you post the additions separately colors and preview would be adjustable to user prefs as mentioned but any new selectors it would be nice to post them here so i can copy paste them there are a lot of them and gradio doesn't support adding custom classes yet only elem_id and hard to find them all best regards

Sure! Let's see...

(New)

#tab_img2img > .flex > .flex, #tab_txt2img > .flex > .flex {flex-direction:row-reverse}

(New)

.gr-prose pre {background-color:#494c50 !important;}

(Updated existing block)

.extra-network-cards .card {
    display: inline-block;
    margin: .5em;
    width: 10em;
    height: 10em;
    box-shadow: 0 0 5px rgba(128, 128, 128, .5);
    border-radius: .2em;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

(Updated existing block)

#context-menu {
    z-index: 9999;
    position: absolute;
    display: block;
    padding: 0;
    border: 2px solid #1d81ff;
    border-radius: 8px;
    box-shadow: 1px 1px 2px #1d81ff;
    width: 200px;
}

(Updated existing block)

.context-menu-items a:hover {
    color:#fff;
    background: #1d81ff;
}

(Updated existing block)

.extra-network-cards .card ul a:hover,
.red {
    color: #1d81ff;
}

I think that's everything. Remember to replace #1d81ff with your own color.

[DobrovSs]

Hello! I have a little feedback, for some reason i cant do "Ctrl+Up/Down" to do weighting (only in positve prompt input), negative works as intended, can you please check what happened here?

[anapnoe]

Hello! I have a little feedback, for some reason i cant do "Ctrl+Up/Down" to do weighting (only in positve prompt input), negative works as intended, can you please check what happened here?

it is been fixed it should work fine now

[DobrovSs]

Hello! I have a little feedback, for some reason i cant do "Ctrl+Up/Down" to do weighting (only in positve prompt input), negative works as intended, can you please check what happened here?

it is been fixed it should work fine now

Cool, thank you!

[DobrovSs]

Is it possible for you to do a "save" button to save prompt and nprompt? Kinda tired always copy paste to config file, lol

[AbyszOne]

There should be a function to change the skin, instead of replacing everything with no choice. The current works well for many.

[anapnoe]

DobrovSs

It is already there it is called styles write your prompts click save from the tools menu button to load them select from the dropdown menu styles as many as you like click the apply selected styles to current prompt from the tools menu and you are set

[TWIISTED-STUDIOS]

Have been using this now for a little while, and have noticed a few things that just don't work, the img2img tab specifically if using a smaller screen device is very clustered. the inpainting experience is just horrible, you can't see the dimensions on the image as you move them to see if they match the box of the image borders, the rescale tool for the masking brush just is a very bad experience to resize, but the first page for txt2 looks really nice just the img2img page needs some serious work in my opinion its counter-intuitive. having the image sauce and the dimensions etc setting in separate locations to each other is very hard work back and forth. these are just my observations so far.

Another thing I did notice was the extra networks tab is just tiny if you have hundreds of embeds you have to scroll for days because the preview pane is the same size as the rest of them where as the default one opens up as a full page basically.

Another issue I have noticed is that the sliders are not easy to tell exactly how they have moved without looking at the incremental numbers, I'm not sure how this could be fixed but moving the sliders seems a bit like cat and mouse - however, the original ones just had that visual indication and feedback to them.

[anapnoe]

Have been using this now for a little while, and have noticed a few things that just don't work, the img2img tab specifically if using a smaller screen device is very clustered. the inpainting experience is just horrible, you cant see the dimensions on the image as you move them to see if they match the box of the image borders, the rescale tool for the masking brush just is a very bad experience to resize, but the first page for txt2 looks really nice just the img2img page needs some serious work in my opinion its counter intuitive. having the image sauce and the dimensions etc setting in separate locations to each other is very hard work back and forth. these are just my observations so far.

i agree with your observations the masking experience is horrible i have some thoughts on how to improve it but now i have other tasks to complete once i am done i will post some ideas i have in mind thanks for your feedback

[anapnoe]

There should be a function to change the skin, instead of replacing everything with no choice. The current works well for many.

Yes once I finish the layout and clean up the code we will be able to have this feature

[hithereai]

Just wanted to say thank you, the webui needed a new UI for a long time :)

Great work man.

[hithereai]

What's this?

[anapnoe]

What's this?

you don't like it ?

[hithereai]

It's not a matter of me liking it or not, it's that... it's not appropriate in this project. IMHO anyway.

• most certainly auto won't accept your PR with this button.

[anapnoe]

Just wanted to say thank you, the webui needed a new UI for a long time :)

Great work man.

there was no ui in the first place but anyway i am working on an interface to customize it for the time being you can modify the var properties in the style.css and see for yourself this is a modular interface

[anapnoe]

It's not a matter of me liking it or not, it's that... it's not appropriate in this project. IMHO anyway.

• most certainly auto won't accept your PR with this button.

i am penniless man this is for me to keep doing this is a donation you find it inappropriate if someone wants to give something to keep me going it wont be there when i finished it

[hithereai]

No one ever got a penny from "donating" to this project. Not even auto1111 himself. So why would you be the first? I just don't get it. but I won't respond in here any more. Good luck man.

[anapnoe]

No one ever got a penny from "donating" to this project. Not even auto1111 himself. So why would you be the first? I just don't get it. but I won't respond in here any more. Good luck man.

i thought the project is looking for sponsors put it seems you know auto1111 himself its better we do this conversation in the discord i agree good luck

[TWIISTED-STUDIOS]

It's not a matter of me liking it or not, it's that... it's not appropriate in this project. IMHO anyway.

• most certainly auto won't accept your PR with this button.

Why is it not Appropriate, it's not in your face it's an extra part, it's basically asking if you appreciate the efforts that someone has gone through put the time in and the efforts then you are free to help and donate to them as a thank you. Stop being salty and causing an issue for something that is not needed.