ec59cf5538
Very crude settings interface with only canvas size for now. Canvas size only affects canvas on next page load. Dynamic resizing in the horizon, but will take a while. Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
329 lines
9.6 KiB
HTML
329 lines
9.6 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/icons.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/layers.css" rel="stylesheet" />
|
|
<link href="css/ui/toolbar.css" rel="stylesheet" />
|
|
|
|
<!-- Tool Specific CSS -->
|
|
<link href="css/ui/tool/dream.css" rel="stylesheet" />
|
|
<link href="css/ui/tool/stamp.css" rel="stylesheet" />
|
|
<link href="css/ui/tool/colorbrush.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 style="flex: 1"></div>
|
|
<button id="settings-btn" class="ui icon header-button">
|
|
<div class="icon-settings"></div>
|
|
</button>
|
|
</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 before">
|
|
<span id="connection-status-indicator-text">Waiting</span>
|
|
</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>
|
|
<label for="styleSelect">Styles:</label>
|
|
<select
|
|
id="styleSelect"
|
|
class="wideSelect"
|
|
onchange="changeStyles()"
|
|
multiple></select>
|
|
<!-- <hr /> -->
|
|
</div>
|
|
<!-- SD section -->
|
|
<button type="button" class="collapsible">
|
|
Stable Diffusion settings
|
|
</button>
|
|
<div class="content">
|
|
<label>Model:</label>
|
|
<div id="models-ac-select"></div>
|
|
<label>Sampler:</label>
|
|
<div id="sampler-ac-select"></div>
|
|
<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 />
|
|
<input type="checkbox" id="cbxHRFix" onchange="changeHiResFix()" />
|
|
<label for="cbxHRFix">Auto txt2img HRfix</label>
|
|
<div id="resolution"></div>
|
|
<div id="steps"></div>
|
|
<div id="cfgScale"></div>
|
|
<div id="batchSize"></div>
|
|
<div id="batchCount"></div>
|
|
</div>
|
|
<!-- Unsectioned -->
|
|
<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 />
|
|
<input
|
|
type="checkbox"
|
|
id="cbxSmooth"
|
|
checked
|
|
onchange="changeSmoothRendering()" />
|
|
<label for="cbxSmooth">Smooth Rendering</label>
|
|
<!-- Save/load image section -->
|
|
<button type="button" class="collapsible">Save/Upscaling</button>
|
|
<div class="content">
|
|
<button onclick="downloadCanvas()">Save canvas</button>
|
|
<br />
|
|
<label>Choose upscaler</label>
|
|
<div id="upscaler-ac-select"></div>
|
|
<div id="upscaleX"></div>
|
|
<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.9
|
|
</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>
|
|
|
|
<!-- Layers -->
|
|
<div
|
|
id="ui-layers"
|
|
class="floating-window"
|
|
style="right: 10px; bottom: 10px">
|
|
<div class="draggable floating-window-title">Layers</div>
|
|
<div class="menu-container" style="min-width: 200px">
|
|
<div class="layer-manager">
|
|
<div id="layer-list" class="layer-list"></div>
|
|
<div class="ui separator"></div>
|
|
<div class="layer-list-actions">
|
|
<button
|
|
type="button"
|
|
title="Add Layer"
|
|
onclick="commands.runCommand('addLayer', 'Added Layer')"
|
|
class="ui icon button">
|
|
<div class="icon-file-plus"></div>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
title="Move Layer Up"
|
|
onclick="commands.runCommand('moveLayer', 'Moved Layer Up',{delta: 1})"
|
|
class="ui icon button">
|
|
<div class="icon-chevron-up"></div>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
title="Move Layer Down"
|
|
onclick="commands.runCommand('moveLayer', 'Moved Layer Down', {delta: -1})"
|
|
class="ui icon button">
|
|
<div class="icon-chevron-down"></div>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
title="Merge Layer Down"
|
|
onclick="commands.runCommand('mergeLayer', 'Merged Layer Down')"
|
|
class="ui icon button">
|
|
<div class="icon-chevron-flat-down"></div>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
title="Delete Layer"
|
|
onclick="commands.runCommand('deleteLayer', 'Deleted Layer')"
|
|
class="ui icon button">
|
|
<div class="icon-file-x"></div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toolbar -->
|
|
<div
|
|
id="ui-toolbar"
|
|
class="floating-window toolbar"
|
|
style="right: 270px; top: 10px">
|
|
<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>
|
|
|
|
<!-- Overlay -->
|
|
<canvas id="layer-overlay" class="layer-overlay"></canvas>
|
|
|
|
<!-- Page Overlay -->
|
|
<div id="page-overlay-wrapper" class="page-overlay invisible">
|
|
<div class="page-overlay-window">
|
|
<div class="title">
|
|
Settings
|
|
<button id="settings-btn-close" class="close"></button>
|
|
</div>
|
|
<div class="ui separator"></div>
|
|
<iframe id="page-overlay" src="/pages/configuration.html"></iframe>
|
|
</div>
|
|
</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/lib/toolbar.js" type="text/javascript"></script>
|
|
<script src="js/lib/ui.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>
|
|
<script src="js/ui/floating/layers.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>
|
|
<script src="js/ui/tool/interrogate.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>
|
|
<script src="js/initalize/ui.populate.js" type="text/javascript"></script>
|
|
</body>
|
|
</html>
|