[Feature Request]: add extra sizes preview images for checkpoints, lora, and textual inversion in the webui interface

[justsonghua]

Is there an existing issue for this?

• [X] I have searched the existing issues and checked the recent builds/commits

What would your feature do ?

I often use different checkpoints, lora, textual inversion. The visual preview helps me a lot, and I also set a picture corresponding to the style or content of each file. This makes it more intuitive for me to quickly find the files I need. But I also found some problems in use.

The existing preview size only provides two sizes of thumb and card. The preview size of the thumb is too small for me, and the shape becomes a square; the card is so big that it takes up my entire screen and I need to scroll to find the file I want. My use environment is a 27-inch 4k monitor, and the edge browser is 100% zoomed in. I have uploaded pictures, and you can get a very clear idea of what is bothering me.

I wish there was an option to add an extra size preview between thumb and card. This way they are not too small to be seen or too large to take up the entire screen.

Proposed workflow

I think it should be enough to add an average of 2–3 sizes with a rectangular shape like a card between the thumb and card sizes. Or use the slider to dynamically adjust the size, but this may not be necessary.

Additional information

[Nacurutu]

Using @Gerschel 's extension: https://github.com/Gerschel/sd-web-ui-quickcss and loading Alani or Neon theme, you will have a slider that let you resize the extra networks...

Also, if you don't want to install the extension, you can create a user.css file and copy this code to it:

:root {
    --cards_size: 50;

}

/* TI - HN - LoRa Cards - Checkpoints*/
/*----------------------------------------------------------------*/
#tabs .tabitem .card{
 width: calc(3px *var(--cards_size));
 height: calc(4.48px *var(--cards_size));
 min-width: 50px !important;
 min-height: 74.6px !important;
 font-size: 60%;
 text-align: center;
 transition: all 0.1s ease-in-out;
 border-width: 1px;
}

#tabs .tabitem .card:hover {
border-width: 3px ;
}

/* Extra network cards */
#tabs .tabitem .extra-network-cards{
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
}

Where --cards_size: (a number between 50 and 100)

But, I think installing the extension is easier.

[justsonghua]

Using @Gerschel 's extension: https://github.com/Gerschel/sd-web-ui-quickcss and loading Alani or Neon theme, you will have a slider that let you resize the extra networks...

Also, if you don't want to install the extension, you can create a user.css file and copy this code to it:

:root, * , quickcss_target{
    --cards_size: 50;

}

/* TI - HN - LoRa Cards - Checkpoints*/
/*----------------------------------------------------------------*/
#tabs .tabitem .card{
 width: calc(3px *var(--cards_size));
 height: calc(4.48px *var(--cards_size));
 min-width: 50px !important;
 min-height: 74.6px !important;
 font-size: 60%;
 text-align: center;
 transition: all 0.1s ease-in-out;
 border-width: 1px;
}

#tabs .tabitem .card:hover {
border-width: 3px ;
}

/* Extra network cards */
#tabs .tabitem .extra-network-cards{
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
}

Where --cards_size: (a number between 50 and 100)

But, I think installing the extension is easier.

OK, I'll try it. And thanks a lot.

[Nacurutu]

more than welcome...

Also, remove:

quickcss_target

That's related to the extension...

:root, * {
    --cards_size: 50;

}

Sorry :p

[justsonghua]

more than welcome...

Also, remove:

quickcss_target

That's related to the extension...

:root, * {
    --cards_size: 50;

}

Sorry :p

I used my color settings. Everything is fine now, except for the animated color of the button when the mouse moves over it. I can't find where to turn it off, or change its color. It should be able to customize the color, right?

[Nacurutu]

@justsonghua Can u take a screenshot? dnt know what color or button u r referring to...

[justsonghua]

The color of the border in these two images, and the color of the animation effect of the button. Its color is too bright against the background color.

[Nacurutu]

@justsonghua

The background color on hover of the Generate button is handled by: Primary Color The border of the generate button is handled by: Input Text Color Focus The border of the tab is handled by: App Color

[justsonghua]

@justsonghua

The background color on hover of the Generate button is handled by: Primary Color The border of the generate button is handled by: Input Text Color Focus The border of the tab is handled by: App Color

Achso. But finally, I decided to use some simple codes to achieve my goal. The preset themes are excellent, but they have animation effects that I don’t need. And I also found some things that I can’t modify. For example, the color of the unselected tab and the dark line under the tabs. (I think it’s the border of the textbox, but I don’t know how to change it.) I have no idea about HTML or CSS, so some simple things may be also complicated for me. Besides, I changed the display of the cards and I think it’s better than before.

This is how they looked before. The cards were centered, including the last row. But I wanted the last row to start from the left. So I changed justify-items: center to justify-items: left .

Then I quickly noticed a blank area on the right side of all cards. That’s not what I wanted. I framed that area with a red box.

I tried to find a way to make all cards centered, but with the last row starting from the left. Then I realized that maybe I needed to use some element to fill up the empty space in the last row. And then I found something called fake-element. It gave me a positive result. Some kind.

During this time, I remembered ChatGPT and decided to give it a try. And after several times tries. It's displayed as I wish.

Here's the code. It might not perfect, but worked.

