Merge branch 'main' into testing

# Conflicts:
#	index.html
This commit is contained in:
tim h 2024-02-20 07:14:36 -06:00
commit 6017b60e9c
7 changed files with 139 additions and 40 deletions

View file

@ -449,3 +449,8 @@ select > option:checked::after {
-webkit-mask-image: url("../../res/icons/download.svg"); -webkit-mask-image: url("../../res/icons/download.svg");
mask-image: url("../../res/icons/download.svg"); mask-image: url("../../res/icons/download.svg");
} }
.list .actions > .upscale-btn > *:first-child {
-webkit-mask-image: url("../../res/icons/scaling.svg");
mask-image: url("../../res/icons/scaling.svg");
}

View file

@ -10,7 +10,7 @@
<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" />
<link href="css/ui/generic.css?v=30837f8" rel="stylesheet" /> <link href="css/ui/generic.css?v=ed024fe" rel="stylesheet" />
<link href="css/ui/notifications.css?v=7b152de" rel="stylesheet" /> <link href="css/ui/notifications.css?v=7b152de" rel="stylesheet" />
<link href="css/ui/workspace.css?v=2a9fdf7" rel="stylesheet" /> <link href="css/ui/workspace.css?v=2a9fdf7" rel="stylesheet" />
@ -294,8 +294,11 @@
<label>Choose upscaler</label> <label>Choose upscaler</label>
<div id="upscaler-ac-select"></div> <div id="upscaler-ac-select"></div>
<div id="upscaleX"></div> <div id="upscaleX"></div>
<button onclick="upscaleAndDownload()"> <button onclick="upscaleAndDownload(true,false)">
Upscale (might take a sec) Upscale (and download)
</button>
<button onclick="upscaleAndDownload(false,true)">
Upscale (to resource)
</button> </button>
<br /> <br />
@ -334,8 +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">
<s>Alpha release v0.0.16.6</s> v20240127.001
v2023xxxx.001 //TODO update
</a> </a>
<br /> <br />
<a <a
@ -558,7 +560,7 @@
<!-- Content --> <!-- Content -->
<script src="js/prompt.js?v=7a1c68c" type="text/javascript"></script> <script src="js/prompt.js?v=7a1c68c" type="text/javascript"></script>
<script src="js/index.js?v=425e27d" type="text/javascript"></script> <script src="js/index.js?v=70af18f" type="text/javascript"></script>
<script <script
src="js/ui/floating/history.js?v=4f29db4" src="js/ui/floating/history.js?v=4f29db4"
@ -572,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=aa8c906" type="text/javascript"></script> <script src="js/ui/tool/dream.js?v=be5099a" 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>
@ -580,9 +582,9 @@
src="js/ui/tool/colorbrush.js?v=84ff9fa" src="js/ui/tool/colorbrush.js?v=84ff9fa"
type="text/javascript"></script> type="text/javascript"></script>
<script <script
src="js/ui/tool/select.js?v=dfacef5" src="js/ui/tool/select.js?v=76df58e"
type="text/javascript"></script> type="text/javascript"></script>
<script src="js/ui/tool/stamp.js?v=4494df6" type="text/javascript"></script> <script src="js/ui/tool/stamp.js?v=fdca5bc" type="text/javascript"></script>
<script <script
src="js/ui/tool/interrogate.js?v=dd45b4a" src="js/ui/tool/interrogate.js?v=dd45b4a"
type="text/javascript"></script> type="text/javascript"></script>

View file

