General feedback

[vladmandic]

startup

we really dont need to print startup log in browser main view on startup sdnext has splash screen, lets leave it as-is

gallery

i like it!

• maybe move gallery from left panel to right panel, just below extra networks and before models?
• place search above folder list

right panel

idea - can we make right panel expandable and not just collapsable?
right now its either collapsed or set to ~1/3 of the screen width but maybe i want to look at extra networks or gallery or settings at full width? so its full->1/3->collapsed

extra networks

• search/filter is still broken
• sort is broken
• switch view type from icon to list is broken
• close button does not do anything in modern styling, maybe just hide it
• lora: overlay with tag words that is drawn on hover is normally below network itself and can grow much larger, here its cropped to size of the preview image

models -> update

this looks broken, but that's on me

settings

expand settings section names a bit, right now its

log

• move server log to top and client log to bottom
• add header to indicate what is server log and what is client log
• browser log is extremely verbose, if you need it, it needs to be behind some debug flag and not print-all by default

system

• benchmark: table view does not look that great
• models & networks: this looks like json dump without json display
  normally, this is gr.JSON component, but seems like modern styling breaks it

left panel

i still think that generate action bar can fit as the top part of the left vertical toolbar :)

we still have a problem where prompt fields are massive
thinking what is always absolutely needed, its the size - can we perhaps move size section to be above prompt? and yes, control resizing section is a bit complex, but we can probably tweak it a bit so it fits there

i like how img2img looks with prompt/negative/image in the left column and everything styled
can similar be done with control? i think that might work pretty well for default?

txt2img and img2img have subsections set horizontally above prompt and control has it as vertical list i understand this is because control left panel can be minimized and others cannot, but we need to get to uniform view

[BinaryQuantumSoul]

startup

we really dont need to print startup log in browser main view on startup sdnext has splash screen, lets leave it as-is

We don't need to but the extension starts up after sdnext is fully started. So the splash screen is already gone. I could start another splash screen ? Or an alternative.

gallery

i like it!

* maybe move gallery from left panel to right panel, just below extra networks and before models?

* place search above folder list

Yes I'm proud of that tab. I cannot move it to right panel since it has two inner panels, one for the browsing and one for the current image. Sure I can move search bar, didn't know best order.

right panel

idea - can we make right panel expandable and not just collapsible? right now its either collapsed or set to ~1/3 of the screen width but maybe i want to look at extra networks or gallery or settings at full width? so its full->1/3->collapsed

It is already expandable, just like the left panel.

extra networks

* search/filter is still broken

* sort is broken

* switch view type from icon to list is broken

* close button does not do anything in modern styling, maybe just hide it

* lora: overlay with tag words that is drawn on hover is normally below network itself and can grow much larger, here its cropped to size of the preview image

For search and sort, noted. Close button I can remove it. For view type switch and lora overaly, I will need screenshots to understand.

settings

expand settings section names a bit, right now its

It's actually a split view too, but I can increase the default left/right ratio.

log

* move server log to top and client log to bottom

* add header to indicate what is server log and what is client log

* browser log is extremely verbose, if you need it, it needs to be behind some debug flag and not print-all by default

I can switch them easily. Will add headers there too. Browser log is already behind a debug flag in UiUx settings, I should set it back to False as default.

system

* benchmark: table view does not look that great

* models & networks: this looks like json dump without json display
  normally, this is `gr.JSON` component, but seems like modern styling breaks it

Adding them to todo list

left panel

i still think that generate action bar can fit as the top part of the left vertical toolbar :)

It can, but then the left toolbar will move when no generate buttons in some tabs. I was think of putting it always in top right above the result

we still have a problem where prompt fields are massive thinking what is always absolutely needed, its the size - can we perhaps move size section to be above prompt? and yes, control resizing section is a bit complex, but we can probably tweak it a bit so it fits there

i like how img2img looks with prompt/negative/image in the left column and everything styled can similar be done with control? i think that might work pretty well for default?

