openOutpaint/pages/configuration.html

148 lines
4 KiB
HTML
Raw Normal View History

<!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" />
2023-01-02 18:18:17 -06:00
<link href="../css/icons.css?v=caa702e" rel="stylesheet" />
2023-01-04 20:00:51 -06:00
<link href="../css/index.css?v=5b8d4d6" rel="stylesheet" />
<link href="../css/layers.css?v=b4fbf61" rel="stylesheet" />
2023-01-02 18:18:17 -06:00
<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>
2023-01-02 00:45:03 -06:00
<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>
<!-- <p>Refresh the page to apply aabove.</p> -->
<hr />
<label style="display: flex">
Lie to HRfix:
<input id="hrfix-liar" class="canvas-size-input" type="checkbox" />
</label>
<script>
const canvasWidth = document.getElementById("canvas-width");
const canvasHeight = document.getElementById("canvas-height");
2023-01-02 00:45:03 -06:00
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
);
2023-01-02 00:45:03 -06:00
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;
2023-01-02 00:45:03 -06:00
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;
writeToLocalStorage();
canvasWidth.onchange = writeToLocalStorage;
canvasHeight.onchange = writeToLocalStorage;
2023-01-02 00:45:03 -06:00
maxSteps.onchange = writeToLocalStorage;
minCfg.onchange = writeToLocalStorage;
maxCfg.onchange = writeToLocalStorage;
hrfixLiar.onchange = writeToLocalStorage;
</script>
</body>
</html>