@ -1186,7 +1186,11 @@ async function getUpscalers() {
return {name: u, value: u}; return {name: u, value: u};
}); });
upscalerAutoComplete.value = upscalers[0]; upscalerAutoComplete.value =
localStorage.getItem("openoutpaint/upscaler") === null
? upscalers[0]
: localStorage.getItem("openoutpaint/upscaler");
hrFixUpscalerAutoComplete.value = hrFixUpscalerAutoComplete.value =
localStorage.getItem("openoutpaint/hr_upscaler") === null localStorage.getItem("openoutpaint/hr_upscaler") === null
? "None" ? "None"
@ -1430,7 +1434,11 @@ async function getSamplers() {
} }
} }
async function upscaleAndDownload() { async function upscaleAndDownload(
download = false,
add_resource = false,
aCanvas = null
) {
// Future improvements: some upscalers take a while to upscale, so we should show a loading bar or something, also a slider for the upscale amount // Future improvements: some upscalers take a while to upscale, so we should show a loading bar or something, also a slider for the upscale amount
// get cropped canvas, send it to upscaler, download result // get cropped canvas, send it to upscaler, download result
@ -1438,7 +1446,13 @@ async function upscaleAndDownload() {
? localStorage.getItem("openoutpaint/upscale_x") ? localStorage.getItem("openoutpaint/upscale_x")
: 2; : 2;
var upscaler = upscalerAutoComplete.value; var upscaler = upscalerAutoComplete.value;
var croppedCanvas = cropCanvas( var croppedCanvas = null;
var imgdata = null;
localStorage.setItem("openoutpaint/upscaler", upscaler);
if (aCanvas == null) {
console.log("Upscaling main canvas.");
croppedCanvas = cropCanvas(
uil.getVisible({ uil.getVisible({
x: 0, x: 0,
y: 0, y: 0,
@ -1446,10 +1460,16 @@ async function upscaleAndDownload() {
h: imageCollection.size.h, h: imageCollection.size.h,
}) })
); );
if (croppedCanvas != null) { imgdata = croppedCanvas.canvas.toDataURL("image/png");
} else {
console.log("Upscaling resource canvas.");
imgdata = aCanvas.toDataURL("image/png");
}
if (imgdata != null) {
var url = var url =
document.getElementById("host").value + "/sdapi/v1/extra-single-image/"; document.getElementById("host").value + "/sdapi/v1/extra-single-image/";
var imgdata = croppedCanvas.canvas.toDataURL("image/png");
var data = { var data = {
"resize-mode": 0, // 0 = just resize, 1 = crop and resize, 2 = resize and fill i assume based on theimg2img tabs options "resize-mode": 0, // 0 = just resize, 1 = crop and resize, 2 = resize and fill i assume based on theimg2img tabs options
upscaling_resize: upscale_factor, upscaling_resize: upscale_factor,
@ -1481,7 +1501,17 @@ async function upscaleAndDownload() {
upscale_factor + upscale_factor +
".png"; ".png";
link.href = "data:image/png;base64," + data["image"]; link.href = "data:image/png;base64," + data["image"];
if (add_resource == true) {
console.log("Add upscaled to resource");
const img = new Image();
img.src = link.href;
tools.stamp.state.addResource(guid() + " (upscaled)", img);
}
if (download == true) {
console.log("Download upscaled");
link.click(); link.click();
}
}); });
} }
} }

View file

@ -62,9 +62,12 @@ 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();
@ -2012,12 +2015,12 @@ const dreamTool = () =>
state.ctxmenu.keepUnmaskedBlurSlider.classList.remove( state.ctxmenu.keepUnmaskedBlurSlider.classList.remove(
"invisible" "invisible"
); );
state.ctxmenu.keepUnmaskedBlurSliderLinebreak.classList.add( state.ctxmenu.keepUnmaskedBlurSliderLinebreak.classList.remove(
"invisible" "invisible"
); );
} else { } else {
state.ctxmenu.keepUnmaskedBlurSlider.classList.add("invisible"); state.ctxmenu.keepUnmaskedBlurSlider.classList.add("invisible");
state.ctxmenu.keepUnmaskedBlurSliderLinebreak.classList.remove( state.ctxmenu.keepUnmaskedBlurSliderLinebreak.classList.add(
"invisible" "invisible"
); );
} }
@ -2181,6 +2184,20 @@ const dreamTool = () =>
menu.appendChild(state.ctxmenu.outpaintTypeSelect); menu.appendChild(state.ctxmenu.outpaintTypeSelect);
menu.appendChild(state.ctxmenu.overMaskPxLabel); menu.appendChild(state.ctxmenu.overMaskPxLabel);
menu.appendChild(state.ctxmenu.eagerGenerateCountLabel); menu.appendChild(state.ctxmenu.eagerGenerateCountLabel);
if (localStorage.getItem("openoutpaint/dream-keepunmasked") == "true") {
state.ctxmenu.keepUnmaskedBlurSlider.classList.remove("invisible");
} else {
state.ctxmenu.keepUnmaskedBlurSlider.classList.add("invisible");
}
if (localStorage.getItem("openoutpaint/dream-removebg") == "true") {
state.ctxmenu.carveBlurSlider.classList.remove("invisible");
state.ctxmenu.carveThresholdSlider.classList.remove("invisible");
} else {
state.ctxmenu.carveBlurSlider.classList.add("invisible");
state.ctxmenu.carveThresholdSlider.classList.add("invisible");
}
}, },
shortcut: "D", shortcut: "D",
} }
@ -2845,6 +2862,22 @@ const img2imgTool = () =>
menu.appendChild(btnArray2); menu.appendChild(btnArray2);
menu.appendChild(state.ctxmenu.borderMaskSlider); menu.appendChild(state.ctxmenu.borderMaskSlider);
menu.appendChild(state.ctxmenu.eagerGenerateCountLabel); menu.appendChild(state.ctxmenu.eagerGenerateCountLabel);
if (
localStorage.getItem("openoutpaint/img2img-keepunmasked") == "true"
) {
state.ctxmenu.keepUnmaskedBlurSlider.classList.remove("invisible");
} else {
state.ctxmenu.keepUnmaskedBlurSlider.classList.add("invisible");
}
if (localStorage.getItem("openoutpaint/img2img-removebg") == "true") {
state.ctxmenu.carveBlurSlider.classList.remove("invisible");
state.ctxmenu.carveThresholdSlider.classList.remove("invisible");
} else {
state.ctxmenu.carveBlurSlider.classList.add("invisible");
state.ctxmenu.carveThresholdSlider.classList.add("invisible");
}
}, },
shortcut: "I", shortcut: "I",
} }

