From de2ee8602a27226e328f0afd3b5a2be55d492c6c Mon Sep 17 00:00:00 2001
From: anapnoe <124302297+anapnoe@users.noreply.github.com>
Date: Wed, 8 Mar 2023 15:36:09 +0200
Subject: [PATCH] ui output image fit method scale-down or contain option in
 settings

---
 javascript/ui.js  | 21 +++++++++++++++++----
 modules/shared.py |  4 ++--
 style.css         |  3 ++-
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/javascript/ui.js b/javascript/ui.js
index 9fde63da..8917fb93 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -533,8 +533,19 @@ onUiUpdate(function(){
 		ui_styles.innerHTML = ops_styles; 
 		//console.log(ui_styles);
 	}
+	// generated image fit contain - scale
+	function imageGeneratedFitMethod(value) {
+       styleobj.ui_view_fit = "[id$='2img_gallery'] div>img {object-fit:" + value + ";}"; 
+	}	
+	gradioApp().querySelector("#setting_ui_output_image_fit").addEventListener('click', function (e) {
+		if (e.target && e.target.matches("input[type='radio']")) {
+			imageGeneratedFitMethod(e.target.value.toLowerCase());	
+			updateOpStyles();			
+		}
+	})
+	imageGeneratedFitMethod(opts.ui_output_image_fit.toLowerCase());
 	
-	// livePreview contain - scale
+	// livePreview fit contain - scale
 	function imagePreviewFitMethod(value) {
        styleobj.ui_fit = ".livePreview img {object-fit:" + value + ";}"; 
 	}	
@@ -804,9 +815,11 @@ onUiUpdate(function(){
 		let sid = trg[0];
 		let tid = trg[1];
 		let elem_input = gradioApp().querySelector('#'+elem.id+' input');
-		elem_input.addEventListener('click', function (e) {		
-			add2quickSettings(tid, sid, e.target.checked);
-		})
+		if(elem_input){
+			elem_input.addEventListener('click', function (e) {		
+				add2quickSettings(tid, sid, e.target.checked);
+			})
+		}
 	})
 	//addModelCheckpoint();
 	
diff --git a/modules/shared.py b/modules/shared.py
index 8e36b6bb..a07e08e7 100644
--- a/modules/shared.py
+++ b/modules/shared.py
@@ -440,14 +440,13 @@ options_templates.update(options_section(('interrogate', "Interrogate Options"),
 }))
 
 options_templates.update(options_section(('extra_networks', "Extra Networks"), {
-    #"extra_networks_default_view": OptionInfo("cards", "Default view for Extra Networks", gr.Dropdown, {"choices": ["cards", "thumbs"]}),
     "extra_networks_default_multiplier": OptionInfo(1.0, "Multiplier for extra networks", gr.Slider, {"minimum": 0.0, "maximum": 1.0, "step": 0.01}),
     "sd_hypernetwork": OptionInfo("None", "Add hypernetwork to prompt", gr.Dropdown, lambda: {"choices": [""] + [x for x in hypernetworks.keys()]}, refresh=reload_hypernetworks),
     "extra_networks_default_visibility": OptionInfo(True, "Extra Networks default visibility"),
     "extra_networks_cards_size": OptionInfo(1, "Card size for extra networks", gr.Slider, {"minimum": 0.8, "maximum": 2, "step": 0.1}),
     "extra_networks_cards_visible_rows": OptionInfo(1, "Visible card rows for extra networks", gr.Slider, {"minimum": 1, "maximum": 3, "step": 1}),
     "extra_networks_aside": OptionInfo(True, "Extra Networks aside view"),
-    
+  
 }))
 
 options_templates.update(options_section(('ui', "User interface"), {
@@ -473,6 +472,7 @@ options_templates.update(options_section(('ui', "User interface"), {
     "ui_views_order": OptionInfo("row-reverse", "Interface order input/parameters | output/preview", gr.Radio, {"choices": ["row", "row-reverse"]}),
     "ui_extra_networks_tab_reorder": OptionInfo("", "Extra networks tab order"),
     "ui_performant_gradio_input_components": OptionInfo("", "Performant gradio input components. Use css selectors"),
+    "ui_output_image_fit": OptionInfo("Scale-down", "Generated image fit method", gr.Radio, {"choices": ["Scale-down", "Contain"]}),
     "localization": OptionInfo("None", "Localization (requires restart)", gr.Dropdown, lambda: {"choices": ["None"] + list(localization.localizations.keys())}, refresh=lambda: localization.list_localizations(cmd_opts.localizations_dir)),
 }))
 
diff --git a/style.css b/style.css
index b1511825..d1de18a4 100644
--- a/style.css
+++ b/style.css
@@ -3084,10 +3084,11 @@ ul.list-none {
   transition: none !important;
 }
 
+/*
 #ui_theme_settings > div{
 	max-width:120px;
 }
-
+*/
 /*********************/
 /* Mobile breakpoint */
 /*********************/