From 81e3cc984ade2b58a4446d992208d0685eb92315 Mon Sep 17 00:00:00 2001 From: Victor Seiji Hariki Date: Fri, 30 Dec 2022 08:26:28 -0300 Subject: [PATCH 01/13] add color indication for inpainting models Signed-off-by: Victor Seiji Hariki --- css/index.css | 9 +++++++++ js/index.js | 14 ++++++++++++++ js/lib/ui.js | 3 ++- 3 files changed, 25 insertions(+), 1 deletion(-) diff --git a/css/index.css b/css/index.css index a39c2c6..80fa23d 100644 --- a/css/index.css +++ b/css/index.css @@ -304,6 +304,15 @@ input#host { box-sizing: border-box; } +/* Model Select */ +#models-ac-select option { + background-color: #fcc; +} + +#models-ac-select option.inpainting { + background-color: #cfc; +} + /* Settings button */ .ui.icon.header-button { padding: 0; diff --git a/js/index.js b/js/index.js index 133439f..b3403a4 100644 --- a/js/index.js +++ b/js/index.js @@ -531,6 +531,16 @@ const modelAutoComplete = createAutoComplete( "Model", document.getElementById("models-ac-select") ); +modelAutoComplete.onchange.on(({value}) => { + if (value.toLowerCase().includes("inpainting")) + document.querySelector( + "#models-ac-select input.autocomplete-text" + ).style.backgroundColor = "#cfc"; + else + document.querySelector( + "#models-ac-select input.autocomplete-text" + ).style.backgroundColor = "#fcc"; +}); const samplerAutoComplete = createAutoComplete( "Sampler", @@ -782,6 +792,10 @@ async function getModels() { modelAutoComplete.options = data.map((option) => ({ name: option.title, value: option.title, + optionelcb: (el) => { + if (option.title.toLowerCase().includes("inpainting")) + el.classList.add("inpainting"); + }, })); try { diff --git a/js/lib/ui.js b/js/lib/ui.js index 5e4cd22..e0d7598 100644 --- a/js/lib/ui.js +++ b/js/lib/ui.js @@ -206,7 +206,7 @@ function createSlider(name, wrapper, options = {}) { * @param {HTMLDivElement} wrapper The div element that will wrap the input elements * @param {object} options Extra options * @param {boolean} options.multiple Whether multiple options can be selected - * @param {{name: string, value: string}[]} options.options Options to add to the selector + * @param {{name: string, value: string, optionelcb: (el: HTMLOptionElement) => void}[]} options.options Options to add to the selector * @returns {AutoCompleteElement} */ function createAutoComplete(name, wrapper, options = {}) { @@ -293,6 +293,7 @@ function createAutoComplete(name, wrapper, options = {}) { const optionEl = document.createElement("option"); optionEl.classList.add("autocomplete-option"); optionEl.title = title || name; + if (opt.optionelcb) opt.optionelcb(optionEl); const option = {name, value, optionElement: optionEl}; From 96ee01a2a340acf9c35180a7d74812eec9bace54 Mon Sep 17 00:00:00 2001 From: seijihariki Date: Fri, 30 Dec 2022 11:27:08 +0000 Subject: [PATCH 02/13] Fixed resource hashes --- index.html | 6 +++--- pages/configuration.html | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index faf2671..7e7ea31 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - + @@ -323,7 +323,7 @@ - + - + - + diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js index adb6224..0a7b9a5 100644 --- a/js/ui/tool/dream.js +++ b/js/ui/tool/dream.js @@ -1346,6 +1346,10 @@ const dreamTool = () => h: stableDiffusionData.height, }; + //hacky set non-square auto hrfix values + stableDiffusionData.firstphase_height = resolution.h / 2; + stableDiffusionData.firstphase_width = resolution.w / 2; + if (global.connection === "online") { dream_generate_callback(bb, resolution, state); } else { From aee0c33c7b7bf44ef295309b503268e08cc2e43d Mon Sep 17 00:00:00 2001 From: tim h Date: Fri, 30 Dec 2022 23:40:45 -0600 Subject: [PATCH 04/13] significantly more useful hrfix updates adds lock-to-max-hrfix-px slider which works pretty well if i do say so myself --- index.html | 5 +++-- js/index.js | 11 +++++++++++ js/ui/tool/dream.js | 12 ++++++++++-- 3 files changed, 24 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index ac87e61..9d4596b 100644 --- a/index.html +++ b/index.html @@ -100,6 +100,7 @@
+
- + - + diff --git a/js/index.js b/js/index.js index b3403a4..a9ee850 100644 --- a/js/index.js +++ b/js/index.js @@ -612,6 +612,17 @@ makeSlider( makeSlider("Steps", document.getElementById("steps"), "steps", 1, 70, 5, 30, 1); +makeSlider( + "HR Fix Lock Px.", + document.getElementById("hrFixLock"), + "hr_fix_lock_px", + 0.0, + 768.0, + 256.0, + 0.0, + 1.0 +); + function changeMaskBlur() { stableDiffusionData.mask_blur = parseInt( document.getElementById("maskBlur").value diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js index 0a7b9a5..5ae2ef3 100644 --- a/js/ui/tool/dream.js +++ b/js/ui/tool/dream.js @@ -1347,8 +1347,16 @@ const dreamTool = () => }; //hacky set non-square auto hrfix values - stableDiffusionData.firstphase_height = resolution.h / 2; - stableDiffusionData.firstphase_width = resolution.w / 2; + let hrLockPx = + localStorage.getItem("openoutpaint/hr_fix_lock_px") ?? 0; + stableDiffusionData.firstphase_height = + hrLockPx == 0 || resolution.h / 2 <= hrLockPx + ? resolution.h / 2 + : hrLockPx; + stableDiffusionData.firstphase_width = + hrLockPx == 0 || resolution.w / 2 <= hrLockPx + ? resolution.w / 2 + : hrLockPx; if (global.connection === "online") { dream_generate_callback(bb, resolution, state); From 340efa29988e835a9c1a7d1511f0983645313a8d Mon Sep 17 00:00:00 2001 From: zero01101 Date: Sat, 31 Dec 2022 05:41:07 +0000 Subject: [PATCH 05/13] Fixed resource hashes --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 9d4596b..59ac0d9 100644 --- a/index.html +++ b/index.html @@ -335,7 +335,7 @@ - + - + - + - + - + diff --git a/js/lib/toolbar.js b/js/lib/toolbar.js index d8cad9b..70ee985 100644 --- a/js/lib/toolbar.js +++ b/js/lib/toolbar.js @@ -188,4 +188,30 @@ const _toolbar_input = { }, }; }, + + selectlist: ( + state, + dataKey, + text, + options = {value, text}, + defaultOptionValue, + cb = null + ) => { + const selectlist = document.createElement("select"); + Object.entries(options).forEach((opt) => { + var option = document.createElement("option"); + option.value = opt[0]; + option.text = opt[1]; + selectlist.options.add(option); + }); + selectlist.selectedIndex = defaultOptionValue; + selectlist.onchange = () => { + state[dataKey] = selectlist.selectedIndex; + cb && cb(); + }; + const label = document.createElement("label"); + label.appendChild(selectlist); + label.appendChild(new Text(text)); + return {selectlist, label}; + }, }; diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js index 5ae2ef3..c09f2c8 100644 --- a/js/ui/tool/dream.js +++ b/js/ui/tool/dream.js @@ -932,7 +932,7 @@ const dream_img2img_callback = (bb, resolution, state) => { request.height = resolution.h; request.denoising_strength = state.denoisingStrength; - request.inpainting_fill = 1; // For img2img use original + request.inpainting_fill = state.inpainting_fill; //let's see how this works //1; // For img2img use original // Load prompt (maybe we should add some events so we don't have to do this) request.prompt = document.getElementById("prompt").value; @@ -2018,6 +2018,23 @@ const img2imgTool = () => textStep: 1, } ).slider; + + // inpaint fill type select list + state.ctxmenu.inpaintTypeSelect = _toolbar_input.selectlist( + state, + "inpainting_fill", + "Inpaint Type", + { + 0: "fill", + 1: "original (recommended)", + 2: "latent noise", + 3: "latent nothing", + }, + 1, // USE ORIGINAL FOR IMG2IMG OR ELSE but we still give you the option because we love you + () => { + stableDiffusionData.inpainting_fill = state.inpainting_fill; + } + ).label; } menu.appendChild(state.ctxmenu.cursorSizeSlider); @@ -2035,6 +2052,7 @@ const img2imgTool = () => menu.appendChild(state.ctxmenu.denoisingStrengthSlider); menu.appendChild(state.ctxmenu.borderMaskGradientCheckbox); menu.appendChild(state.ctxmenu.borderMaskSlider); + menu.appendChild(state.ctxmenu.inpaintTypeSelect); }, shortcut: "I", } From 8f03b73dff05d6e3f405ae2e5b2c69d5e071ae33 Mon Sep 17 00:00:00 2001 From: zero01101 Date: Sat, 31 Dec 2022 19:31:53 +0000 Subject: [PATCH 09/13] Fixed resource hashes --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index b1bfe49..272c850 100644 --- a/index.html +++ b/index.html @@ -349,7 +349,7 @@ src="js/ui/tool/generic.js?v=2bcd36d" type="text/javascript"> - + From 5fbf9c37f2a0c8f119bcf870f2a7fae58c51106e Mon Sep 17 00:00:00 2001 From: tim h Date: Sun, 1 Jan 2023 10:31:49 -0600 Subject: [PATCH 10/13] marginally less ugly inpaint mode selector really don't think it has any need to be a full-on autocomplete fancy thingy --- css/ui/generic.css | 20 ++++++++++++++++++++ index.html | 6 +++--- js/lib/toolbar.js | 3 ++- js/ui/tool/dream.js | 2 +- pages/configuration.html | 2 +- 5 files changed, 27 insertions(+), 6 deletions(-) diff --git a/css/ui/generic.css b/css/ui/generic.css index ca8f67f..93caf35 100644 --- a/css/ui/generic.css +++ b/css/ui/generic.css @@ -100,6 +100,26 @@ div.slider-wrapper > input.text { background-color: transparent; } +/* Bare Select */ + +.bareselector { + border-radius: 5px; + + background-color: white; + + overflow-y: auto; + + margin-top: 0; + margin-left: 0; + + max-height: 200px; + min-width: 100%; + max-width: 800px; + + width: fit-content; + z-index: 200; +} + /* Autocomplete Select */ div.autocomplete { border-radius: 5px; diff --git a/index.html b/index.html index 272c850..18149fd 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ - + @@ -323,7 +323,7 @@ - + - + diff --git a/js/lib/toolbar.js b/js/lib/toolbar.js index 70ee985..232b0fe 100644 --- a/js/lib/toolbar.js +++ b/js/lib/toolbar.js @@ -198,6 +198,7 @@ const _toolbar_input = { cb = null ) => { const selectlist = document.createElement("select"); + selectlist.classList.add("bareselector"); Object.entries(options).forEach((opt) => { var option = document.createElement("option"); option.value = opt[0]; @@ -210,8 +211,8 @@ const _toolbar_input = { cb && cb(); }; const label = document.createElement("label"); - label.appendChild(selectlist); label.appendChild(new Text(text)); + label.appendChild(selectlist); return {selectlist, label}; }, }; diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js index c09f2c8..3893789 100644 --- a/js/ui/tool/dream.js +++ b/js/ui/tool/dream.js @@ -2049,10 +2049,10 @@ const img2imgTool = () => menu.appendChild(document.createElement("br")); menu.appendChild(state.ctxmenu.fullResolutionLabel); menu.appendChild(document.createElement("br")); + menu.appendChild(state.ctxmenu.inpaintTypeSelect); menu.appendChild(state.ctxmenu.denoisingStrengthSlider); menu.appendChild(state.ctxmenu.borderMaskGradientCheckbox); menu.appendChild(state.ctxmenu.borderMaskSlider); - menu.appendChild(state.ctxmenu.inpaintTypeSelect); }, shortcut: "I", } diff --git a/pages/configuration.html b/pages/configuration.html index 2763705..496643c 100644 --- a/pages/configuration.html +++ b/pages/configuration.html @@ -10,7 +10,7 @@ - + From ac058ba73036bef4f1007375f1f4a38e6b309f46 Mon Sep 17 00:00:00 2001 From: zero01101 Date: Sun, 1 Jan 2023 16:32:10 +0000 Subject: [PATCH 11/13] Fixed resource hashes --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 18149fd..c0fb697 100644 --- a/index.html +++ b/index.html @@ -349,7 +349,7 @@ src="js/ui/tool/generic.js?v=2bcd36d" type="text/javascript"> - + From fe7470ee94914dd8a9a5e032f1d342226fe2b4f3 Mon Sep 17 00:00:00 2001 From: tim h Date: Sun, 1 Jan 2023 11:05:40 -0600 Subject: [PATCH 12/13] "consistency typo" --- index.html | 2 +- js/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index c0fb697..62feefd 100644 --- a/index.html +++ b/index.html @@ -335,7 +335,7 @@ - + - +