ea64c138c3
input.js is now responsible for processing mouse input and translating it to relevant events. This allows for less bloat on the main logic in index.js and easy implementation of new functionality Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
186 lines
No EOL
10 KiB
HTML
186 lines
No EOL
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>openOutpaint 🐠</title>
|
|
<link href="css/index.css" rel="stylesheet" />
|
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="infoContainer">
|
|
<div id="DraggableTitleBar" class="draggable">openOutpaint 🐠</div>
|
|
<div id="info" class="info" 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>
|
|
<textarea id="prompt">oceanographic study, underwater wildlife, award winning</textarea><br />
|
|
<label for="negPrompt">Negative prompt:</label> <br>
|
|
<textarea
|
|
id="negPrompt">people, person, humans, human, divers, diver, glitch, error, text, watermark, bad quality, blurry</textarea><br />
|
|
<hr>
|
|
</div>
|
|
<button type="button" class="collapsible">Stable Diffusion settings</button>
|
|
<div class="content">
|
|
<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 />
|
|
<label for="samplerSelect">Sampler:</label>
|
|
<select id="samplerSelect" onchange="changeSampler()">
|
|
<option value="DDIM">DDIM</option>
|
|
<option value="Euler a">Euler A</option>
|
|
<option value="Euler">Euler</option>
|
|
<option value="LMS">LMS</option>
|
|
<option value="Heun">Heun</option>
|
|
<option value="DPM2">DPM2</option>
|
|
<option value="DPM2 a">DPM2a</option>
|
|
<option value="DPM++ 2S a">DPM++2Sa</option>
|
|
<option value="DPM++ 2m">DPM++2m</option>
|
|
<option value="DPM fast">DPM fast</option>
|
|
<option value="DPM adaptive">DPM adaptive</option>
|
|
<option value="LMS Karras">LMS Karras</option>
|
|
<option value="DPM2 Karras">DPM2 Karras</option>
|
|
<option value="DPM2 a Karras">DPM2a Karras</option>
|
|
<option value="DPM++ 2S a Karras">DPM++2Sa Karras</option>
|
|
<option value="DPM++ 2M Karras">DPM++2M Karras</option>
|
|
</select><br />
|
|
<label for="steps">Steps: <input type="number" id="stepsTxt"></label><br />
|
|
<input type="range" id="steps" name="steps" min="1" max="50" /><br />
|
|
<label for="cfgScale">CFG scale: <input type="number" id="cfgScaleTxt"></label>
|
|
<br />
|
|
<input type="range" id="cfgScale" name="cfgScale" min="-1" max="25" step="0.5" /><br />
|
|
<label for="batchSize">Batch size: <input type="number" id="batchSizeText"></label><br />
|
|
<input type="range" id="batchSize" name="batchSize" min="1" max="8" step="1" /><br />
|
|
<label for="batchCount">Batch count: <input type="number" id="batchCountText"></label><br />
|
|
<input type="range" id="batchCount" name="batchCount" min="1" max="8" step="1" /><br />
|
|
<hr>
|
|
</div>
|
|
<label for="scaleFactor">Scale factor: <input type="number" id="scaleFactorTxt"></label><br />
|
|
<input type="range" id="scaleFactor" name="scaleFactor" min="1" max="16" /><br />
|
|
<label for="cbxSnap">Snap to grid?</label>
|
|
<input type="checkbox" id="cbxSnap" onchange="changeSnapMode()" checked="checked"><br />
|
|
<label for="cbxEnableErasing">Right-click erase?</label>
|
|
<input type="checkbox" id="cbxEnableErasing" onchange="changeEnableErasing()"><br />
|
|
<label for="cbxPaint">Mask mode?</label>
|
|
<input type="checkbox" id="cbxPaint" onchange="changePaintMode()"><br />
|
|
<!-- Having to tick a box to erase is a bad user experience, same goes for image erasing( cold be remedied by a temp confirm div) -->
|
|
<!-- <label for="cbxErase"><s>Erase mask?</s></label>
|
|
<input type="checkbox" id="cbxErase" onchange="changeEraseMode()" disabled="disabled"><br /> -->
|
|
|
|
<label for="cbxHRFix">Auto txt2img HRfix?</label>
|
|
<input type="checkbox" id="cbxHRFix" onchange="changeHiResFix()"><br />
|
|
<label for="overMaskPx">Overmask px (0 to disable):</label>
|
|
<input type="number" id="overMaskPx" onchange="changeOverMaskPx()" min="0" max="128" value="16"
|
|
step="1" /><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 />
|
|
<button type="button" class="collapsible">Save/Load/New image</button>
|
|
<div class="content">
|
|
<label for="preloadImage">Load image:</label>
|
|
<input type="file" id="preloadImage" onchange="preloadImage()" accept="image/*" /
|
|
style="width: 200px;"><br />
|
|
<button onclick="downloadCanvas()">Save canvas</button><br />
|
|
<button onclick="newImage()">Clear canvas</button>
|
|
</div>
|
|
<!-- Degub 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">Alpha release v0.0.5.7</span>
|
|
<br />
|
|
<hr>
|
|
</div>
|
|
<div class="toolbar">
|
|
<button type="button" onclick="commands.undo()" class="tool">undo</button>
|
|
<button type="button" onclick="commands.redo()" class="tool">redo</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div id="mainHSplit" class="mainHSplit">
|
|
<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>
|
|
|
|
|
|
<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/index.js" type="text/javascript"></script>
|
|
<script src="js/settingsbar.js" type="text/javascript"></script>
|
|
</body>
|
|
|
|
</html> |