txt2img and img2img have subsections set horizontally above prompt and control has it as vertical list i understand this is because control left panel can be minimized and others cannot, but we need to get to uniform view

We cannot move both resize and input image, and if we move resize in txt2img then it will be at a different place in img2img. I don't understand for control tab, it's not the same layout, here we have three columns where one of them is input. Will people really minimize control ? I need to have a better idea of what we want for control tab to not do/undo things many time

[vladmandic]

We don't need to but the extension starts up after sdnext is fully started. So the splash screen is already gone.

we can modify when main js function removeSplash() is called so it works for both. how about you remove your ui splash that shows loading logs and i'll handle this?

For view type switch and lora overaly, I will need screenshots to understand.

screenshot showing lora tags:

screenshot showing list mode view type:

[vladmandic]

It is already expandable, just like the left panel.

its manually expandable. i'm talking about this arrow that cycles through minimized or 1/3 size. and i'm suggesting to cycle between full-width, 1/3 size, minimized. right now there is no simple way to "maximize" right panel.

I cannot move it to right panel since it has two inner panels, one for the browsing and one for the current image.

(gallery) - why not? i don't understand how number of inner panels would make it only work in left side and not right?

It can, but then the left toolbar will move when no generate buttons in some tabs. I was think of putting it always in top right above the result

(action bar) - i still like the idea of generate/skip/stop in left action bar. primary tabs all have it (txt2img, img2img, control, process). only one that doesn't is gallery and i'm suggesting to move gallery to right-panel anyhow. which would only leave extensions that create tabs - such as agent scheduler.

[vladmandic]

We cannot move both resize and input image, and if we move resize in txt2img then it will be at a different place in img2img. I don't understand for control tab, it's not the same layout, here we have three columns where one of them is input. Will people really minimize control ? I need to have a better idea of what we want for control tab to not do/undo things many time

purely talking about txt2img and img2img, i think that size section need to be on the primary screen together with prompts. not batch, not seed, not anything else, just size - as size and prompt matters to basic workflows. and yes, size section for txt2img (simpler) and img2img (more complicated) are different, but i don't see how is that a problem?

and now expanding that to control tab, comes to same thing - size section should be together with prompt. now, should control left tab be collapsible? honestly, its not that important. but if it already is there, better to have it as collapsible unless its an issue in which case collapsible feature can be removed.

oh, one more minor thing - control/output/preview - can you make them top-aligned? right now they are center aligned and it looks a bit weird. also, "no-image" placeholder output and preview sections is definitely different.

and styling-wise, i don't think we need extra borders around inner control tab (medium-dark gray in the screenshot below):

[BinaryQuantumSoul]

how about you remove your ui splash that shows loading logs and i'll handle this?

OK

screenshot showing lora tags: screenshot showing list mode view type:

Thanks

It is already expandable, just like the left panel.

its manually expandable. i'm talking about this arrow that cycles through minimized or 1/3 size. and i'm suggesting to cycle between full-width, 1/3 size, minimized. right now there is no simple way to "maximize" right panel.

I cannot move it to right panel since it has two inner panels, one for the browsing and one for the current image.

(gallery) - why not? i don't understand how number of inner panels would make it only work in left side and not right?

It can, but then the left toolbar will move when no generate buttons in some tabs. I was think of putting it always in top right above the result

(action bar) - i still like the idea of generate/skip/stop in left action bar. primary tabs all have it (txt2img, img2img, control, process). only one that doesn't is gallery and i'm suggesting to move gallery to right-panel anyhow. which would only leave extensions that create tabs - such as agent scheduler.

purely talking about txt2img and img2img, i think that size section need to be on the primary screen together with prompts. not batch, not seed, not anything else, just size - as size and prompt matters to basic workflows. and yes, size section for txt2img (simpler) and img2img (more complicated) are different, but i don't see how is that a problem?

