<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>openOutpaint 🐠</title>
<!-- CSS Variables -->
<link href="../css/colors.css?v=f732f19" rel="stylesheet" />
<link href="../css/icons.css?v=e907764" rel="stylesheet" />
<link href="../css/index.css?v=cf21c6a" 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/history.css?v=0b03861" rel="stylesheet" />
<link href="../css/ui/layers.css?v=1d66c2b" rel="stylesheet" />
<link href="../css/ui/toolbar.css?v=109c78f" rel="stylesheet" />
<!-- Tool Specific CSS -->
<link href="../css/ui/tool/dream.css?v=2d8a8ac" rel="stylesheet" />
<link href="../css/ui/tool/stamp.css?v=6f5ce15" rel="stylesheet" />
<link href="../css/ui/tool/colorbrush.css?v=57c8be5" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<style>
* {
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
user-select: none;
}
body {
color: var(--c-text);
margin: 0;
padding: 15px;
}
label {
display: flex;
}
label > input {
justify-content: space-between;
}
table {
width: 100%;
border-collapse: collapse;
}
input.canvas-size-input {
-webkit-appearance: textfield;
-moz-appearance: textfield;
width: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="title">Canvas Size</td>
<td class="input">
<input
id="canvas-width"
class="canvas-size-input"
type="number"
step="1" />
x
<input
id="canvas-height"
class="canvas-size-input"
type="number"
step="1" />
</td>
</tr>
<tr>
<td class="title">Max Steps</td>
<td class="input">
<input
id="max-steps"
class="canvas-size-input"
type="number"
step="1"
value="70" />
</td>
</tr>
<tr>
<td class="title">CFG minmax</td>
<td class="input">
<input
id="min-cfg"
class="canvas-size-input"
type="number"
step="0.1"
value="1.0" />
::
<input
id="max-cfg"
class="canvas-size-input"
type="number"
step="0.1"
value="30.0" />
</td>
</tr>
<tr>
<td colspan="2">
<div
class="ui separator"
style="
width: 100% !important;
margin-top: 3px;
margin-bottom: 3px;
"></div>
</td>
</tr>
<tr>
<td class="title">Lie to HRfix</td>
<td class="input">
<input id="hrfix-liar" class="canvas-size-input" type="checkbox" />
</td>
</tr>
<tr>
<td class="title">New Layer per Dream</td>
<td class="input">
<input id="autolayer" class="canvas-size-input" type="checkbox" />
</td>
</tr>
</table>
<script>
const canvasWidth = document.getElementById("canvas-width");
const canvasHeight = document.getElementById("canvas-height");
const maxSteps = document.getElementById("max-steps");
const minCfg = document.getElementById("min-cfg");
const maxCfg = document.getElementById("max-cfg");
const hrfixLiar = document.getElementById("hrfix-liar");
const autolayer = document.getElementById("autolayer");
function writeToLocalStorage() {
localStorage.setItem(
"openoutpaint/settings.canvas-width",
canvasWidth.value
);
localStorage.setItem(
"openoutpaint/settings.canvas-height",
canvasHeight.value
);
localStorage.setItem("openoutpaint/settings.max-steps", maxSteps.value);
localStorage.setItem("openoutpaint/settings.min-cfg", minCfg.value);
localStorage.setItem("openoutpaint/settings.max-cfg", maxCfg.value);
localStorage.setItem(
"openoutpaint/settings.hrfix-liar",
hrfixLiar.checked
);
localStorage.setItem(
"openoutpaint/settings.autolayer",
autolayer.checked
);
}
// Loads values from local storage
canvasWidth.value =
localStorage.getItem("openoutpaint/settings.canvas-width") || 2048;
canvasHeight.value =
localStorage.getItem("openoutpaint/settings.canvas-height") || 2048;
maxSteps.value =
localStorage.getItem("openoutpaint/settings.max-steps") || 70;
minCfg.value = localStorage.getItem("openoutpaint/settings.min-cfg") || 1;
maxCfg.value =
localStorage.getItem("openoutpaint/settings.max-cfg") || 30;
let _enable_dishonesty =
localStorage.getItem("openoutpaint/settings.hrfix-liar") === null
? true
: localStorage.getItem("openoutpaint/settings.hrfix-liar") === "true";
hrfixLiar.checked = _enable_dishonesty;
let _enable_autolayers =
localStorage.getItem("openoutpaint/settings.autolayer") === null
? false
: localStorage.getItem("openoutpaint/settings.autolayer") === "true";
autolayer.checked = _enable_autolayers;
writeToLocalStorage();
canvasWidth.onchange = writeToLocalStorage;
canvasHeight.onchange = writeToLocalStorage;
maxSteps.onchange = writeToLocalStorage;
minCfg.onchange = writeToLocalStorage;
maxCfg.onchange = writeToLocalStorage;
hrfixLiar.onchange = writeToLocalStorage;
autolayer.onchange = writeToLocalStorage;
</script>
</body>
</html>