refiner UI
//TODO wire it up and make it work, simple 2 extra keys in API call
This commit is contained in:
parent
4fa410e206
commit
45a3ce1de6
2 changed files with 57 additions and 2 deletions
21
index.html
21
index.html
|
@ -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" />
|
||||||
|
@ -149,6 +149,25 @@
|
||||||
<br />
|
<br />
|
||||||
<label>Lora:</label>
|
<label>Lora:</label>
|
||||||
<div id="lora-ac-select"></div>
|
<div id="lora-ac-select"></div>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="cbxRefiner"
|
||||||
|
onchange="changeRefinerEnabled()" />
|
||||||
|
<label for="cbxRefiner">Enable Refiner</label>
|
||||||
|
<br />
|
||||||
|
<label id="refinerModelLabel" class="refiner">Refiner Model</label>
|
||||||
|
<div id="refiner-ac-select" class="refiner"></div>
|
||||||
|
<!-- <button
|
||||||
|
id="refreshRefinersBtn"
|
||||||
|
class="refiner"
|
||||||
|
onclick="getModels(true)">
|
||||||
|
<img
|
||||||
|
class="refreshbutton"
|
||||||
|
src="./res/icons/refresh-cw.svg?v=f627140"
|
||||||
|
alt="refresh refiner models"
|
||||||
|
title="refresh refiner models" />
|
||||||
|
</button> -->
|
||||||
|
<div id="refinerChangeAt" class="refiner"></div>
|
||||||
<input type="checkbox" id="cbxHRFix" onchange="changeHiResFix()" />
|
<input type="checkbox" id="cbxHRFix" onchange="changeHiResFix()" />
|
||||||
<label for="cbxHRFix">Apply Txt2Img HRfix</label>
|
<label for="cbxHRFix">Apply Txt2Img HRfix</label>
|
||||||
<br />
|
<br />
|
||||||
|
|
38
js/index.js
38
js/index.js
|
@ -167,6 +167,7 @@ function startup() {
|
||||||
changeMaskBlur();
|
changeMaskBlur();
|
||||||
changeSmoothRendering();
|
changeSmoothRendering();
|
||||||
changeSeed();
|
changeSeed();
|
||||||
|
changeRefinerEnabled();
|
||||||
changeHiResFix();
|
changeHiResFix();
|
||||||
changeHiResSquare();
|
changeHiResSquare();
|
||||||
changeRestoreFaces();
|
changeRestoreFaces();
|
||||||
|
@ -654,6 +655,11 @@ modelAutoComplete.onchange.on(({value}) => {
|
||||||
).style.backgroundColor = "#fcc";
|
).style.backgroundColor = "#fcc";
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let refinerAutoComplete = createAutoComplete(
|
||||||
|
"Refiner",
|
||||||
|
document.getElementById("refiner-ac-select")
|
||||||
|
);
|
||||||
|
|
||||||
let loraAutoComplete = createAutoComplete(
|
let loraAutoComplete = createAutoComplete(
|
||||||
"LoRa",
|
"LoRa",
|
||||||
document.getElementById("lora-ac-select")
|
document.getElementById("lora-ac-select")
|
||||||
|
@ -736,6 +742,17 @@ const resSlider = makeSlider(
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const refinerSlider = makeSlider(
|
||||||
|
"Refiner Change At",
|
||||||
|
document.getElementById("refinerChangeAt"),
|
||||||
|
"refiner_change_at",
|
||||||
|
0.0,
|
||||||
|
1.0,
|
||||||
|
0.1,
|
||||||
|
0.8,
|
||||||
|
0.01
|
||||||
|
);
|
||||||
|
|
||||||
const refSlider = makeSlider(
|
const refSlider = makeSlider(
|
||||||
"Reference Fidelity",
|
"Reference Fidelity",
|
||||||
document.getElementById("controlNetReferenceFidelity"),
|
document.getElementById("controlNetReferenceFidelity"),
|
||||||
|
@ -906,6 +923,25 @@ function changeControlNetReference() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function changeRefinerEnabled() {
|
||||||
|
stableDiffusionData.enable_refiner = Boolean(
|
||||||
|
document.getElementById("cbxRefiner").checked
|
||||||
|
);
|
||||||
|
localStorage.setItem(
|
||||||
|
"openoutpaint/enable_refiner",
|
||||||
|
stableDiffusionData.enable_refiner
|
||||||
|
);
|
||||||
|
if (stableDiffusionData.enable_refiner) {
|
||||||
|
document
|
||||||
|
.querySelectorAll(".refiner")
|
||||||
|
.forEach((el) => el.classList.remove("invisible"));
|
||||||
|
} else {
|
||||||
|
document
|
||||||
|
.querySelectorAll(".refiner")
|
||||||
|
.forEach((el) => el.classList.add("invisible"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function changeHiResFix() {
|
function changeHiResFix() {
|
||||||
stableDiffusionData.enable_hr = Boolean(
|
stableDiffusionData.enable_hr = Boolean(
|
||||||
document.getElementById("cbxHRFix").checked
|
document.getElementById("cbxHRFix").checked
|
||||||
|
@ -1164,7 +1200,7 @@ async function getModels(refresh = false) {
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
modelAutoComplete.options = opt;
|
refinerAutoComplete.options = modelAutoComplete.options = opt;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const optResponse = await fetch(
|
const optResponse = await fetch(
|
||||||
|
|
Loading…
Reference in a new issue