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/26] 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/26] 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/26] 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/26] 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/26] 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 987f29739a4200af7f07783114d85c610ff9d2bf Mon Sep 17 00:00:00 2001 From: ribawaja Date: Sun, 1 Jan 2023 01:52:52 -0500 Subject: [PATCH 10/26] adjust shortcuts --- js/initalize/shortcuts.populate.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/js/initalize/shortcuts.populate.js b/js/initalize/shortcuts.populate.js index 3e44ac0..b7c8279 100644 --- a/js/initalize/shortcuts.populate.js +++ b/js/initalize/shortcuts.populate.js @@ -14,7 +14,7 @@ keyboard.onShortcut({key: "KeyD"}, () => { keyboard.onShortcut({key: "KeyM"}, () => { tools.maskbrush.enable(); }); -keyboard.onShortcut({key: "KeyC"}, () => { +keyboard.onShortcut({key: "KeyB"}, () => { tools.colorbrush.enable(); }); keyboard.onShortcut({key: "KeyI"}, () => { @@ -29,3 +29,6 @@ keyboard.onShortcut({key: "KeyU"}, () => { keyboard.onShortcut({key: "KeyN"}, () => { tools.interrogate.enable(); }); +keyboard.onShortcut({key: "KeyC"}, () => { + maskPaintLayer.clear(); +}); From 5fbf9c37f2a0c8f119bcf870f2a7fae58c51106e Mon Sep 17 00:00:00 2001 From: tim h Date: Sun, 1 Jan 2023 10:31:49 -0600 Subject: [PATCH 11/26] 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 12/26] 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 13/26] "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 @@ - + - + - + diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js index c345e2a..b14b5ac 100644 --- a/js/ui/tool/dream.js +++ b/js/ui/tool/dream.js @@ -3,7 +3,6 @@ let generationQueue = []; let generationAreas = new Set(); let generating = false; - /** * Starts progress monitoring bar * @@ -378,7 +377,7 @@ const _generate = async (endpoint, request, bb, options = {}) => { const sendInterrupt = () => { fetch(`${host}${config.api.path}interrupt`, {method: "POST"}); - } + }; // Add Interrupt Button const interruptButton = makeElement("button", bb.x + bb.w - 100, bb.y + bb.h); @@ -395,7 +394,6 @@ const _generate = async (endpoint, request, bb, options = {}) => { console.info(`[dream] Generating images for prompt '${request.prompt}'`); console.debug(request); - eagerGenerateCount = toolbar._current_tool.state.eagerGenerateCount; isDreamComplete = false; @@ -438,13 +436,15 @@ const _generate = async (endpoint, request, bb, options = {}) => { } const needMoreGenerations = () => { - return (eagerGenerateCount > 0) && - (images.length - highestNavigatedImageIndex <= eagerGenerateCount); - } + return ( + eagerGenerateCount > 0 && + images.length - highestNavigatedImageIndex <= eagerGenerateCount + ); + }; const isGenerationPending = () => { return generationQueue.length > 0; - } + }; let highestNavigatedImageIndex = 0; @@ -535,7 +535,6 @@ const _generate = async (endpoint, request, bb, options = {}) => { if (needMoreGenerations() && !isGenerationPending() && !isDreamComplete) { makeMore(); } - }; const discardImg = async () => { @@ -781,7 +780,6 @@ const _generate = async (endpoint, request, bb, options = {}) => { if (needMoreGenerations()) { makeMore(); } - }; /** @@ -1508,7 +1506,6 @@ const dreamTool = () => "Preserve Brushed Masks" ).label; - // Overmasking Slider state.ctxmenu.overMaskPxLabel = _toolbar_input.slider( state, @@ -1522,7 +1519,6 @@ const dreamTool = () => } ).slider; - // Eager generation Slider state.ctxmenu.eagerGenerateCountLabel = _toolbar_input.slider( state, @@ -1535,8 +1531,6 @@ const dreamTool = () => textStep: 1, } ).slider; - - } menu.appendChild(state.ctxmenu.cursorSizeSlider); @@ -1549,7 +1543,6 @@ const dreamTool = () => menu.appendChild(state.ctxmenu.preserveMasksLabel); menu.appendChild(document.createElement("br")); menu.appendChild(state.ctxmenu.overMaskPxLabel); - menu.appendChild(document.createElement("br")); menu.appendChild(state.ctxmenu.eagerGenerateCountLabel); }, shortcut: "D", @@ -2070,18 +2063,18 @@ const img2imgTool = () => } ).slider; - // Eager generation Slider - state.ctxmenu.eagerGenerateCountLabel = _toolbar_input.slider( - state, - "eagerGenerateCount", - "Generate-ahead count", - { - min: 0, - max: 100, - step: 2, - textStep: 1, - } - ).slider; + // Eager generation Slider + state.ctxmenu.eagerGenerateCountLabel = _toolbar_input.slider( + state, + "eagerGenerateCount", + "Generate-ahead count", + { + min: 0, + max: 100, + step: 2, + textStep: 1, + } + ).slider; } menu.appendChild(state.ctxmenu.cursorSizeSlider); @@ -2099,7 +2092,6 @@ const img2imgTool = () => menu.appendChild(state.ctxmenu.denoisingStrengthSlider); menu.appendChild(state.ctxmenu.borderMaskGradientCheckbox); menu.appendChild(state.ctxmenu.borderMaskSlider); - menu.appendChild(document.createElement("br")); menu.appendChild(state.ctxmenu.eagerGenerateCountLabel); }, shortcut: "I", @@ -2108,8 +2100,7 @@ const img2imgTool = () => window.onbeforeunload = async () => { // Stop current generation on page close - if (generating) - await sendInterrupt(); + if (generating) await sendInterrupt(); }; const sendSeed = (seed) => { From 4efdd186ca62c77f3d7999d770c092db562c490e Mon Sep 17 00:00:00 2001 From: zero01101 Date: Mon, 2 Jan 2023 04:48:43 +0000 Subject: [PATCH 20/26] Fixed resource hashes --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 9855b7d..bbfd2fa 100644 --- a/index.html +++ b/index.html @@ -349,7 +349,7 @@ src="js/ui/tool/generic.js?v=2bcd36d" type="text/javascript"> - + From ea238a457e96a03278c7c72f5241bc91f3ce5c49 Mon Sep 17 00:00:00 2001 From: tim h Date: Sun, 1 Jan 2023 23:06:19 -0600 Subject: [PATCH 21/26] version/readme bump again --- README.md | 1 + index.html | 2 +- pages/embed.test.html | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 77f480a..15a2fa7 100644 --- a/README.md +++ b/README.md @@ -43,6 +43,7 @@ this is a completely vanilla javascript and html canvas outpainting convenience - saves your preferences/imported images to browser localstorage for maximum convenience - reset to defaults button to unsave your preferences if things go squirrely - floating navigable undo/redo palette with ctrl+z/y keyboard shortcuts for additional maximum convenience and desquirreliness +- optional generate-ahead function to keep crankin' out the dreams while you look through the ones that already exist - _all this and much more for the low, low price of simply already owning an expensive GPU!_ ## operation diff --git a/index.html b/index.html index 9855b7d..f71aab2 100644 --- a/index.html +++ b/index.html @@ -187,7 +187,7 @@
- Alpha release v0.0.12.2 + Alpha release v0.0.12.3
diff --git a/pages/embed.test.html b/pages/embed.test.html index 925039f..877e48f 100644 --- a/pages/embed.test.html +++ b/pages/embed.test.html @@ -8,7 +8,7 @@ - + From 1a3f04a2764b8e5c026d39badc587d60493ac1fb Mon Sep 17 00:00:00 2001 From: zero01101 Date: Mon, 2 Jan 2023 06:46:04 +0000 Subject: [PATCH 23/26] Fixed resource hashes --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 280edce..e3d3381 100644 --- a/index.html +++ b/index.html @@ -335,7 +335,7 @@ - + - + - +