2022-11-29 20:08:43 -06:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en-US">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title>openOutpaint 🐠</title>
|
|
|
|
|
<!-- CSS Variables -->
|
|
|
|
|
<link href="css/colors.css" rel="stylesheet" />
|
2022-12-04 13:22:35 -06:00
|
|
|
<link href="css/icons.css" rel="stylesheet" />
|
2022-11-29 20:08:43 -06:00
|
|
|
|
|
|
|
|
<link href="css/index.css" rel="stylesheet" />
|
2022-11-29 20:54:09 -06:00
|
|
|
<link href="css/layers.css" rel="stylesheet" />
|
|
|
|
|
|
2022-11-29 20:08:43 -06:00
|
|
|
<link href="css/ui/generic.css" rel="stylesheet" />
|
|
|
|
|
|
|
|
|
|
<link href="css/ui/history.css" rel="stylesheet" />
|
2022-12-04 05:00:39 -06:00
|
|
|
<link href="css/ui/layers.css" rel="stylesheet" />
|
2022-11-29 20:08:43 -06:00
|
|
|
<link href="css/ui/toolbar.css" rel="stylesheet" />
|
|
|
|
|
|
|
|
|
|
<!-- Tool Specific CSS -->
|
|
|
|
|
<link href="css/ui/tool/stamp.css" rel="stylesheet" />
|
2022-12-03 17:00:10 -06:00
|
|
|
<link href="css/ui/tool/colorbrush.css" rel="stylesheet" />
|
2022-11-29 20:08:43 -06:00
|
|
|
|
|
|
|
|
<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" />
|
2022-12-02 12:42:09 -06:00
|
|
|
<div
|
|
|
|
|
id="connection-status-indicator"
|
|
|
|
|
class="connection-status before">
|
|
|
|
|
<span id="connection-status-indicator-text">Waiting</span>
|
2022-12-02 11:31:49 -06:00
|
|
|
</div>
|
2022-11-29 20:08:43 -06:00
|
|
|
</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>
|
2022-12-02 11:31:49 -06:00
|
|
|
<label for="styleSelect">Styles:</label>
|
|
|
|
|
<select
|
|
|
|
|
id="styleSelect"
|
|
|
|
|
class="wideSelect"
|
|
|
|
|
onchange="changeStyles()"
|
|
|
|
|
multiple></select>
|
2022-11-29 20:08:43 -06:00
|
|
|
<!-- <hr /> -->
|
|
|
|
|
</div>
|
|
|
|
|
<!-- SD section -->
|
|
|
|
|
<button type="button" class="collapsible">
|
|
|
|
|
Stable Diffusion settings
|
|
|
|
|
</button>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<label for="models">Model:</label>
|
2022-12-01 20:31:49 -06:00
|
|
|
<select
|
|
|
|
|
id="models"
|
|
|
|
|
class="wideSelect"
|
|
|
|
|
onchange="changeModel()"></select>
|
2022-11-29 20:08:43 -06:00
|
|
|
<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 />
|
2022-12-03 06:53:12 -06:00
|
|
|
<input type="checkbox" id="cbxHRFix" onchange="changeHiResFix()" />
|
|
|
|
|
<label for="cbxHRFix">Auto txt2img HRfix</label>
|
|
|
|
|
<div id="resolution"></div>
|
2022-11-29 20:08:43 -06:00
|
|
|
<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 />
|
2022-12-04 13:22:35 -06:00
|
|
|
<input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
id="cbxSmooth"
|
|
|
|
|
checked
|
|
|
|
|
onchange="changeSmoothRendering()" />
|
|
|
|
|
<label for="cbxSmooth">Smooth Rendering</label>
|
2022-11-29 20:08:43 -06:00
|
|
|
<!-- 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>
|
2022-12-01 20:31:49 -06:00
|
|
|
<select id="upscalers" class="wideSelect"></select>
|
2022-11-29 20:08:43 -06:00
|
|
|
<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 />
|
2022-12-01 20:31:49 -06:00
|
|
|
<button id="resetToDefaults" onclick="resetToDefaults()">
|
|
|
|
|
Reset to defaults
|
|
|
|
|
</button>
|
|
|
|
|
<br />
|
2022-11-29 20:08:43 -06:00
|
|
|
<span id="version">
|
|
|
|
|
<a href="https://github.com/zero01101/openOutpaint" target="_blank">
|
2022-12-03 12:08:34 -06:00
|
|
|
Alpha release v0.0.8
|
2022-11-29 20:08:43 -06:00
|
|
|
</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>
|
|
|
|
|
|
2022-12-04 05:00:39 -06:00
|
|
|
<!-- 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">
|
2022-12-04 13:22:35 -06:00
|
|
|
<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="uil.addLayer(null, 'New Layer')"
|
|
|
|
|
class="ui icon button">
|
|
|
|
|
<div class="icon-file-plus"></div>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
title="Move Layer Up"
|
|
|
|
|
onclick="uil.moveLayerUp()"
|
|
|
|
|
class="ui icon button">
|
|
|
|
|
<div class="icon-chevron-up"></div>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
title="Move Layer Down"
|
|
|
|
|
onclick="uil.moveLayerDown()"
|
|
|
|
|
class="ui icon button">
|
|
|
|
|
<div class="icon-chevron-down"></div>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-12-04 05:00:39 -06:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2022-11-29 20:08:43 -06:00
|
|
|
<!-- Toolbar -->
|
|
|
|
|
<div
|
|
|
|
|
id="ui-toolbar"
|
|
|
|
|
class="floating-window toolbar"
|
2022-12-04 05:00:39 -06:00
|
|
|
style="right: 270px; top: 10px">
|
2022-11-29 20:08:43 -06:00
|
|
|
<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 -->
|
2022-11-29 20:54:09 -06:00
|
|
|
<div id="layer-render" class="layer-render-target"></div>
|
2022-11-29 20:08:43 -06:00
|
|
|
|
2022-12-04 13:22:35 -06:00
|
|
|
<!-- Overlay -->
|
|
|
|
|
<canvas id="layer-overlay" class="layer-overlay"></canvas>
|
|
|
|
|
|
2022-11-29 20:08:43 -06:00
|
|
|
<!-- Base Libs -->
|
2022-11-29 20:54:09 -06:00
|
|
|
<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>
|
2022-12-02 22:13:13 -06:00
|
|
|
<script src="js/lib/ui.js" type="text/javascript"></script>
|
2022-11-29 20:54:09 -06:00
|
|
|
|
|
|
|
|
<script
|
|
|
|
|
src="js/initalize/layers.populate.js"
|
|
|
|
|
type="text/javascript"></script>
|
|
|
|
|
|
2022-11-29 20:08:43 -06:00
|
|
|
<!-- Content -->
|
|
|
|
|
<script src="js/index.js" type="text/javascript"></script>
|
2022-11-29 20:54:09 -06:00
|
|
|
<script src="js/ui/floating/history.js" type="text/javascript"></script>
|
2022-12-04 05:00:39 -06:00
|
|
|
<script src="js/ui/floating/layers.js" type="text/javascript"></script>
|
2022-11-29 20:08:43 -06:00
|
|
|
|
|
|
|
|
<!-- Load Tools -->
|
|
|
|
|
<script src="js/ui/tool/dream.js" type="text/javascript"></script>
|
|
|
|
|
<script src="js/ui/tool/maskbrush.js" type="text/javascript"></script>
|
2022-12-01 15:10:30 -06:00
|
|
|
<script src="js/ui/tool/colorbrush.js" type="text/javascript"></script>
|
2022-11-29 20:08:43 -06:00
|
|
|
<script src="js/ui/tool/select.js" type="text/javascript"></script>
|
|
|
|
|
<script src="js/ui/tool/stamp.js" type="text/javascript"></script>
|
2022-12-04 13:42:24 -06:00
|
|
|
<script src="js/ui/tool/interrogate.js" type="text/javascript"></script>
|
2022-11-29 20:08:43 -06:00
|
|
|
|
2022-11-29 20:54:09 -06:00
|
|
|
<!-- Initialize -->
|
2022-12-01 15:10:30 -06:00
|
|
|
<script
|
|
|
|
|
src="js/initalize/shortcuts.populate.js"
|
|
|
|
|
type="text/javascript"></script>
|
2022-11-29 20:54:09 -06:00
|
|
|
<script
|
|
|
|
|
src="js/initalize/toolbar.populate.js"
|
|
|
|
|
type="text/javascript"></script>
|
|
|
|
|
<script
|
|
|
|
|
src="js/initalize/debug.populate.js"
|
|
|
|
|
type="text/javascript"></script>
|
2022-12-02 22:13:13 -06:00
|
|
|
<script src="js/initalize/ui.populate.js" type="text/javascript"></script>
|
2022-11-29 20:08:43 -06:00
|
|
|
</body>
|
|
|
|
|
</html>
|
