Allow changing the strength of the codeformer model (1 - fidelity); Improve the styling of the sub-settings

This commit is contained in:
cmdr2
2023-06-06 16:16:21 +05:30
parent 047390873c
commit d0184a1598
6 changed files with 62 additions and 22 deletions

View File

@ -94,6 +94,8 @@ let upscaleAmountField = document.querySelector("#upscale_amount")
let latentUpscalerSettings = document.querySelector("#latent_upscaler_settings")
let latentUpscalerStepsSlider = document.querySelector("#latent_upscaler_steps_slider")
let latentUpscalerStepsField = document.querySelector("#latent_upscaler_steps")
let codeformerFidelitySlider = document.querySelector("#codeformer_fidelity_slider")
let codeformerFidelityField = document.querySelector("#codeformer_fidelity")
let stableDiffusionModelField = new ModelDropdown(document.querySelector("#stable_diffusion_model"), "stable-diffusion")
let clipSkipField = document.querySelector("#clip_skip")
let tilingField = document.querySelector("#tiling")
@ -1266,6 +1268,7 @@ function getCurrentUserRequest() {
if (gfpganModelField.value.includes("codeformer")) {
newTask.reqBody.codeformer_upscale_faces = document.querySelector("#codeformer_upscale_faces").checked
newTask.reqBody.codeformer_fidelity = 1 - parseFloat(codeformerFidelityField.value)
}
}
if (useUpscalingField.checked) {
@ -1588,8 +1591,10 @@ function onFixFaceModelChange() {
let codeformerSettings = document.querySelector("#codeformer_settings")
if (gfpganModelField.value === "codeformer" && !gfpganModelField.disabled) {
codeformerSettings.classList.remove("displayNone")
codeformerSettings.classList.add("expandedSettingRow")
} else {
codeformerSettings.classList.add("displayNone")
codeformerSettings.classList.remove("expandedSettingRow")
}
}
gfpganModelField.addEventListener("change", onFixFaceModelChange)
@ -1610,9 +1615,11 @@ function onUpscaleModelChange() {
upscale4x.disabled = true
upscaleAmountField.value = "2"
latentUpscalerSettings.classList.remove("displayNone")
latentUpscalerSettings.classList.add("expandedSettingRow")
} else {
upscale4x.disabled = false
latentUpscalerSettings.classList.add("displayNone")
latentUpscalerSettings.classList.remove("expandedSettingRow")
}
}
upscaleModelField.addEventListener("change", onUpscaleModelChange)
@ -1627,6 +1634,27 @@ document.onkeydown = function(e) {
}
}
/********************* CodeFormer Fidelity **************************/
function updateCodeformerFidelity() {
codeformerFidelityField.value = codeformerFidelitySlider.value / 10
codeformerFidelityField.dispatchEvent(new Event("change"))
}
function updateCodeformerFidelitySlider() {
if (codeformerFidelityField.value < 0) {
codeformerFidelityField.value = 0
} else if (codeformerFidelityField.value > 1) {
codeformerFidelityField.value = 1
}
codeformerFidelitySlider.value = codeformerFidelityField.value * 10
codeformerFidelitySlider.dispatchEvent(new Event("change"))
}
codeformerFidelitySlider.addEventListener("input", updateCodeformerFidelity)
codeformerFidelityField.addEventListener("input", updateCodeformerFidelitySlider)
updateCodeformerFidelity()
/********************* Latent Upscaler Steps **************************/
function updateLatentUpscalerSteps() {
latentUpscalerStepsField.value = latentUpscalerStepsSlider.value
@ -1981,25 +2009,25 @@ resumeBtn.addEventListener("click", function() {
function tunnelUpdate(event) {
if ("cloudflare" in event) {
document.getElementById('cloudflare-off').classList.add("displayNone")
document.getElementById('cloudflare-on').classList.remove("displayNone")
document.getElementById("cloudflare-off").classList.add("displayNone")
document.getElementById("cloudflare-on").classList.remove("displayNone")
cloudflareAddressField.innerHTML = event.cloudflare
document.getElementById('toggle-cloudflare-tunnel').innerHTML = "Stop"
document.getElementById("toggle-cloudflare-tunnel").innerHTML = "Stop"
} else {
document.getElementById('cloudflare-on').classList.add("displayNone")
document.getElementById('cloudflare-off').classList.remove("displayNone")
document.getElementById('toggle-cloudflare-tunnel').innerHTML = "Start"
document.getElementById("cloudflare-on").classList.add("displayNone")
document.getElementById("cloudflare-off").classList.remove("displayNone")
document.getElementById("toggle-cloudflare-tunnel").innerHTML = "Start"
}
}
document.getElementById('toggle-cloudflare-tunnel').addEventListener("click", async function() {
document.getElementById("toggle-cloudflare-tunnel").addEventListener("click", async function() {
let command = "stop"
if (document.getElementById('toggle-cloudflare-tunnel').innerHTML == "Start") {
command = "start"
if (document.getElementById("toggle-cloudflare-tunnel").innerHTML == "Start") {
command = "start"
}
showToast(`Cloudflare tunnel ${command} initiated. Please wait.`)
let res = await fetch("/tunnel/cloudflare/"+command, {
let res = await fetch("/tunnel/cloudflare/" + command, {
method: "POST",
headers: {
"Content-Type": "application/json",