sneedgroup-holder/openOutpaint
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'main' into img2img

Browse source 
Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>

Former-commit-id: 4a07944ebfb71076a6dfb9a83e45a07a30874abd
This commit is contained in:
Victor Seiji Hariki 2022-11-23 19:03:15 -03:00
commit 89b1323cd9
4 changed files with 112 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -1,6 +1,6 @@
# hello there 🐠
[openOutpaint creating some undersea wildlife](https://user-images.githubusercontent.com/1765167/203318284-a9f6970f-c9f1-44be-8c61-810aa5ed46be.webm)
[openOutpaint creating some undersea wildlife](https://user-images.githubusercontent.com/1649724/203454747-9984d408-c973-4e4a-8085-fb1ee6574ff7.webm)
this is a completely vanilla javascript and html canvas outpainting convenience doodad built for the API optionally exposed by [AUTOMATIC1111's stable diffusion webUI](https://github.com/AUTOMATIC1111/stable-diffusion-webui), operating similarly to a few others which certainly have superior functionality. this simply offers an alternative for my following vain desires:

33
index.html
View file

@ -46,6 +46,12 @@ people, person, humans, human, divers, diver, glitch, error, text, watermark, ba
Stable Diffusion settings
</button>
<div class="content">
<label for="models">Model:</label>
<select id="models" onchange="changeModel()"></select
><br />
<label for="samplerSelect">Sampler:</label>
<select id="samplerSelect" onchange="changeSampler()"></select
><br />
<label for="seed">Seed (-1 for random):</label> <br />
<input
type="number"
@ -55,25 +61,6 @@ people, person, humans, human, divers, diver, glitch, error, text, watermark, ba
max="9999999999"
value="-1"
step="1" /><br />
<label for="samplerSelect">Sampler:</label>
<select id="samplerSelect" onchange="changeSampler()">
<option value="DDIM">DDIM</option>
<option value="Euler a">Euler A</option>
<option value="Euler">Euler</option>
<option value="LMS">LMS</option>
<option value="Heun">Heun</option>
<option value="DPM2">DPM2</option>
<option value="DPM2 a">DPM2a</option>
<option value="DPM++ 2S a">DPM++2Sa</option>
<option value="DPM++ 2m">DPM++2m</option>
<option value="DPM fast">DPM fast</option>
<option value="DPM adaptive">DPM adaptive</option>
<option value="LMS Karras">LMS Karras</option>
<option value="DPM2 Karras">DPM2 Karras</option>
<option value="DPM2 a Karras">DPM2a Karras</option>
<option value="DPM++ 2S a Karras">DPM++2Sa Karras</option>
<option value="DPM++ 2M Karras">DPM++2M Karras</option></select
><br />
<label for="steps">Steps: <input type="number" id="stepsTxt" /></label
><br />
<input type="range" id="steps" name="steps" min="1" max="50" /><br />
@ -155,12 +142,8 @@ people, person, humans, human, divers, diver, glitch, error, text, watermark, ba
<button type="button" class="collapsible">Save/Load/New image</button>
<div class="content">
<label for="preloadImage">Load image:</label>
<input
type="file"
id="preloadImage"
onchange="preloadImage()"
accept="image/*"
style="width: 200px" /><br />
<input type="file" id="preloadImage" onchange="preloadImage()"
accept="image/*" / style="width: 200px;"><br />
<button onclick="downloadCanvas()">Save canvas</button><br />
<label for="upscalers">Choose upscaler</label>
<select id="upscalers"></select>

105
js/index.js
View file

@ -171,7 +171,9 @@ const bgCtx = bgCanvas.getContext("2d");
function startup() {
checkIfWebuiIsRunning();
loadSettings();
getSamplers();
getUpscalers();
getModels();
drawBackground();
changeScaleFactor();
changeSampler();
@ -532,9 +534,13 @@ function mouseUp(evt) {
}
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(
@ -821,6 +827,99 @@ 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

2
js/ui/toolbar.js
View file

@ -278,7 +278,7 @@ tools.img2img = toolbar.registerTool(
evn.y,
basePixelCount * scaleFactor,
basePixelCount * scaleFactor,
snapToGrid && basePixelCount
state.snapToGrid && basePixelCount
);
// For displaying border mask