UX/UI design improvements #7519

anapnoe · 2023-02-04T05:58:47Z

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

for extension developers

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:
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 · 2023-02-04T09:51:07Z

good

Kilvoctu · 2023-02-04T09:52:31Z

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 · 2023-02-04T13:08:02Z

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 · 2023-02-04T13:13:39Z

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 · 2023-02-04T13:26:08Z

[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 · 2023-02-04T13:30:10Z

[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 · 2023-02-04T14:36:02Z

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 · 2023-02-04T17:08:45Z

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 · 2023-02-04T17:35:05Z

[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 · 2023-02-04T17:45:52Z

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 · 2023-02-04T17:49:10Z

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 · 2023-02-04T18:23:59Z

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 · 2023-02-04T18:26:00Z

[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 · 2023-02-04T18:29:53Z

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 · 2023-02-04T18:47:39Z

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 · 2023-02-04T18:55:03Z

Kilvoctu

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

anapnoe · 2023-02-04T18:56:36Z

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 · 2023-02-04T18:59:14Z

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 · 2023-02-04T23:30:13Z

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 · 2023-02-04T23:30:39Z

@Gerschel check this..!

anapnoe · 2023-02-05T08:48:32Z

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 · 2023-02-05T08:54:48Z

@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

Kilvoctu · 2023-02-05T09:31:24Z

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 · 2023-02-05T10:05:48Z

@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 · 2023-02-05T10:13:02Z

@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 · 2023-02-05T10:45:51Z

@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

vladmandic · 2023-03-13T18:42:08Z

i do like the ui initiative and new functionality it brings as well as general look&feel.

but i don't see how this could ever be merged - its 99 individual commits which are spread over 113 files (ok, quite a few new files are just icons, no issues there).

but to have something that is "merge-able", it pr itself needs to be structured so it can be reviewed - right now, its nearly impossible to actually review changes.

also, number of new options is massive and some of them can be assumed without needing to define that many options and introduce that many core changes just to support them.

what i'd love is to split pr into couple of smaller pr
just for example:

introduce theme engine
introduce new ui without requiring core changes
introduces optional core changes

Nacurutu · 2023-03-13T19:14:44Z

i do like the ui initiative and new functionality it brings as well as general look&feel.

but i don't see how this could ever be merged - its 99 individual commits which are spread over 113 files (ok, quite a few new files are just icons, no issues there).

but to have something that is "merge-able", it pr itself needs to be structured so it can be reviewed - right now, its nearly impossible to actually review changes.

also, number of new options is massive and some of them can be assumed without needing to define that many options and introduce that many core changes just to support them.

what i'd love is to split pr into couple of smaller pr just for example:

introduce theme engine

introduce new ui without requiring core changes

introduces optional core changes

Yep, Auto also said that he is not going to merge this PR as it is right now, he asked for small PRs with fixes...

However, I was going to tell you if you can help @anapnoe sort everything because I really love how this looks... would be awesome to have it as an extension or something like that, the problem is that Extensions cant patch ui.py or other main files and I think there's is where most of the changes were made... Could you give a look at this and guide @anapnoe on how to accomplish the task to be able to merge as much as possible? or maybe ask him for permission and merge this into your fork (with the changes you consider)... again, I would love to have this UI...

vladmandic · 2023-03-13T19:34:56Z

However, I was going to tell you if you can help @anapnoe sort everything because I really love how this looks... would be awesome to have it as an extension or something like that, the problem is that Extensions cant patch ui.py or other main files and I think there's is where most of the changes were made... Could you give a look at this and guide @anapnoe on how to accomplish the task to be able to merge as much as possible? or maybe ask him for permission and merge this into your fork (with the changes you consider)... again, I would love to have this UI...

If it were me, I'd start with:

Minimize core changes in shared.py
For example, why would UI PR introduce new option sd_max_resolution?
Or live_preview_refresh_period? Is there a model preview auto-refresh or not has nothing to do with UI redesign.
There are quite a few of those that should be introduced as completely separate PRs.
And in some cases, be opinionated instead of having too many tunable options.
For example, extra_networks_aside - which one is better? Add such options only if required and requested later.
Split gradio UI changes (ui.py, ui_common.py, ...) into separate PR
New UI design greatly benefits from those, but it should be possible to merge without it. One step at the time.
Spotlight
This is a completely new feature, lets separate it.
Theme editor
This is a completely new feature, lets separate it.
Themes
Add actual themes via separate PR, only default should be in the main PR.

And yes, if I had such PRs to review, I'd be happy to do it (and use)

anapnoe · 2023-03-13T21:07:56Z

However, I was going to tell you if you can help @anapnoe sort everything because I really love how this looks... would be awesome to have it as an extension or something like that, the problem is that Extensions cant patch ui.py or other main files and I think there's is where most of the changes were made... Could you give a look at this and guide @anapnoe on how to accomplish the task to be able to merge as much as possible? or maybe ask him for permission and merge this into your fork (with the changes you consider)... again, I would love to have this UI...

If it were me, I'd start with:

Minimize core changes in shared.py
For example, why would UI PR introduce new option sd_max_resolution?
Or live_preview_refresh_period? Is there a model preview auto-refresh or not has nothing to do with UI redesign.
There are quite a few of those that should be introduced as completely separate PRs.
And in some cases, be opinionated instead of having too many tunable options.
For example, extra_networks_aside - which one is better? Add such options only if required and requested later.

Split gradio UI changes (ui.py, ui_common.py, ...) into separate PR
New UI design greatly benefits from those, but it should be possible to merge without it. One step at the time.

Spotlight
This is a completely new feature, lets separate it.

Theme editor
This is a completely new feature, lets separate it.

Themes
Add actual themes via separate PR, only default should be in the main PR.

And yes, if I had such PRs to review, I'd be happy to do it (and use)

Thank you, I would be more than happy to discuss more details and get some help on this when I finish a few more fundamental for me enhancements to the UI/UX, when completed it would be more easy to separate the core, fixes, ui, non ui, into different PRs and test what works and what it does not. There are some concepts followed that do not exactly
fit only to the UI but are general approaches, that is what needs to happen on the client side and what on the server side I get frustrated when every time I change a setting I need to reload the whole thing.
sd_max_resolution setting is an example of this approach modifies the resolution on the fly and save the ops in the backend without the need to restart, along with all the settings features added none have the need to restart reload the UI so all this different opts test the workability of this approach and can serve as an example on how settings can be applied in real-time
all settings added can be different PRs but need to introduce in a way that make sense. This is the way!!!

EfourC · 2023-03-14T05:02:00Z

@anapnoe
I was trying your changes in this PR today for the first time, and really like what you've done.

I was taking notes to collect feedback and started building up quite a list, but since it's gotten long and full of miscellaneous stuff, it seems too much to reasonably post here in the PR thread, especially with the current focus on splitting the changes into separate PRs, etc.

When I come back to it tomorrow and finish proof reading and organizing the feedback (and making sure nothing was already covered here), what's the best way to post it? I'm pretty new to GitHub in general, so I'm not sure what's the best way of working. Didn't see a direct message option, so I'm guessing make a General discussion thread and link back to this PR? Or is there a place like a wiki on your own repo I can post a markdown doc? Thx!

anapnoe · 2023-03-14T08:34:20Z

@anapnoe I was trying your changes in this PR today for the first time, and really like what you've done.

I was taking notes to collect feedback and started building up quite a list, but since it's gotten long and full of miscellaneous stuff, it seems too much to reasonably post here in the PR thread, especially with the current focus on splitting the changes into separate PRs, etc.

When I come back to it tomorrow and finish proof reading and organizing the feedback (and making sure nothing was already covered here), what's the best way to post it? I'm pretty new to GitHub in general, so I'm not sure what's the best way of working. Didn't see a direct message option, so I'm guessing make a General discussion thread and link back to this PR? Or is there a place like a wiki on your own repo I can post a markdown doc? Thx!

maybe someone more experienced can answer this I am new to github too maybe a wiki is a good think @vladmandic what is your opinion on this, can the wiki exists on pull-requests until we got to a phase to start break down all the changes in different PRs? I think it would be helpful for so many people that already use UI/UX

vladmandic · 2023-03-14T11:42:30Z

@anapnoe I was trying your changes in this PR today for the first time, and really like what you've done.
I was taking notes to collect feedback and started building up quite a list, but since it's gotten long and full of miscellaneous stuff, it seems too much to reasonably post here in the PR thread, especially with the current focus on splitting the changes into separate PRs, etc.
When I come back to it tomorrow and finish proof reading and organizing the feedback (and making sure nothing was already covered here), what's the best way to post it? I'm pretty new to GitHub in general, so I'm not sure what's the best way of working. Didn't see a direct message option, so I'm guessing make a General discussion thread and link back to this PR? Or is there a place like a wiki on your own repo I can post a markdown doc? Thx!

maybe someone more experienced can answer this I am new to github too maybe a wiki is a good think @vladmandic what is your opinion on this, can the wiki exists on pull-requests until we got to a phase to start break down all the changes in different PRs? I think it would be helpful for so many people that already use UI/UX

not on the pr itself, but on the branch where pr comes from - so @anapnoe can enable discussions in settings inside https://github.com/anapnoe/stable-diffusion-webui
and wiki can also be created there - its basically just another sub-repo with a specific name. but i think discussions are better suited.

anapnoe · 2023-03-14T12:45:12Z

@anapnoe I was trying your changes in this PR today for the first time, and really like what you've done.
I was taking notes to collect feedback and started building up quite a list, but since it's gotten long and full of miscellaneous stuff, it seems too much to reasonably post here in the PR thread, especially with the current focus on splitting the changes into separate PRs, etc.
When I come back to it tomorrow and finish proof reading and organizing the feedback (and making sure nothing was already covered here), what's the best way to post it? I'm pretty new to GitHub in general, so I'm not sure what's the best way of working. Didn't see a direct message option, so I'm guessing make a General discussion thread and link back to this PR? Or is there a place like a wiki on your own repo I can post a markdown doc? Thx!

maybe someone more experienced can answer this I am new to github too maybe a wiki is a good think @vladmandic what is your opinion on this, can the wiki exists on pull-requests until we got to a phase to start break down all the changes in different PRs? I think it would be helpful for so many people that already use UI/UX

not on the pr itself, but on the branch where pr comes from - so @anapnoe can enable discussions in settings inside https://github.com/anapnoe/stable-diffusion-webui and wiki can also be created there - its basically just another sub-repo with a specific name. but i think discussions are better suited.

Thanks @vladmandic I open the discussions as you suggested

bryanray · 2023-03-17T07:14:52Z

you suppose to make it MORE tight, and save space, and organized, not adding more "cosmetics" to it....

edit:

you know what, I thought this is just a sketch-up, a mock-up, not a working project, LOL
After i found out about it today, in his repo, and dig deeper, it is almost perfect, like 95% of it is what i would have done!

Nacurutu · 2023-03-17T08:53:43Z

you suppose to make it MORE tight, and save space, and organized, not adding more "cosmetics" to it....

well, you have the PRs there, start working on it!

bryanray · 2023-03-17T14:09:55Z

LOL I am noob at coding, although I got lots of UI experience back in my 30s, I am now an old dad with edgeless mind...
I will definitely look into that, I am pretty noob to github too....
cheers

Nacurutu · 2023-03-17T15:36:56Z

LOL I am noob at coding, although I got lots of UI experience back in my 30s, I am now an old dad with edgeless mind... I will definitely look into that, I am pretty noob to github too.... cheers

No worries, any help is welcome... feel free to give your feedback in the discussion channel of @anapnoe repo:

anapnoe#1

Thats the new place where everyone can discuss everything related to this PR.. pros and cons... and give him feedback about his work.

Remember always to be polite, every comment matters and helps. 👍🏻

space-nuko · 2023-03-20T04:17:19Z

I'm wondering is it too much work for you if I attempt to update webui to use Gradio 3.22.1? There are some bugs in 3.16.2 that impact my workflow (like gradio-app/gradio#3204) so I wanted the new version. But as I understand it this PR is based on 3.16.2

From what I've encountered there are a lot of CSS changes and bad UX introduced by 3.22.1 that need to be ironed out first before I'd say it's a comparable experience to the old version, was wanting your thoughts first

anapnoe · 2023-03-20T13:13:19Z

I'm wondering is it too much work for you if I attempt to update webui to use Gradio 3.22.1? There are some bugs in 3.16.2 that impact my workflow (like gradio-app/gradio#3204) so I wanted the new version. But as I understand it this PR is based on 3.16.2

From what I've encountered there are a lot of CSS changes and bad UX introduced by 3.22.1 that need to be ironed out first before I'd say it's a comparable experience to the old version, was wanting your thoughts first

I think we should wait a bit longer for gradio to see how the release event will be implemented, If they make it so all input components inherit the event which I think is the way to go, then yes this should be great and main reason to update but as it is now I am not so positive the current solution provided is not solid neither optimal, I understand how this affects your workflow as mine, I have implemented a workaround that will remedy this issue across all input components (scripts, settings ,extensions), I will PR the solution, need to optimize it and cleanup the code best regards

anapnoe · 2023-03-21T00:42:00Z

I'm wondering is it too much work for you if I attempt to update webui to use Gradio 3.22.1? There are some bugs in 3.16.2 that impact my workflow (like gradio-app/gradio#3204) so I wanted the new version. But as I understand it this PR is based on 3.16.2
From what I've encountered there are a lot of CSS changes and bad UX introduced by 3.22.1 that need to be ironed out first before I'd say it's a comparable experience to the old version, was wanting your thoughts first

I think we should wait a bit longer for gradio to see how the release event will be implemented, If they make it so all input components inherit the event which I think is the way to go, then yes this should be great and main reason to update but as it is now I am not so positive the current solution provided is not solid neither optimal, I understand how this affects your workflow as mine, I have implemented a workaround that will remedy this issue across all input components (scripts, settings ,extensions), I will PR the solution, need to optimize it and cleanup the code best regards

I have no idea how to do the pull request without affecting my current fork if anyone can help me understand how this works do I need to create an organization and create a new fork there to slowly introduce independent changes to master?

space-nuko · 2023-03-21T01:04:27Z

Probably just take the latest webui that you want to base the changes on, take your forked code, and implement the smallest possible change you can one by one until you reach feature parity. It's easier to review the code when there's not that much code to review per PR

Nacurutu · 2023-03-21T01:38:33Z

Probably just take the latest webui that you want to base the changes on, take your forked code, and implement the smallest possible change you can one by one until you reach feature parity. It's easier to review the code when there's not that much code to review per PR

He needs to make smaller PRs to get this merged with the actual main branch... if the actual main branch still doesn't support the new gradio, it is not very useful the gradio update to this PR unless he keeps this project as his own fork.

space-nuko · 2023-03-21T02:12:03Z

Yeah but I'd say it's easier to work on the smaller the change, to be honest it's probably impractical to merge this entire PR as-is regardless of which Gradio version it's based on

So if this PR needs to be split up to be accepted anyway it might be better to base it on the new Gradio version to avoid extra work

anapnoe · 2023-03-21T02:21:25Z

Probably just take the latest webui that you want to base the changes on, take your forked code, and implement the smallest possible change you can one by one until you reach feature parity. It's easier to review the code when there's not that much code to review per PR

what you say if I understand it correctly is
git reset --hard HEAD
git pull origin master
start introduce the changes and create small PRs
what happens to the forked repo when I do this ?
maybe @vladmandic has some idea as he keeps his own fork while contributing changes to master repo

anapnoe · 2023-03-21T02:33:35Z

Yeah but I'd say it's easier to work on the smaller the change, to be honest it's probably impractical to merge this entire PR as-is regardless of which Gradio version it's based on

So if this PR needs to be split up to be accepted anyway it might be better to base it on the new Gradio version to avoid extra work

Yes this is true just need to test it to see how much of an improvement is over the current version if only the half made slider it doesn't worth it really, I have implemented a solution to this problem that only uses total of 5 event listeners to cover for all numeric input fields and sliders for all the areas of the ui including extensions scripts you can test it if you like code of interest is located in the ui.js line 911 - 989
gradios current solution has 3 event listeners for each slider and not input fields multiply this with all sliders present in the ui - extensions - scripts and you would have some performance hit that's why we need to test before introduce a new version

anapnoe · 2023-03-21T08:37:56Z

Probably just take the latest webui that you want to base the changes on, take your forked code, and implement the smallest possible change you can one by one until you reach feature parity. It's easier to review the code when there's not that much code to review per PR

He needs to make smaller PRs to get this merged with the actual main branch... if the actual main branch still doesn't support the new gradio, it is not very useful the gradio update to this PR unless he keeps this project as his own fork.

very true too

vladmandic · 2023-03-21T11:41:09Z

what you say if I understand it correctly is
git reset --hard HEAD
git pull origin master
start introduce the changes and create small PRs
what happens to the forked repo when I do this ?
maybe @vladmandic has some idea as he keeps his own fork while contributing changes to master repo

don't do that, you'll loose your history.

fork is nothing but a server-side clone of a specific branch to a new owner and under any name you choose during fork.
so its all about branches.

your master branch is where your active dev happens.
you can create new branch and set its upstream during creation to be automatic1111/stable-diffusion-webui/master and call it 'pr-css-only' or whatever. by default upstream would be your master, but you don't want that in this case as intention is to create prs towards parent origin, not to your fork.
introduce changes to that branch and pr becomes a diff between that branch and its upstream.
once pr is approved & merged, you can delete that branch

so basically for each pr you want to create, you create a new branch.
and keep your master as your own.

for example, see https://github.com/vladmandic/automatic/branches - i have my master and 5 additional branches which are 5 prs awaiting approval/merge.

anapnoe · 2023-03-21T11:48:30Z

what you say if I understand it correctly is
git reset --hard HEAD
git pull origin master
start introduce the changes and create small PRs
what happens to the forked repo when I do this ?
maybe @vladmandic has some idea as he keeps his own fork while contributing changes to master repo

don't do that, you'll loose your history.

fork is nothing but a server-side clone of a specific branch to a new owner and under any name you choose during fork. so its all about branches.

your master branch is where your active dev happens.

you can create new branch and set its upstream during creation to be automatic1111/stable-diffusion-webui/master and call it 'pr-css-only' or whatever. by default upstream would be your master, but you don't want that in this case as intention is to create prs towards parent origin, not to your fork.

introduce changes to that branch and pr becomes a diff between that branch and its upstream.

once pr is approved & merged, you can delete that branch

so basically for each pr you want to create, you create a new branch. and keep your master and your own.

for example, see https://github.com/vladmandic/automatic/branches - i have my master and 5 additional branches which are 5 prs awaiting approval/merge.

thank you @vladmandic much appreciated

anapnoe · 2023-03-27T15:46:49Z

Ops sorry for so many edits in the readme file couldn't make the header description to stay on top of the image with single breaks

papuSpartan · 2023-04-18T08:34:26Z

@anapnoe does this have support for pulling in gradio theme color palettes? #8945 adds support for them. I like a lot of the themes you have made, especially a certain one 😆. I think it would be good to have that cross-compatibility built in though.

anapnoe · 2023-04-18T14:52:26Z

@anapnoe does this have support for pulling in gradio theme color palettes? #8945 adds support for them. I like a lot of the themes you have made, especially a certain one 😆. I think it would be good to have that cross-compatibility built in though.

it has its own theme engine that can be modified on the fly and it will not map to gradios vars cause they don't follow common practices guidelines, gradios theme engine uses 471 vars most of them generic while anapnoe-ui-ux uses 38 well defined ones
gradio theme engine uses only hex color mode while anapnoe-ui-ux supports hex, rgb, hsl color modes I have no reason to follow gradios innovations as they are bound to change completely in the next rewrite as they often say when they make staff that don't hold well sorry to be so harsh I am quite disappointed with gradio
you can find the latest and greatest ui-ux that uses gradio 3.23.0 in the dev branch

papuSpartan · 2023-04-18T16:45:30Z

Yea... somehow that doesn't surprise me. Maybe once their implementation is more solidified it could be possible later down the line.

anapnoe requested a review from AUTOMATIC1111 as a code owner February 4, 2023 05:58

Liso7150 approved these changes Feb 4, 2023

View reviewed changes

anapnoe closed this Feb 4, 2023

anapnoe reopened this Feb 4, 2023

Programer3 approved these changes Apr 15, 2023

View reviewed changes

anapnoe closed this May 13, 2023

anapnoe force-pushed the master branch from f2b9c2c to b08500c Compare May 13, 2023 15:28

UX/UI design improvements #7519

UX/UI design improvements #7519

Conversation

anapnoe commented Feb 4, 2023 • edited

Liso7150 commented Feb 4, 2023

Kilvoctu commented Feb 4, 2023 • edited

DobrovSs commented Feb 4, 2023 • edited

anapnoe commented Feb 4, 2023

anapnoe commented Feb 4, 2023 • edited

DobrovSs commented Feb 4, 2023 • edited

DarkAndBlue commented Feb 4, 2023

ThereforeGames commented Feb 4, 2023 • edited

anapnoe commented Feb 4, 2023

anapnoe commented Feb 4, 2023

ThereforeGames commented Feb 4, 2023 • edited

Panchovix commented Feb 4, 2023

DobrovSs commented Feb 4, 2023

DobrovSs commented Feb 4, 2023 • edited

DobrovSs commented Feb 4, 2023

anapnoe commented Feb 4, 2023

anapnoe commented Feb 4, 2023

anapnoe commented Feb 4, 2023

Kilvoctu commented Feb 4, 2023

Nacurutu commented Feb 4, 2023

anapnoe commented Feb 5, 2023

Nacurutu commented Feb 5, 2023 • edited

Kilvoctu commented Feb 5, 2023

anapnoe commented Feb 5, 2023

Nacurutu commented Feb 5, 2023 • edited

anapnoe commented Feb 5, 2023

vladmandic commented Mar 13, 2023

Nacurutu commented Mar 13, 2023 • edited

vladmandic commented Mar 13, 2023 • edited

anapnoe commented Mar 13, 2023

EfourC commented Mar 14, 2023 • edited

anapnoe commented Mar 14, 2023 • edited

vladmandic commented Mar 14, 2023

anapnoe commented Mar 14, 2023

bryanray commented Mar 17, 2023 • edited

Nacurutu commented Mar 17, 2023

bryanray commented Mar 17, 2023

Nacurutu commented Mar 17, 2023 • edited

space-nuko commented Mar 20, 2023

anapnoe commented Mar 20, 2023 • edited

anapnoe commented Mar 21, 2023

space-nuko commented Mar 21, 2023

Nacurutu commented Mar 21, 2023 • edited

space-nuko commented Mar 21, 2023

anapnoe commented Mar 21, 2023

anapnoe commented Mar 21, 2023 • edited

anapnoe commented Mar 21, 2023

vladmandic commented Mar 21, 2023 • edited

anapnoe commented Mar 21, 2023

anapnoe commented Mar 27, 2023

papuSpartan commented Apr 18, 2023 • edited

anapnoe commented Apr 18, 2023 • edited

papuSpartan commented Apr 18, 2023

anapnoe commented Feb 4, 2023 •

edited

Kilvoctu commented Feb 4, 2023 •

edited

DobrovSs commented Feb 4, 2023 •

edited

anapnoe commented Feb 4, 2023 •

edited

DobrovSs commented Feb 4, 2023 •

edited

ThereforeGames commented Feb 4, 2023 •

edited

ThereforeGames commented Feb 4, 2023 •

edited

DobrovSs commented Feb 4, 2023 •

edited

Nacurutu commented Feb 5, 2023 •

edited

Nacurutu commented Feb 5, 2023 •

edited

Nacurutu commented Mar 13, 2023 •

edited

vladmandic commented Mar 13, 2023 •

edited

EfourC commented Mar 14, 2023 •

edited

anapnoe commented Mar 14, 2023 •

edited

bryanray commented Mar 17, 2023 •

edited

Nacurutu commented Mar 17, 2023 •

edited

anapnoe commented Mar 20, 2023 •

edited

Nacurutu commented Mar 21, 2023 •

edited

anapnoe commented Mar 21, 2023 •

edited

vladmandic commented Mar 21, 2023 •

edited

papuSpartan commented Apr 18, 2023 •

edited

anapnoe commented Apr 18, 2023 •

edited