Merge branch 'beta' into mdiller_settings

This commit is contained in:
Malcolm Diller 2022-10-19 21:17:56 -07:00
commit d08f090800
6 changed files with 394 additions and 114 deletions

View File

@ -6,6 +6,7 @@
<link rel="icon" type="image/png" href="/media/images/favicon-32x32.png" sizes="32x32">
<link rel="stylesheet" href="/media/css/fonts.css?v=1">
<link rel="stylesheet" href="/media/css/themes.css?v=1">
<link rel="stylesheet" href="/media/css/auto-save.css?v=1">
<link rel="stylesheet" href="/media/css/main.css?v=1">
<link rel="stylesheet" href="/media/css/auto-save.css?v=1">
<link rel="stylesheet" href="/media/css/modifier-thumbnails.css?v=1">
@ -18,7 +19,7 @@
<div id="container">
<div id="top-nav">
<div id="logo">
<h1>Stable Diffusion UI <small>v2.29 <span id="updateBranchLabel"></span></small></h1>
<h1>Stable Diffusion UI <small>v2.3.2 <span id="updateBranchLabel"></span></small></h1>
</div>
<ul id="top-nav-items">
<li class="dropdown">
@ -107,7 +108,7 @@
<ul id="editor-settings-entries" class="collapsible-content">
<li><table>
<tr><b class="settings-subheader">Image Settings</b></tr>
<tr class="pl-5"><td><label for="seed">Seed:</label></td><td><input id="seed" name="seed" size="10" value="30000"> <input id="random_seed" name="random_seed" type="checkbox" checked> <label for="random_seed">Random</label></td></tr>
<tr class="pl-5"><td><label for="seed">Seed:</label></td><td><input id="seed" name="seed" size="10" value="30000"> <input id="random_seed" name="random_seed" type="checkbox" checked><label for="random_seed">Random</label></td></tr>
<tr class="pl-5"><td><label for="num_outputs_total">Number of Images:</label></td><td><input id="num_outputs_total" name="num_outputs_total" value="1" size="1"> <label><small>(total)</small></label> <input id="num_outputs_parallel" name="num_outputs_parallel" value="1" size="1"> <label for="num_outputs_parallel"><small>(in parallel)</small></label></td></tr>
<tr class="pl-5"><td><label for="stable_diffusion_model">Model:</label></td><td>
<select id="stable_diffusion_model" name="stable_diffusion_model">
@ -250,11 +251,12 @@
</div>
</body>
<script src="media/js/utils.js?v=1"></script>
<script src="media/js/plugins.js?v=1"></script>
<script src="media/js/utils.js?v=2"></script>
<script src="media/js/inpainting-editor.js?v=1"></script>
<script src="media/js/image-modifiers.js"></script>
<script src="media/js/auto-save.js?v=1"></script>
<script src="media/js/main.js?v=1"></script>
<script src="media/js/main.js?v=2"></script>
<script src="media/js/themes.js?v=1"></script>
<script>
async function init() {
@ -263,7 +265,7 @@ async function init() {
await getDiskPath()
await getAppConfig()
await loadModifiers()
await loadUIPlugins()
setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
healthCheck()

View File

@ -285,34 +285,42 @@ function showImages(reqBody, res, outputContainer, livePreview) {
const imageSeedLabel = imageItemElem.querySelector('.imgSeedLabel')
imageSeedLabel.innerText = 'Seed: ' + req.seed
const buttons = {
'imgUseBtn': { html: 'Use as Input', click: getUseAsInputHandler(imageItemElem) },
'imgSaveBtn': { html: 'Download', click: getSaveImageHandler(imageItemElem, req['output_format']) },
'imgX2Btn': { html: 'Double Size', click: getStartNewTaskHandler(req, imageItemElem, 'img2img_X2') },
'imgRedoBtn': { html: 'Redo', click: getStartNewTaskHandler(req, imageItemElem, 'img2img') },
}
if (!req.use_upscale) {
buttons.upscaleBtn = { html: 'Upscale', click: getStartNewTaskHandler(req, imageItemElem, 'upscale') }
}
let buttons = [
{ text: 'Use as Input', on_click: onUseAsInputClick },
{ text: 'Download', on_click: onDownloadImageClick },
{ text: 'Make Similar Images', on_click: onMakeSimilarClick },
{ text: 'Draw another 25 steps', on_click: onContinueDrawingClick },
{ text: 'Upscale (new)', on_click: onUpscaleClick, filter: (req, img) => !req.use_upscale },
{ text: 'Fix Faces', on_click: onFixFacesClick, filter: (req, img) => !req.use_face_correction }
]
// include the plugins
buttons = buttons.concat(PLUGINS['IMAGE_INFO_BUTTONS'])
const imgItemInfo = imageItemElem.querySelector('.imgItemInfo')
const createButton = function(name, btnInfo) {
const img = imageItemElem.querySelector('img')
const createButton = function(btnInfo) {
const newButton = document.createElement('button')
newButton.classList.add(name)
newButton.classList.add('tasksBtns')
newButton.innerHTML = btnInfo.html
newButton.addEventListener('click', btnInfo.click)
newButton.innerText = btnInfo.text
newButton.addEventListener('click', function() {
btnInfo.on_click(req, img)
})
imgItemInfo.appendChild(newButton)
}
Object.keys(buttons).forEach((name) => createButton(name, buttons[name]))
buttons.forEach(btn => {
if (btn.filter && btn.filter(req, img) === false) {
return
}
createButton(btn)
})
}
})
}
function getUseAsInputHandler(imageItemElem) {
return function() {
const imageElem = imageItemElem.querySelector('img')
const imgData = imageElem.src
const imageSeed = imageElem.getAttribute('data-seed')
function onUseAsInputClick(req, img) {
const imgData = img.src
initImageSelector.value = null
initImagePreview.src = imgData
@ -322,79 +330,95 @@ function getUseAsInputHandler(imageItemElem) {
promptStrengthContainer.style.display = 'table-row'
maskSetting.checked = false
samplerSelectionContainer.style.display = 'none'
// maskSetting.style.display = 'block'
// randomSeedField.checked = false
// seedField.value = imageSeed
// seedField.disabled = false
}
}
function getSaveImageHandler(imageItemElem, outputFormat) {
return function() {
const imageElem = imageItemElem.querySelector('img')
const imgData = imageElem.src
const imageSeed = imageElem.getAttribute('data-seed')
const imagePrompt = imageElem.getAttribute('data-prompt')
const imageInferenceSteps = imageElem.getAttribute('data-steps')
const imageGuidanceScale = imageElem.getAttribute('data-guidance')
function onDownloadImageClick(req, img) {
const imgData = img.src
const imageSeed = img.getAttribute('data-seed')
const imagePrompt = img.getAttribute('data-prompt')
const imageInferenceSteps = img.getAttribute('data-steps')
const imageGuidanceScale = img.getAttribute('data-guidance')
const imgDownload = document.createElement('a')
imgDownload.download = createFileName(imagePrompt, imageSeed, imageInferenceSteps, imageGuidanceScale, outputFormat)
imgDownload.download = createFileName(imagePrompt, imageSeed, imageInferenceSteps, imageGuidanceScale, req['output_format'])
imgDownload.href = imgData
imgDownload.click()
}
}
function getStartNewTaskHandler(reqBody, imageItemElem, mode) {
return function() {
if (!isServerAvailable()) {
alert('The server is not available.')
return
}
const imageElem = imageItemElem.querySelector('img')
const newTaskRequest = getCurrentUserRequest()
switch (mode) {
case 'img2img':
case 'img2img_X2':
newTaskRequest.reqBody = Object.assign({}, reqBody, {
function onMakeSimilarClick(req, img) {
let newTaskRequest = getCurrentUserRequest()
newTaskRequest.reqBody = Object.assign({}, req, {
num_outputs: 1,
use_cpu: useCPUField.checked,
num_inference_steps: 50,
guidance_scale: 7.5,
prompt_strength: 0.7,
init_image: img.src,
seed: Math.floor(Math.random() * 10000000)
})
if (!newTaskRequest.reqBody.init_image || mode === 'img2img_X2') {
newTaskRequest.reqBody.sampler = 'ddim'
newTaskRequest.reqBody.prompt_strength = '0.5'
newTaskRequest.reqBody.init_image = imageElem.src
delete newTaskRequest.reqBody.mask
} else {
newTaskRequest.reqBody.seed = 1 + newTaskRequest.reqBody.seed
}
if (mode === 'img2img_X2') {
newTaskRequest.reqBody.width = reqBody.width * 2
newTaskRequest.reqBody.height = reqBody.height * 2
newTaskRequest.reqBody.num_inference_steps = Math.min(100, reqBody.num_inference_steps * 2)
if (useUpscalingField.checked) {
newTaskRequest.reqBody.use_upscale = upscaleModelField.value
} else {
delete newTaskRequest.reqBody.use_upscale
}
}
break
case 'upscale':
newTaskRequest.reqBody = Object.assign({}, reqBody, {
num_outputs: 1,
//use_face_correction: 'GFPGANv1.3',
use_upscale: upscaleModelField.value,
})
break
default:
throw new Error("Unknown upscale mode: " + mode)
}
newTaskRequest.numOutputsTotal = 5
newTaskRequest.batchCount = 5
newTaskRequest.seed = newTaskRequest.reqBody.seed
delete newTaskRequest.reqBody.mask
createTask(newTaskRequest)
}
function onUpscaleClick(req, img) {
let newTaskRequest = getCurrentUserRequest()
const imageSeed = img.getAttribute('data-seed')
newTaskRequest.reqBody = Object.assign({}, req, {
num_outputs: 1,
use_cpu: useCPUField.checked,
use_upscale: upscaleModelField.value,
seed: imageSeed
})
newTaskRequest.numOutputsTotal = 1
newTaskRequest.batchCount = 1
newTaskRequest.seed = newTaskRequest.reqBody.seed
createTask(newTaskRequest)
}
function onFixFacesClick(req, img) {
let newTaskRequest = getCurrentUserRequest()
const imageSeed = img.getAttribute('data-seed')
newTaskRequest.reqBody = Object.assign({}, req, {
num_outputs: 1,
use_cpu: useCPUField.checked,
use_face_correction: 'GFPGANv1.3',
seed: imageSeed
})
newTaskRequest.numOutputsTotal = 1
newTaskRequest.batchCount = 1
newTaskRequest.seed = newTaskRequest.reqBody.seed
createTask(newTaskRequest)
}
function onContinueDrawingClick(req, img) {
let newTaskRequest = getCurrentUserRequest()
const imageSeed = img.getAttribute('data-seed')
newTaskRequest.reqBody = Object.assign({}, req, {
num_outputs: 1,
use_cpu: useCPUField.checked,
num_inference_steps: parseInt(req.num_inference_steps) + 25,
seed: imageSeed
})
newTaskRequest.numOutputsTotal = 1
newTaskRequest.batchCount = 1
newTaskRequest.seed = newTaskRequest.reqBody.seed
createTask(newTaskRequest)
}
}
// makes a single image. don't call this directly, use makeImage() instead
@ -662,7 +686,7 @@ async function checkTasks() {
})
}
if (genSeeds) {
newTask.reqBody.seed = startSeed + (i * newTask.reqBody.num_outputs)
newTask.reqBody.seed = parseInt(startSeed) + (i * newTask.reqBody.num_outputs)
newTask.seed = newTask.reqBody.seed
} else if (newTask.seed !== newTask.reqBody.seed) {
newTask.seed = newTask.reqBody.seed
@ -859,14 +883,34 @@ function getPrompts() {
}
prompts = prompts.split('\n')
prompts = prompts.map(prompt => prompt.trim())
prompts = prompts.filter(prompt => prompt !== '')
let promptsToMake = []
prompts.forEach(prompt => {
prompt = prompt.trim()
if (prompt === '') {
return
let promptsToMake = applySetOperator(prompts)
promptsToMake = applyPermuteOperator(promptsToMake)
if (activeTags.length <= 0) {
return promptsToMake
}
const promptTags = activeTags.map(x => x.name).join(", ")
return promptsToMake.map((prompt) => `${prompt}, ${promptTags}`)
}
function applySetOperator(prompts) {
let promptsToMake = []
let braceExpander = new BraceExpander()
prompts.forEach(prompt => {
let expandedPrompts = braceExpander.expand(prompt)
promptsToMake = promptsToMake.concat(expandedPrompts)
})
return promptsToMake
}
function applyPermuteOperator(prompts) {
let promptsToMake = []
prompts.forEach(prompt => {
let promptMatrix = prompt.split('|')
prompt = promptMatrix.shift().trim()
promptsToMake.push(prompt)
@ -879,11 +923,8 @@ function getPrompts() {
promptsToMake = promptsToMake.concat(promptPermutations)
}
})
if (activeTags.length <= 0) {
return promptsToMake
}
const promptTags = activeTags.map(x => x.name).join(", ")
return promptsToMake.map((prompt) => `${prompt}, ${promptTags}`)
}
function permutePrompts(promptBase, promptMatrix) {

47
ui/media/js/plugins.js Normal file
View File

@ -0,0 +1,47 @@
const PLUGIN_API_VERSION = "1.0"
const PLUGINS = {
/**
* Register new buttons to show on each output image.
*
* Example:
* PLUGINS['IMAGE_INFO_BUTTONS'].push({
* text: 'Make a Similar Image',
* on_click: function(origRequest, image) {
* let newTaskRequest = getCurrentUserRequest()
* newTaskRequest.reqBody = Object.assign({}, origRequest, {
* init_image: image.src,
* prompt_strength: 0.7,
* seed: Math.floor(Math.random() * 10000000)
* })
* newTaskRequest.seed = newTaskRequest.reqBody.seed
* createTask(newTaskRequest)
* },
* filter: function(origRequest, image) {
* // this is an optional function. return true/false to show/hide the button
* // if this function isn't set, the button will always be visible
* return true
* }
* })
*/
IMAGE_INFO_BUTTONS: []
}
async function loadUIPlugins() {
try {
let res = await fetch('/get/ui_plugins')
if (res.status === 200) {
res = await res.json()
res.forEach(pluginPath => {
let script = document.createElement('script')
script.src = pluginPath
console.log('loading plugin', pluginPath)
document.head.appendChild(script)
})
}
} catch (e) {
console.log('error fetching plugin paths', e)
}
}

View File

@ -138,3 +138,176 @@ function millisecondsToStr(milliseconds) {
return s
}
// https://rosettacode.org/wiki/Brace_expansion#JavaScript
function BraceExpander() {
'use strict'
// Index of any closing brace matching the opening
// brace at iPosn,
// with the indices of any immediately-enclosed commas.
function bracePair(tkns, iPosn, iNest, lstCommas) {
if (iPosn >= tkns.length || iPosn < 0) return null;
var t = tkns[iPosn],
n = (t === '{') ? (
iNest + 1
) : (t === '}' ? (
iNest - 1
) : iNest),
lst = (t === ',' && iNest === 1) ? (
lstCommas.concat(iPosn)
) : lstCommas;
return n ? bracePair(tkns, iPosn + 1, n, lst) : {
close: iPosn,
commas: lst
};
}
// Parse of a SYNTAGM subtree
function andTree(dctSofar, tkns) {
if (!tkns.length) return [dctSofar, []];
var dctParse = dctSofar ? dctSofar : {
fn: and,
args: []
},
head = tkns[0],
tail = head ? tkns.slice(1) : [],
dctBrace = head === '{' ? bracePair(
tkns, 0, 0, []
) : null,
lstOR = dctBrace && (
dctBrace.close
) && dctBrace.commas.length ? (
splitAt(dctBrace.close + 1, tkns)
) : null;
return andTree({
fn: and,
args: dctParse.args.concat(
lstOR ? (
orTree(dctParse, lstOR[0], dctBrace.commas)
) : head
)
}, lstOR ? (
lstOR[1]
) : tail);
}
// Parse of a PARADIGM subtree
function orTree(dctSofar, tkns, lstCommas) {
if (!tkns.length) return [dctSofar, []];
var iLast = lstCommas.length;
return {
fn: or,
args: splitsAt(
lstCommas, tkns
).map(function (x, i) {
var ts = x.slice(
1, i === iLast ? (
-1
) : void 0
);
return ts.length ? ts : [''];
}).map(function (ts) {
return ts.length > 1 ? (
andTree(null, ts)[0]
) : ts[0];
})
};
}
// List of unescaped braces and commas, and remaining strings
function tokens(str) {
// Filter function excludes empty splitting artefacts
var toS = function (x) {
return x.toString();
};
return str.split(/(\\\\)/).filter(toS).reduce(function (a, s) {
return a.concat(s.charAt(0) === '\\' ? s : s.split(
/(\\*[{,}])/
).filter(toS));
}, []);
}
// PARSE TREE OPERATOR (1 of 2)
// Each possible head * each possible tail
function and(args) {
var lng = args.length,
head = lng ? args[0] : null,
lstHead = "string" === typeof head ? (
[head]
) : head;
return lng ? (
1 < lng ? lstHead.reduce(function (a, h) {
return a.concat(
and(args.slice(1)).map(function (t) {
return h + t;
})
);
}, []) : lstHead
) : [];
}
// PARSE TREE OPERATOR (2 of 2)
// Each option flattened
function or(args) {
return args.reduce(function (a, b) {
return a.concat(b);
}, []);
}
// One list split into two (first sublist length n)
function splitAt(n, lst) {
return n < lst.length + 1 ? [
lst.slice(0, n), lst.slice(n)
] : [lst, []];
}
// One list split into several (sublist lengths [n])
function splitsAt(lstN, lst) {
return lstN.reduceRight(function (a, x) {
return splitAt(x, a[0]).concat(a.slice(1));
}, [lst]);
}
// Value of the parse tree
function evaluated(e) {
return typeof e === 'string' ? e :
e.fn(e.args.map(evaluated));
}
// JSON prettyprint (for parse tree, token list etc)
function pp(e) {
return JSON.stringify(e, function (k, v) {
return typeof v === 'function' ? (
'[function ' + v.name + ']'
) : v;
}, 2)
}
// ----------------------- MAIN ------------------------
// s -> [s]
this.expand = function(s) {
// BRACE EXPRESSION PARSED
var dctParse = andTree(null, tokens(s))[0];
// ABSTRACT SYNTAX TREE LOGGED
// console.log(pp(dctParse));
// AST EVALUATED TO LIST OF STRINGS
return evaluated(dctParse);
}
}

View File

@ -207,6 +207,7 @@ def get_base_path(disk_path, session_id, prompt, img_id, ext, suffix=None):
prompt_flattened = filename_regex.sub('_', prompt)[:50]
if suffix is not None:
return os.path.join(session_out_path, f"{prompt_flattened}_{img_id}_{suffix}.{ext}")
return os.path.join(session_out_path, f"{prompt_flattened}_{img_id}.{ext}")
@ -316,8 +317,7 @@ def do_mk_img(req: Request):
opt_f = 8
opt_ddim_eta = 0.0
opt_init_img = req.init_image
img_id = base64.b64encode(int(time.time()).to_bytes(8, 'big')).decode() # Generate unique ID based on time.
img_id = img_id.translate({43:None, 47:None, 61:None})[-8:] # Remove + / = and keep last 8 chars.
print(req.to_string(), '\n device', device)
@ -462,6 +462,8 @@ def do_mk_img(req: Request):
print("saving images")
for i in range(batch_size):
img_id = base64.b64encode(int(time.time()+i).to_bytes(8, 'big')).decode() # Generate unique ID based on time.
img_id = img_id.translate({43:None, 47:None, 61:None})[-8:] # Remove + / = and keep last 8 chars.
x_samples_ddim = modelFS.decode_first_stage(x_samples[i].unsqueeze(0))
x_sample = torch.clamp((x_samples_ddim + 1.0) / 2.0, min=0.0, max=1.0)

View File

@ -12,6 +12,7 @@ sys.path.append(os.path.dirname(SD_UI_DIR))
CONFIG_DIR = os.path.abspath(os.path.join(SD_UI_DIR, '..', 'scripts'))
MODELS_DIR = os.path.abspath(os.path.join(SD_DIR, '..', 'models'))
UI_PLUGINS_DIR = os.path.abspath(os.path.join(SD_DIR, '..', 'plugins', 'ui'))
OUTPUT_DIRNAME = "Stable Diffusion UI" # in the user's home folder
TASK_TTL = 15 * 60 # Discard last session's task timeout
@ -31,11 +32,15 @@ app = FastAPI()
modifiers_cache = None
outpath = os.path.join(os.path.expanduser("~"), OUTPUT_DIRNAME)
os.makedirs(UI_PLUGINS_DIR, exist_ok=True)
# don't show access log entries for URLs that start with the given prefix
ACCESS_LOG_SUPPRESS_PATH_PREFIXES = ['/ping', '/image', '/modifier-thumbnails']
NOCACHE_HEADERS={"Cache-Control": "no-cache, no-store, must-revalidate", "Pragma": "no-cache", "Expires": "0"}
app.mount('/media', StaticFiles(directory=os.path.join(SD_UI_DIR, 'media/')), name="media")
app.mount('/media', StaticFiles(directory=os.path.join(SD_UI_DIR, 'media')), name="media")
app.mount('/plugins', StaticFiles(directory=UI_PLUGINS_DIR), name="plugins")
class SetAppConfigRequest(BaseModel):
update_branch: str = "main"
@ -251,6 +256,15 @@ def getModels():
return models
def getUIPlugins():
plugins = []
for file in os.listdir(UI_PLUGINS_DIR):
if file.endswith('.plugin.js'):
plugins.append(f'/plugins/{file}')
return plugins
@app.get('/get/{key:path}')
def read_web_data(key:str=None):
if not key: # /get without parameters, stable-diffusion easter egg.
@ -264,6 +278,7 @@ def read_web_data(key:str=None):
return JSONResponse(getModels(), headers=NOCACHE_HEADERS)
elif key == 'modifiers': return FileResponse(os.path.join(SD_UI_DIR, 'modifiers.json'), headers=NOCACHE_HEADERS)
elif key == 'output_dir': return JSONResponse({ 'output_dir': outpath }, headers=NOCACHE_HEADERS)
elif key == 'ui_plugins': return JSONResponse(getUIPlugins(), headers=NOCACHE_HEADERS)
else:
raise HTTPException(status_code=404, detail=f'Request for unknown {key}') # HTTP404 Not Found