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">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
@ -149,6 +149,25 @@
|
|||
<br />
|
||||
<label>Lora:</label>
|
||||
<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()" />
|
||||
<label for="cbxHRFix">Apply Txt2Img HRfix</label>
|
||||
<br />
|
||||
|
|
38
js/index.js
38
js/index.js
|
@ -167,6 +167,7 @@ function startup() {
|
|||
changeMaskBlur();
|
||||
changeSmoothRendering();
|
||||
changeSeed();
|
||||
changeRefinerEnabled();
|
||||
changeHiResFix();
|
||||
changeHiResSquare();
|
||||
changeRestoreFaces();
|
||||
|
@ -654,6 +655,11 @@ modelAutoComplete.onchange.on(({value}) => {
|
|||
).style.backgroundColor = "#fcc";
|
||||
});
|
||||
|
||||
let refinerAutoComplete = createAutoComplete(
|
||||
"Refiner",
|
||||
document.getElementById("refiner-ac-select")
|
||||
);
|
||||
|
||||
let loraAutoComplete = createAutoComplete(
|
||||
"LoRa",
|
||||
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(
|
||||
"Reference Fidelity",
|
||||
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() {
|
||||
stableDiffusionData.enable_hr = Boolean(
|
||||
document.getElementById("cbxHRFix").checked
|
||||
|
@ -1164,7 +1200,7 @@ async function getModels(refresh = false) {
|
|||
},
|
||||
}));
|
||||
|
||||
modelAutoComplete.options = opt;
|
||||
refinerAutoComplete.options = modelAutoComplete.options = opt;
|
||||
|
||||
try {
|
||||
const optResponse = await fetch(
|
||||
|
|
Loading…
Reference in a new issue