180 lines
No EOL
9.6 KiB
HTML
180 lines
No EOL
9.6 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="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 />
|
|
<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> |