openOutpaint/index.html
Victor Seiji Hariki ca3533c9e4
some more fixes and things
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>
2022-11-25 20:27:44 -03:00

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>