View file

@ -420,7 +420,7 @@ const selectTransformTool = () =>
const lscursor = m.transformPoint({x: sx, y: sy}); const lscursor = m.transformPoint({x: sx, y: sy});
const xs = lscursor.x / scaling.handle.x; const xs = lscursor.x / scaling.handle.x;
const xy = lscursor.y / scaling.handle.y; const ys = lscursor.y / scaling.handle.y;
let xscale = 1; let xscale = 1;
let yscale = 1; let yscale = 1;
@ -429,7 +429,7 @@ const selectTransformTool = () =>
xscale = xs; xscale = xs;
yscale = ys; yscale = ys;
} else { } else {
xscale = yscale = Math.max(xs, xy); xscale = yscale = Math.max(xs, ys);
} }
state.selected.scale = {x: xscale, y: yscale}; state.selected.scale = {x: xscale, y: yscale};

View file

@ -284,6 +284,32 @@ const stampTool = () =>
saveButton.appendChild(document.createElement("div")); saveButton.appendChild(document.createElement("div"));
saveButton.classList.add("download-btn"); saveButton.classList.add("download-btn");
const upscaleButton = document.createElement("button");
upscaleButton.addEventListener(
"click",
(evn) => {
evn.stopPropagation();
const canvas = document.createElement("canvas");
canvas.width = resource.image.width;
canvas.height = resource.image.height;
canvas.getContext("2d").drawImage(resource.image, 0, 0);
console.log("[Stamp]", canvas);
upscaleAndDownload(false, true, canvas);
/*
downloadCanvas({
canvas,
filename: `openOutpaint - resource '${resource.name}'.png`,
});
*/
},
{passive: false}
);
upscaleButton.title = "Upscale Resource";
upscaleButton.appendChild(document.createElement("div"));
upscaleButton.classList.add("upscale-btn");
const trashButton = document.createElement("button"); const trashButton = document.createElement("button");
trashButton.addEventListener( trashButton.addEventListener(
"click", "click",
@ -300,6 +326,7 @@ const stampTool = () =>
actionArray.appendChild(saveButton); actionArray.appendChild(saveButton);
actionArray.appendChild(trashButton); actionArray.appendChild(trashButton);
actionArray.appendChild(upscaleButton);
resourceWrapper.appendChild(actionArray); resourceWrapper.appendChild(actionArray);
state.ctxmenu.resourceList.appendChild(resourceWrapper); state.ctxmenu.resourceList.appendChild(resourceWrapper);
resource.dom = {wrapper: resourceWrapper}; resource.dom = {wrapper: resourceWrapper};

View file

@ -10,7 +10,7 @@
<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" />
<link href="../css/ui/generic.css?v=30837f8" rel="stylesheet" /> <link href="../css/ui/generic.css?v=ed024fe" rel="stylesheet" />
<link href="../css/ui/history.css?v=0b03861" rel="stylesheet" /> <link href="../css/ui/history.css?v=0b03861" rel="stylesheet" />
<link href="../css/ui/layers.css?v=1d66c2b" rel="stylesheet" /> <link href="../css/ui/layers.css?v=1d66c2b" rel="stylesheet" />
@ -259,6 +259,7 @@
: localStorage.getItem( : localStorage.getItem(
"openoutpaint/settings.update-prompt-on-more-button" "openoutpaint/settings.update-prompt-on-more-button"
) === "true"; ) === "true";
updatePromptOnMoreButton.checked = _enable_update_prompt_on_more_button;
let _enable_jump_to_1st_new_on_more_button = let _enable_jump_to_1st_new_on_more_button =
localStorage.getItem( localStorage.getItem(
@ -268,6 +269,7 @@
: localStorage.getItem( : localStorage.getItem(
"openoutpaint/settings.jump-to-1st-new-on-more-button" "openoutpaint/settings.jump-to-1st-new-on-more-button"
) === "true"; ) === "true";
jumpTo1stNewOnMoreButton.checked = _enable_jump_to_1st_new_on_more_button;
writeToLocalStorage(); writeToLocalStorage();