fe508f8b21
Implements command pattern for providing edit history capabilities to editing. For now, no implementation is done to support keyboard shortcuts, so the buttons are the only way to navigate. Also, only image insertion is supported for now. Waiting for the masking updates to implement masking history. Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
178 lines
No EOL
9.5 KiB
HTML
178 lines
No EOL
9.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>openOutpaint 🐠 0.0.5.5</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">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="cbxPaint">Mask mode?</label>
|
|
<input type="checkbox" id="cbxPaint" onchange="changePaintMode()"><br />
|
|
<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="cbxOverMask">Overmasking?</label>
|
|
<input type="checkbox" id="cbxOverMask" onchange="changeOverMask()" checked="checked"><br />
|
|
<label for="overMaskPx">Overmask px:</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>
|
|
<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 />
|
|
<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/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> |