and now expanding that to control tab, comes to same thing - size section should be together with prompt. now, should control left tab be collapsible? honestly, its not that important. but if it already is there, better to have it as collapsible unless its an issue in which case collapsible feature can be removed.

Right now UI is separated in two parts with their own tabs. Most of the tabs on the left, including gallery, have two subparts and the right subpart is the center column. Right column is supposed to be for tools rather than workflows and they require smaller size. We couldn't place gallery there because we'd need four columns. I don't really see the point of maximizing right panel, we would need an extra click on the button to close the panel, and the right tabs aren't workflows on their own, we don't stay there for a long time. For the action bar, could you show on a screenshot where you'd place it? Right now I made control tab a bit unique from other tabs by having three columns in center column and having collapsible left panel, consequence is having vertical navbar rather than horizontal since it should be visible when collapsed and not having place for generate group. However I think generate group (action bar) was misplaced in the other tabs and that it would look better on top right of each of the center columns, just over the resulting image fro the generation. That way we wouldn't have the problem of navbar ad actionbar not fitting and being wrapped. I don't think other tabs should be collapsible since they only have one center column.

For the three control columns, I think if they are aligned top it looks even weirder because of empty space under them. I can try having the second column preview icon the same size as right column one. For the left column input box, I am open to suggestions, though removing the border here will look extra weird

For the txt2img, img2img, control params resize, I can move it under prompts, my question was about where do I place input image in the case of img2img, because it's either resize or input image, I think.

I was also thinking about replacing three columns with tabs when not enough place to display them, instead of three rows. It would also be better on mobile, did you try mobile layout btw ?

[vladmandic]

re: generate/skip/stop/enqueue

i'm thinking something simple like this:

just better icons:

• play icon=generate
• skip-forward icon=skip
• pause icon=pause
• stop icon=stop
• record icon=enqueue

and nothing else.

which leaves out: restore, clear plus everything from right-click context menu that we still need to think where to place (right now you have generate forever next to generate, but nothing else from context menu).

contextually, restore and clear would ideally be placed right next to styles refresh button - if that is possible (yes, they come from different parts of ui, but they really do fit there contextually)

for now, right-click context menu can stay as that.

[vladmandic]

For the txt2img, img2img, control params resize, I can move it under prompts, my question was about where do I place input image in the case of img2img, because it's either resize or input image, I think.

its not either, its both:

• txt2img has size since you cannot generate without it
• img2img has resize since if you don't specify anything, it will use image size. but you can (and often do) use resize. resize can be fixed (resize-to-pixels) or scale (resize-to-2x-of-input-image). and if you're resizing, you need to choose method.

so all-in-all, resize in img2img is more complex than just size in txt2img but its equally important and often used. and in control its even more complex, but also nearly always used. and if something is nearly always used, then it should be on first-screen, together with prompt. regarding placement, i'm just not sure if it should be above or below prompt.

[vladmandic]

re: control

For the three control columns, I think if they are aligned top it looks even weirder because of empty space under them

i mean top-aligned, but fill entire space, not have small controls placed in the center of tab. example screenshot before and after:

[vladmandic]

re: gallery

Right column is supposed to be for tools rather than workflows and they require smaller size. We couldn't place gallery there because we'd need four columns. I don't really see the point of maximizing right panel, we would need an extra click on the button to close the panel, and the right tabs aren't workflows on their own, we don't stay there for a long time.

but that's exactly why i'm proposing to move gallery there - its a tool, not a workflow.

right now you have expand-arrow if its minimized and collapse-arrow if its expanded to ~1/3.

what i'm suggesting is 3 views:

• minimized shows expand-arrow and works as-is
• expanded to ~1/3 shows BOTH expand-arrow and collapse-arrow collapse arrow works as-is, but newly added expand arrow basically places right pane into full-width mode
• full-width: shows collapse-arrow which goes back to ~1/3 expanded view

