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

Streamline and add text input to range pickers

Browse source 
Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
Victor Seiji Hariki 2022-11-20 00:49:51 -03:00
parent ea0f7f34bc
commit 06c53e6062
2 changed files with 48 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
index.html
View file

@ -50,28 +50,19 @@
<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:</label>
<span id="stepsTxt"></span><br />
<input type="range" id="steps" name="steps" min="1" max="50" value="30"
onchange="changeSteps()" /><br />
<label for="cfgScale">CFG scale:</label>
<span id="cfgScaleTxt"></span><br />
<input type="range" id="cfgScale" name="cfgScale" min="-1" max="25" value="7.5" step="0.5"
onchange="changeCfgScale()" /><br />
<label for="batchSize">Batch size:</label>
<span id="batchSizeText"></span><br />
<input type="range" id="batchSize" name="batchSize" min="1" max="8" value="2" step="1"
onchange="changeBatchSize()" /><br />
<label for="batchCount">Batch count:</label>
<span id="batchCountText"></span><br />
<input type="range" id="batchCount" name="batchCount" min="1" max="8" value="2" step="1"
onchange="changeBatchCount()" /><br />
<label for="steps">Steps: <input type="number" id="stepsTxt"></label><br />
<input type="range" id="steps" name="steps" min="1" max="50" /><br />
<label for="cfgScale">CFG scale: <input type="number" id="cfgScaleTxt"></label>
<br />
<input type="range" id="cfgScale" name="cfgScale" min="-1" max="25" step="0.5" /><br />
<label for="batchSize">Batch size: <input type="number" id="batchSizeText"></label><br />
<input type="range" id="batchSize" name="batchSize" min="1" max="8" step="1" /><br />
<label for="batchCount">Batch count: <input type="number" id="batchCountText"></label><br />
<input type="range" id="batchCount" name="batchCount" min="1" max="8" step="1" /><br />
<hr>
</div>
<label for="scaleFactor">Scale factor:</label>
<span id="scaleFactorTxt"></span><br />
<input type="range" id="scaleFactor" name="scaleFactor" min="1" max="16" value="8"
onchange="changeScaleFactor()" /><br />
<label for="scaleFactor">Scale factor: <input type="number" id="scaleFactorTxt"></label><br />
<input type="range" id="scaleFactor" name="scaleFactor" min="1" max="16" /><br />
<label for="cbxSnap">Snap to grid?</label>
<input type="checkbox" id="cbxSnap" onchange="changeSnapMode()" checked="checked"><br />
<label for="cbxPaint">Mask mode?</label>

74
js/index.js
View file