/* TI - HN - LoRa Cards - Checkpoints*/
/*----------------------------------------------------------------*/
#tabs .tabitem .card{
 width: calc(3px *var(50));
 height: calc(4.48px *var(50));
 min-width: 50px !important;
 min-height: 74.6px !important;
 font-size: 60%;
 text-align: center;
 transition: all 0.1s ease-in-out;
 border-width: 1px;
}

#tabs .tabitem .card:hover {
border-width: 3px ;
}

/* Extra network cards */
#tabs .tabitem .extra-network-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(137px, 1fr));
  margin: 3px;
  justify-items: space-around;
  align-items: space-around;
}

.container > *:last-child {
  grid-column: 1 / -1;
}

.container::after {
  content: "";
  visibility: hidden;
} 

[EllangoK]

More easily possible now since #7936 got merged in. I will close this as well, but feel free to submit a PR of removing that blank area if you want as I have also noticed it.

[xmattar]

hey can u help me change image 1 to image 2? like the size of the font in the previews

to

[justsonghua]

/*----------------------------------------------------------------*/
:root{
  --cardSize: 52.5;
  --cardspaceV: 5px;
  --cardspaceH: 4px;
  --cusColor: #39C5BB;
}

/* TI - HN - LoRa Cards - Checkpoints*/
/*----------------------------------------------------------------*/
#tabs .tabitem .card{
  width: calc(3px * var(--cardSize));
  height: calc(4.48px * var(--cardSize));
  min-width: 50px !important;
  min-height: 74.6px !important;
  margin: var(--cardspaceV) var(--cardspaceH);
  font-size: 60%;
  text-align: center;
  transition: all 0.1s ease-in-out;
  border-width: 1px;
  border-color: var(--cusColor);
}

#tabs .tabitem .card:hover {
  border-width: 3px ;
  box-shadow: 0 0 0 0.5em transparent;
}

/* TI - HN - LoRa Cards - Checkpoints / Scroll */
/*----------------------------------------------------------------*/
#txt2img_extra_networks .output-html, #img2img_extra_networks .output-html{
  max-height: 70em;
  overflow-y: scroll;
  padding-top: 5em;
  padding-bottom: 5em;
  scroll-padding-top: 5em;
  scroll-padding-bottom: 5em;
  scroll-margin-top: 5em;
  scroll-margin-bottom: 5em;
}

/* Extra network cards */
/*----------------------------------------------------------------*/
#tabs .tabitem .extra-network-cards{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

.extra-network-cards .card .metadata-button::before {
color: var(--cusColor);
}

/* Cards Animations */
/*----------------------------------------------------------------*/
.extra-network-cards .card {
  transform-origin:center;
  transition:.01s !important;
}

.extra-network-cards .card:hover{
  transform: scale(1.25);
  opacity:1 !important;
  z-index:50;
  transform-style: preserve-3d;
  animation: pulse2 .5s, change-color-border 5s linear infinite;
  -webkit-animation: pulse2 .5s, change-color-border 5s linear infinite;
  -moz-animation: pulse2 .5s, change-color-border 5s linear infinite;
  -o-animation: pulse2 .5s, change-color-border 5s linear infinite; 
}

.extra-network-cards:hover .card {
  opacity:0.95;
}

Set the card size as you like. Notice. In this version, the cards on the final row will be displayed as “stay in the middle”. Some codes change in the sd webui's HTML file. And because it always updates quickly, each time the HTML file will also be updated. So I just give up to display the cards on the final row, start from the left.

[xmattar]

thanks a lot

1 more thing

do u know how i could increase the size of the text?

[justsonghua]

thanks a lot

1 more thing

do u know how i could increase the size of the text?

You can find font-size in percentage at the beginning of the code. Try to modify it, might help, but not pretty sure. If you still have other questions, just ask google about the css-style. I'm not good with css, so maybe my solution is not the efficient way.

[xmattar]

thanks a lot man, really appericate ur help

[th-art001]

Hi! @justsonghua If I set a value less 50 (in "cards size" line) it's appear a non-proportional gap between it. Is there a possibility to change vertical space between cards without installing any extentions?

[justsonghua]

Hi! @justsonghua If I set a value less 50 (in "cards size" line) it's appear a non-proportional gap between it. Is there a possibility to change vertical space between cards without installing any extentions?

Sorry, as I said in my previous reply, I'm not very good at CSS styling. The code I posted is just a modification based on the code given in the extension. And I haven't paid attention to SD for 2-3 months, and it may be that the update of SD has changed some settings. If you want more help, you can contact the maintainer of this extension directly.

[th-art001]

oh, i see. Thank you for answer anyway.

[derpina-ai]

#tabs .tabitem .card { width: calc(3px * var(50)); height: calc(4.48px * var(50)); min-width: 50px !important; min-height: 74.6px !important; font-size: 60%; text-align: center; transition: all 0.1s ease-in-out; border-width: 1px; margin-bottom: 5px; / Adjust the value as needed for vertical padding / }

adding the last line enables you to avoid the vertical spacing issue @th-art001

[th-art001]

@derpina-ai Even though it's no longer relevant (the updated SD now has the ability to set the size of the tiles), but thank so much anyway