diff --git a/README.md b/README.md
index da9d13e..6abbf90 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,7 @@ this is a completely vanilla javascript and html canvas outpainting convenience
## features
+- SDXL "support"! (please check outpaint/inpaint fill types in the context menus and fiddle with denoising a LOT for img2img, it's touchy)
- [now available as an extension for webUI!](https://github.com/zero01101/openOutpaint-webUI-extension) you can find it under the default "available" section in the webUI _extensions_ tab
- **_NOTE: extension still requires `--api` flag in webui-user launch script_**
- intuitive, convenient outpainting - that's like the whole point right
@@ -23,7 +24,8 @@ this is a completely vanilla javascript and html canvas outpainting convenience
- arbitrary dream reticle size - draw the rectangle of your dreams
- an [effectively infinite](https://github.com/zero01101/openOutpaint/pull/108), resizable, scalable canvas for you to paint all over
- **_NOTE: v0.0.10 introduces a new "camera control" modifier key - hold [`CTRL`] and use the scrollwheel to zoom (scroll the wheel or use the two-finger vertical gesture on, uh, modern touchpads) and pan (hold the scrollwheel button, or if you don't have one, left-click button) around the canvas_**
-- extremely limited, janky support for a shockingly restrictive list of A1111 extensions including controlnet inpainting for legitimately [magic](https://github.com/Mikubill/sd-webui-controlnet/discussions/1464) [promptless inpainting](https://github.com/Mikubill/sd-webui-controlnet/discussions/1143) and [outpainting](https://github.com/Mikubill/sd-webui-controlnet/discussions/1597)
+- extremely limited, janky support for a shockingly restrictive list of A1111 extensions including controlnet inpainting for legitimately [magic](https://github.com/Mikubill/sd-webui-controlnet/discussions/1464) [promptless inpainting](https://github.com/Mikubill/sd-webui-controlnet/discussions/1143) and [outpainting](https://github.com/Mikubill/sd-webui-controlnet/discussions/1597) and in-line reference preprocessors for keeping existing style while replacing things (reference requires at least 2 controlnet units enabled in A1111 settings), as well as a very very basic dynamic-prompts-on-or-off toggle
+ - **_NOTE: this is_ JANKY, _pull requests greatly welcomed lol_**
- a very nicely functional and familiar layer system
- save, load, import, and export workspaces - includes all your layers, history, canvas size, you name it!
- inpainting/touchup mask brush
diff --git a/index.html b/index.html
index 9e1bd10..63753e8 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-
+
ControlNet In/Outpainting
-
- Preprocessor
+
+ Inpaint Preprocessor
-
- Model
-
-
- Control Mode
+
+ Model
+
+
+ Inpaint Mode
-
+
balanced
+prompt
+CN
-
+
Resize Mode
-
+
resize
+crop
+fill
-
+
+ Reference as 1st CN Unit
+
+
+ Reference Preprocessor
+
+
+
+
+ Reference Mode
+
+
+ balanced
+ +prompt
+ +CN
+
Save/Upscaling
@@ -287,8 +315,8 @@
- Alpha release v0.0.16.2
- v20230715.001
+ Alpha release v0.0.16.3
+ v20230715.002
-
+
@@ -511,7 +539,7 @@
-
+
-
+
diff --git a/js/extensions.js b/js/extensions.js
index e0a6b5b..0b16e3d 100644
--- a/js/extensions.js
+++ b/js/extensions.js
@@ -7,8 +7,12 @@ const extensions = {
alwaysOnScripts: false,
controlNetEnabled: false,
controlNetActive: false,
+ controlNetReferenceActive: false,
+ controlNetReferenceFidelity: 0.5,
selectedControlNetModel: null,
selectedControlNetModule: null,
+ selectedCNReferenceModule: null,
+ controlNetModelCount: 0,
dynamicPromptsEnabled: false,
dynamicPromptsActive: false,
dynamicPromptsAlwaysonScriptName: null, //GRUMBLE GRUMBLE
@@ -18,7 +22,8 @@ const extensions = {
async getExtensions(
controlNetModelAutoComplete,
- controlNetModuleAutoComplete
+ controlNetModuleAutoComplete,
+ controlNetReferenceModuleAutoComplete
) {
const allowedExtensions = [
"controlnet",
@@ -51,7 +56,8 @@ const extensions = {
this.checkForDynamicPrompts();
this.checkForControlNet(
controlNetModelAutoComplete,
- controlNetModuleAutoComplete
+ controlNetModuleAutoComplete,
+ controlNetReferenceModuleAutoComplete
);
//checkForSAM(); //or inpaintAnything or something i dunno
//checkForADetailer(); //? this one seems iffy
@@ -78,7 +84,8 @@ const extensions = {
async checkForControlNet(
controlNetModelAutoComplete,
- controlNetModuleAutoComplete
+ controlNetModuleAutoComplete,
+ controlNetReferenceModuleAutoComplete
) {
var url = document.getElementById("host").value + "/controlnet/version";
@@ -97,8 +104,23 @@ const extensions = {
document.getElementById("cbxControlNet").disabled = false;
// ok cool so now we can get the models and modules
this.getModels(controlNetModelAutoComplete);
- this.getModules(controlNetModuleAutoComplete);
+ this.getModules(
+ controlNetModuleAutoComplete,
+ controlNetReferenceModuleAutoComplete
+ );
}
+ url = document.getElementById("host").value + "/controlnet/settings";
+ try {
+ const response2 = await fetch(url);
+ const data2 = await response2.json();
+ if (data2.control_net_max_models_num < 2) {
+ document.getElementById("cbxControlNetReferenceLayer").disabled =
+ "disabled";
+ console.warn(
+ "[extensions] ControlNet reference layer disabled due to insufficient units enabled in settings - cannot be enabled via API, please increase to at least 2 units manually"
+ );
+ }
+ } catch (ex) {}
} catch (e) {
// ??
global.controlnetAPI = false;
@@ -128,7 +150,10 @@ const extensions = {
controlNetModelAutoComplete.options = opt;
},
- async getModules(controlNetModuleAutoComplete) {
+ async getModules(
+ controlNetModuleAutoComplete,
+ controlNetReferenceModuleAutoComplete
+ ) {
const allowedModules = ["reference", "inpaint"];
var url = document.getElementById("host").value + "/controlnet/module_list";
@@ -156,5 +181,14 @@ const extensions = {
});
controlNetModuleAutoComplete.options = opt;
+
+ opt = this.controlNetModules.module_list
+ .filter((m) => m.includes("reference"))
+ .map((option) => ({
+ name: option,
+ value: option,
+ }));
+
+ controlNetReferenceModuleAutoComplete.options = opt;
},
};
diff --git a/js/index.js b/js/index.js
index 1f75638..eb13fd9 100644
--- a/js/index.js
+++ b/js/index.js
@@ -172,6 +172,7 @@ function startup() {
changeRestoreFaces();
changeSyncCursorSize();
changeControlNetExtension();
+ changeControlNetReference();
checkFocus();
refreshScripts();
}
@@ -424,7 +425,8 @@ async function testHostConnection() {
getModels();
extensions.getExtensions(
controlNetModelAutoComplete,
- controlNetModuleAutoComplete
+ controlNetModuleAutoComplete,
+ controlNetReferenceModuleAutoComplete
);
getLoras();
// getTIEmbeddings();
@@ -680,7 +682,7 @@ const hrFixUpscalerAutoComplete = createAutoComplete(
);
let controlNetModelAutoComplete = createAutoComplete(
- "ControlNet Model",
+ "Inpaint Model",
document.getElementById("controlNetModel-ac-select")
);
@@ -689,7 +691,7 @@ controlNetModelAutoComplete.onchange.on(({value}) => {
});
let controlNetModuleAutoComplete = createAutoComplete(
- "ControlNet Module",
+ "Inpaint Preprocessor",
document.getElementById("controlNetModule-ac-select")
);
@@ -697,6 +699,15 @@ controlNetModuleAutoComplete.onchange.on(({value}) => {
extensions.selectedControlNetModule = value;
});
+let controlNetReferenceModuleAutoComplete = createAutoComplete(
+ "Reference Preprocessor",
+ document.getElementById("controlNetReferenceModule-ac-select")
+);
+
+controlNetReferenceModuleAutoComplete.onchange.on(({value}) => {
+ extensions.selectedCNReferenceModule = value;
+});
+
// const extensionsAutoComplete = createAutoComplete(
// "Extension",
// document.getElementById("extension-ac-select")
@@ -724,6 +735,25 @@ const resSlider = makeSlider(
toolbar.currentTool.redraw();
}
);
+
+const refSlider = makeSlider(
+ "Reference Fidelity",
+ document.getElementById("controlNetReferenceFidelity"),
+ "cn_reference_fidelity",
+ 0.0,
+ 1.0,
+ 0.1,
+ 0.5,
+ 0.01,
+ (v) => {
+ extensions.controlNetReferenceFidelity = v;
+
+ toolbar.currentTool &&
+ toolbar.currentTool.redraw &&
+ toolbar.currentTool.redraw();
+ }
+);
+
makeSlider(
"CFG Scale",
document.getElementById("cfgScale"),
@@ -851,11 +881,26 @@ function changeControlNetExtension() {
document.getElementById("cbxControlNet").checked;
if (extensions.controlNetActive) {
document
- .querySelectorAll(".controlnetElement")
+ .querySelectorAll(".controlNetElement")
+ .forEach((el) => el.classList.remove("invisible"));
+ } else {
+ document
+ .querySelectorAll(".controlNetElement")
+ .forEach((el) => el.classList.add("invisible"));
+ }
+}
+
+function changeControlNetReference() {
+ extensions.controlNetReferenceActive = document.getElementById(
+ "cbxControlNetReferenceLayer"
+ ).checked;
+ if (extensions.controlNetReferenceActive) {
+ document
+ .querySelectorAll(".controlNetReferenceElement")
.forEach((el) => el.classList.remove("invisible"));
} else {
document
- .querySelectorAll(".controlnetElement")
+ .querySelectorAll(".controlNetReferenceElement")
.forEach((el) => el.classList.add("invisible"));
}
}
diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js
index 224fedd..524f336 100644
--- a/js/ui/tool/dream.js
+++ b/js/ui/tool/dream.js
@@ -62,12 +62,9 @@ const _monitorProgress = (bb, oncheck = null) => {
}
const timeSpent = performance.now() - init;
- setTimeout(
- () => {
- if (running) _checkProgress();
- },
- Math.max(0, minDelay - timeSpent)
- );
+ setTimeout(() => {
+ if (running) _checkProgress();
+ }, Math.max(0, minDelay - timeSpent));
};
_checkProgress();
@@ -1217,7 +1214,7 @@ const dream_generate_callback = async (bb, resolution, state) => {
canvasTransport.initCanvas,
canvasTransport.maskCanvas
);
- } else {
+ } else if (extensions.controlNetActive) {
console.warn(
"[dream] controlnet inpaint/outpaint enabled for null image, defaulting to normal txt2img dream"
);
@@ -1570,7 +1567,15 @@ const dream_img2img_callback = (bb, resolution, state) => {
addDynamicPromptsToAlwaysOnScripts(state);
}
if (extensions.controlNetActive) {
- addControlNetToAlwaysOnScripts(state, null, null);
+ if (extensions.controlNetReferenceActive) {
+ addControlNetToAlwaysOnScripts(
+ state,
+ request.init_images[0],
+ request.mask
+ );
+ } else {
+ addControlNetToAlwaysOnScripts(state, null, null); // //WTF???
+ }
}
if (extensions.alwaysOnScripts) {
// check again just to be sure because i'm an idiot?
@@ -2846,6 +2851,10 @@ function addDynamicPromptsToAlwaysOnScripts(state) {
}
function addControlNetToAlwaysOnScripts(state, initCanvas, maskCanvas) {
+ var initimg =
+ toolbar._current_tool.name == "Dream" ? initCanvas.toDataURL() : initCanvas;
+ var maskimg =
+ toolbar._current_tool.name == "Dream" ? maskCanvas.toDataURL() : maskCanvas;
if (extensions.controlNetEnabled && extensions.controlNetActive) {
state.alwayson_scripts.controlnet = {};
if (initCanvas == null && maskCanvas == null) {
@@ -2867,8 +2876,8 @@ function addControlNetToAlwaysOnScripts(state, initCanvas, maskCanvas) {
module: extensions.selectedControlNetModule,
model: extensions.selectedControlNetModel,
control_mode: document.getElementById("controlNetMode-select").value,
- input_image: initCanvas.toDataURL(),
- mask: maskCanvas.toDataURL(),
+ input_image: initimg, //initCanvas.toDataURL(),
+ mask: maskimg, //maskCanvas.toDataURL(),
processor_res: 64,
resize_mode: document.getElementById("controlNetResize-select").value,
// resize mode?
@@ -2876,8 +2885,25 @@ function addControlNetToAlwaysOnScripts(state, initCanvas, maskCanvas) {
},
];
}
+ if (extensions.controlNetReferenceActive) {
+ state.alwayson_scripts.controlnet.args.unshift({
+ enabled: true,
+ module: extensions.selectedCNReferenceModule,
+ model: "None",
+ control_mode: document.getElementById("controlNetReferenceMode-select")
+ .value,
+ image: initimg, //initCanvas.toDataURL(),
+ processor_res: 64,
+ threshold_a: extensions.controlNetReferenceFidelity,
+ threshold_b: 64,
+ resize_mode: document.getElementById("controlNetResize-select").value,
+ });
+ }
}
+ var deleteme = 2463;
+ var ok = deleteme / 36;
+
// request.alwayson_scripts = state.alwayson_scripts;
// }
}