Merge pull request #134 from zero01101/testing
Inpainting model indication color and some other stuff
This commit is contained in:
tim h
GitHub
commit
fbe1f613c6
8 changed files with 123 additions and 10 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
13
index.html
13
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/ui.js?v=8481b85" type="text/javascript"></script>
|
||||
<script src="js/lib/toolbar.js?v=d483951" 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>
|
||||
|
|
|
|||
25
js/index.js
25
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 {
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
Loading…
Reference in a new issue