added functionality to apply object-fit method to preview

javascript/ui.js

@@ -302,7 +302,8 @@ onUiUpdate(function(){
 	});
 	
 	
-	/* resizable split view */			
+	/* anapnoe ui start	*/
+	/* resizable split view */
 	
 	const resizeEvent = window.document.createEvent('UIEvents'); 
 	resizeEvent.initUIEvent('resize', true, false, window, 0); 	
@@ -385,11 +386,11 @@ onUiUpdate(function(){
 		scrollLeft = 0;//window.pageXOffset || document.documentElement.scrollLeft,
 		window.onscroll = function() {
 			window.scrollTo(scrollLeft, scrollTop);
-		};
+		}
 	}
           
 	function enableScroll() {
-		window.onscroll = function() {};
+		window.onscroll = function() {}
 	}
 	
 	function toggleMenu(isopen, icon, panel, close, owner) {
@@ -434,6 +435,40 @@ onUiUpdate(function(){
 	}	
     quick_menu.addEventListener('click', toggleQuickMenu);
 	
+	// additional ui styles 
+	const ui_styles = gradioApp().querySelector('ui_styles');
+	if(!ui_styles){
+		const r = gradioApp().querySelector('style');			
+		const style = document.createElement('style');
+		style.id="ui-styles";		
+		r.appendChild(style);		
+	}
+	
+	let styleobj = {};
+	function updateOpStyles() {		
+		let ops_styles = "";	
+		for (const key in styleobj) {		
+			ops_styles += styleobj[key];
+		}		
+		ui_styles.innerHTML = ops_styles;       
+	}
+	
+	function setImagePreviewFitMethod(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']")) {
+			setImagePreviewFitMethod(e.target.value.toLowerCase());			
+		}
+	})
+	
+	setImagePreviewFitMethod(opts.live_preview_image_fit.toLowerCase());
+	
+	/* anapnoe ui end */	
+
+