143 lines
3.9 KiB
HTML
143 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>openOutpaint 🐠</title>
|
|
<!-- CSS Variables -->
|
|
<link href="../css/colors.css?v=3f81e80" rel="stylesheet" />
|
|
<link href="../css/icons.css?v=caa702e" rel="stylesheet" />
|
|
|
|
<link href="../css/index.css?v=69d3b9e" rel="stylesheet" />
|
|
<link href="../css/layers.css?v=b4fbf61" rel="stylesheet" />
|
|
|
|
<link href="../css/ui/generic.css?v=4b9afe2" rel="stylesheet" />
|
|
|
|
<link href="../css/ui/history.css?v=0b03861" rel="stylesheet" />
|
|
<link href="../css/ui/layers.css?v=4fd95fe" 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>
|
|
body {
|
|
color: var(--c-text);
|
|
|
|
margin: 0;
|
|
padding: 15px;
|
|
}
|
|
|
|
label {
|
|
display: flex;
|
|
}
|
|
|
|
input.canvas-size-input {
|
|
-webkit-appearance: textfield;
|
|
-moz-appearance: textfield;
|
|
|
|
width: 50px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<label style="display: flex">
|
|
Canvas Size:
|
|
<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" />
|
|
</label>
|
|
<label style="display: flex">
|
|
Max Steps:
|
|
<input
|
|
id="max-steps"
|
|
class="canvas-size-input"
|
|
type="number"
|
|
step="1"
|
|
value="70" />
|
|
</label>
|
|
<label style="display: flex">
|
|
CFG minmax:
|
|
<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" />
|
|
</label>
|
|
<label style="display: flex">
|
|
Lie to HRfix:
|
|
<input id="hrfix-liar" class="canvas-size-input" type="checkbox" />
|
|
</label>
|
|
<p>Refresh the page to apply settings.</p>
|
|
|
|
<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");
|
|
|
|
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
|
|
);
|
|
}
|
|
|
|
// 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;
|
|
hrfixLiar.checked =
|
|
localStorage.getItem("openoutpaint/settings.hrfix-liar") || true;
|
|
|
|
writeToLocalStorage();
|
|
|
|
canvasWidth.onchange = writeToLocalStorage;
|
|
canvasHeight.onchange = writeToLocalStorage;
|
|
maxSteps.onchange = writeToLocalStorage;
|
|
minCfg.onchange = writeToLocalStorage;
|
|
maxCfg.onchange = writeToLocalStorage;
|
|
hrfixLiar.onchange = writeToLocalStorage;
|
|
</script>
|
|
</body>
|
|
</html>
|