143 lines
9.0 KiB
HTML
143 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>ComfyCanvas</title>
|
|
<link rel="stylesheet" href="/static/styles.css">
|
|
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
|
</head>
|
|
<body onwheel="changesize(event);" onmousemove="mousecoordinates(event);" onkeydown="printLetter(event);">
|
|
<script src="/static/app.js"></script>
|
|
<script>
|
|
var host = '{{host}}';
|
|
var port = '{{port}}';
|
|
</script>
|
|
<div id="container" onmouseenter="reset();" style="width: 100%;height: 100%;">
|
|
<canvas id="grid"></canvas>
|
|
<div id="aura"></div>
|
|
<div id="canvascontainer">
|
|
<img id="sourceimg" src="{{byte_im}}" width={{w}} height={{h}} style="visibility: hidden;" style="position: fixed;"/>
|
|
<canvas id="source" width={{w}} height={{h}} onclick="drawenable();" onmousemove="draw();" ></canvas>
|
|
</div>
|
|
<div id="compare">
|
|
<img id="oldimg" width="512" height="512" src="">
|
|
</div>
|
|
<div id="moveimglistner" style="position: absolute; width: 100%;height: 100%;top: 0%;left: 0%; z-index: 3;" onclick="moveimg(); " onmousemove="grabselector();"></div>
|
|
<div id="selector" onmousemove="selector();" onclick="snapshot();"></div>
|
|
<div id="hint">
|
|
<p id="hinttext"></p><input id="hintinp" type="text" onchange="changeselectorsize(event);"><p>px</p>
|
|
</div>
|
|
<div id="textinput">
|
|
<input id="textinp" type="text" placeholder="Enter Text" size="10">
|
|
</div>
|
|
<div id="gligencont">
|
|
<div id="gligenconfirm" onclick="confirmGligen();"><p class="txt">Confirm</p></div>
|
|
<textarea rows="4" cols="40" id="gligenmain" type="text" placeholder="Enter Main Prompt" size="10"></textarea>
|
|
</div>
|
|
<div id="settings">
|
|
<div id="settingsbarbtns">
|
|
<div id="setref" class="btn" onclick="setreftoggle();"><p class="txt">Set Ref.</p></div>
|
|
<div id="resetref" class="btn" onclick="resetref();"><p class="txt">Reset Ref.</p></div>
|
|
<div id="crop" class="btn" onclick="cropimg();"><p class="txt">Crop</p></div>
|
|
<div id="compbtn" class="btn" onclick="compare();"><p class="txt">Compare</p></div>
|
|
<div id="moveimg" class="btn" onclick="moveimgenablefirst();"><p class="txt">Move</p></div>
|
|
<div id="eraseon" class="btn" onclick="erasemodeon()"><p class="txt">Erase</p></div>
|
|
<div id="maskon" class="btn" onclick="maskmodeon()"><p class="txt">Mask</p></div>
|
|
<div id="drawon" class="btn" onclick="drawmodeon()"><p class="txt">Draw</p></div>
|
|
<div id="fit" class="btn" onclick="fit();"><p class="txt">Fit</p></div>
|
|
<div id="uploadnew" class="btn" onclick="uploadnewimage();"><p class="txt">New</p></div>
|
|
<div id="addtext" class="btn" onclick="addText();"><p class="txt">Text</p></div>
|
|
<div id="gligen" class="btn" onclick="setGligen();"><p class="txt">GLIGEN</p></div>
|
|
<div id="empty" class="btn" onclick="emptyCanvas();"><p class="txt">Blank</p></div>
|
|
<div id="gridbtn" class="btn" onclick="gridDraw();"><p class="txt">Grid</p></div>
|
|
<div id="lone" class="btn" onclick="setLone();"><p class="txt">COMFY</p></div>
|
|
<div id="undo" class="btn" onclick="undoimg();"><p class="txt">Undo</p></div>
|
|
</div>
|
|
<div id="settingsbarparams">
|
|
<div id="workflowsettings">
|
|
<div class="dropdown" id="wfsdropdown">
|
|
<button class="dropbtn" id="wfbutton">Select Workflow</button>
|
|
<div class="dropdown-content" id="wfscont">
|
|
</div>
|
|
</div>
|
|
<div class="dropdown" id="modelsdropdown">
|
|
<button class="dropbtn" id="modelbutton">Select Model</button>
|
|
<div class="dropdown-content" id="modelscont">
|
|
</div>
|
|
</div>
|
|
<button class="dropbtn" id="paramsbutton" onclick="showStack();">Change Parameter</button>
|
|
<div id="maskreset" class="btn txt" onclick="maskreset();">Reset Mask</div>
|
|
<div id="paramvalue" class="btn txt" onclick="paramset();">Reset Parameters</div>
|
|
</div>
|
|
<div id="generalsettings">
|
|
<p id="label">Box Size: </p>
|
|
<input type="text" id="selectorsize" onchange="changeselectorsize(event);" size="4">
|
|
<p id="label2">Fade Factor: </p>
|
|
<input id="ff" type="text" size="4" onchange="ffupdate();">
|
|
<p id="label3">Eraser/Pencil Size: </p>
|
|
<input id="erasersize" type="text" size="4">
|
|
<input id="clr" type="color" size="3">
|
|
<input id="inprange" type="range" min="0" max="255" step="1">
|
|
<input id="gridrange" type="range" min="64" max="512" value="128" step="64" onchange="setGridSize(event);">
|
|
</div>
|
|
<div id="moresettings">
|
|
<p id="label4">Image Width: </p>
|
|
<input type="text" id="imgwidth" onchange="setImageWidth(event);" size="4">
|
|
<p id="label5">Image Height: </p>
|
|
<input id="imgheight" type="text" size="4" onchange="setImageHeight(event);">
|
|
<p id="label6">Image Opacity: </p>
|
|
<input type="text" id="imgopacity" onchange="setImageOpacity(event);" size="4">
|
|
<div id="routinerecord" class="btn" onclick="recordRoutine();"><p class="txt">Rec. Routine</p></div>
|
|
<div id="routinestart" class="btn" onclick="getRoutine();"><p class="txt">Start Routine</p></div>
|
|
<div class="dropdown" id="routinesdropdown">
|
|
<button class="dropbtn" id="routinebutton">Select Routine</button>
|
|
<div class="dropdown-content" id="routinecont">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="settingsbarthird">
|
|
<div id="locksetts">
|
|
<div id="lockleft" class="btn" onclick="lockleft();"><p class="txt">Left</p></div>
|
|
<div id="lockright" class="btn" onclick="lockright();"><p class="txt">Right</p></div>
|
|
<div id="lockbottom" class="btn" onclick="lockbottom();"><p class="txt">Bottom</p></div>
|
|
<div id="locktop" class="btn" onclick="locktop();"><p class="txt">Top</p></div>
|
|
</div>
|
|
<div id="lockfull">
|
|
<div id="lockbox" class="btn" onclick="lockbox();"><p class="txt">Lock To Image</p></div>
|
|
</div>
|
|
<div id="othersetts">
|
|
<div id="resetimg" class="btn" onclick="resetimg();"><p class="txt">Reset Image</p></div>
|
|
<div id="saveimg" class="btn" onclick="saveimg()"><p class="txt">Save Image</p></div>
|
|
<div id="saveexit" class="btn" onclick="savejson()"><p class="txt">Generate</p></div>
|
|
</div>
|
|
</div>
|
|
<label for="openimgadd" id="uploadanotherimg"><p class="icontxt">+</p></label>
|
|
<input id="openimgadd" type="file">
|
|
</div>
|
|
<div id="settings2">
|
|
<div id="moveimg1" onclick="moveimgenable();"><p class="txt">Move Image</p></div>
|
|
<div id="done" onclick="compimage();"><p class="txt">Done</p></div>
|
|
<label for="openimgadd2" id="uploadanotherimg"><p class="icontxt">+</p></label>
|
|
</div>
|
|
<div id="uploadcontainer">
|
|
<label for="openimg" class="uploadstyle">
|
|
<p>Upload Image</p>
|
|
</label>
|
|
<input id="openimg" type="file">
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div id="drawer" onclick="expandDrawer();">
|
|
<img id="img5" width="150" height="150" onclick="openDrawerImage(event);">
|
|
<img id="img4" width="150" height="150" onclick="openDrawerImage(event);">
|
|
<img id="img3" width="150" height="150" onclick="openDrawerImage(event);">
|
|
<img id="img2" width="150" height="150" onclick="openDrawerImage(event);">
|
|
<img id="img1" width="150" height="150" onclick="openDrawerImage(event);">
|
|
</div>
|
|
<div id="stack"></div>
|
|
<div id="blockactions"></div>
|
|
<div id="cancel" onclick="cancelgen();">+</div>
|
|
</body>
|
|
</html>
|