xd v1.1.3

- Added a setting to address #7.
It allows you to have the height of the preview tab be larger than the browser window for non html previews

Author: CurtisDS

javascript/event_handlers.js

@@ -50,6 +50,17 @@ function setSelectValue(selectPreviewModelElement, selectSDModelElement) {
 
 // Is fired by automatic1111 when the UI is updated
 onUiUpdate(function() {
+  // There is a script containing settings for height
+  // Get the element and set the attribute to limit the hieght
+  let tabEl = gradioApp().getElementById('tab_modelpreview_xd_interface');
+  let jsonEl = gradioApp().getElementById('modelpreview_xd_setting_json');
+  if (typeof tabEl != 'undefined' && typeof jsonEl != 'undefined') {
+    let settingsJSON = JSON.parse(jsonEl.innerHTML);
+    if (settingsJSON.LimitSize) {
+      tabEl.setAttribute('limit-height', '');
+    }
+  }
+
   // Get the select element for the SD model checkpoint
   const selectSDModelElement = gradioApp().querySelector('#setting_sd_model_checkpoint select');
   // Check if the element exists and is not null

scripts/modelpreview.py

@@ -581,6 +581,8 @@ def on_ui_tabs():
 	# create a gradio block
 	with gr.Blocks() as modelpreview_interface:
 
+		gr.HTML(elem_id='modelpreview_xd_setting', value='<script id="modelpreview_xd_setting_json" type="application/json">{ "LimitSize": ' + ( "true" if shared.opts.model_preview_xd_limit_sizing else "false" ) + ' }</script>')
+
 		# create a tab for the checkpoint previews
 		create_tab("Checkpoints", "cp",
 				list_all_models(),
@@ -615,6 +617,7 @@ def on_ui_tabs():
 def on_ui_settings():
 	section = ('model_preview_xd', "Model Preview XD")
 	shared.opts.add_option("model_preview_xd_name_matching", shared.OptionInfo("Loose", "Name matching rule for preview files", gr.Radio, {"choices": ["Loose", "Strict", "Folder"]}, section=section))
+	shared.opts.add_option("model_preview_xd_limit_sizing", shared.OptionInfo(True, "Limit the height of preivews to the height of the browser window (.html preview files are always limited regardless of this setting)", section=section))
 
 script_callbacks.on_ui_settings(on_ui_settings)
 script_callbacks.on_ui_tabs(on_ui_tabs)

style.css

@@ -28,14 +28,22 @@
 	flex: 1;
 }
 
-#tab_modelpreview_xd_interface > div {
+#tab_modelpreview_xd_interface:not([limit-height]) > div {
+	height: 100%;
+}
+
+#tab_modelpreview_xd_interface[limit-height] > div {
 	position: absolute;
 	top: 5px;
 	bottom: 5px;
 	right: 5px;
 	left: 5px;
 }
 
+#tab_modelpreview_xd_interface #modelpreview_xd_setting {
+	position: absolute;
+}
+
 #tab_modelpreview_xd_interface > div > .tabs {
 	overflow: hidden;
 	height: 100%;