ca3533c9e4
fixed scrolling on basically everything but the canvas, prompt fields now automatically expand when focused, prompt, host and negprompt now are stored on localstorage. on hover prompt and negprompt fields now show full text in tooltips Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
300 lines
8.7 KiB
HTML
300 lines
8.7 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/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 for="host">Host</label>
|
|
<input id="host" value="http://127.0.0.1:7860" />
|
|
<br />
|
|
|
|
<!-- 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" 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"></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 />
|
|
<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="mainHSplit"
|
|
class="mainHSplit"
|
|
onmouseover="document.activeElement.blur()">
|
|
<div id="uiWrapper" class="uiWrapper">
|
|
<div
|
|
id="canvasHolder"
|
|
class="canvasHolder"
|
|
oncontextmenu="return false;">
|
|
<canvas
|
|
id="backgroundCanvas"
|
|
class="mainCanvases backgroundCanvas"
|
|
width="2560"
|
|
height="1440"
|
|
style="z-index: 0">
|
|
<!-- gray grid bg canvas -->
|
|
<p>lol ur browser sucks</p>
|
|
</canvas>
|
|
<canvas
|
|
id="canvas"
|
|
class="mainCanvases canvas"
|
|
width="2560"
|
|
height="1440"
|
|
style="z-index: 1">
|
|
<!-- normal canvas on which images are drawn -->
|
|
<p>lol ur browser sucks</p>
|
|
</canvas>
|
|
<canvas
|
|
id="tempCanvas"
|
|
class="mainCanvases tempCanvas"
|
|
width="2560"
|
|
height="1440"
|
|
style="z-index: 2">
|
|
<!-- temporary canvas on which images being selected/rejected or imported arbitrary images are superimposed -->
|
|
<p>lol ur browser sucks</p>
|
|
</canvas>
|
|
<canvas
|
|
id="targetCanvas"
|
|
class="mainCanvases targetCanvas"
|
|
width="2560"
|
|
height="1440"
|
|
style="z-index: 3">
|
|
<!-- canvas on which "targeting" squares are drawn -->
|
|
<p>lol ur browser sucks</p>
|
|
</canvas>
|
|
<canvas
|
|
id="maskPaintCanvas"
|
|
class="mainCanvases maskPaintCanvas"
|
|
width="2560"
|
|
height="1440"
|
|
style="z-index: 4">
|
|
<!-- canvas on which masking brush is "painted" -->
|
|
<p>lol ur browser sucks</p>
|
|
</canvas>
|
|
<canvas
|
|
id="overlayCanvas"
|
|
class="mainCanvases overlayCanvas"
|
|
width="2560"
|
|
height="1440"
|
|
style="z-index: 5">
|
|
<!-- canvas on which "cursor" reticle or arc is drawn -->
|
|
<p>lol ur browser sucks</p>
|
|
</canvas>
|
|
<div id="tempDiv" style="position: relative; z-index: 6">
|
|
<!-- where popup buttons go -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="masks" class="masks">
|
|
<div>
|
|
<!-- <canvas id="maskCanvasMonitor" class="maskCanvasMonitor" width="512" height="512">
|
|
<p>lol ur browser sucks</p>
|
|
</canvas><br /> -->
|
|
<canvas
|
|
id="overMaskCanvasMonitor"
|
|
class="overMaskCanvasMonitor"
|
|
width="512"
|
|
height="512">
|
|
<p>lol ur browser sucks</p>
|
|
</canvas>
|
|
<br />
|
|
<canvas
|
|
id="initImgCanvasMonitor"
|
|
class="initImgCanvasMonitor"
|
|
width="512"
|
|
height="512">
|
|
<p>lol ur browser sucks</p>
|
|
</canvas>
|
|
<br />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Base Libs -->
|
|
<script src="js/util.js" type="text/javascript"></script>
|
|
<script src="js/input.js" type="text/javascript"></script>
|
|
<script src="js/commands.js" type="text/javascript"></script>
|
|
<script src="js/ui/history.js" type="text/javascript"></script>
|
|
<script src="js/settingsbar.js" type="text/javascript"></script>
|
|
|
|
<!-- Content -->
|
|
<script src="js/index.js" type="text/javascript"></script>
|
|
<script src="js/shortcuts.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/select.js" type="text/javascript"></script>
|
|
<script src="js/ui/tool/stamp.js" type="text/javascript"></script>
|
|
|
|
<script src="js/ui/toolbar.js" type="text/javascript"></script>
|
|
</body>
|
|
</html>
|