Space Efficient UI Suggestion #6682

nectar9000 · 2023-01-12T20:19:53Z

nectar9000
Jan 12, 2023

``I noticed there were some big UI changes in the latest version, so figured I'd add some suggestions/wishes for future improvements.

I focused mostly on efficient use of space and avoid scrolling while using the inpaint feature. I use it zoomed in a lot to make more detailed masks, so a layout like this would greatly reduce the amount scrolling and other awkward navigating. Especially if a drag to resize window feature would be possible to implement. I've illustrated it with the hand icon, but just showing it while hovering between the windows would be sufficient. Hopefully some of these ideas are useful and find their way into future updates.

EDIT: The layout is just a mockup, but if you want the main layout change.
Add this to your user.css.

/*Puts settings and canvas next to each other. Flex grow make entire section bigger than the gallery*/
#img2img_settings { 
	display: flex; 
	flex-direction: row-reverse;
	flex-grow: 3; !important;
}

/*Tabs and inpainting canvas, add less flex shrink to make canvas take up more space*/
#mode_img2img {
    flex-shrink: 0.4;
}

@Nacurutu also has a full theme using the same layout.
https://github.com/Nacurutu/Dark-Themes-SD-WebUI-Automatic1111

You can also use the Quick CSS Extension to adjust things live in the web-ui.
https://github.com/Gerschel/sd-web-ui-quickcss

Nacurutu · 2023-01-13T01:31:52Z

Nacurutu
Jan 13, 2023

@nectar9000 may I ask, thats just a mockup? or thats how u have ur webUI? because I want that layout... looks really practical n awesome

0 replies

GigsTheCat · 2023-01-13T01:45:25Z

GigsTheCat
Jan 13, 2023

I'm sure that works great on your 1440p monitor but many people don't have one.

34 replies

nectar9000 Jan 14, 2023
Author

There was another update a few hours ago, new "copy to" buttons added as well as some other stuff. Hopefully it fixes the VRAM issue as well.

Nacurutu Jan 14, 2023

Im going to try it right now...

Also, great color palette...

Nacurutu Jan 15, 2023

nectar9000 Jan 18, 2023
Author

@Nacurutu This is still a mess, but I figured out a few more things you could probably use as well so thought I'd share.

:root, * , quickcss_target{	
	--can_height: 800px; /*880px Default*/
}
/*********************** TEXT *************************/

.gr-box {
    font-size: .8rem;
    line-height: 0.8rem;
}

/*********************** PADDING *************************/

/*Removes space wasting gaps*/
.gap-4 {
    gap: 0.2rem;
}

.gr-panel {
    padding: 0.2rem;
}

.px-4 {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

.py-6 {
    padding-top: 0.5rem;/*Top of page padding*/
}

.pt-1\.5 {
    padding-top: 0.1rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
.pb-2 {
    padding-bottom: 0.1rem;
}

/*********************** MAIN WINDOW *************************/

/*Puts settings and canvas next to each other. Flex grow make entire section bigger than the gallery*/
#img2img_settings { 
	display: flex; 
	flex-direction: row-reverse;
	flex-grow: 3 !important;
}

/*Tabs and inpainting canvas, add less flex shrink to make canvas take up more space*/
#mode_img2img {
    flex-shrink: 0.4;
}

/*Tabs Centered*/
.border-b-2 {
    border-bottom-width: 2px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/*Canvas Resize*/
.dark .tabitem .overflow-hidden .overflow-hidden .flex-wrap .overflow-hidden .flex-col .tabitem{
  max-height:var(can_height) !important;
  min-height:var(can_height) !important;
}

.dark .min-h-screen .mx-auto .overflow-hidden #tabs .tabitem .overflow-hidden .overflow-hidden .flex-wrap .overflow-hidden .flex-col .tabitem > .overflow-hidden > .overflow-hidden{
  max-height:calc(var(--can_height) - 5px) !important;
  min-height:calc(var(--can_height) - 5px) !important;
}

.dark .min-h-screen .mx-auto .overflow-hidden #tabs .tabitem .overflow-hidden .overflow-hidden .flex-wrap .overflow-hidden .flex-col .tabitem .overflow-hidden .overflow-hidden .h-60 .cursor-pointer{
  max-height: calc(var(--can_height) - 10px) !important;
  min-height: calc(var(--can_height) - 10px) !important;
}

