web UI elements placement optimization (too much scrolling ftm)

[Ariloum]

Hello, I'd like to mention that I'm having significant mouse wheel overheat while tweaking my settings because with the long prompt requests UI panels and buttons are not fitting on the screen. With the large prompts I have to scroll up to see "generate" button and then scroll down to see the image/settings, so half of my actions are mouse scrolling.

Can we have more effective panels/buttons space coverage? I added the screenshot for example.

[Kilvoctu]

I think alt+enter can be used to Generate, as alternative to clicking the button.

[Kilvoctu]

I think you would like PR #7519

[Ariloum]

I think you would like PR #7519

I'd definitely love to have bigger image size, but not sure about hiding the prompt edit panel under the button - this part is might be good for mobile-like gadgets with small screens..
but in the age of wide screens with 21:9 - 32:9 proportions there is no reason to heap the elements that way (except for the mobiles). even on classic 1080 there should be no problem to fit all the current ui elements effectively well for PC's.

prob the best solution is making all the panels draggable/moveable/resizeble and ability to save the state it in the config. so each user could place them by his needs...

[Kilvoctu]

The prompt panel is collapsible in the PR, it's possible to keep it visible at all times. You can pull the PR and try it out for yourself. I've used it on mobile and desktop; it's quite good.

Since I'm constantly editing my prompts, I personally always keep it open so the collapsible button is a slight inconvenience for me (takes up vertical space).
But since it's collapsible, it's one click to view/hide the prompt and results in zero scrolling in practice, which I thought was the original issue brought up with this discussion 🤷‍♀️ Also, the Generate button is in a fixed place with the UI in that PR, so you never need to scroll to hit generate.

I'm not sure if a UI that's fully customizable and perfect for every user can be done with gradio, based on what I know about it. I've asked in the past if there were easy ways to rearrange the panels as end user, and there doesn't appear to be, so I just do simple edits to the code (ui.py) for my own needs 🤷‍♀️

[Ariloum]

The prompt panel is collapsible in the PR, it's possible to keep it visible at all times. You can pull the PR and try it out for yourself. I've used it on mobile and desktop; it's quite good.

I have tried that PR ui branch and that did not fits well on my setup: ineffective usage of space on the upper and bottom of the page, site panels are locked with something like iframe in the middle and useful ui parts not fit the screen (like buttons under the photo and CFG Scale on the settings), also I feel like prompt edit here is too small by it's height (when I do 200+ prompts in a single image - editing it with 4 lines small window is something like a mess):

being generating image animation size also is bugged and too small

I'm not sure if a UI that's fully customizable and perfect for every user can be done with gradio, based on what I know about it. I've asked in the past if there were easy ways to rearrange the panels as end user, and there doesn't appear to be, so I just do simple edits to the code (ui.py) for my own needs 🤷‍♀️

I tried to edit ui.py but since I'm not too good at python (java backend here) I didn't got it working, so I just moved two divs with the chrome inspector on the site like you can see on the first post's screenshot - is it hard to modify ui.py to have that state of panels - 3 in a row? can you help me with that please?

[gmorks]

Other day I was thinking something similar, but going to collapsible left column, tabs to img2img etc, on the right also collapsible, and the image, model selector, prompt text boxes, sampler, have all the space.
The other idea was to able to pop-out elements and to use or move to a 2nd display.
Both ideas, have no knowledge how to achieve them, just wanted to share ideas here :P

[MrKuenning]

There was a PR to make the settings area into a collapsible accordion menu and Autmatic1111 said no, make it an extension instead. I have been waiting for an extension like that as it would help a lot with the mobile experience. Does anyone know how to edit the User.css to make the settings collapsible?

[Ariloum]

have u tried PR extension actutally? I though it should be fine for mobiles?
I just don't like it on my 31:9 widescreen (or any desktop screens) since it makes area of view smaller and access to useful elemeтts harder so I see no reason to have it on the desktops...