and that full-width mode would be very useful not just for gallery - for example, just looking at settings on 1024px width right now looks really bad. to make it useful, i need to resize panel width (btw, great that we have that!), do whatever i need and then resize it back.

[BinaryQuantumSoul]

re: generate/skip/stop/enqueue

I didn't see it like that before. I does take less place but it may be confusing since it's not a tab. And the generate button had extra and useful information displayed on it. Also when in extensions tabs, the generation buttons hidden in navbar will disappear and change in upscale tab. I just don't see the point of having all those cons while we could just put them all in more intuitive top right.

Sure for the better icons, I just need the svgs. For the right click menu it still works but we could add more buttons, I just don't know how often we'd need them. The restore and clear buttons are already next to style selection. I can move them on the right rather than on the left, but I don't know if that would improve anything ?

re: prompt params tab

I already know how resize is different in each tab, I did a template for all of them with their subtabs in control. My question was only about the fact that having both input image and resize params under the prompts in img2img tab may not leave enough space for prompts. I will test though.

re: control

I can do a template like the center column, with four subtabs and full height for input image, I will also do a tab system instead of vertical scrolling for when width is too narrow. BTW, I can also do two columns for the img2img tab and put input image in one of the two

re: gallery

I just think gallery is too similar to other tabs to put it in right panel. In most cases right panel is in 1/3 size and there's no way to display four columns that way, and even if it had place it would be weird. Gallery is a bit like workflows since you can send the image using the same back-and-forth buttons than other workflows.

For the maximized right panel, I can add the arrows, you are right that extra networks and settings may sometime need full screen.

[vladmandic]

re: generate/skip/stop - ok lets place it top-right like you suggest then. just make sure its consistent in all tabs

re: prompt params: size+prompt+negative is only thing that is there.

does input image in img2img tab still fit? welll.... if you can do two-column style for img2img, i think that's better!

but....in either case, by now all workflows of txt2img and im2img tab are pretty much superseded by control. so how i see this maaaaybe going in a direction of txt2img becoming SIMPLE workflow and control becoming FULL workflow. there really isn't single use case for legacy img2img.

re: gallery - we disagree, but guess what - that's ok :)
lets leave it in left panel for now.

[vladmandic]

off-topic, regarding your icon svg's - check out nerd-fonts - there is really good stuff built-in and its easy to use,
i don't think we even need svgs for something that's a simple play/pause/stop/fast-forward buttons.

[BinaryQuantumSoul]

Okay so I make two columns template for img2img and just like control tab it will turn to subtabs when too narrow. I will put all generate buttons in top right for it to be consistent.

I already put resize in prompt tab for all tabs so check out how it looks. I also made console splash screen optional. But without your loading splash screen it looks odd, so looking for you to put it.

For the simplification of txt2img, gallery and overall experience we'll see feedback after release.

For the nerdfont I am not sure, I like to handle everything the same way, so I'd need to find new icons for all current icons. But it's possible

So new templates are the priority then I can checkout the extra networks bugs

[vladmandic]

started looking at splash screen, but then got distracted and completely refactored how js code deals with callbacks. (as i've noticed how many junk callbacks are triggered)

anyhow...now we have about 90% less irrelevant callbacks and what remains works like a charm. plus entire startup sequence is now in the new startup.js and yes, it checks if modern ui is active and waits for it before removing splash. and entire browser loading is now about 20% faster at least.

on your side:

• remove splash showing of log, not needed anymore
• replace final section document.addEventListener("DOMContentLoaded", () => { ... with a single line: onUiReady(mainUiUx);

i also took a look at uiux js code, one thing that will need to be refactored in the future is entire movePortal functionality. right now it works fine, but the problem is that for every moved element, browser needs to do a full reflow and repaint and that adds more than few seconds to startup.

not sure what's the best way: doing entire update in shadow-dom first and then swapping it? using html fragments? cheap-trick with will-change? something else...

[BinaryQuantumSoul]

Discussion on optimisation continues in #6