Prettified Code!
This commit is contained in:
zero01101
GitHub Action
parent
b2f110bc57
commit
d33edaa8cf
2 changed files with 1391 additions and 1391 deletions
610
index.html
610
index.html
|
|
@ -1,305 +1,305 @@
|
|||
<!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>
|
||||
Host
|
||||
<div class="host-field-wrapper">
|
||||
<input id="host" value="http://127.0.0.1:7860" />
|
||||
<div
|
||||
id="connection-status-indicator"
|
||||
class="connection-status"></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>
|
||||
<!-- <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>
|
||||
<!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>
|
||||
Host
|
||||
<div class="host-field-wrapper">
|
||||
<input id="host" value="http://127.0.0.1:7860" />
|
||||
<div
|
||||
id="connection-status-indicator"
|
||||
class="connection-status"></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>
|
||||
<!-- <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>
|
||||
|
|
|
|||
2172
js/index.js
2172
js/index.js
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue