2022-08-23 22:28:18 +02:00
<!DOCTYPE html>
< html >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< style >
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
}
2022-08-26 03:19:13 +02:00
a {
color: rgb(0, 102, 204);
}
a:visited {
color: rgb(0, 102, 204);
}
2022-08-26 03:08:29 +02:00
@media (prefers-color-scheme: dark) {
body {
background-color: rgb(32, 33, 36);
color: #eee;
}
}
2022-08-25 18:16:31 +02:00
label {
font-size: 10pt;
}
2022-08-23 22:28:18 +02:00
#prompt {
width: 50vw;
height: 50pt;
}
@media screen and (max-width: 600px) {
#prompt {
width: 95%;
}
}
2022-08-26 15:26:34 +02:00
.image_preview_container {
2022-08-25 18:16:31 +02:00
display: none;
}
2022-08-26 15:26:34 +02:00
.image_clear_btn {
2022-08-25 18:16:31 +02:00
position: absolute;
transform: translateX(-50%);
background: black;
color: white;
border: 2pt solid #ccc;
padding: 0;
cursor: pointer;
outline: inherit;
border-radius: 8pt;
width: 16pt;
height: 16pt;
font-size: 10pt;
}
2022-08-24 09:03:35 +02:00
#configHeader {
margin-top: 5px;
margin-bottom: 5px;
font-size: 10pt;
}
#config {
font-size: 9pt;
margin-bottom: 5px;
padding-left: 10px;
}
#outputMsg {
font-size: small;
2022-08-23 22:28:18 +02:00
}
#footer {
2022-08-25 18:16:31 +02:00
border-top: 1px solid #999;
margin-top: 10px;
padding-top: 10px;
2022-08-23 22:28:18 +02:00
font-size: small;
}
2022-08-27 07:23:46 +02:00
.imgSeedLabel {
2022-08-25 18:16:31 +02:00
position: absolute;
transform: translateX(-100%);
margin-top: 5pt;
margin-left: -5pt;
2022-08-27 07:23:46 +02:00
font-size: 10pt;
background-color: #333;
opacity: 0.8;
color: #ddd;
border-radius: 3pt;
padding: 1pt 3pt;
2022-08-25 18:16:31 +02:00
}
2022-08-27 07:23:46 +02:00
.imgUseBtn {
2022-08-26 20:50:20 +02:00
position: absolute;
transform: translateX(-100%);
margin-top: 30pt;
margin-left: -5pt;
}
2022-08-27 07:23:46 +02:00
.imgSaveBtn {
position: absolute;
transform: translateX(-100%);
margin-top: 55pt;
margin-left: -5pt;
}
2022-08-25 18:16:31 +02:00
.imgItem {
display: inline;
padding-right: 10px;
}
2022-08-23 22:28:18 +02:00
< / style >
< / html >
< body >
< div id = "status" > Server status: < span id = "serverStatus" > checking..< / span > | Request status: < span id = "reqStatus" > n/a< / span > < / div >
< br / >
< b > Prompt:< / b > < br / >
< textarea id = "prompt" > a photograph of an astronaut riding a horse< / textarea > < br / >
2022-08-25 18:16:31 +02:00
< label for = "init_image" > < b > Initial Image:< / b > (optional) < / label > < input id = "init_image" name = "init_image" type = "file" / > < / button > < br / >
2022-08-26 15:26:34 +02:00
< div id = "init_image_preview_container" class = "image_preview_container" >
2022-08-25 18:16:31 +02:00
< img id = "init_image_preview" src = "" width = "100" height = "100" / >
2022-08-26 15:26:34 +02:00
< button id = "init_image_clear" class = "image_clear_btn" > X< / button >
< / div > < br / >
< div id = "mask_setting" >
< label for = "mask" > < b > Image Mask:< / b > (optional) < / label > < input id = "mask" name = "mask" type = "file" / > < / button > < br / >
< div id = "mask_preview_container" class = "image_preview_container" >
< img id = "mask_preview" src = "" width = "100" height = "100" / >
< button id = "mask_clear" class = "image_clear_btn" > X< / button >
< / div >
2022-08-25 18:16:31 +02:00
< / div >
2022-08-24 09:03:35 +02:00
< div id = "configHeader" > < b > Advanced settings:< / b > [< a id = "configToggleBtn" href = "#" > show< / a > ]< / div >
< div id = "config" >
2022-08-27 07:23:46 +02:00
< label for = "seed" > Seed:< / label > < input id = "seed" name = "seed" size = "10" value = "30000" > < input id = "random_seed" name = "random_seed" type = "checkbox" checked > < label for = "random_seed" > Random Image< / label > < br / >
< label for = "num_outputs_total" > Number of outputs:< / label > < input id = "num_outputs_total" name = "num_outputs_total" value = "1" size = "4" > < label for = "num_outputs_parallel" > Generate in parallel:< / label > < select id = "num_outputs_parallel" name = "num_outputs_parallel" value = "1" > < option value = "1" selected > 1 image at a time< / option > < option value = "4" > 4 images at a time< / option > < / select > < br / >
2022-08-24 09:03:35 +02:00
< label for = "width" > Width:< / label > < select id = "width" name = "width" value = "512" > < option value = "128" > 128< / option > < option value = "256" > 256< / option > < option value = "512" selected > 512< / option > < option value = "768" > 768< / option > < option value = "1024" > 1024< / option > < / select > < br / >
< label for = "height" > Height:< / label > < select id = "height" name = "height" value = "512" > < option value = "128" > 128< / option > < option value = "256" > 256< / option > < option value = "512" selected > 512< / option > < option value = "768" > 768< / option > < / select > < br / >
2022-08-27 07:23:46 +02:00
< label for = "num_inference_steps" > Number of inference steps:< / label > < input id = "num_inference_steps" name = "num_inference_steps" size = "4" value = "50" > < br / >
2022-08-25 19:26:52 +02:00
< label for = "guidance_scale" > Guidance Scale:< / label > < input id = "guidance_scale" name = "guidance_scale" value = "75" type = "range" min = "10" max = "200" > < span id = "guidance_scale_value" > < / span > < br / >
2022-08-26 03:08:29 +02:00
< span id = "prompt_strength_container" > < label for = "prompt_strength" > Prompt Strength:< / label > < input id = "prompt_strength" name = "prompt_strength" value = "8" type = "range" min = "0" max = "10" > < span id = "prompt_strength_value" > < / span > < br / > < / span > < br / >
2022-08-25 18:51:16 +02:00
< input id = "sound_toggle" name = "sound_toggle" type = "checkbox" checked > < label for = "sound_toggle" > Play sound on task completion< / label > < br / >
2022-08-24 09:03:35 +02:00
< / div >
2022-08-23 22:28:18 +02:00
< button id = "makeImage" > Make Image< / button > < br / > < br / >
2022-08-24 09:03:35 +02:00
< div id = "outputMsg" > < / div >
< div id = "images" > < / div >
2022-08-23 22:28:18 +02:00
< div id = "footer" >
2022-08-25 11:31:09 +02:00
< p > Please feel free to < a href = "https://github.com/cmdr2/stable-diffusion-ui/issues" target = "_blank" > file an issue< / a > if you have any problems or suggestions in using this interface.< / p >
2022-08-25 14:46:24 +02:00
< p > < b > Disclaimer:< / b > The authors of this project are not responsible for any content generated using this interface.< / p >
2022-08-25 12:44:08 +02:00
< p > This license of this software forbids you from sharing any content that violates any laws, produce any harm to a person, disseminate any personal information that would be meant for harm, < br / > spread misinformation and target vulnerable groups. For the full list of restrictions please read < a href = "https://github.com/cmdr2/stable-diffusion-ui/blob/main/LICENSE" target = "_blank" > the license< / a > .< / p >
2022-08-25 14:46:24 +02:00
< p > By using this software, you consent to the terms and conditions of the license.< / p >
2022-08-23 22:28:18 +02:00
< / div >
< / body >
< script >
2022-08-25 16:52:17 +02:00
const SOUND_ENABLED_KEY = "soundEnabled"
2022-08-23 22:28:18 +02:00
const HEALTH_PING_INTERVAL = 5 // seconds
2022-08-25 18:16:31 +02:00
let promptField = document.querySelector('#prompt')
2022-08-27 07:23:46 +02:00
let numOutputsTotalField = document.querySelector('#num_outputs_total')
let numOutputsParallelField = document.querySelector('#num_outputs_parallel')
2022-08-25 18:16:31 +02:00
let numInferenceStepsField = document.querySelector('#num_inference_steps')
let guidanceScaleField = document.querySelector('#guidance_scale')
let guidanceScaleValueLabel = document.querySelector('#guidance_scale_value')
let randomSeedField = document.querySelector("#random_seed")
let seedField = document.querySelector('#seed')
let widthField = document.querySelector('#width')
let heightField = document.querySelector('#height')
let initImageSelector = document.querySelector("#init_image")
let initImagePreview = document.querySelector("#init_image_preview")
2022-08-26 15:26:34 +02:00
let maskImageSelector = document.querySelector("#mask")
let maskImagePreview = document.querySelector("#mask_preview")
2022-08-25 19:26:52 +02:00
let promptStrengthField = document.querySelector('#prompt_strength')
let promptStrengthValueLabel = document.querySelector('#prompt_strength_value')
2022-08-25 18:16:31 +02:00
let makeImageBtn = document.querySelector('#makeImage')
let imagesContainer = document.querySelector('#images')
let initImagePreviewContainer = document.querySelector('#init_image_preview_container')
let initImageClearBtn = document.querySelector('#init_image_clear')
2022-08-25 19:26:52 +02:00
let promptStrengthContainer = document.querySelector('#prompt_strength_container')
2022-08-25 18:16:31 +02:00
2022-08-26 15:26:34 +02:00
let maskSetting = document.querySelector('#mask_setting')
let maskImagePreviewContainer = document.querySelector('#mask_preview_container')
let maskImageClearBtn = document.querySelector('#mask_clear')
2022-08-25 18:16:31 +02:00
let showConfigToggle = document.querySelector('#configToggleBtn')
let configBox = document.querySelector('#config')
let outputMsg = document.querySelector('#outputMsg')
2022-08-25 20:42:53 +02:00
let soundToggle = document.querySelector('#sound_toggle')
2022-08-24 17:36:42 +02:00
let serverStatus = 'offline'
2022-08-25 16:52:17 +02:00
function isSoundEnabled() {
if (localStorage.getItem(SOUND_ENABLED_KEY) === 'false') {
return false
}
return true
}
2022-08-23 22:28:18 +02:00
function setStatus(statusType, msg, msgType) {
let el = ''
if (statusType === 'server') {
el = '#serverStatus'
2022-08-24 17:36:42 +02:00
serverStatus = msg
2022-08-23 22:28:18 +02:00
} else if (statusType === 'request') {
el = '#reqStatus'
}
if (msgType == 'error') {
msg = '< span style = "color: red" > ' + msg + '< span > '
} else if (msgType == 'success') {
msg = '< span style = "color: green" > ' + msg + '< span > '
}
if (el) {
document.querySelector(el).innerHTML = msg
}
}
2022-08-27 07:23:46 +02:00
function logError(msg, res) {
outputMsg.innerHTML = '< span style = "color: red" > Error: ' + msg + '< / span > '
console.log('request error', res)
setStatus('request', 'error', 'error')
}
2022-08-23 22:28:18 +02:00
function playSound() {
2022-08-24 17:42:42 +02:00
const audio = new Audio('/media/ding.mp3')
2022-08-24 15:51:56 +02:00
audio.volume = 0.2
2022-08-23 22:28:18 +02:00
audio.play()
}
async function healthCheck() {
try {
let res = await fetch('/ping')
res = await res.json()
if (res[0] == 'OK') {
setStatus('server', 'online', 'success')
} else {
setStatus('server', 'offline', 'error')
}
} catch (e) {
setStatus('server', 'offline', 'error')
}
}
2022-08-27 07:23:46 +02:00
// makes a single image. don't call this directly, use makeImage() instead
async function doMakeImage(reqBody) {
2022-08-23 22:28:18 +02:00
let res = ''
2022-08-27 07:23:46 +02:00
let seed = reqBody['seed']
2022-08-23 22:28:18 +02:00
try {
res = await fetch('/image', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
2022-08-24 09:03:35 +02:00
body: JSON.stringify(reqBody)
2022-08-23 22:28:18 +02:00
})
2022-08-24 09:03:35 +02:00
2022-08-24 10:03:58 +02:00
if (res.status != 200) {
2022-08-24 17:36:42 +02:00
if (serverStatus === 'online') {
logError('Stable Diffusion had an error: ' + await res.text() + '. This happens sometimes. Maybe modify the prompt or seed a little bit?', res)
} else {
2022-08-24 18:14:07 +02:00
logError("Stable Diffusion is still starting up, please wait. If this goes on beyond a few minutes, Stable Diffusion has probably crashed.", res)
2022-08-24 17:36:42 +02:00
}
2022-08-24 09:03:35 +02:00
res = undefined
2022-08-24 10:03:58 +02:00
} else {
res = await res.json()
if (res.status !== 'succeeded') {
let msg = ''
if (res.detail !== undefined) {
msg = res.detail[0].msg + " in " + JSON.stringify(res.detail[0].loc)
} else {
msg = res
}
logError(msg, res)
res = undefined
}
2022-08-24 09:03:35 +02:00
}
2022-08-23 22:28:18 +02:00
} catch (e) {
console.log('request error', e)
setStatus('request', 'error', 'error')
}
2022-08-24 15:51:56 +02:00
2022-08-23 22:28:18 +02:00
if (!res) {
return
}
2022-08-24 09:03:35 +02:00
for (let idx in res.output) {
let imgBody = ''
try {
imgBody = res.output[idx]
} catch (e) {
console.log(imgBody)
setStatus('request', 'invalid image', 'error')
2022-08-27 07:23:46 +02:00
continue
2022-08-24 09:03:35 +02:00
}
2022-08-25 18:16:31 +02:00
let imgItem = document.createElement('div')
imgItem.className = 'imgItem'
2022-08-24 09:03:35 +02:00
let img = document.createElement('img')
img.width = parseInt(reqBody.width)
img.height = parseInt(reqBody.height)
img.src = imgBody
2022-08-27 07:23:46 +02:00
let imgSeedLabel = document.createElement('span')
imgSeedLabel.className = 'imgSeedLabel'
imgSeedLabel.innerHTML = 'Seed: ' + seed
2022-08-25 18:16:31 +02:00
let imgUseBtn = document.createElement('button')
imgUseBtn.className = 'imgUseBtn'
imgUseBtn.innerHTML = 'Use as Input'
2022-08-26 20:50:20 +02:00
let imgSaveBtn = document.createElement('button')
imgSaveBtn.className = 'imgSaveBtn'
imgSaveBtn.innerHTML = 'Download'
2022-08-25 18:16:31 +02:00
imgItem.appendChild(img)
2022-08-27 07:23:46 +02:00
imgItem.appendChild(imgSeedLabel)
2022-08-25 18:16:31 +02:00
imgItem.appendChild(imgUseBtn)
2022-08-26 20:50:20 +02:00
imgItem.appendChild(imgSaveBtn)
2022-08-25 18:16:31 +02:00
imagesContainer.appendChild(imgItem)
imgUseBtn.addEventListener('click', function() {
initImageSelector.value = null
initImagePreview.src = imgBody
initImagePreviewContainer.style.display = 'block'
2022-08-25 19:26:52 +02:00
promptStrengthContainer.style.display = 'block'
2022-08-25 18:16:31 +02:00
2022-08-26 15:26:34 +02:00
maskSetting.style.display = 'block'
2022-08-25 18:16:31 +02:00
randomSeedField.checked = false
seedField.value = seed
seedField.disabled = false
})
2022-08-26 20:50:20 +02:00
imgSaveBtn.addEventListener('click', function() {
let imgDownload = document.createElement('a')
imgDownload.download = generateUUID() + '.png'
imgDownload.href = imgBody
imgDownload.click()
})
2022-08-24 09:03:35 +02:00
}
2022-08-27 07:23:46 +02:00
}
async function makeImage() {
setStatus('request', 'fetching..')
makeImageBtn.innerHTML = 'Processing..'
makeImageBtn.disabled = true
outputMsg.innerHTML = 'Fetching..'
let seed = (randomSeedField.checked ? Math.floor(Math.random() * 10000) : parseInt(seedField.value))
let numOutputsTotal = parseInt(numOutputsTotalField.value)
let numOutputsParallel = parseInt(numOutputsParallelField.value)
let batchCount = Math.ceil(numOutputsTotal / numOutputsParallel)
let batchSize = numOutputsParallel
let reqBody = {
prompt: promptField.value,
num_outputs: batchSize,
num_inference_steps: numInferenceStepsField.value,
guidance_scale: parseInt(guidanceScaleField.value) / 10,
width: widthField.value,
height: heightField.value,
}
if (initImagePreview.src.indexOf('data:image/png;base64') !== -1) {
reqBody['init_image'] = initImagePreview.src
reqBody['prompt_strength'] = parseInt(promptStrengthField.value) / 10
if (maskImagePreview.src.indexOf('data:image/png;base64') !== -1) {
reqBody['mask'] = maskImagePreview.src
}
}
let time = new Date().getTime()
imagesContainer.innerHTML = ''
for (let i = 0; i < batchCount ; i + + ) {
reqBody['seed'] = seed + i
await doMakeImage(reqBody)
outputMsg.innerHTML = 'Processed batch ' + (i+1) + '/' + batchCount
}
makeImageBtn.innerHTML = 'Make Image'
makeImageBtn.disabled = false
if (isSoundEnabled()) {
playSound()
}
time = new Date().getTime() - time
time /= 1000
outputMsg.innerHTML = 'Processed ' + numOutputsTotal + ' images in ' + time + ' seconds'
2022-08-23 22:28:18 +02:00
setStatus('request', 'done', 'success')
2022-08-24 10:46:48 +02:00
2022-08-25 18:16:31 +02:00
if (randomSeedField.checked) {
seedField.value = seed
2022-08-24 10:46:48 +02:00
}
2022-08-23 22:28:18 +02:00
}
2022-08-26 20:50:20 +02:00
function generateUUID() { // Public Domain/MIT
var d = new Date().getTime();//Timestamp
var d2 = ((typeof performance !== 'undefined') & & performance.now & & (performance.now()*1000)) || 0;//Time in microseconds since page-load or 0 if unsupported
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16;//random number between 0 and 16
if(d > 0){//Use timestamp until depleted
r = (d + r)%16 | 0;
d = Math.floor(d/16);
} else {//Use microseconds since page-load if supported
r = (d2 + r)%16 | 0;
d2 = Math.floor(d2/16);
}
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
}
2022-08-25 16:52:17 +02:00
function handleAudioEnabledChange(e) {
localStorage.setItem(SOUND_ENABLED_KEY, e.target.checked.toString())
}
2022-08-25 20:42:53 +02:00
soundToggle.addEventListener('click', handleAudioEnabledChange)
soundToggle.checked = isSoundEnabled();
2022-08-23 22:28:18 +02:00
2022-08-25 18:16:31 +02:00
makeImageBtn.addEventListener('click', makeImage)
2022-08-23 22:28:18 +02:00
2022-08-25 18:16:31 +02:00
configBox.style.display = 'none'
2022-08-24 09:03:35 +02:00
2022-08-25 18:16:31 +02:00
showConfigToggle.addEventListener('click', function() {
configBox.style.display = (configBox.style.display === 'none' ? 'block' : 'none')
showConfigToggle.innerHTML = (configBox.style.display === 'none' ? 'show' : 'hide')
2022-08-24 09:03:35 +02:00
return false
})
2022-08-24 09:13:50 +02:00
function updateGuidanceScale() {
2022-08-25 18:16:31 +02:00
guidanceScaleValueLabel.innerHTML = guidanceScaleField.value / 10
2022-08-24 09:13:50 +02:00
}
2022-08-25 18:16:31 +02:00
guidanceScaleField.addEventListener('input', updateGuidanceScale)
2022-08-24 09:13:50 +02:00
updateGuidanceScale()
2022-08-25 19:26:52 +02:00
function updatePromptStrength() {
promptStrengthValueLabel.innerHTML = promptStrengthField.value / 10
}
promptStrengthField.addEventListener('input', updatePromptStrength)
updatePromptStrength()
2022-08-24 10:46:48 +02:00
function checkRandomSeed() {
2022-08-25 18:16:31 +02:00
if (randomSeedField.checked) {
seedField.disabled = true
seedField.value = "random"
2022-08-24 10:46:48 +02:00
} else {
2022-08-25 18:16:31 +02:00
seedField.disabled = false
2022-08-24 10:46:48 +02:00
}
}
2022-08-25 18:16:31 +02:00
randomSeedField.addEventListener('input', checkRandomSeed)
2022-08-24 10:46:48 +02:00
checkRandomSeed()
2022-08-25 18:16:31 +02:00
function showInitImagePreview() {
if (initImageSelector.files.length === 0) {
initImagePreviewContainer.style.display = 'none'
2022-08-25 19:26:52 +02:00
promptStrengthContainer.style.display = 'none'
2022-08-26 15:26:34 +02:00
maskSetting.style.display = 'none'
2022-08-25 18:16:31 +02:00
return
}
let reader = new FileReader()
let file = initImageSelector.files[0]
reader.addEventListener('load', function() {
// console.log(file.name, reader.result)
initImagePreview.src = reader.result
initImagePreviewContainer.style.display = 'block'
2022-08-25 19:26:52 +02:00
promptStrengthContainer.style.display = 'block'
2022-08-26 15:26:34 +02:00
maskSetting.style.display = 'block'
2022-08-25 18:16:31 +02:00
})
if (file) {
reader.readAsDataURL(file)
}
}
initImageSelector.addEventListener('change', showInitImagePreview)
showInitImagePreview()
initImageClearBtn.addEventListener('click', function() {
initImageSelector.value = null
2022-08-26 15:26:34 +02:00
maskImageSelector.value = null
2022-08-25 18:16:31 +02:00
initImagePreview.src = ''
2022-08-26 15:26:34 +02:00
maskImagePreview.src = ''
2022-08-25 18:16:31 +02:00
initImagePreviewContainer.style.display = 'none'
2022-08-26 15:26:34 +02:00
maskImagePreviewContainer.style.display = 'none'
maskSetting.style.display = 'none'
2022-08-25 19:26:52 +02:00
promptStrengthContainer.style.display = 'none'
2022-08-25 18:16:31 +02:00
})
2022-08-26 15:26:34 +02:00
function showMaskImagePreview() {
if (maskImageSelector.files.length === 0) {
maskImagePreviewContainer.style.display = 'none'
return
}
let reader = new FileReader()
let file = maskImageSelector.files[0]
reader.addEventListener('load', function() {
maskImagePreview.src = reader.result
maskImagePreviewContainer.style.display = 'block'
})
if (file) {
reader.readAsDataURL(file)
}
}
maskImageSelector.addEventListener('change', showMaskImagePreview)
showMaskImagePreview()
maskImageClearBtn.addEventListener('click', function() {
maskImageSelector.value = null
maskImagePreview.src = ''
maskImagePreviewContainer.style.display = 'none'
})
2022-08-23 22:28:18 +02:00
setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
< / script >
2022-08-25 08:31:04 +02:00
< / html >
