sneedgroup-holder/openOutpaint
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'main' into clear_brush_mask_option

Browse source
This commit is contained in:
tim h 2022-12-19 21:34:08 -06:00
commit a49769af85
3 changed files with 107 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
js/index.js
View file

@ -81,6 +81,9 @@
}; };
})(); })();
// Parse url parameters
const urlParams = new URLSearchParams(window.location.search);
window.onload = startup; window.onload = startup;
var stableDiffusionData = { var stableDiffusionData = {
@ -184,6 +187,22 @@ function startup() {
changeSyncCursorSize(); changeSyncCursorSize();
} }
function setFixedHost(host, changePromptMessage) {
const hostInput = document.getElementById("host");
hostInput.value = host;
hostInput.readOnly = true;
hostInput.style.cursor = "default";
hostInput.style.backgroundColor = "#ddd";
hostInput.addEventListener("dblclick", () => {
if (confirm(changePromptMessage)) {
hostInput.style.backgroundColor = null;
hostInput.style.cursor = null;
hostInput.readOnly = false;
hostInput.focus();
}
});
}
/** /**
* Initial connection checks * Initial connection checks
*/ */
@ -195,8 +214,10 @@ function testHostConfiguration() {
hostEl.value = localStorage.getItem("openoutpaint/host"); hostEl.value = localStorage.getItem("openoutpaint/host");
const requestHost = (prompt, def = "http://127.0.0.1:7860") => { const requestHost = (prompt, def = "http://127.0.0.1:7860") => {
let value = window.prompt(prompt, def); let value = null;
if (value === null) value = "http://127.0.0.1:7860";
if (!urlParams.has("noprompt")) value = window.prompt(prompt, def);
if (value === null) value = def;
value = value.endsWith("/") ? value.substring(0, value.length - 1) : value; value = value.endsWith("/") ? value.substring(0, value.length - 1) : value;
host = value; host = value;
@ -489,16 +510,16 @@ const makeSlider = (
textStep = null, textStep = null,
valuecb = null valuecb = null
) => { ) => {
const local = lsKey && localStorage.getItem(lsKey); const local = lsKey && localStorage.getItem(`openoutpaint/${lsKey}`);
const def = parseFloat(local === null ? defaultValue : local); const def = parseFloat(local === null ? defaultValue : local);
let cb = (v) => { let cb = (v) => {
stableDiffusionData[lsKey] = v; stableDiffusionData[lsKey] = v;
if (lsKey) localStorage.setItem(lsKey, v); if (lsKey) localStorage.setItem(`openoutpaint/${lsKey}`, v);
}; };
if (valuecb) { if (valuecb) {
cb = (v) => { cb = (v) => {
valuecb(v); valuecb(v);
localStorage.setItem(lsKey, v); localStorage.setItem(`openoutpaint/${lsKey}`, v);
}; };
} }
return createSlider(label, el, { return createSlider(label, el, {
@ -607,7 +628,7 @@ function changeSyncCursorSize() {
document.getElementById("cbxSyncCursorSize").checked document.getElementById("cbxSyncCursorSize").checked
); //is this horribly hacky, putting it in SD data instead of making a gross global var? ); //is this horribly hacky, putting it in SD data instead of making a gross global var?
localStorage.setItem( localStorage.setItem(
"sync_cursor_size", "openoutpaint/sync_cursor_size",
stableDiffusionData.sync_cursor_size stableDiffusionData.sync_cursor_size
); );
if (stableDiffusionData.sync_cursor_size) { if (stableDiffusionData.sync_cursor_size) {

6
js/webui.js
View file

@ -72,6 +72,12 @@
console.debug( console.debug(
`[webui] Communication with '${origin}' has been initialized` `[webui] Communication with '${origin}' has been initialized`
); );
if (data.host)
setFixedHost(
data.host,
`Are you sure you want to modify the host?\nThis configuration was provided by the hosting page\n - ${parentWindow.document.title} (${origin})`
);
break; break;
case "openoutpaint/add-resource": case "openoutpaint/add-resource":
{ {

74
pages/embed.test.html Normal file
View file

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>openOutpaint embed</title>
</head>
<body>
<iframe
id="openoutpaint"
style="width: 100%; height: 800px"
src="../index.html"
frameborder="0"></iframe>
<button id="add-res">Add Resource</button>
<script>
document.addEventListener("DOMContentLoaded", async () => {
const frame = document.getElementById("openoutpaint");
const key = (await (await fetch("../key.json")).json()).key;
console.info("[embed] Add message listener");
window.addEventListener("message", ({data, origin, source}) => {
if (source === frame.contentWindow) {
console.debug(data);
switch (data.type) {
case "openoutpaint/ack":
if (data.message.type === "openoutpaint/init") {
console.info("[embed] Received init ack");
clearTimeout(initLoop);
initLoop = null;
}
break;
}
}
});
let initLoop = null;
const sendInit = () => {
console.info("[embed] Sending init message");
frame.contentWindow.postMessage({
type: "openoutpaint/init",
key,
});
initLoop = setTimeout(sendInit, 1000);
};
sendInit();
const canvas = document.createElement("canvas");
const image = document.createElement("img");
image.crossOrigin = "";
image.src = "https://www.w3schools.com/css/paris.jpg";
image.onload = () => {
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
};
document.body.appendChild(image);
document.getElementById("add-res").addEventListener("click", () => {
frame.contentWindow.postMessage({
key,
type: "openoutpaint/add-resource",
image: {
dataURL: canvas.toDataURL(),
resourceName: "Embed Resource",
},
});
});
});
</script>
</body>
</html>