@ -7,15 +7,15 @@ var stableDiffusionData = { //includes img2img data but works for txt2img just f
prompt: "",
negative_prompt: "",
seed: -1,
cfg_scale: 7,
cfg_scale: null,
sampler_index: "DDIM",
steps: 30,
steps: null,
denoising_strength: 1,
mask_blur: 0,
batch_size: 2,
batch_size: null,
width: 512,
height: 512,
n_iter: 2, // batch count
n_iter: null, // batch count
mask: "",
init_images: [],
inpaint_full_res: false,
@ -47,6 +47,34 @@ var stableDiffusionData = { //includes img2img data but works for txt2img just f
}
/**
* Some Utility Functions
*/
function sliderChangeHandlerFactory(sliderId, textBoxId, dataKey, defaultV) {
const sliderEl = document.getElementById(sliderId);
const textBoxEl = document.getElementById(textBoxId);
const savedValue = localStorage.getItem(dataKey);
if (savedValue) stableDiffusionData[dataKey] = savedValue || defaultV;
function changeHandler(evn) {
const eventSource = evn && evn.srcElement;
const value = eventSource && Number(eventSource.value);
if (value) stableDiffusionData[dataKey] = value;
if (!eventSource || eventSource.id === textBoxId) sliderEl.value = stableDiffusionData[dataKey];
textBoxEl.value = stableDiffusionData[dataKey] = Number(sliderEl.value);
localStorage.setItem(dataKey, stableDiffusionData[dataKey]);
}
textBoxEl.onchange = changeHandler
sliderEl.oninput = changeHandler
return changeHandler
}
// stuff things use
var blockNewImages = false;
var returnedImages;
@ -706,15 +734,8 @@ function mouseUp(evt) {
}
}
function changeScaleFactor() {
document.getElementById("scaleFactorTxt").innerText = scaleFactor = document.getElementById("scaleFactor").value;
localStorage.setItem("scaleFactor", scaleFactor);
}
function changeSteps() {
document.getElementById("stepsTxt").innerText = stableDiffusionData.steps = document.getElementById("steps").value;
localStorage.setItem("steps", stableDiffusionData.steps);
}
const changeScaleFactor = sliderChangeHandlerFactory("scaleFactor", "scaleFactorTxt", "scaleFactor", 8);
const changeSteps = sliderChangeHandlerFactory("steps", "stepsTxt", "steps", 30);
function changePaintMode() {
paintMode = document.getElementById("cbxPaint").checked;
@ -733,20 +754,9 @@ function changeSampler() {
localStorage.setItem("sampler", stableDiffusionData.sampler_index);
}
function changeCfgScale() {
document.getElementById("cfgScaleTxt").innerText = stableDiffusionData.cfg_scale = document.getElementById("cfgScale").value;
localStorage.setItem("cfg_scale", stableDiffusionData.cfg_scale);
}
function changeBatchSize() {
document.getElementById("batchSizeText").innerText = stableDiffusionData.batch_size = document.getElementById("batchSize").value;
localStorage.setItem("batch_size", stableDiffusionData.batch_size);
}
function changeBatchCount() {
document.getElementById("batchCountText").innerText = stableDiffusionData.n_iter = document.getElementById("batchCount").value;
localStorage.setItem("n_iter", stableDiffusionData.n_iter);
}
const changeCfgScale = sliderChangeHandlerFactory("cfgScale", "cfgScaleTxt", "cfg_scale", 7.0);
const changeBatchSize = sliderChangeHandlerFactory("batchSize", "batchSizeText", "batch_size", 2);
const changeBatchCount = sliderChangeHandlerFactory("batchCount", "batchCountText", "n_iter", 2);
function changeSnapMode() {
snapToGrid = document.getElementById("cbxSnap").checked;
@ -894,22 +904,12 @@ function checkIfWebuiIsRunning() {
function loadSettings() {
// set default values if not set DEFAULTS
var _sampler = localStorage.getItem("sampler") == null ? "DDIM" : localStorage.getItem("sampler");
var _steps = localStorage.getItem("steps") == null ? 30 : localStorage.getItem("steps");
var _cfg_scale = localStorage.getItem("cfg_scale") == null ? 7.0 : localStorage.getItem("cfg_scale");
var _batch_size = localStorage.getItem("batch_size") == null ? 2 : localStorage.getItem("batch_size");
var _n_iter = localStorage.getItem("n_iter") == null ? 2 : localStorage.getItem("n_iter");
var _scaleFactor = localStorage.getItem("scaleFactor") == null ? 8 : localStorage.getItem("scaleFactor");
var _mask_blur = localStorage.getItem("mask_blur") == null ? 0 : localStorage.getItem("mask_blur");
var _seed = localStorage.getItem("seed") == null ? -1 : localStorage.getItem("seed");
var _enable_hr = Boolean(localStorage.getItem("enable_hr") == (null || "false") ? false : localStorage.getItem("enable_hr"));
// set the values into the UI
document.getElementById("samplerSelect").value = String(_sampler);
document.getElementById("steps").value = Number(_steps);
document.getElementById("cfgScale").value = Number(_cfg_scale);
document.getElementById("batchSize").value = Number(_batch_size);
document.getElementById("batchCount").value = Number(_n_iter);
document.getElementById("scaleFactor").value = Number(_scaleFactor);
document.getElementById("maskBlur").value = Number(_mask_blur);
document.getElementById("seed").value = Number(_seed);
document.getElementById("cbxHRFix").checked = Boolean(_enable_hr);