Merge pull request #134 from zero01101/testing

Inpainting model indication color and some other stuff

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;

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;

index.html

@@ -7,10 +7,10 @@
 		<link href="css/colors.css?v=3f81e80" rel="stylesheet" />
 		<link href="css/icons.css?v=a25504c" rel="stylesheet" />
 
-		<link href="css/index.css?v=ef0c943" rel="stylesheet" />
+		<link href="css/index.css?v=69d3b9e" rel="stylesheet" />
 		<link href="css/layers.css?v=b4fbf61" rel="stylesheet" />
 
-		<link href="css/ui/generic.css?v=a15ce4b" rel="stylesheet" />
+		<link href="css/ui/generic.css?v=79bee9b" rel="stylesheet" />
 
 		<link href="css/ui/history.css?v=0b03861" rel="stylesheet" />
 		<link href="css/ui/layers.css?v=4fd95fe" rel="stylesheet" />
@@ -100,6 +100,7 @@
 					<input type="checkbox" id="cbxHRFix" onchange="changeHiResFix()" />
 					<label for="cbxHRFix">Auto txt2img HRfix</label>
 					<br />
+					<div id="hrFixLock"></div>
 					<input
 						type="checkbox"
 						id="cbxRestoreFaces"
@@ -322,8 +323,8 @@
 		<script src="js/lib/layers.js?v=a1f8aea" type="text/javascript"></script>
 		<script src="js/lib/commands.js?v=00464cb" type="text/javascript"></script>
 
-		<script src="js/lib/toolbar.js?v=8a08072" type="text/javascript"></script>
+		<script src="js/lib/toolbar.js?v=d483951" type="text/javascript"></script>
-		<script src="js/lib/ui.js?v=8481b85" type="text/javascript"></script>
+		<script src="js/lib/ui.js?v=76ede2b" type="text/javascript"></script>
 
 		<script
 			src="js/initalize/layers.populate.js?v=c81f0a5"
@@ -334,7 +335,7 @@
 
 		<!-- Content -->
 		<script src="js/prompt.js?v=7a1c68c" type="text/javascript"></script>
-		<script src="js/index.js?v=dd80c92" type="text/javascript"></script>
+		<script src="js/index.js?v=15066c2" type="text/javascript"></script>
 
 		<script
 			src="js/ui/floating/history.js?v=fc92d14"
@@ -348,7 +349,7 @@
 			src="js/ui/tool/generic.js?v=2bcd36d"
 			type="text/javascript"></script>
 
-		<script src="js/ui/tool/dream.js?v=230e42e" type="text/javascript"></script>
+		<script src="js/ui/tool/dream.js?v=86bee3f" type="text/javascript"></script>
 		<script
 			src="js/ui/tool/maskbrush.js?v=1e8a893"
 			type="text/javascript"></script>

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 {

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};
+	},
 };

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};
 

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);

pages/configuration.html

@@ -7,10 +7,10 @@
 		<link href="../css/colors.css?v=3f81e80" rel="stylesheet" />
 		<link href="../css/icons.css?v=a25504c" rel="stylesheet" />
 
-		<link href="../css/index.css?v=ef0c943" rel="stylesheet" />
+		<link href="../css/index.css?v=69d3b9e" rel="stylesheet" />
 		<link href="../css/layers.css?v=b4fbf61" rel="stylesheet" />
 
-		<link href="../css/ui/generic.css?v=a15ce4b" rel="stylesheet" />
+		<link href="../css/ui/generic.css?v=79bee9b" rel="stylesheet" />
 
 		<link href="../css/ui/history.css?v=0b03861" rel="stylesheet" />
 		<link href="../css/ui/layers.css?v=4fd95fe" rel="stylesheet" />