diff --git a/index.html b/index.html index 15c6f03..2957e48 100644 --- a/index.html +++ b/index.html @@ -174,6 +174,9 @@ +
diff --git a/js/global.js b/js/global.js index 415c377..2c60124 100644 --- a/js/global.js +++ b/js/global.js @@ -19,4 +19,27 @@ const global = { // If there is a selected input hasActiveInput: false, + + // If debugging is enabled + _debug: false, + set debug(v) { + if (debugLayer) { + if (v) { + debugLayer.unhide(); + } else { + debugLayer.hide(); + } + } + + this._debug = v; + }, + get debug() { + return this._debug; + }, + /** + * Toggles debugging. + */ + toggledebug() { + this.debug = !this.debug; + }, }; diff --git a/js/initalize/debug.populate.js b/js/initalize/debug.populate.js index 1e27b7d..0843bf7 100644 --- a/js/initalize/debug.populate.js +++ b/js/initalize/debug.populate.js @@ -18,7 +18,7 @@ mouse.listen.world.onmousemove.on((evn) => { snapXInfo.textContent = evn.x + snap(evn.x); snapYInfo.textContent = evn.y + snap(evn.y); - if (debug) { + if (global.debug) { debugLayer.clear(); debugCtx.fillStyle = "#F0F"; debugCtx.beginPath(); @@ -31,17 +31,3 @@ mouse.listen.world.onmousemove.on((evn) => { debugCtx.fill(); } }); - -/** - * Toggles the debug layer (Just run toggledebug() in the console) - */ -const toggledebug = () => { - const hidden = debugCanvas.style.display === "none"; - if (hidden) { - debugLayer.unhide(); - debug = true; - } else { - debugLayer.hide(); - debug = false; - } -}; diff --git a/js/initalize/layers.populate.js b/js/initalize/layers.populate.js index c98ffba..744b15d 100644 --- a/js/initalize/layers.populate.js +++ b/js/initalize/layers.populate.js @@ -308,7 +308,7 @@ mouse.listen.window.btn.middle.onpaint.on((evn) => { } viewport.transform(imageCollection.element); - if (debug) { + if (global.debug) { debugCtx.clearRect(0, 0, debugCanvas.width, debugCanvas.height); debugCtx.fillStyle = "#F0F"; debugCtx.beginPath(); diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js index 7f87927..9327d29 100644 --- a/js/ui/tool/dream.js +++ b/js/ui/tool/dream.js @@ -86,6 +86,46 @@ const _monitorProgress = (bb, oncheck = null) => { const _dream = async (endpoint, request) => { const apiURL = `${host}${url}${endpoint}`; + // Debugging is enabled + if (global.debug) { + // Run in parallel + (async () => { + // Create canvas + const canvas = document.createElement("canvas"); + canvas.width = request.width; + canvas.height = request.height * (request.init_images.length + 1); + const ctx = canvas.getContext("2d"); + + // Load images and draw to canvas + for (let i = 0; i < request.init_images.length; i++) { + try { + const image = document.createElement("img"); + image.src = request.init_images[i]; + await image.decode(); + + ctx.drawImage(image, 0, i * request.height); + } catch (e) {} + } + + // Load mask and draw to canvas + if (request.mask) { + try { + const mask = document.createElement("img"); + mask.src = request.mask; + await mask.decode(); + + ctx.drawImage(mask, 0, canvas.height - request.height); + } catch (e) {} + } + + downloadCanvas({ + canvas, + cropToContent: false, + filename: `openOutpaint_debug_${new Date()}.png`, + }); + })(); + } + /** @type {StableDiffusionResponse} */ let data = null; try {