From 9a5f33908233b77ec9a69c0cf7a53bbe408bfe5d Mon Sep 17 00:00:00 2001 From: Vladimir Mandic Date: Mon, 2 Oct 2023 07:56:11 -0400 Subject: [PATCH] add compact view --- .eslintrc.json | 1 + CHANGELOG.md | 1 + javascript/logMonitor.js | 1 + javascript/settings.js | 9 +++++++++ javascript/style.css | 2 ++ javascript/ui.js | 15 +++++++++++++++ modules/lora | 2 +- modules/shared.py | 1 + 8 files changed, 31 insertions(+), 1 deletion(-) diff --git a/.eslintrc.json b/.eslintrc.json index 0420018ea..4f0cb228a 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -69,6 +69,7 @@ "create_submit_args": "readonly", "restart_reload": "readonly", "updateInput": "readonly", + "toggleCompact": "readonly", // settings.js "register_drag_drop": "readonly", //extraNetworks.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 3561662ca..92e17fe9e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ Upgrades are still possible and supported, but above is recommended for best exp see *System -> User interface -> Set menu states* - new built-in theme **invokeai** thanks @BinaryQuantumSoul + - add **compact view** option in settings -> user interface - small visual indicator bottom right of page showing internal server job state - **Extra networks**: - **Details** diff --git a/javascript/logMonitor.js b/javascript/logMonitor.js index 4bbea22b3..ca372b1f1 100644 --- a/javascript/logMonitor.js +++ b/javascript/logMonitor.js @@ -54,6 +54,7 @@ async function initLogMonitor() { el.style.display = 'none'; jobStatusEl = document.createElement('div'); jobStatusEl.className = 'jobStatus'; + jobStatusEl.style.display = 'none'; gradioApp().appendChild(jobStatusEl); fetch(`/sdapi/v1/start?agent=${encodeURI(navigator.userAgent)}`); logMonitor(); diff --git a/javascript/settings.js b/javascript/settings.js index d9e96dcf8..554010787 100644 --- a/javascript/settings.js +++ b/javascript/settings.js @@ -6,6 +6,10 @@ const monitoredOpts = [ { sd_backend: () => gradioApp().getElementById('refresh_sd_model_checkpoint')?.click() }, ]; +const AppyOpts = [ + { compact_view: (val) => toggleCompact(val) }, +]; + function updateOpts(json_string) { const settings_data = JSON.parse(json_string); for (const op of monitoredOpts) { @@ -16,6 +20,11 @@ function updateOpts(json_string) { if (callback) callback(); } } + for (const op of AppyOpts) { + const key = Object.keys(op)[0]; + const callback = op[key]; + if (callback) callback(settings_data.values[key]); + } opts = settings_data.values; opts_metadata = settings_data.metadata; Object.entries(opts_metadata).forEach(([opt, meta]) => { diff --git a/javascript/style.css b/javascript/style.css index ab7bae02b..c79c48f62 100644 --- a/javascript/style.css +++ b/javascript/style.css @@ -34,6 +34,8 @@ div.gradio-html.min{ min-height: 0; } .small-accordion .label-wrap { padding: 16px 0px 8px 0px; margin: 0; border-top: 2px solid var(--button-secondary-border-color); } .small-accordion .label-wrap .icon { margin-right: 1.6em; margin-left: 0.6em; color: var(--button-primary-border-color); } .hidden { display: none; } +.form-compact { margin-bottom: 0 !important; gap: 0.2em 1em !important; } +.accordion-compact { padding: 8px 0px 4px 0px !important; } .flex-break { flex-basis: 100% !important; } footer { display: none; } table { overflow-x: auto !important; overflow-y: auto !important; } diff --git a/javascript/ui.js b/javascript/ui.js index a3c1ab5c4..caa3e9aa5 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -370,6 +370,21 @@ function create_theme_element() { return el; } +function toggleCompact(val) { + log('toggleCompact', val); + if (val) { + gradioApp().style.setProperty('--layout-gap', 'var(--spacing-md)'); + gradioApp().querySelectorAll('input[type=range]').forEach((el) => el.classList.add('hidden')); + gradioApp().querySelectorAll('div .form').forEach((el) => el.classList.add('form-compact')); + gradioApp().querySelectorAll('.small-accordion .label-wrap').forEach((el) => el.classList.add('accordion-compact')); + } else { + gradioApp().style.setProperty('--layout-gap', 'var(--spacing-xxl)'); + gradioApp().querySelectorAll('input[type=range]').forEach((el) => el.classList.remove('hidden')); + gradioApp().querySelectorAll('div .form').forEach((el) => el.classList.remove('form-compact')); + gradioApp().querySelectorAll('.small-accordion .label-wrap').forEach((el) => el.classList.remove('accordion-compact')); + } +} + function previewTheme() { let name = gradioApp().getElementById('setting_gradio_theme').querySelectorAll('input')?.[0].value || ''; fetch('/file=html/themes.json').then((res) => { diff --git a/modules/lora b/modules/lora index 49c24285c..2d87bb648 160000 --- a/modules/lora +++ b/modules/lora @@ -1 +1 @@ -Subproject commit 49c24285c7dc2a8a7ac6d5391d5fdc85ac8abbc3 +Subproject commit 2d87bb648f30adab00ceb38a0da786cd548d5ce7 diff --git a/modules/shared.py b/modules/shared.py index e934d16a0..72a9561b3 100644 --- a/modules/shared.py +++ b/modules/shared.py @@ -545,6 +545,7 @@ options_templates.update(options_section(('ui', "User Interface"), { "gradio_theme": OptionInfo("black-teal", "UI theme", gr.Dropdown, lambda: {"choices": list_themes()}, refresh=refresh_themes), "theme_style": OptionInfo("Auto", "Theme mode", gr.Radio, {"choices": ["Auto", "Dark", "Light"]}), "tooltips": OptionInfo("UI Tooltips", "UI tooltips", gr.Radio, {"choices": ["None", "Browser default", "UI tooltips"], "visible": False}), + "compact_view": OptionInfo(True, "Compact view"), "return_grid": OptionInfo(True, "Show grid in results"), "return_mask": OptionInfo(False, "For inpainting, include the greyscale mask in results"), "return_mask_composite": OptionInfo(False, "For inpainting, include masked composite in results"),