<!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 prompt">
<div class="inputs">
<div class="prompt-wrapper">
<div class="prompt-indicator positive" title="Prompt"></div>
<textarea id="prompt" class="expandable"></textarea>
</div>
<div class="prompt-wrapper">
<div
class="prompt-indicator negative"
title="Negative Prompt"></div>
<textarea id="negPrompt" class="expandable"></textarea>
</div>
<div class="prompt-wrapper">
<div class="prompt-indicator styles" title="Styles"></div>
<div id="style-ac-mselect" style="flex-shrink: 1"></div>
</div>
</div>
<div class="prompt-history-wrapper">
<div class="prompt-history-container">
<div id="prompt-history"></div>
<button
id="prompt-history-btn"
class="prompt-history-btn"></button>
</div>
</div>
</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>
<br />
<input
type="checkbox"
id="cbxSyncCursorSize"
onchange="changeSyncCursorSize()" />
<label for="cbxSyncCursorSize">Sync cursor size</label>
<br />
<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>
<button id="toggleDebugBtn" onclick="global.toggledebug()">
Toggle Debug
</button>
<br />
<span id="version">
<a href="https://github.com/zero01101/openOutpaint" target="_blank">
Alpha release v0.0.12.1
</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/events.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>
<!-- Configuration -->
<script src="js/config.js" type="text/javascript"></script>
<!-- Content -->
<script src="js/global.js" type="text/javascript"></script>
<script src="js/prompt.js" type="text/javascript"></script>
<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/generic.js" type="text/javascript"></script>
<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>
<!-- Deals with webui communication -->
<script src="js/webui.js" type="text/javascript"></script>
</body>
</html>