ui works
This commit is contained in:
parent
6017b60e9c
commit
ce6052d68e
7 changed files with 229 additions and 21 deletions
|
@ -16,6 +16,7 @@ this is a completely vanilla javascript and html canvas outpainting convenience
|
||||||
|
|
||||||
## features
|
## features
|
||||||
|
|
||||||
|
- [soft inpainting](https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/14208) support
|
||||||
- SDXL "support"! (please check outpaint/inpaint fill types in the context menus and fiddle with denoising a LOT for img2img, it's touchy)
|
- SDXL "support"! (please check outpaint/inpaint fill types in the context menus and fiddle with denoising a LOT for img2img, it's touchy)
|
||||||
- [now available as an extension for webUI!](https://github.com/zero01101/openOutpaint-webUI-extension) you can find it under the default "available" section in the webUI _extensions_ tab
|
- [now available as an extension for webUI!](https://github.com/zero01101/openOutpaint-webUI-extension) you can find it under the default "available" section in the webUI _extensions_ tab
|
||||||
- **_NOTE: extension still requires `--api` flag in webui-user launch script_**
|
- **_NOTE: extension still requires `--api` flag in webui-user launch script_**
|
||||||
|
|
|
@ -196,3 +196,9 @@
|
||||||
-webkit-mask-image: url("../res/icons/clipboard-list.svg");
|
-webkit-mask-image: url("../res/icons/clipboard-list.svg");
|
||||||
mask-image: url("../res/icons/clipboard-list.svg");
|
mask-image: url("../res/icons/clipboard-list.svg");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ui.inline-icon.icon-squircle::after,
|
||||||
|
.ui.icon > .icon-squircle {
|
||||||
|
-webkit-mask-image: url("../res/icons/squircle.svg");
|
||||||
|
mask-image: url("../res/icons/squircle.svg");
|
||||||
|
}
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
<title>openOutpaint 🐠</title>
|
<title>openOutpaint 🐠</title>
|
||||||
<!-- CSS Variables -->
|
<!-- CSS Variables -->
|
||||||
<link href="css/colors.css?v=f732f19" rel="stylesheet" />
|
<link href="css/colors.css?v=f732f19" rel="stylesheet" />
|
||||||
<link href="css/icons.css?v=e6f94af" rel="stylesheet" />
|
<link href="css/icons.css?v=1640e24" rel="stylesheet" />
|
||||||
|
|
||||||
<link href="css/index.css?v=cf6b502" rel="stylesheet" />
|
<link href="css/index.css?v=cf6b502" rel="stylesheet" />
|
||||||
<link href="css/layers.css?v=92c0352" rel="stylesheet" />
|
<link href="css/layers.css?v=92c0352" rel="stylesheet" />
|
||||||
|
@ -337,7 +337,7 @@
|
||||||
<br />
|
<br />
|
||||||
<span id="version">
|
<span id="version">
|
||||||
<a href="https://github.com/zero01101/openOutpaint" target="_blank">
|
<a href="https://github.com/zero01101/openOutpaint" target="_blank">
|
||||||
v20240127.001
|
v202402-03xx.00x TODO CHANGEME
|
||||||
</a>
|
</a>
|
||||||
<br />
|
<br />
|
||||||
<a
|
<a
|
||||||
|
@ -534,7 +534,7 @@
|
||||||
<!-- Basics -->
|
<!-- Basics -->
|
||||||
<script src="js/global.js?v=ac30d16" type="text/javascript"></script>
|
<script src="js/global.js?v=ac30d16" type="text/javascript"></script>
|
||||||
<script src="js/defaults.js?v=5b06818" type="text/javascript"></script>
|
<script src="js/defaults.js?v=5b06818" type="text/javascript"></script>
|
||||||
<script src="js/extensions.js?v=0bd1fbe" type="text/javascript"></script>
|
<script src="js/extensions.js?v=14e4f0f" type="text/javascript"></script>
|
||||||
|
|
||||||
<!-- Base Libs -->
|
<!-- Base Libs -->
|
||||||
<script src="js/lib/util.js?v=379aef7" type="text/javascript"></script>
|
<script src="js/lib/util.js?v=379aef7" type="text/javascript"></script>
|
||||||
|
@ -574,7 +574,7 @@
|
||||||
src="js/ui/tool/generic.js?v=3e678e0"
|
src="js/ui/tool/generic.js?v=3e678e0"
|
||||||
type="text/javascript"></script>
|
type="text/javascript"></script>
|
||||||
|
|
||||||
<script src="js/ui/tool/dream.js?v=be5099a" type="text/javascript"></script>
|
<script src="js/ui/tool/dream.js?v=d8cfe88" type="text/javascript"></script>
|
||||||
<script
|
<script
|
||||||
src="js/ui/tool/maskbrush.js?v=e9bd0eb"
|
src="js/ui/tool/maskbrush.js?v=e9bd0eb"
|
||||||
type="text/javascript"></script>
|
type="text/javascript"></script>
|
||||||
|
|
|
@ -53,6 +53,7 @@ const extensions = {
|
||||||
console.warn("[index] Failed to fetch extensions");
|
console.warn("[index] Failed to fetch extensions");
|
||||||
console.warn(e);
|
console.warn(e);
|
||||||
}
|
}
|
||||||
|
this.checkForSoftInpainting();
|
||||||
this.checkForDynamicPrompts();
|
this.checkForDynamicPrompts();
|
||||||
this.checkForControlNet(
|
this.checkForControlNet(
|
||||||
controlNetModelAutoComplete,
|
controlNetModelAutoComplete,
|
||||||
|
@ -64,6 +65,11 @@ const extensions = {
|
||||||
//checkForSAG(); //??
|
//checkForSAG(); //??
|
||||||
},
|
},
|
||||||
|
|
||||||
|
async checkForSoftInpainting() {
|
||||||
|
this.alwaysOnScripts = true;
|
||||||
|
//TODO implement, inpaint/img2img only
|
||||||
|
},
|
||||||
|
|
||||||
async checkForDynamicPrompts() {
|
async checkForDynamicPrompts() {
|
||||||
if (
|
if (
|
||||||
this.enabledExtensions.filter((e) => e.includes("dynamic prompts"))
|
this.enabledExtensions.filter((e) => e.includes("dynamic prompts"))
|
||||||
|
|
|
@ -62,12 +62,9 @@ const _monitorProgress = (bb, oncheck = null) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const timeSpent = performance.now() - init;
|
const timeSpent = performance.now() - init;
|
||||||
setTimeout(
|
setTimeout(() => {
|
||||||
() => {
|
|
||||||
if (running) _checkProgress();
|
if (running) _checkProgress();
|
||||||
},
|
}, Math.max(0, minDelay - timeSpent));
|
||||||
Math.max(0, minDelay - timeSpent)
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
_checkProgress();
|
_checkProgress();
|
||||||
|
@ -2717,7 +2714,7 @@ const img2imgTool = () =>
|
||||||
).slider;
|
).slider;
|
||||||
|
|
||||||
// Border Mask Gradient Checkbox
|
// Border Mask Gradient Checkbox
|
||||||
state.ctxmenu.borderMaskGradientCheckbox = _toolbar_input.checkbox(
|
state.ctxmenu.borderMaskGradientLabel = _toolbar_input.checkbox(
|
||||||
state,
|
state,
|
||||||
"openoutpaint/img2img-gradient",
|
"openoutpaint/img2img-gradient",
|
||||||
"gradient",
|
"gradient",
|
||||||
|
@ -2745,6 +2742,152 @@ const img2imgTool = () =>
|
||||||
}
|
}
|
||||||
).checkbox;
|
).checkbox;
|
||||||
|
|
||||||
|
// soft inpainting checkbox - arg 0
|
||||||
|
state.ctxmenu.softInpaintLabel = _toolbar_input.checkbox(
|
||||||
|
state,
|
||||||
|
"openoutpaint/img2img-softinpaint",
|
||||||
|
"softInpaint",
|
||||||
|
"Soft Inpainting",
|
||||||
|
"icon-squircle",
|
||||||
|
() => {
|
||||||
|
if (state.softInpaint) {
|
||||||
|
state.ctxmenu.softInpaintScheduleBiasSlider.classList.remove(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
state.ctxmenu.softInpaintMaskInfluenceSlider.classList.remove(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
state.ctxmenu.softInpaintDifferenceContrastSlider.classList.remove(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
state.ctxmenu.softInpaintDifferenceThresholdSlider.classList.remove(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
state.ctxmenu.softInpaintPreservationStrengthSlider.classList.remove(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
state.ctxmenu.softInpaintTransitionContrastBoostSlider.classList.remove(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
// state.ctxmenu.softInpaintSliderLinebreak.classList.add(
|
||||||
|
// "invisible"
|
||||||
|
// );
|
||||||
|
} else {
|
||||||
|
state.ctxmenu.softInpaintScheduleBiasSlider.classList.add(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
state.ctxmenu.softInpaintMaskInfluenceSlider.classList.add(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
state.ctxmenu.softInpaintDifferenceContrastSlider.classList.add(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
state.ctxmenu.softInpaintDifferenceThresholdSlider.classList.add(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
state.ctxmenu.softInpaintPreservationStrengthSlider.classList.add(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
state.ctxmenu.softInpaintTransitionContrastBoostSlider.classList.add(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
// state.ctxmenu.softInpaintSliderLinebreak.classList.remove(
|
||||||
|
// "invisible"
|
||||||
|
// );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
).checkbox;
|
||||||
|
|
||||||
|
// soft inpainting schedule bias - arg 1, def 1
|
||||||
|
state.ctxmenu.softInpaintScheduleBiasSlider = _toolbar_input.slider(
|
||||||
|
state,
|
||||||
|
"openoutpaint/img2img-softinpaintschedulebias",
|
||||||
|
"softInpaintScheduleBias",
|
||||||
|
"Schedule Bias",
|
||||||
|
{
|
||||||
|
min: 0,
|
||||||
|
max: 8,
|
||||||
|
step: 0.25,
|
||||||
|
textStep: 0.01,
|
||||||
|
}
|
||||||
|
).slider;
|
||||||
|
|
||||||
|
// soft inpainting preservation strength - arg 2, def 0.5
|
||||||
|
state.ctxmenu.softInpaintPreservationStrengthSlider =
|
||||||
|
_toolbar_input.slider(
|
||||||
|
state,
|
||||||
|
"openoutpaint/img2img-softinpaintpreservationstrength",
|
||||||
|
"softInpaintPreservationStrength",
|
||||||
|
"Preservation Strength",
|
||||||
|
{
|
||||||
|
min: 0,
|
||||||
|
max: 8,
|
||||||
|
step: 0.25,
|
||||||
|
textStep: 0.01,
|
||||||
|
}
|
||||||
|
).slider;
|
||||||
|
|
||||||
|
// soft inpainting transition contrast boost - arg 3, def 4
|
||||||
|
state.ctxmenu.softInpaintTransitionContrastBoostSlider =
|
||||||
|
_toolbar_input.slider(
|
||||||
|
state,
|
||||||
|
"openoutpaint/img2img-softinpainttransitioncontrastboost",
|
||||||
|
"softInpaintTransitionContrastBoost",
|
||||||
|
"Transition Contrast Boost",
|
||||||
|
{
|
||||||
|
min: 0,
|
||||||
|
max: 32,
|
||||||
|
step: 0.5,
|
||||||
|
textStep: 0.01,
|
||||||
|
}
|
||||||
|
).slider;
|
||||||
|
|
||||||
|
//0.5 2
|
||||||
|
|
||||||
|
// soft inpainting mask influence - arg 4, def 0
|
||||||
|
state.ctxmenu.softInpaintMaskInfluenceSlider = _toolbar_input.slider(
|
||||||
|
state,
|
||||||
|
"openoutpaint/img2img-softinpaintmaskinfluence",
|
||||||
|
"softInpaintMaskInfluence",
|
||||||
|
"Mask Influence",
|
||||||
|
{
|
||||||
|
min: 0,
|
||||||
|
max: 1,
|
||||||
|
step: 0.1,
|
||||||
|
textStep: 0.01,
|
||||||
|
}
|
||||||
|
).slider;
|
||||||
|
|
||||||
|
// soft inpainting difference threshold - arg 5, def 0.5
|
||||||
|
state.ctxmenu.softInpaintDifferenceThresholdSlider =
|
||||||
|
_toolbar_input.slider(
|
||||||
|
state,
|
||||||
|
"openoutpaint/img2img-softinpaintdifferencethreshold",
|
||||||
|
"softInpaintDifferenceThreshold",
|
||||||
|
"Difference Threshold",
|
||||||
|
{
|
||||||
|
min: 0,
|
||||||
|
max: 8,
|
||||||
|
step: 0.25,
|
||||||
|
textStep: 0.01,
|
||||||
|
}
|
||||||
|
).slider;
|
||||||
|
|
||||||
|
// soft inpainting difference contrast - arg 6, def 2
|
||||||
|
state.ctxmenu.softInpaintDifferenceContrastSlider =
|
||||||
|
_toolbar_input.slider(
|
||||||
|
state,
|
||||||
|
"openoutpaint/img2img-softinpaintdifferenceContrast",
|
||||||
|
"softInpaintDifferenceContrast",
|
||||||
|
"Difference Contrast",
|
||||||
|
{
|
||||||
|
min: 0,
|
||||||
|
max: 8,
|
||||||
|
step: 0.25,
|
||||||
|
textStep: 0.01,
|
||||||
|
}
|
||||||
|
).slider;
|
||||||
|
|
||||||
// Border Mask Size Slider
|
// Border Mask Size Slider
|
||||||
state.ctxmenu.borderMaskSlider = _toolbar_input.slider(
|
state.ctxmenu.borderMaskSlider = _toolbar_input.slider(
|
||||||
state,
|
state,
|
||||||
|
@ -2858,8 +3001,17 @@ const img2imgTool = () =>
|
||||||
const btnArray2 = document.createElement("div");
|
const btnArray2 = document.createElement("div");
|
||||||
btnArray2.classList.add("checkbox-array");
|
btnArray2.classList.add("checkbox-array");
|
||||||
btnArray2.appendChild(state.ctxmenu.fullResolutionLabel);
|
btnArray2.appendChild(state.ctxmenu.fullResolutionLabel);
|
||||||
btnArray2.appendChild(state.ctxmenu.borderMaskGradientCheckbox);
|
btnArray2.appendChild(state.ctxmenu.borderMaskGradientLabel);
|
||||||
|
btnArray2.appendChild(state.ctxmenu.softInpaintLabel);
|
||||||
menu.appendChild(btnArray2);
|
menu.appendChild(btnArray2);
|
||||||
|
menu.appendChild(state.ctxmenu.softInpaintScheduleBiasSlider);
|
||||||
|
menu.appendChild(state.ctxmenu.softInpaintPreservationStrengthSlider);
|
||||||
|
menu.appendChild(
|
||||||
|
state.ctxmenu.softInpaintTransitionContrastBoostSlider
|
||||||
|
);
|
||||||
|
menu.appendChild(state.ctxmenu.softInpaintMaskInfluenceSlider);
|
||||||
|
menu.appendChild(state.ctxmenu.softInpaintDifferenceThresholdSlider);
|
||||||
|
menu.appendChild(state.ctxmenu.softInpaintDifferenceContrastSlider);
|
||||||
menu.appendChild(state.ctxmenu.borderMaskSlider);
|
menu.appendChild(state.ctxmenu.borderMaskSlider);
|
||||||
menu.appendChild(state.ctxmenu.eagerGenerateCountLabel);
|
menu.appendChild(state.ctxmenu.eagerGenerateCountLabel);
|
||||||
|
|
||||||
|
@ -2878,6 +3030,48 @@ const img2imgTool = () =>
|
||||||
state.ctxmenu.carveBlurSlider.classList.add("invisible");
|
state.ctxmenu.carveBlurSlider.classList.add("invisible");
|
||||||
state.ctxmenu.carveThresholdSlider.classList.add("invisible");
|
state.ctxmenu.carveThresholdSlider.classList.add("invisible");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
localStorage.getItem("openoutpaint/img2img-softinpaint") == "true"
|
||||||
|
) {
|
||||||
|
state.ctxmenu.softInpaintScheduleBiasSlider.classList.remove(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
state.ctxmenu.softInpaintMaskInfluenceSlider.classList.remove(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
state.ctxmenu.softInpaintDifferenceContrastSlider.classList.remove(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
state.ctxmenu.softInpaintDifferenceThresholdSlider.classList.remove(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
state.ctxmenu.softInpaintPreservationStrengthSlider.classList.remove(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
state.ctxmenu.softInpaintTransitionContrastBoostSlider.classList.remove(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
state.ctxmenu.softInpaintScheduleBiasSlider.classList.add(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
state.ctxmenu.softInpaintMaskInfluenceSlider.classList.add(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
state.ctxmenu.softInpaintDifferenceContrastSlider.classList.add(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
state.ctxmenu.softInpaintDifferenceThresholdSlider.classList.add(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
state.ctxmenu.softInpaintPreservationStrengthSlider.classList.add(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
state.ctxmenu.softInpaintTransitionContrastBoostSlider.classList.add(
|
||||||
|
"invisible"
|
||||||
|
);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
shortcut: "I",
|
shortcut: "I",
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
<title>openOutpaint 🐠</title>
|
<title>openOutpaint 🐠</title>
|
||||||
<!-- CSS Variables -->
|
<!-- CSS Variables -->
|
||||||
<link href="../css/colors.css?v=f732f19" rel="stylesheet" />
|
<link href="../css/colors.css?v=f732f19" rel="stylesheet" />
|
||||||
<link href="../css/icons.css?v=e6f94af" rel="stylesheet" />
|
<link href="../css/icons.css?v=1640e24" rel="stylesheet" />
|
||||||
|
|
||||||
<link href="../css/index.css?v=cf6b502" rel="stylesheet" />
|
<link href="../css/index.css?v=cf6b502" rel="stylesheet" />
|
||||||
<link href="../css/layers.css?v=92c0352" rel="stylesheet" />
|
<link href="../css/layers.css?v=92c0352" rel="stylesheet" />
|
||||||
|
|
1
res/icons/squircle.svg
Normal file
1
res/icons/squircle.svg
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-squircle"><path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9-9-1.8-9-9 1.8-9 9-9"/></svg>
|
After Width: | Height: | Size: 282 B |
Loading…
Reference in a new issue