openOutpaint/index.html
tim h 2e668b4a16 more tiny QOL things
upscaler select no longer escapes floating control panel boundary, simple "reset to defaults" button to clear localstorage if desired, maybe get prettier action to stop complaining about where i put the ref :|
2022-12-01 20:31:49 -06:00

240 lines
6.8 KiB
HTML

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>openOutpaint 🐠</title>
<!-- CSS Variables -->
<link href="css/colors.css" rel="stylesheet" />
<link href="css/index.css" rel="stylesheet" />
<link href="css/layers.css" rel="stylesheet" />
<link href="css/ui/generic.css" rel="stylesheet" />
<link href="css/ui/history.css" rel="stylesheet" />
<link href="css/ui/toolbar.css" rel="stylesheet" />
<!-- Tool Specific CSS -->
<link href="css/ui/tool/stamp.css" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Main Toolbar -->
<div
id="infoContainer"
class="floating-window"
style="left: 10px; top: 10px">
<div id="infoTitleBar" class="draggable floating-window-title">
openOutpaint 🐠
</div>
<div id="info" class="menu-container" style="min-width: 200px">
<label>
Host
<div class="host-field-wrapper">
<input id="host" value="http://127.0.0.1:7860" />
<div
id="connection-status-indicator"
class="connection-status"></div>
</div>
</label>
<!-- Prompts section -->
<button type="button" class="collapsible">Prompts</button>
<div class="content">
<label for="prompt">Prompt:</label>
<br />
<div class="prompt-wrapper">
<textarea id="prompt"></textarea>
</div>
<label for="negPrompt">Negative prompt:</label>
<div class="prompt-wrapper">
<textarea id="negPrompt"></textarea>
</div>
<!-- <hr /> -->
</div>
<!-- SD section -->
<button type="button" class="collapsible">
Stable Diffusion settings
</button>
<div class="content">
<label for="models">Model:</label>
<select
id="models"
class="wideSelect"
onchange="changeModel()"></select>
<br />
<label for="samplerSelect">Sampler:</label>
<select id="samplerSelect" onchange="changeSampler()"></select>
<br />
<label for="seed">Seed (-1 for random):</label>
<br />
<input
type="number"
id="seed"
onchange="changeSeed()"
min="1"
max="9999999999"
value="-1"
step="1" />
<br />
<div id="steps"></div>
<div id="cfgScale"></div>
<div id="batchSize"></div>
<div id="batchCount"></div>
</div>
<!-- Unsectioned -->
<div id="scaleFactor"></div>
<input type="checkbox" id="cbxHRFix" onchange="changeHiResFix()" />
<label for="cbxHRFix">Auto txt2img HRfix</label>
<br />
<label for="maskBlur">Mask blur:</label>
<span id="maskBlurText"></span>
<br />
<input
type="number"
id="maskBlur"
name="maskBlur"
min="0"
max="256"
value="0"
step="1"
onchange="changeMaskBlur()" />
<br />
<!-- Save/load image section -->
<button type="button" class="collapsible">Save/Upscaling</button>
<div class="content">
<button onclick="downloadCanvas()">Save canvas</button>
<br />
<label for="upscalers">Choose upscaler</label>
<select id="upscalers" class="wideSelect"></select>
<button onclick="upscaleAndDownload()">
Upscale (might take a sec)
</button>
<br />
<button onclick="newImage()">Clear canvas</button>
</div>
<!-- Debug info -->
<button type="button" class="collapsible">Debug info</button>
<div id="coords" class="content">
<label for="mouseX">mouseX:</label>
<span id="mouseX"></span>
<br />
<label for="mouseY">mouseY:</label>
<span id="mouseY"></span>
<br />
<label for="canvasX">canvasX:</label>
<span id="canvasX"></span>
<br />
<label for="canvasY">canvasY:</label>
<span id="canvasY"></span>
<br />
<label for="snapX">snapX:</label>
<span id="snapX"></span>
<br />
<label for="snapY">snapY:</label>
<span id="snapY"></span>
<br />
<label for="heldButton">Mouse button:</label>
<span id="heldButton"></span>
<br />
<button id="resetToDefaults" onclick="resetToDefaults()">
Reset to defaults
</button>
<br />
<span id="version">
<a href="https://github.com/zero01101/openOutpaint" target="_blank">
Alpha release v0.0.7.5
</a>
</span>
<br />
<!-- <hr /> -->
</div>
<div style="display: flex; align-items: center">
<div
style="
flex: 1;
border-top: 1px black solid;
margin-right: 10px;
"></div>
Context Menu
<div
style="
flex: 1;
border-top: 1px black solid;
margin-left: 10px;
"></div>
</div>
<div id="tool-context" class="context-menu"></div>
</div>
</div>
<!-- History -->
<div id="ui-history" class="floating-window" style="right: 10px; top: 10px">
<div class="draggable floating-window-title">History</div>
<div class="menu-container" style="min-width: 200px">
<div id="history" class="history"></div>
<div class="button-array" style="padding: 10px">
<button type="button" onclick="commands.undo()" class="button tool">
undo
</button>
<button type="button" onclick="commands.redo()" class="button tool">
redo
</button>
</div>
</div>
</div>
<!-- Toolbar -->
<div
id="ui-toolbar"
class="floating-window toolbar"
style="right: 10px; top: 350px">
<div class="draggable handle">
<span class="line"></span>
</div>
<div class="lock-indicator" id="toolbar-lock-indicator"></div>
<div class="toolbar-section"></div>
</div>
<!-- Canvases -->
<div id="layer-render" class="layer-render-target"></div>
<!-- Base Libs -->
<script src="js/lib/util.js" type="text/javascript"></script>
<script src="js/lib/input.js" type="text/javascript"></script>
<script src="js/lib/layers.js" type="text/javascript"></script>
<script src="js/lib/commands.js" type="text/javascript"></script>
<script src="js/settingsbar.js" type="text/javascript"></script>
<script src="js/lib/toolbar.js" type="text/javascript"></script>
<script
src="js/initalize/layers.populate.js"
type="text/javascript"></script>
<!-- Content -->
<script src="js/index.js" type="text/javascript"></script>
<script src="js/ui/floating/history.js" type="text/javascript"></script>
<!-- Load Tools -->
<script src="js/ui/tool/dream.js" type="text/javascript"></script>
<script src="js/ui/tool/maskbrush.js" type="text/javascript"></script>
<script src="js/ui/tool/colorbrush.js" type="text/javascript"></script>
<script src="js/ui/tool/select.js" type="text/javascript"></script>
<script src="js/ui/tool/stamp.js" type="text/javascript"></script>
<!-- Initialize -->
<script
src="js/initalize/shortcuts.populate.js"
type="text/javascript"></script>
<script
src="js/initalize/toolbar.populate.js"
type="text/javascript"></script>
<script
src="js/initalize/debug.populate.js"
type="text/javascript"></script>
</body>
</html>