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/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 b58a5dd..4896916 100644
--- a/index.html
+++ b/index.html
@@ -7,10 +7,10 @@
-
+
-
+
@@ -100,6 +100,7 @@
+
-
-
+
+
-
+
-
+
diff --git a/js/index.js b/js/index.js
index 133439f..774cace 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",
@@ -602,6 +612,17 @@ makeSlider(
makeSlider("Steps", document.getElementById("steps"), "steps", 1, 70, 5, 30, 1);
+makeSlider(
+ "HRfix 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
@@ -782,6 +803,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/toolbar.js b/js/lib/toolbar.js
index d8cad9b..232b0fe 100644
--- a/js/lib/toolbar.js
+++ b/js/lib/toolbar.js
@@ -188,4 +188,31 @@ const _toolbar_input = {
},
};
},
+
+ selectlist: (
+ state,
+ dataKey,
+ text,
+ options = {value, text},
+ defaultOptionValue,
+ 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];
+ 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(new Text(text));
+ label.appendChild(selectlist);
+ return {selectlist, label};
+ },
};
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};
diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js
index adb6224..3893789 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;
@@ -1346,6 +1346,18 @@ const dreamTool = () =>
h: stableDiffusionData.height,
};
+ //hacky set non-square auto hrfix values
+ 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);
} else {
@@ -2006,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);
@@ -2020,6 +2049,7 @@ 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);
diff --git a/pages/configuration.html b/pages/configuration.html
index 313a527..496643c 100644
--- a/pages/configuration.html
+++ b/pages/configuration.html
@@ -7,10 +7,10 @@
-
+
-
+