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

justsonghua · 2023-03-13T07:16:03Z

Is there an existing issue for this?

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 · 2023-03-13T19:53:43Z

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 · 2023-03-13T19:57:13Z

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 · 2023-03-13T20:00:28Z

more than welcome...

Also, remove:

quickcss_target

That's related to the extension...

:root, * {
    --cards_size: 50;

}

Sorry :p

justsonghua · 2023-03-13T21:41:43Z

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 · 2023-03-13T22:19:37Z

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

justsonghua · 2023-03-13T22:27:04Z

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 · 2023-03-13T22:42:07Z

@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 · 2023-03-14T17:56:47Z

@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 · 2023-03-25T10:07:29Z

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 · 2023-05-21T19:41:23Z

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

to

justsonghua · 2023-05-21T20:02:52Z

/*----------------------------------------------------------------*/
: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 · 2023-05-22T13:58:42Z

thanks a lot

1 more thing

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

justsonghua · 2023-05-22T16:53:46Z

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 · 2023-05-23T03:15:00Z

thanks a lot man, really appericate ur help

th-art001 · 2023-06-17T22:29:49Z

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 · 2023-06-17T22:38:06Z

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 · 2023-06-17T22:40:20Z

oh, i see. Thank you for answer anyway.

derpina-ai · 2023-12-06T11:14:24Z

#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 · 2023-12-06T11:47:12Z

@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

justsonghua added the enhancement label Mar 13, 2023

EllangoK closed this as completed Mar 25, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

justsonghua commented Mar 13, 2023

Nacurutu commented Mar 13, 2023 •

edited

Loading

justsonghua commented Mar 13, 2023

Nacurutu commented Mar 13, 2023 •

edited

Loading

justsonghua commented Mar 13, 2023

Nacurutu commented Mar 13, 2023 •

edited

Loading

justsonghua commented Mar 13, 2023

Nacurutu commented Mar 13, 2023

justsonghua commented Mar 14, 2023

EllangoK commented Mar 25, 2023

xmattar commented May 21, 2023

justsonghua commented May 21, 2023

xmattar commented May 22, 2023

justsonghua commented May 22, 2023

xmattar commented May 23, 2023

th-art001 commented Jun 17, 2023

justsonghua commented Jun 17, 2023

th-art001 commented Jun 17, 2023

derpina-ai commented Dec 6, 2023

th-art001 commented Dec 6, 2023

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

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

Comments

justsonghua commented Mar 13, 2023

Is there an existing issue for this?

What would your feature do ?

Proposed workflow

Additional information

Nacurutu commented Mar 13, 2023 • edited Loading

justsonghua commented Mar 13, 2023

Nacurutu commented Mar 13, 2023 • edited Loading

justsonghua commented Mar 13, 2023

Nacurutu commented Mar 13, 2023 • edited Loading

justsonghua commented Mar 13, 2023

Nacurutu commented Mar 13, 2023

justsonghua commented Mar 14, 2023

EllangoK commented Mar 25, 2023

xmattar commented May 21, 2023

justsonghua commented May 21, 2023

xmattar commented May 22, 2023

justsonghua commented May 22, 2023

xmattar commented May 23, 2023

th-art001 commented Jun 17, 2023

justsonghua commented Jun 17, 2023

th-art001 commented Jun 17, 2023

derpina-ai commented Dec 6, 2023

th-art001 commented Dec 6, 2023

Nacurutu commented Mar 13, 2023 •

edited

Loading

Nacurutu commented Mar 13, 2023 •

edited

Loading

Nacurutu commented Mar 13, 2023 •

edited

Loading