Merge branch 'main' into clear_brush_mask_option
This commit is contained in:
tim h
commit
a49769af85
3 changed files with 107 additions and 6 deletions
33
js/index.js
33
js/index.js
|
|
@ -81,6 +81,9 @@
|
|||
};
|
||||
})();
|
||||
|
||||
// Parse url parameters
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
|
||||
window.onload = startup;
|
||||
|
||||
var stableDiffusionData = {
|
||||
|
|
@ -184,6 +187,22 @@ function startup() {
|
|||
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
|
||||
*/
|
||||
|
|
@ -195,8 +214,10 @@ function testHostConfiguration() {
|
|||
hostEl.value = localStorage.getItem("openoutpaint/host");
|
||||
|
||||
const requestHost = (prompt, def = "http://127.0.0.1:7860") => {
|
||||
let value = window.prompt(prompt, def);
|
||||
if (value === null) value = "http://127.0.0.1:7860";
|
||||
let value = null;
|
||||
|
||||
if (!urlParams.has("noprompt")) value = window.prompt(prompt, def);
|
||||
if (value === null) value = def;
|
||||
|
||||
value = value.endsWith("/") ? value.substring(0, value.length - 1) : value;
|
||||
host = value;
|
||||
|
|
@ -489,16 +510,16 @@ const makeSlider = (
|
|||
textStep = null,
|
||||
valuecb = null
|
||||
) => {
|
||||
const local = lsKey && localStorage.getItem(lsKey);
|
||||
const local = lsKey && localStorage.getItem(`openoutpaint/${lsKey}`);
|
||||
const def = parseFloat(local === null ? defaultValue : local);
|
||||
let cb = (v) => {
|
||||
stableDiffusionData[lsKey] = v;
|
||||
if (lsKey) localStorage.setItem(lsKey, v);
|
||||
if (lsKey) localStorage.setItem(`openoutpaint/${lsKey}`, v);
|
||||
};
|
||||
if (valuecb) {
|
||||
cb = (v) => {
|
||||
valuecb(v);
|
||||
localStorage.setItem(lsKey, v);
|
||||
localStorage.setItem(`openoutpaint/${lsKey}`, v);
|
||||
};
|
||||
}
|
||||
return createSlider(label, el, {
|
||||
|
|
@ -607,7 +628,7 @@ function changeSyncCursorSize() {
|
|||
document.getElementById("cbxSyncCursorSize").checked
|
||||
); //is this horribly hacky, putting it in SD data instead of making a gross global var?
|
||||
localStorage.setItem(
|
||||
"sync_cursor_size",
|
||||
"openoutpaint/sync_cursor_size",
|
||||
stableDiffusionData.sync_cursor_size
|
||||
);
|
||||
if (stableDiffusionData.sync_cursor_size) {
|
||||
|
|
|
|||
|
|
@ -72,6 +72,12 @@
|
|||
console.debug(
|
||||
`[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;
|
||||
case "openoutpaint/add-resource":
|
||||
{
|
||||
|
|
|
|||
74
pages/embed.test.html
Normal file
74
pages/embed.test.html
Normal 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>
|
||||
Loading…
Reference in a new issue