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

adds controlnet reference for probably the wrong reasons

Browse source
This commit is contained in:
tim h 2023-07-15 12:10:45 -05:00
parent a83f72941a
commit 6461e3b990
5 changed files with 175 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -16,6 +16,7 @@ this is a completely vanilla javascript and html canvas outpainting convenience
## features ## 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 - [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_** - **_NOTE: extension still requires `--api` flag in webui-user launch script_**
- intuitive, convenient outpainting - that's like the whole point right - 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 - 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 - 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_** - **_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 - a very nicely functional and familiar layer system
- save, load, import, and export workspaces - includes all your layers, history, canvas size, you name it! - save, load, import, and export workspaces - includes all your layers, history, canvas size, you name it!
- inpainting/touchup mask brush - inpainting/touchup mask brush

66
index.html
View file

@ -1,4 +1,4 @@
<!doctype html> <!DOCTYPE html>
<html lang="en-US"> <html lang="en-US">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
@ -213,31 +213,59 @@
onchange="changeControlNetExtension()" onchange="changeControlNetExtension()"
disabled="disabled" /> disabled="disabled" />
<label for="cbxControlNet">ControlNet In/Outpainting</label> <label for="cbxControlNet">ControlNet In/Outpainting</label>
<br class="controlnetElement" /> <br class="controlNetElement" />
<label id="cnModuleLabel" class="controlnetElement"> <label id="cnModuleLabel" class="controlNetElement">
Preprocessor Inpaint Preprocessor
</label> </label>
<div id="controlNetModule-ac-select" class="controlnetElement"></div> <div id="controlNetModule-ac-select" class="controlNetElement"></div>
<label id="cnModelLabel" class="controlnetElement">Model</label> <label id="cnModelLabel" class="controlNetElement">Model</label>
<div id="controlNetModel-ac-select" class="controlnetElement"></div> <div id="controlNetModel-ac-select" class="controlNetElement"></div>
<label id="cnControlLabel" class="controlnetElement"> <label id="cnControlLabel" class="controlNetElement">
Control Mode Inpaint Mode
</label> </label>
<select id="controlNetMode-select" class="controlnetElement"> <select id="controlNetMode-select" class="controlNetElement">
<option value="Balanced">balanced</option> <option value="Balanced">balanced</option>
<option value="My prompt is more important">+prompt</option> <option value="My prompt is more important">+prompt</option>
<option value="ControlNet is more important">+CN</option> <option value="ControlNet is more important">+CN</option>
</select> </select>
<br /> <br class="controlNetElement" />
<label id="cnResizeLabel" class="controlnetElement"> <label id="cnResizeLabel" class="controlNetElement">
Resize Mode Resize Mode
</label> </label>
<select id="controlNetResize-select" class="controlnetElement"> <select id="controlNetResize-select" class="controlNetElement">
<option value="Just Resize">resize</option> <option value="Just Resize">resize</option>
<option value="Crop and Resize">+crop</option> <option value="Crop and Resize">+crop</option>
<option value="Resize and Fill">+fill</option> <option value="Resize and Fill">+fill</option>
</select> </select>
<!-- <div id="referenceStyleFidelity" class="controlnetElement"></div> --> <br class="controlNetElement" />
<input
type="checkbox"
id="cbxControlNetReferenceLayer"
onchange="changeControlNetReference()"
class="controlNetElement" />
<label for="cbxControlNetReferenceLayer" class="controlNetElement">
Reference as 1st CN Unit
</label>
<br class="controlNetReferenceElement" />
<label id="cnReferenceModuleLabel" class="controlNetReferenceElement">
Reference Preprocessor
</label>
<div
id="controlNetReferenceModule-ac-select"
class="controlNetReferenceElement"></div>
<div
id="controlNetReferenceFidelity"
class="controlNetReferenceElement"></div>
<label id="cnResizeLabel" class="controlNetReferenceElement">
Reference Mode
</label>
<select
id="controlNetReferenceMode-select"
class="controlNetReferenceElement">
<option value="Balanced">balanced</option>
<option value="My prompt is more important">+prompt</option>
<option value="ControlNet is more important">+CN</option>
</select>
</div> </div>
<!-- Save/load image section --> <!-- Save/load image section -->
<button type="button" class="collapsible">Save/Upscaling</button> <button type="button" class="collapsible">Save/Upscaling</button>
@ -287,8 +315,8 @@
<br /> <br />
<span id="version"> <span id="version">
<a href="https://github.com/zero01101/openOutpaint" target="_blank"> <a href="https://github.com/zero01101/openOutpaint" target="_blank">
<s>Alpha release v0.0.16.2</s> <s>Alpha release v0.0.16.3</s>
v20230715.001 v20230715.002
</a> </a>
<br /> <br />
<a <a
@ -485,7 +513,7 @@
<!-- Basics --> <!-- Basics -->
<script src="js/global.js?v=ac30d16" type="text/javascript"></script> <script src="js/global.js?v=ac30d16" type="text/javascript"></script>
<script src="js/defaults.js?v=5b06818" type="text/javascript"></script> <script src="js/defaults.js?v=5b06818" type="text/javascript"></script>
<script src="js/extensions.js?v=abb882a" type="text/javascript"></script> <script src="js/extensions.js?v=1fca0fc" type="text/javascript"></script>
<!-- Base Libs --> <!-- Base Libs -->
<script src="js/lib/util.js?v=379aef7" type="text/javascript"></script> <script src="js/lib/util.js?v=379aef7" type="text/javascript"></script>
@ -511,7 +539,7 @@
<!-- Content --> <!-- Content -->
<script src="js/prompt.js?v=7a1c68c" type="text/javascript"></script> <script src="js/prompt.js?v=7a1c68c" type="text/javascript"></script>
<script src="js/index.js?v=31d52e7" type="text/javascript"></script> <script src="js/index.js?v=7debf82" type="text/javascript"></script>
<script <script
src="js/ui/floating/history.js?v=4f29db4" src="js/ui/floating/history.js?v=4f29db4"
@ -525,7 +553,7 @@
src="js/ui/tool/generic.js?v=3e678e0" src="js/ui/tool/generic.js?v=3e678e0"
type="text/javascript"></script> type="text/javascript"></script>
<script src="js/ui/tool/dream.js?v=ac1643d" type="text/javascript"></script> <script src="js/ui/tool/dream.js?v=06e0164" type="text/javascript"></script>
<script <script
src="js/ui/tool/maskbrush.js?v=e9bd0eb" src="js/ui/tool/maskbrush.js?v=e9bd0eb"
type="text/javascript"></script> type="text/javascript"></script>