.gr-form .overflow-hidden .flex .border-solid .border .bg-gray-200 .dark:bg-gray-700 .gap-px .rounded-lg .flex-wrap{
	flex-direction: column;
}

#img2img_image, 
#img2img_image > .h-60, 
#img2img_image > .h-60 > div, 
#img2img_image > .h-60 > div > img, 
#img2img_sketch, 
#img2img_sketch > .h-60, 
#img2img_sketch > .h-60 > div, 
#img2img_sketch > .h-60 > div > img, 
#img2maskimg, #img2maskimg > .h-60, 
#img2maskimg > .h-60 > div, 
#img2maskimg > .h-60 > div > img, 
#inpaint_sketch, #inpaint_sketch > .h-60, 
#inpaint_sketch > .h-60 > div, 
#inpaint_sketch > .h-60 > div > img {
  height: var(--can_height);
  max-height: 100% !important;
  min-height: 90% !important;
}

/*********************** TOP ROW *************************/

#toprow  { 
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
/*Prompts*/
#toprow div{

}
#img2img_prompt {
    padding: 0;
}

#img2img_neg_prompt {
    padding: 0;
}

/*Small buttons*/
#roll_col {
    display: flex;
    min-width: unset !important;
    flex-grow: 0 !important;
    padding: 0em;
    flex-direction: row;
	max-height: 35px;
}
#roll_col > button {
    /* min-width: 2em; */
    /* min-height: 2em; */
    max-width: 0em;
    max-height: 100%; */
    /* flex-grow: 0; */
    /* padding-left: 0.25em; */
    /* padding-right: 0.25em; */
    /* margin: 0.1em 0; */
}


#interrogate_col{
	min-width: 200px;
    max-width: 300px !important;
	flex-direction: row;
}
#interrogate, #deepbooru {
    margin: 0em;
    min-width: 6em;
	max-width: 100%;
}

#img2img_generate_box {
    margin: 0em;
    min-width: 6em;
    max-width: 100%;
}

#toprow > div:nth-child(1){
	/*border: 2px solid red !important;*/
	min-width: 100% !important;
	flex-direction: row;
	max-height: 20%;
}

#style_pos_col {
    min-width: min(320px, 100%);
    flex-grow: 1;
    margin: 0;
    display: flex;
    align-items: bottom;
    flex-direction: row;
}

#style_neg_col {
    min-width: min(320px, 100%);
    flex-grow: 1;
    margin: 0;
    display: flex;
    align-items: bottom;
    flex-direction: row;
}

#toprow div:nth-child(4) { /*STYLES*/
	flex-direction: row-reverse;
	margin: 0em;
}
#img2img_generate_box{
	width: 30%;
}

 /*GENERATE BUTTON AND STYLES*/
#toprow div:nth-child(4) div{
}

#toprow div:nth-child(5) {
}

#toprow div:nth-child(6) {
}

Nacurutu Jan 19, 2023

the last 2 updates and the upgrade to the new gradio version broke a lot of stuff, I need to rework a bit the file... but don't have time at the moment...

thank you for sharing the code, I will give it a try when I have the time...

Mousewrites · 2023-01-13T03:04:08Z

Mousewrites
Jan 13, 2023

I would love there to be "workspaces" that let you save your layout, or at least a "wide" layout, a "normal" and a "narrow/mobile" option.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Space Efficient UI Suggestion #6682

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 34 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Space Efficient UI Suggestion #6682

nectar9000 Jan 12, 2023

Replies: 3 comments · 34 replies

Nacurutu Jan 13, 2023

GigsTheCat Jan 13, 2023

nectar9000 Jan 14, 2023 Author

Nacurutu Jan 14, 2023

Nacurutu Jan 15, 2023

nectar9000 Jan 18, 2023 Author

Nacurutu Jan 19, 2023

Mousewrites Jan 13, 2023

nectar9000
Jan 12, 2023

Replies: 3 comments 34 replies

Nacurutu
Jan 13, 2023

GigsTheCat
Jan 13, 2023

nectar9000 Jan 14, 2023
Author

nectar9000 Jan 18, 2023
Author

Mousewrites
Jan 13, 2023