mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2024-11-22 16:23:28 +01:00
382 lines
13 KiB
HTML
382 lines
13 KiB
HTML
<!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;
|
|
}
|
|
label {
|
|
font-size: 10pt;
|
|
}
|
|
#prompt {
|
|
width: 50vw;
|
|
height: 50pt;
|
|
}
|
|
@media screen and (max-width: 600px) {
|
|
#prompt {
|
|
width: 95%;
|
|
}
|
|
}
|
|
#init_image_preview_container {
|
|
display: none;
|
|
}
|
|
#init_image_clear {
|
|
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;
|
|
}
|
|
#configHeader {
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
font-size: 10pt;
|
|
}
|
|
#config {
|
|
font-size: 9pt;
|
|
margin-bottom: 5px;
|
|
padding-left: 10px;
|
|
}
|
|
#outputMsg {
|
|
font-size: small;
|
|
}
|
|
#footer {
|
|
border-top: 1px solid #999;
|
|
margin-top: 10px;
|
|
padding-top: 10px;
|
|
font-size: small;
|
|
}
|
|
.imgUseBtn {
|
|
position: absolute;
|
|
transform: translateX(-100%);
|
|
margin-top: 5pt;
|
|
margin-left: -5pt;
|
|
}
|
|
.imgItem {
|
|
display: inline;
|
|
padding-right: 10px;
|
|
}
|
|
</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/>
|
|
|
|
<label for="init_image"><b>Initial Image:</b> (optional) </label> <input id="init_image" name="init_image" type="file" /> </button><br/>
|
|
<div id="init_image_preview_container">
|
|
<img id="init_image_preview" src="" width="100" height="100" />
|
|
<button id="init_image_clear">X</button>
|
|
</div>
|
|
|
|
<div id="configHeader"><b>Advanced settings:</b> [<a id="configToggleBtn" href="#">show</a>]</div>
|
|
<div id="config">
|
|
<label for="seed">Seed:</label> <input id="seed" name="seed" value="30000"> <input id="random_seed" name="random_seed" type="checkbox" checked> <label for="random_seed">Random Image</label> <br/>
|
|
<label for="num_outputs">Number of outputs:</label> <select id="num_outputs" name="num_outputs" value="1"><option value="1" selected>1</option><option value="4">4</option></select><br/>
|
|
<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/>
|
|
<label for="num_inference_steps">Number of inference steps:</label> <input id="num_inference_steps" name="num_inference_steps" value="50"><br/>
|
|
<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/>
|
|
<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>
|
|
</div>
|
|
|
|
<button id="makeImage">Make Image</button> <br/><br/>
|
|
|
|
<div id="outputMsg"></div>
|
|
|
|
<div id="images"></div>
|
|
|
|
<div id="footer">
|
|
<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>
|
|
<p><b>Disclaimer:</b> The authors of this project are not responsible for any content generated using this interface.</p>
|
|
<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>
|
|
<p>By using this software, you consent to the terms and conditions of the license.</p>
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
const HEALTH_PING_INTERVAL = 5 // seconds
|
|
|
|
let promptField = document.querySelector('#prompt')
|
|
let numOutputsField = document.querySelector('#num_outputs')
|
|
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")
|
|
let promptStrengthField = document.querySelector('#prompt_strength')
|
|
let promptStrengthValueLabel = document.querySelector('#prompt_strength_value')
|
|
|
|
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')
|
|
let promptStrengthContainer = document.querySelector('#prompt_strength_container')
|
|
|
|
let showConfigToggle = document.querySelector('#configToggleBtn')
|
|
let configBox = document.querySelector('#config')
|
|
let outputMsg = document.querySelector('#outputMsg')
|
|
|
|
let serverStatus = 'offline'
|
|
|
|
function setStatus(statusType, msg, msgType) {
|
|
let el = ''
|
|
|
|
if (statusType === 'server') {
|
|
el = '#serverStatus'
|
|
serverStatus = msg
|
|
} 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
|
|
}
|
|
}
|
|
|
|
function playSound() {
|
|
const audio = new Audio('/media/ding.mp3')
|
|
audio.volume = 0.2
|
|
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')
|
|
}
|
|
}
|
|
|
|
async function makeImage() {
|
|
setStatus('request', 'fetching..')
|
|
|
|
makeImageBtn.innerHTML = 'Processing..'
|
|
makeImageBtn.disabled = true
|
|
|
|
outputMsg.innerHTML = 'Fetching..'
|
|
|
|
function logError(msg, res) {
|
|
outputMsg.innerHTML = '<span style="color: red">Error: ' + msg + '</span>'
|
|
console.log('request error', res)
|
|
setStatus('request', 'error', 'error')
|
|
}
|
|
|
|
let seed = (randomSeedField.checked ? Math.floor(Math.random() * 10000) : seedField.value)
|
|
|
|
let reqBody = {
|
|
prompt: promptField.value,
|
|
num_outputs: numOutputsField.value,
|
|
num_inference_steps: numInferenceStepsField.value,
|
|
guidance_scale: guidanceScaleField.value / 10,
|
|
width: widthField.value,
|
|
height: heightField.value,
|
|
seed: seed,
|
|
}
|
|
|
|
if (initImagePreview.src.indexOf('data:image/png;base64') !== -1) {
|
|
reqBody['init_image'] = initImagePreview.src
|
|
reqBody['prompt_strength'] = promptStrengthField.value / 10
|
|
}
|
|
|
|
let res = ''
|
|
let time = new Date().getTime()
|
|
|
|
try {
|
|
res = await fetch('/image', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(reqBody)
|
|
})
|
|
|
|
if (res.status != 200) {
|
|
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 {
|
|
logError("Stable Diffusion is still starting up, please wait. If this goes on beyond a few minutes, Stable Diffusion has probably crashed.", res)
|
|
}
|
|
res = undefined
|
|
} 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
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.log('request error', e)
|
|
setStatus('request', 'error', 'error')
|
|
}
|
|
|
|
makeImageBtn.innerHTML = 'Make Image'
|
|
makeImageBtn.disabled = false
|
|
|
|
playSound()
|
|
|
|
if (!res) {
|
|
return
|
|
}
|
|
|
|
time = new Date().getTime() - time
|
|
time /= 1000
|
|
|
|
outputMsg.innerHTML = 'Processed in ' + time + ' seconds. Seed: ' + seed
|
|
|
|
imagesContainer.innerHTML = ''
|
|
|
|
for (let idx in res.output) {
|
|
let imgBody = ''
|
|
|
|
try {
|
|
imgBody = res.output[idx]
|
|
} catch (e) {
|
|
console.log(imgBody)
|
|
setStatus('request', 'invalid image', 'error')
|
|
return
|
|
}
|
|
|
|
let imgItem = document.createElement('div')
|
|
imgItem.className = 'imgItem'
|
|
|
|
let img = document.createElement('img')
|
|
img.width = parseInt(reqBody.width)
|
|
img.height = parseInt(reqBody.height)
|
|
img.src = imgBody
|
|
|
|
let imgUseBtn = document.createElement('button')
|
|
imgUseBtn.className = 'imgUseBtn'
|
|
imgUseBtn.innerHTML = 'Use as Input'
|
|
|
|
imgItem.appendChild(img)
|
|
imgItem.appendChild(imgUseBtn)
|
|
imagesContainer.appendChild(imgItem)
|
|
|
|
imgUseBtn.addEventListener('click', function() {
|
|
initImageSelector.value = null
|
|
initImagePreview.src = imgBody
|
|
|
|
initImagePreviewContainer.style.display = 'block'
|
|
promptStrengthContainer.style.display = 'block'
|
|
|
|
randomSeedField.checked = false
|
|
seedField.value = seed
|
|
seedField.disabled = false
|
|
})
|
|
}
|
|
|
|
setStatus('request', 'done', 'success')
|
|
|
|
if (randomSeedField.checked) {
|
|
seedField.value = seed
|
|
}
|
|
}
|
|
|
|
makeImageBtn.addEventListener('click', makeImage)
|
|
|
|
configBox.style.display = 'none'
|
|
|
|
showConfigToggle.addEventListener('click', function() {
|
|
configBox.style.display = (configBox.style.display === 'none' ? 'block' : 'none')
|
|
showConfigToggle.innerHTML = (configBox.style.display === 'none' ? 'show' : 'hide')
|
|
return false
|
|
})
|
|
|
|
function updateGuidanceScale() {
|
|
guidanceScaleValueLabel.innerHTML = guidanceScaleField.value / 10
|
|
}
|
|
|
|
guidanceScaleField.addEventListener('input', updateGuidanceScale)
|
|
updateGuidanceScale()
|
|
|
|
function updatePromptStrength() {
|
|
promptStrengthValueLabel.innerHTML = promptStrengthField.value / 10
|
|
}
|
|
|
|
promptStrengthField.addEventListener('input', updatePromptStrength)
|
|
updatePromptStrength()
|
|
|
|
function checkRandomSeed() {
|
|
if (randomSeedField.checked) {
|
|
seedField.disabled = true
|
|
seedField.value = "random"
|
|
} else {
|
|
seedField.disabled = false
|
|
}
|
|
}
|
|
randomSeedField.addEventListener('input', checkRandomSeed)
|
|
checkRandomSeed()
|
|
|
|
function showInitImagePreview() {
|
|
if (initImageSelector.files.length === 0) {
|
|
initImagePreviewContainer.style.display = 'none'
|
|
promptStrengthContainer.style.display = 'none'
|
|
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'
|
|
promptStrengthContainer.style.display = 'block'
|
|
})
|
|
|
|
if (file) {
|
|
reader.readAsDataURL(file)
|
|
}
|
|
}
|
|
initImageSelector.addEventListener('change', showInitImagePreview)
|
|
showInitImagePreview()
|
|
|
|
initImageClearBtn.addEventListener('click', function() {
|
|
initImageSelector.value = null
|
|
initImagePreview.src = ''
|
|
initImagePreviewContainer.style.display = 'none'
|
|
promptStrengthContainer.style.display = 'none'
|
|
})
|
|
|
|
setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
|
|
</script>
|
|
|
|
</html>
|