Add option to move toprow to settings - alternative design

[catboxanon]

Description

Closes #12681, alternative to #12688 (see description there for more info)

In addition to the other PR, this adds an option to make the generate button sticky.

I personally prefer this layout over the other PR. However, this does introduce much more code refactor, with a lot of usage of if and nullcontext to determine component layout. One thing in particular this has to do now is create the prompt components outside the gr.Blocks scope so we can manually invoke render of them where we want.

I think ideally everything should be created outside the gr.Blocks scope to begin with and then invoked with a single function, as this would make doing a few more refactor jobs simpler and open up more possible layout changes, but that's for a separate PR.

Screenshots/videos:

Layout

Sticky generate button

Checklist:

• I have read contributing wiki page
• I have performed a self-review of my own code
• My code follows the style guidelines
• My code passes tests

[w-e-w]

ahhh

2023-08-20.18_32_08_758.chrome.mp4

[catboxanon]

Oh yeah, the built-in mobile extension causes that. Lemme look a bit more into it.

[catboxanon]

Fixed now.

[elistys]

@w-e-w
The layout after 3 seconds of this video is a reasonable interface!

1. No space is wasted
2. The generate button and preview follow scrolling, so users can immediately press the generate button on the right side when they are setting any of the prompts or settings on the left side.
3. The user can immediately interrupt or skip operations while always watching the preview

[w-e-w]

this is not my PR I'm just pointing out that the UI would sporadically change if you change the window size

[catboxanon]

Hm, you make a fair point about the generate button. Maybe something can be done to make that sticky instead (like #12645). I personally don't want it on the right because then the image preview loses more vertical space.

[elistys]

I know.

However, in this PR(Screenshots), the generate button and the preview are separated, so when the user sets the settings at the bottom, they have to scroll back up every time to press the generate button.

So, this is a display bug, but I commented that it would be ideal if the generate button and the preview were not separated.

Sorry to disturb you.

[catboxanon]

@elistys Is this a good compromise?

[elistys]

@catboxanon

I think it would be useful as an option. but,

"image preview loses more vertical space"

I think that's why you put the generate button on the left, but what kind of inconvenience will happen due to the space (about 2 cm on my screen) of the generate button when it is placed on the right side? Currently v1.5.1 layout already uses space in generate button.

Rather, personally, the right side is empty, so I think it's okay to pack more other function.

So, for the above reasons and also from the perspective of not changing the current layout significantly, I think it's ideal to have it on the right side.

Thank you for your trial and error. I'm sorry for writing impertinent things even though I'm not a collaborator.

*Because I'm not a native English speaker, my writing may be slow and my expressions may be rude. sorry.

[catboxanon]

*Because I'm not a native English speaker, my writing may be slow and my expressions may be rude. sorry.

No worries, it doesn't come across as rude at all.

The right side will only ever be empty when an image isn't visible. #12648 implements the ability to change the gallery height which would essentially allow for a defined height that could fill the user's screen. I plan to eventually figure out a nice solution to make it fit the available height at all times.

There's still some possible merit to putting the generate button on the left right as you mention. The tradeoff currently is you lose some vertical space within the settings themselves. If an option for that were added though, it would make the code less readable, and these layout options in this PR already hamper that a bit, which is why I'm hesitant to add more.

[w-e-w]

imo sticking is not necessary for a computer users
people can just press Ctrl + Enter to generate

[catboxanon]

Outside of prompting, all operations are basically done with a mouse currently, so I still think there's value in it.

Anyways, unless there's any issues with this, I'm just going to leave this PR as-is for now until voldy reviews it.

[w-e-w]

Outside of prompting, all operations are basically done with a mouse currently, so I still think there's value in it.

fair point

[elistys]

@catboxanon
"There's still some possible merit to putting the generate button on the left as you mention"

I wrote that there is merit in placing it on the [right] side.

I think it's a typo, but just in case...

@w-e-w
Sorry for the elementary question. Do shortcut keys for interrupt and skip also exist?

[elistys]

Not asked but my conclusion^^;

The code might be complicated, but it would be nice if there were both options for the user to choose whether to place the generate button left or right, depending on their needs.

Users who value the size of the preview will choose the left side, and those who like the same layout as now will choose the right side.

Easy to say, hard to do...sorry...

[AUTOMATIC1111]

The rationale for having the prompt above the main UI is that other tabs - lora, textual inversion - interact with it, placing things to where the cursor is in the prompt, and location matters.

I started the work on moving UI generation to scripts with the seed section. I'd like to release the version with just seed section to see if any problems arise, and then I'd continue to work on moving a large amount of UI to scripts, allowing, among others, this to be done by scripts.

[elistys]

Ideas for coexisting the following two
★ Resolved an issue where the prompt was placed in the left column and the preview was far away
★ Ease of adding additional networks to the prompt field

[elistys]

@AUTOMATIC1111
In order to easily add lora etc. to the prompt field, I think that it can be solved by putting the network in the left column. (See image in previous comment) But the difficulty is unknown.

The second half of your explanation is too technical for me to understand exactly what happens, but it probably makes for a smart and flexible interface.

Thanks for thinking. I'm looking forward to it.