diff --git a/javascript/event_handlers.js b/javascript/event_handlers.js index c7710ac..08e6cc7 100644 --- a/javascript/event_handlers.js +++ b/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 diff --git a/scripts/modelpreview.py b/scripts/modelpreview.py index 63fc49c..96a0264 100644 --- a/scripts/modelpreview.py +++ b/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='') + # 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) \ No newline at end of file diff --git a/style.css b/style.css index 8e01367..89312d6 100644 --- a/style.css +++ b/style.css @@ -28,7 +28,11 @@ 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; @@ -36,6 +40,10 @@ left: 5px; } +#tab_modelpreview_xd_interface #modelpreview_xd_setting { + position: absolute; +} + #tab_modelpreview_xd_interface > div > .tabs { overflow: hidden; height: 100%;