44
js/extensions.js
View file

@ -7,8 +7,12 @@ const extensions = {
alwaysOnScripts: false, alwaysOnScripts: false,
controlNetEnabled: false, controlNetEnabled: false,
controlNetActive: false, controlNetActive: false,
controlNetReferenceActive: false,
controlNetReferenceFidelity: 0.5,
selectedControlNetModel: null, selectedControlNetModel: null,
selectedControlNetModule: null, selectedControlNetModule: null,
selectedCNReferenceModule: null,
controlNetModelCount: 0,
dynamicPromptsEnabled: false, dynamicPromptsEnabled: false,
dynamicPromptsActive: false, dynamicPromptsActive: false,
dynamicPromptsAlwaysonScriptName: null, //GRUMBLE GRUMBLE dynamicPromptsAlwaysonScriptName: null, //GRUMBLE GRUMBLE
@ -18,7 +22,8 @@ const extensions = {
async getExtensions( async getExtensions(
controlNetModelAutoComplete, controlNetModelAutoComplete,
controlNetModuleAutoComplete controlNetModuleAutoComplete,
controlNetReferenceModuleAutoComplete
) { ) {
const allowedExtensions = [ const allowedExtensions = [
"controlnet", "controlnet",
@ -51,7 +56,8 @@ const extensions = {
this.checkForDynamicPrompts(); this.checkForDynamicPrompts();
this.checkForControlNet( this.checkForControlNet(
controlNetModelAutoComplete, controlNetModelAutoComplete,
controlNetModuleAutoComplete controlNetModuleAutoComplete,
controlNetReferenceModuleAutoComplete
); );
//checkForSAM(); //or inpaintAnything or something i dunno //checkForSAM(); //or inpaintAnything or something i dunno
//checkForADetailer(); //? this one seems iffy //checkForADetailer(); //? this one seems iffy
@ -78,7 +84,8 @@ const extensions = {
async checkForControlNet( async checkForControlNet(
controlNetModelAutoComplete, controlNetModelAutoComplete,
controlNetModuleAutoComplete controlNetModuleAutoComplete,
controlNetReferenceModuleAutoComplete
) { ) {
var url = document.getElementById("host").value + "/controlnet/version"; var url = document.getElementById("host").value + "/controlnet/version";
@ -97,8 +104,23 @@ const extensions = {
document.getElementById("cbxControlNet").disabled = false; document.getElementById("cbxControlNet").disabled = false;
// ok cool so now we can get the models and modules // ok cool so now we can get the models and modules
this.getModels(controlNetModelAutoComplete); 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) { } catch (e) {
// ?? // ??
global.controlnetAPI = false; global.controlnetAPI = false;
@ -128,7 +150,10 @@ const extensions = {
controlNetModelAutoComplete.options = opt; controlNetModelAutoComplete.options = opt;
}, },
async getModules(controlNetModuleAutoComplete) { async getModules(
controlNetModuleAutoComplete,
controlNetReferenceModuleAutoComplete
) {
const allowedModules = ["reference", "inpaint"]; const allowedModules = ["reference", "inpaint"];
var url = document.getElementById("host").value + "/controlnet/module_list"; var url = document.getElementById("host").value + "/controlnet/module_list";
@ -156,5 +181,14 @@ const extensions = {
}); });
controlNetModuleAutoComplete.options = opt; controlNetModuleAutoComplete.options = opt;
opt = this.controlNetModules.module_list
.filter((m) => m.includes("reference"))
.map((option) => ({
name: option,
value: option,
}));
controlNetReferenceModuleAutoComplete.options = opt;
}, },
}; };

55
js/index.js
View file

@ -172,6 +172,7 @@ function startup() {
changeRestoreFaces(); changeRestoreFaces();
changeSyncCursorSize(); changeSyncCursorSize();
changeControlNetExtension(); changeControlNetExtension();
changeControlNetReference();
checkFocus(); checkFocus();
refreshScripts(); refreshScripts();
} }
@ -424,7 +425,8 @@ async function testHostConnection() {
getModels(); getModels();
extensions.getExtensions( extensions.getExtensions(
controlNetModelAutoComplete, controlNetModelAutoComplete,
controlNetModuleAutoComplete controlNetModuleAutoComplete,
controlNetReferenceModuleAutoComplete
); );
getLoras(); getLoras();
// getTIEmbeddings(); // getTIEmbeddings();
@ -680,7 +682,7 @@ const hrFixUpscalerAutoComplete = createAutoComplete(
); );
let controlNetModelAutoComplete = createAutoComplete( let controlNetModelAutoComplete = createAutoComplete(
"ControlNet Model", "Inpaint Model",
document.getElementById("controlNetModel-ac-select") document.getElementById("controlNetModel-ac-select")
); );
@ -689,7 +691,7 @@ controlNetModelAutoComplete.onchange.on(({value}) => {
}); });
let controlNetModuleAutoComplete = createAutoComplete( let controlNetModuleAutoComplete = createAutoComplete(
"ControlNet Module", "Inpaint Preprocessor",
document.getElementById("controlNetModule-ac-select") document.getElementById("controlNetModule-ac-select")
); );
@ -697,6 +699,15 @@ controlNetModuleAutoComplete.onchange.on(({value}) => {
extensions.selectedControlNetModule = value; extensions.selectedControlNetModule = value;
}); });
let controlNetReferenceModuleAutoComplete = createAutoComplete(
"Reference Preprocessor",
document.getElementById("controlNetReferenceModule-ac-select")
);
controlNetReferenceModuleAutoComplete.onchange.on(({value}) => {
extensions.selectedCNReferenceModule = value;
});
// const extensionsAutoComplete = createAutoComplete( // const extensionsAutoComplete = createAutoComplete(
// "Extension", // "Extension",
// document.getElementById("extension-ac-select") // document.getElementById("extension-ac-select")
@ -724,6 +735,25 @@ const resSlider = makeSlider(
toolbar.currentTool.redraw(); 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( makeSlider(
"CFG Scale", "CFG Scale",
document.getElementById("cfgScale"), document.getElementById("cfgScale"),
@ -851,11 +881,26 @@ function changeControlNetExtension() {
document.getElementById("cbxControlNet").checked; document.getElementById("cbxControlNet").checked;
if (extensions.controlNetActive) { if (extensions.controlNetActive) {
document document
.querySelectorAll(".controlnetElement") .querySelectorAll(".controlNetElement")
.forEach((el) => el.classList.remove("invisible")); .forEach((el) => el.classList.remove("invisible"));
} else { } else {
document document
.querySelectorAll(".controlnetElement") .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(".controlNetReferenceElement")
.forEach((el) => el.classList.add("invisible")); .forEach((el) => el.classList.add("invisible"));
} }
} }

46
js/ui/tool/dream.js
View file

@ -62,12 +62,9 @@ const _monitorProgress = (bb, oncheck = null) => {
} }
const timeSpent = performance.now() - init; const timeSpent = performance.now() - init;
setTimeout( setTimeout(() => {
() => { if (running) _checkProgress();
if (running) _checkProgress(); }, Math.max(0, minDelay - timeSpent));
},
Math.max(0, minDelay - timeSpent)
);
}; };
_checkProgress(); _checkProgress();
@ -1217,7 +1214,7 @@ const dream_generate_callback = async (bb, resolution, state) => {
canvasTransport.initCanvas, canvasTransport.initCanvas,
canvasTransport.maskCanvas canvasTransport.maskCanvas
); );
} else { } else if (extensions.controlNetActive) {
console.warn( console.warn(
"[dream] controlnet inpaint/outpaint enabled for null image, defaulting to normal txt2img dream" "[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); addDynamicPromptsToAlwaysOnScripts(state);
} }
if (extensions.controlNetActive) { 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) { if (extensions.alwaysOnScripts) {
// check again just to be sure because i'm an idiot? // check again just to be sure because i'm an idiot?
@ -2846,6 +2851,10 @@ function addDynamicPromptsToAlwaysOnScripts(state) {
} }
function addControlNetToAlwaysOnScripts(state, initCanvas, maskCanvas) { 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) { if (extensions.controlNetEnabled && extensions.controlNetActive) {
state.alwayson_scripts.controlnet = {}; state.alwayson_scripts.controlnet = {};
if (initCanvas == null && maskCanvas == null) { if (initCanvas == null && maskCanvas == null) {
@ -2867,8 +2876,8 @@ function addControlNetToAlwaysOnScripts(state, initCanvas, maskCanvas) {
module: extensions.selectedControlNetModule, module: extensions.selectedControlNetModule,
model: extensions.selectedControlNetModel, model: extensions.selectedControlNetModel,
control_mode: document.getElementById("controlNetMode-select").value, control_mode: document.getElementById("controlNetMode-select").value,
input_image: initCanvas.toDataURL(), input_image: initimg, //initCanvas.toDataURL(),
mask: maskCanvas.toDataURL(), mask: maskimg, //maskCanvas.toDataURL(),
processor_res: 64, processor_res: 64,
resize_mode: document.getElementById("controlNetResize-select").value, resize_mode: document.getElementById("controlNetResize-select").value,
// resize mode? // 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; // request.alwayson_scripts = state.alwayson_scripts;
// } // }
} }