refiner UI

//TODO wire it up and make it work, simple 2 extra keys in API call
This commit is contained in:
tim h 2023-08-25 14:44:12 -05:00
parent 4fa410e206
commit 45a3ce1de6
2 changed files with 57 additions and 2 deletions

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" />
@ -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 />

View file

@ -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(