sneedgroup-holder/openOutpaint
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

minor refactoring, typo fix

Browse source
This commit is contained in:
zero01101 2022-11-15 21:15:52 -06:00
parent 1706ee391b
commit 695cd9c673
3 changed files with 38 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -37,7 +37,7 @@ if it _doesn't_ create an image, check your console output to see if you've got
- [ ] BUG: make erase mask actually work, enable the control if you dare - [ ] BUG: make erase mask actually work, enable the control if you dare
- [ ] infinite canvas - [ ] infinite canvas
- [ ] smart crop downloaded image - [ ] smart crop downloaded image
- [ ] floating/togglable menu leftnav bar with categorized/sensibly laid-out optionas - [ ] floating/togglable menu leftnav bar with categorized/sensibly laid-out options
- [ ] global undo/redo - [ ] global undo/redo
- [ ] render progress spinner/bar - [ ] render progress spinner/bar
- [ ] inpainting sketch tools - [ ] inpainting sketch tools

2
index.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>openOutpaint 0.0.4</title> <title>openOutpaint 0.0.4.1</title>
<style> <style>
.container { .container {

85
js/index.js
View file

@ -1,10 +1,5 @@
//TODO VITALLY IMPORTANT SERIOUSLY HOLY SHIT //TODO FIND OUT WHY I HAVE TO RESIZE A TEXTBOX AND THEN START USING IT TO AVOID THE 1px WHITE LINE ON LEFT EDGES DURING IMG2IMG
//FIND OUT WHY I HAVE TO RESIZE A TEXTBOX AND THEN START USING IT TO AVOID THE 1px WHITE LINE ON LEFT EDGES DURING IMG2IMG //...lmao did setting min width 200 on info div fix that accidentally? once the canvas is infinite and the menu bar is hideable it'll probably be a problem again
//lmao did setting min width 200 on info div fix that
//TODO also fix my stupid offset -- what does this mean ??? oh, was that re: when f12 is open, the reticle is offset vertically from where the target location actually is?
//lmao ok auto1111 webui api allows this if you add "null" to the cors allow list which seems like a bad plan so i recommend using a lil webhost
window.onload = startup; window.onload = startup;
@ -71,21 +66,21 @@ var drawThis = {};
var clicked = false; var clicked = false;
const basePixelCount = 64; //64 px - ALWAYS 64 PX const basePixelCount = 64; //64 px - ALWAYS 64 PX
var scaleFactor = 8; //x64 px var scaleFactor = 8; //x64 px
var snapToGrid = true; //yeah that's all it takes sure //TODO make this work somehow var snapToGrid = true;
var paintMode = false; var paintMode = false;
var eraseMode = false; //TODO this does absolutely nothing var eraseMode = false; //TODO this is broken, functionality still exists in code but UI element is just naively disabled
var backupMaskPaintCanvas; //??? var backupMaskPaintCanvas; //???
var backupMaskPaintCtx; //...? var backupMaskPaintCtx; //...? look i am bad at this
var backupMaskChunk = null; var backupMaskChunk = null;
var backupMaskX = null; var backupMaskX = null;
var backupMaskY = null; var backupMaskY = null;
var sampler = "DDIM";
var steps = 30;
var cfgScale = 7.5;
var totalImagesReturned; var totalImagesReturned;
var batchSize = 2; // var sampler = "DDIM"; //like i think all of these from here down are probably unnecessary and i can rely on just the stableDiffusionData object?
var batchCount = 2; // var steps = 30;
var maskBlur = 0; // var cfgScale = 7.5;
// var batchSize = 2;
// var batchCount = 2;
// var maskBlur = 0;
var drawTargets = []; // is this needed? i only draw the last one anyway... var drawTargets = []; // is this needed? i only draw the last one anyway...
@ -208,29 +203,28 @@ function prevImg(evt) {
if (imageIndex == 0) { if (imageIndex == 0) {
imageIndex = totalImagesReturned; imageIndex = totalImagesReturned;
} }
const img = new Image(); changeImg(false);
tempCtx.clearRect(0, 0, tempCtx.width, tempCtx.height);
img.onload = function () {
tempCtx.drawImage(img, tmpImgXYWH.x, tmpImgXYWH.y); //imgCtx for actual image, tmp for... holding?
}
var tmpIndex = document.getElementById("currentImgIndex");
imageIndex--;
tmpIndex.innerText = imageIndex + 1;
// load the image data after defining the closure
img.src = "data:image/png;base64," + returnedImages[imageIndex]; //TODO need way to dream batches and select from results
} }
function nextImg(evt) { function nextImg(evt) {
if (imageIndex == (totalImagesReturned - 1)) { if (imageIndex == (totalImagesReturned - 1)) {
imageIndex = -1; imageIndex = -1;
} }
changeImg(true);
}
function changeImg(forward) {
const img = new Image(); const img = new Image();
tempCtx.clearRect(0, 0, tempCtx.width, tempCtx.height); tempCtx.clearRect(0, 0, tempCtx.width, tempCtx.height);
img.onload = function () { img.onload = function () {
tempCtx.drawImage(img, tmpImgXYWH.x, tmpImgXYWH.y); //imgCtx for actual image, tmp for... holding? tempCtx.drawImage(img, tmpImgXYWH.x, tmpImgXYWH.y); //imgCtx for actual image, tmp for... holding?
} }
var tmpIndex = document.getElementById("currentImgIndex"); var tmpIndex = document.getElementById("currentImgIndex");
imageIndex++; if (forward) {
imageIndex++;
} else {
imageIndex--;
}
tmpIndex.innerText = imageIndex + 1; tmpIndex.innerText = imageIndex + 1;
// load the image data after defining the closure // load the image data after defining the closure
img.src = "data:image/png;base64," + returnedImages[imageIndex]; //TODO need way to dream batches and select from results img.src = "data:image/png;base64," + returnedImages[imageIndex]; //TODO need way to dream batches and select from results
@ -269,10 +263,8 @@ function placeImage() {
tmpImgXYWH = {}; tmpImgXYWH = {};
returnedImages = null; returnedImages = null;
} }
//console.log(data.images[0]);
// load the image data after defining the closure // load the image data after defining the closure
img.src = "data:image/png;base64," + returnedImages[imageIndex]; //TODO need way to dream batches and select from results img.src = "data:image/png;base64," + returnedImages[imageIndex];
} }
@ -326,6 +318,7 @@ function mouseMove(evt) {
if (clicked) { if (clicked) {
// i'm trying to draw, please draw :( // i'm trying to draw, please draw :(
if (eraseMode) { if (eraseMode) {
// THIS IS SOOOO BROKEN AND I DON'T UNDERSTAND WHY BECAUSE I AM THE BIG DUMB
maskPaintCtx.globalCompositeOperation = 'destination-out'; maskPaintCtx.globalCompositeOperation = 'destination-out';
// maskPaintCtx.strokeStyle = "#FFFFFF00"; // maskPaintCtx.strokeStyle = "#FFFFFF00";
} else { } else {
@ -338,7 +331,6 @@ function mouseMove(evt) {
maskPaintCtx.moveTo(prevMouseX, prevMouseY); maskPaintCtx.moveTo(prevMouseX, prevMouseY);
maskPaintCtx.lineTo(mouseX, mouseY); maskPaintCtx.lineTo(mouseX, mouseY);
maskPaintCtx.lineJoin = maskPaintCtx.lineCap = 'round'; maskPaintCtx.lineJoin = maskPaintCtx.lineCap = 'round';
// console.log("moving from " + prevMouseX + ":" + prevMouseY + " to " + mouseX + ":" + mouseY);
maskPaintCtx.stroke(); maskPaintCtx.stroke();
} }
prevMouseX = mouseX; prevMouseX = mouseX;
@ -469,27 +461,25 @@ function mouseUp(evt) {
} }
stableDiffusionData.prompt = document.getElementById("prompt").value; stableDiffusionData.prompt = document.getElementById("prompt").value;
stableDiffusionData.negative_prompt = document.getElementById("negPrompt").value; stableDiffusionData.negative_prompt = document.getElementById("negPrompt").value;
stableDiffusionData.sampler_index = sampler; // stableDiffusionData.sampler_index = sampler;
stableDiffusionData.steps = steps; // stableDiffusionData.steps = steps;
stableDiffusionData.cfg_scale = cfgScale; // stableDiffusionData.cfg_scale = cfgScale;
stableDiffusionData.width = drawIt.w; stableDiffusionData.width = drawIt.w;
stableDiffusionData.height = drawIt.h; stableDiffusionData.height = drawIt.h;
stableDiffusionData.batch_size = batchSize; // stableDiffusionData.batch_size = batchSize;
stableDiffusionData.n_iter = batchCount; // stableDiffusionData.n_iter = batchCount;
stableDiffusionData.mask_blur = maskBlur; // stableDiffusionData.mask_blur = maskBlur;
dream(drawIt.x, drawIt.y, stableDiffusionData); dream(drawIt.x, drawIt.y, stableDiffusionData);
} }
} }
} }
function changeScaleFactor() { function changeScaleFactor() {
scaleFactor = document.getElementById("scaleFactor").value; document.getElementById("scaleFactorTxt").innerText = scaleFactor = document.getElementById("scaleFactor").value;
document.getElementById("scaleFactorTxt").innerText = scaleFactor;
} }
function changeSteps() { function changeSteps() {
steps = document.getElementById("steps").value; document.getElementById("stepsTxt").innerText = stableDiffusionData.steps = document.getElementById("steps").value;
document.getElementById("stepsTxt").innerText = steps;
} }
function changePaintMode() { function changePaintMode() {
@ -505,22 +495,19 @@ function changeEraseMode() {
} }
function changeSampler() { function changeSampler() {
sampler = document.getElementById("samplerSelect").value; stableDiffusionData.sampler_index = document.getElementById("samplerSelect").value;
} }
function changeCfgScale() { function changeCfgScale() {
cfgScale = document.getElementById("cfgScale").value; document.getElementById("cfgScaleTxt").innerText = stableDiffusionData.cfg_scale = document.getElementById("cfgScale").value;
document.getElementById("cfgScaleTxt").innerText = cfgScale;
} }
function changeBatchSize() { function changeBatchSize() {
batchSize = document.getElementById("batchSize").value; document.getElementById("batchSizeText").innerText = stableDiffusionData.batch_size = document.getElementById("batchSize").value;
document.getElementById("batchSizeText").innerText = batchSize;
} }
function changeBatchCount() { function changeBatchCount() {
batchCount = document.getElementById("batchCount").value; document.getElementById("batchCountText").innerText = stableDiffusionData.n_iter = document.getElementById("batchCount").value;
document.getElementById("batchCountText").innerText = batchCount;
} }
function changeSnapMode() { function changeSnapMode() {
@ -528,7 +515,7 @@ function changeSnapMode() {
} }
function changeMaskBlur() { function changeMaskBlur() {
maskBlur = document.getElementById("maskBlur").value; stableDiffusionData.mask_blur = document.getElementById("maskBlur").value;
} }
function isCanvasBlank(x, y, w, h, specifiedCanvas) { function isCanvasBlank(x, y, w, h, specifiedCanvas) {