Custom height and width settings for Extra Networks cards

[EllangoK]

I like the thumbs view for the cards because it is smaller, but the aspect ratio annoyed me a bit as it was square, while most images I generate are not so they get cut off. This allows the user to set their own custom width and height so it can be whatever.

The default setting is 0, as that evals to false so it will use whatever the extra_networks_default_view css is then,

Closes #7874

Screenshot (thumbs view with custom height/width)

[anapnoe]

I like the thumbs view for the cards because it is smaller, but the aspect ratio annoyed me a bit as it was square, while most images I generate are not so they get cut off. This allows the user to set their own custom width and height so it can be whatever.

The default setting is 0, as that evals to false so it will use whatever the extra_networks_default_view css is then,

Closes #7874

Screenshot (thumbs view with custom height/width)

while this is a good addition it seems to me that all css should be better injected with js at the end of default style sheet added on a seperate style tag with an id so all extensions settings would have access to without the need to inject inline styles a small utility function in my fork for this usage you can use it if you find it helpful this function if placed in ui.js will accommodate all future cases-settings that need to modify the view the example sets the preview view to contain the image or scale-down ` // additional ui styles let styleobj = {}; const r = gradioApp(); const style = document.createElement('style'); style.id="ui-styles"; r.appendChild(style);

function updateOpStyles() {		
	let ops_styles = "";	
	for (const key in styleobj) {		
		ops_styles += styleobj[key];
	}	
	const ui_styles = gradioApp().getElementById('ui-styles');		
	ui_styles.innerHTML = ops_styles; 
	//console.log(ui_styles);
}

function imagePreviewFitMethod(value) {
   styleobj.ui_fit = ".livePreview img {object-fit:" + value + ";}";
   updateOpStyles();
}

gradioApp().querySelector("#setting_live_preview_image_fit").addEventListener('click', function (e) {
	if (e.target && e.target.matches("input[type='radio']")) {
		imagePreviewFitMethod(e.target.value.toLowerCase());			
	}
})

imagePreviewFitMethod(opts.live_preview_image_fit.toLowerCase());

`

[schumar]

I also didn't like the default size of the cards, but simply fixed it by having a user.css with

.extra-network-cards .card{
    width: 12em !important;
    height: 12em !important;
}

I also added

.extra-network-cards .card .actions .name{
    font-size: 1em !important;
}

to make the label a bit smaller.

[EllangoK]

@schumar Yes, you can modify the user.css, but most people who use the webui are not programmers, and would get confused just by editing files. I do have my own css file for now, but this should be easier for more people.

[anapnoe]

@schumar Yes, you can modify the user.css, but most people who use the webui are not programmers, and would get confused just by editing files. I do have my own css file for now, but this should be easier for more people.

https://github.com/anapnoe/stable-diffusion-webui you may have a look here if you want to have dynamic size and number of visible rows as well the functions are in the ui.js extra_networks_card_size extra_networks_cards_visible_rows feel free to use them if you like