<!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 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> <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 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 /> <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 /> <!-- 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.8.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> <!-- 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/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> <!-- 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>