From 43c634450761636f07dbc3c7957819f8c75bafae Mon Sep 17 00:00:00 2001 From: Kalekki Date: Wed, 23 Nov 2022 21:23:20 +0200 Subject: [PATCH 1/3] Model switching, samplers from api Former-commit-id: 78da6ff935a79ecbb00114c8e467d8996d2752af --- index.html | 19 ++-------- js/index.js | 105 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 105 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 872f161..e97814d 100644 --- a/index.html +++ b/index.html @@ -30,27 +30,14 @@
+ +





diff --git a/js/index.js b/js/index.js index 8f6fed3..98004ef 100644 --- a/js/index.js +++ b/js/index.js @@ -155,7 +155,9 @@ const bgCtx = bgCanvas.getContext("2d"); function startup() { checkIfWebuiIsRunning(); loadSettings(); + getSamplers(); getUpscalers(); + getModels(); drawBackground(); changeScaleFactor(); changePaintMode(); @@ -782,9 +784,12 @@ function changeEnableErasing() { } function changeSampler() { - stableDiffusionData.sampler_index = - document.getElementById("samplerSelect").value; - localStorage.setItem("sampler", stableDiffusionData.sampler_index); + if(!document.getElementById("samplerSelect").value == ""){ // must be done, since before getSamplers is done, the options are empty + console.log(document.getElementById("samplerSelect").value == "") + stableDiffusionData.sampler_index = + document.getElementById("samplerSelect").value; + localStorage.setItem("sampler", stableDiffusionData.sampler_index); + } } const changeCfgScale = sliderChangeHandlerFactory( @@ -1070,6 +1075,100 @@ function getUpscalers() { */ } +async function getModels(){ + var modelSelect = document.getElementById("models"); + var url = document.getElementById("host").value + "/sdapi/v1/sd-models"; + await fetch(url) + .then((response) => response.json()) + .then((data) => { + //console.log(data); All models + for (var i = 0; i < data.length; i++) { + var option = document.createElement("option"); + option.text = data[i].model_name; + option.value = data[i].title; + modelSelect.add(option); + } + }) + + /* To get the current model, we might need to call /config/ which returns a json file with EVERYTHING from the webui, 25k lines of json... i havent figured out any other way to get the model thats loaded + response >> components >> second component(quicksettings with checkpoint chooser as default) >> value = the current model + The current model we get only updates on full restart of WebUI, so if we change the model, and then refresh the page, it will still show the old model. + We could just not show the current model, but i think it would be nice to show it. + */ + await fetch(document.getElementById("host").value + "/config/") + .then((response) => response.json()) + .then((data) => { + //console.log(data) + var model = data.components[1].props.value; + console.log("Current model: "+model); + modelSelect.value = model; + }) +} + +function changeModel(){ + // change the model + console.log("changing model to " + document.getElementById("models").value); + var model_title = document.getElementById("models").value; + var payload = { + "sd_model_checkpoint": model_title + } + var url = document.getElementById("host").value + "/sdapi/v1/options/"; + fetch(url, { + method: "POST", + mode: "cors", // no-cors, *cors, same-origin + cache: "default", // *default, no-cache, reload, force-cache, only-if-cached + credentials: "same-origin", // include, *same-origin, omit + redirect: "follow", // manual, *follow, error + referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url + headers: { + Accept: "application/json", + "Content-Type": "application/json", + }, + body: JSON.stringify(payload), + }) + .then((response) => response.json()) + .then(() => { + alert("Model changed to " + model_title); + }) + .catch((error) => { + alert( + "Error changing model, please check console for additional info\n" + + error + ); + }); +} + +function getSamplers(){ + var samplerSelect = document.getElementById("samplerSelect"); + var url = document.getElementById("host").value + "/sdapi/v1/samplers"; + fetch(url) + .then((response) => response.json()) + .then((data) => { + //console.log(data); All samplers + for (var i = 0; i < data.length; i++) { + // PLMS SAMPLER DOES NOT WORK FOR ANY IMAGES BEYOND FOR THE INITIAL IMAGE (for me at least), GIVES ASGI Exception; AttributeError: 'PLMSSampler' object has no attribute 'stochastic_encode' + + var option = document.createElement("option"); + option.text = data[i].name; + option.value = data[i].name; + samplerSelect.add(option); + } + if(localStorage.getItem("sampler") != null){ + samplerSelect.value = localStorage.getItem("sampler"); + }else{ + // needed now, as hardcoded sampler cant be guaranteed to be in the list + samplerSelect.value = data[0].name; + localStorage.setItem("sampler", samplerSelect.value); + } + }) + .catch((error) => { + alert( + "Error getting samplers, please check console for additional info\n" + + error + ); + }); + +} async function upscaleAndDownload() { // Future improvements: some upscalers take a while to upscale, so we should show a loading bar or something, also a slider for the upscale amount From 53635fc26f82095ceed947b084c3478b6f5ddb20 Mon Sep 17 00:00:00 2001 From: Kalekki Date: Wed, 23 Nov 2022 21:34:42 +0200 Subject: [PATCH 2/3] prettier Former-commit-id: 25e8a310d47a5e34e269b31e75699e99b1c8888b --- js/index.js | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/js/index.js b/js/index.js index 98004ef..d222ec2 100644 --- a/js/index.js +++ b/js/index.js @@ -784,8 +784,9 @@ function changeEnableErasing() { } function changeSampler() { - if(!document.getElementById("samplerSelect").value == ""){ // must be done, since before getSamplers is done, the options are empty - console.log(document.getElementById("samplerSelect").value == "") + if (!document.getElementById("samplerSelect").value == "") { + // must be done, since before getSamplers is done, the options are empty + console.log(document.getElementById("samplerSelect").value == ""); stableDiffusionData.sampler_index = document.getElementById("samplerSelect").value; localStorage.setItem("sampler", stableDiffusionData.sampler_index); @@ -1075,7 +1076,7 @@ function getUpscalers() { */ } -async function getModels(){ +async function getModels() { var modelSelect = document.getElementById("models"); var url = document.getElementById("host").value + "/sdapi/v1/sd-models"; await fetch(url) @@ -1088,7 +1089,7 @@ async function getModels(){ option.value = data[i].title; modelSelect.add(option); } - }) + }); /* To get the current model, we might need to call /config/ which returns a json file with EVERYTHING from the webui, 25k lines of json... i havent figured out any other way to get the model thats loaded response >> components >> second component(quicksettings with checkpoint chooser as default) >> value = the current model @@ -1100,18 +1101,18 @@ async function getModels(){ .then((data) => { //console.log(data) var model = data.components[1].props.value; - console.log("Current model: "+model); + console.log("Current model: " + model); modelSelect.value = model; - }) + }); } -function changeModel(){ +function changeModel() { // change the model console.log("changing model to " + document.getElementById("models").value); var model_title = document.getElementById("models").value; var payload = { - "sd_model_checkpoint": model_title - } + sd_model_checkpoint: model_title, + }; var url = document.getElementById("host").value + "/sdapi/v1/options/"; fetch(url, { method: "POST", @@ -1138,7 +1139,7 @@ function changeModel(){ }); } -function getSamplers(){ +function getSamplers() { var samplerSelect = document.getElementById("samplerSelect"); var url = document.getElementById("host").value + "/sdapi/v1/samplers"; fetch(url) @@ -1147,15 +1148,15 @@ function getSamplers(){ //console.log(data); All samplers for (var i = 0; i < data.length; i++) { // PLMS SAMPLER DOES NOT WORK FOR ANY IMAGES BEYOND FOR THE INITIAL IMAGE (for me at least), GIVES ASGI Exception; AttributeError: 'PLMSSampler' object has no attribute 'stochastic_encode' - + var option = document.createElement("option"); option.text = data[i].name; option.value = data[i].name; samplerSelect.add(option); } - if(localStorage.getItem("sampler") != null){ + if (localStorage.getItem("sampler") != null) { samplerSelect.value = localStorage.getItem("sampler"); - }else{ + } else { // needed now, as hardcoded sampler cant be guaranteed to be in the list samplerSelect.value = data[0].name; localStorage.setItem("sampler", samplerSelect.value); @@ -1167,7 +1168,6 @@ function getSamplers(){ error ); }); - } async function upscaleAndDownload() { // Future improvements: some upscalers take a while to upscale, so we should show a loading bar or something, also a slider for the upscale amount From f8f322067ddc0507e9ce86858a391c6d6f2b0da7 Mon Sep 17 00:00:00 2001 From: Kalekki Date: Wed, 23 Nov 2022 21:46:06 +0200 Subject: [PATCH 3/3] Seed under models and samplers Former-commit-id: 741a935fe8058fd5a5042df76d6b1f53a5cdd0e2 --- index.html | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index e97814d..fa6f777 100644 --- a/index.html +++ b/index.html @@ -32,13 +32,11 @@

+ +


- -