forked from extern/easydiffusion
New UI; A library of image modifier tags like 'realistic', 'artstation', 'pencil sketch' etc
This commit is contained in:
cmdr2
parent
05434d3575
commit
7dc1c54578
472
index.html
472
index.html
@ -5,6 +5,8 @@
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 11pt;
|
||||
background-color: rgb(32, 33, 36);
|
||||
color: #eee;
|
||||
}
|
||||
a {
|
||||
color: rgb(0, 102, 204);
|
||||
@ -12,17 +14,11 @@
|
||||
a:visited {
|
||||
color: rgb(0, 102, 204);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: rgb(32, 33, 36);
|
||||
color: #eee;
|
||||
}
|
||||
}
|
||||
label {
|
||||
font-size: 10pt;
|
||||
}
|
||||
#prompt {
|
||||
width: 50vw;
|
||||
width: 100%;
|
||||
height: 50pt;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
@ -32,10 +28,11 @@
|
||||
}
|
||||
.image_preview_container {
|
||||
display: none;
|
||||
margin-top: 10pt;
|
||||
}
|
||||
.image_clear_btn {
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
transform: translateX(-50%) translateY(-35%);
|
||||
background: black;
|
||||
color: white;
|
||||
border: 2pt solid #ccc;
|
||||
@ -45,26 +42,31 @@
|
||||
border-radius: 8pt;
|
||||
width: 16pt;
|
||||
height: 16pt;
|
||||
font-size: 10pt;
|
||||
font-family: Verdana;
|
||||
font-size: 8pt;
|
||||
}
|
||||
#configHeader {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 10pt;
|
||||
}
|
||||
#config {
|
||||
#editor-settings-entries {
|
||||
font-size: 9pt;
|
||||
margin-bottom: 5px;
|
||||
padding-left: 10px;
|
||||
list-style-type: none;
|
||||
}
|
||||
#editor-settings-entries li {
|
||||
padding-bottom: 3pt;
|
||||
}
|
||||
#guidance_scale {
|
||||
transform: translateY(30%);
|
||||
}
|
||||
#outputMsg {
|
||||
font-size: small;
|
||||
}
|
||||
#footer {
|
||||
border-top: 1px solid #999;
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
font-size: small;
|
||||
padding-left: 10pt;
|
||||
background: none;
|
||||
}
|
||||
#footer-legal {
|
||||
font-size: 8pt;
|
||||
}
|
||||
.imgSeedLabel {
|
||||
position: absolute;
|
||||
@ -98,21 +100,184 @@
|
||||
.imgItemInfo {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 75%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
@media screen and (max-width: 1400px) {
|
||||
#container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
#meta small {
|
||||
font-size: 11pt;
|
||||
}
|
||||
#editor {
|
||||
padding: 5px;
|
||||
}
|
||||
#editor label {
|
||||
font-weight: bold;
|
||||
}
|
||||
#preview {
|
||||
padding: 5px;
|
||||
}
|
||||
#editor-inputs {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#editor-inputs-prompt {
|
||||
flex: 1;
|
||||
}
|
||||
#editor-inputs .row {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
#makeImage {
|
||||
border-radius: 6px;
|
||||
}
|
||||
#editor-modifiers h5 {
|
||||
padding: 5pt 0;
|
||||
margin: 0;
|
||||
}
|
||||
#makeImage {
|
||||
flex: 0 0 70px;
|
||||
background: rgb(80, 0, 185);
|
||||
border: 2px solid rgb(40, 0, 78);
|
||||
color: rgb(255, 221, 255);
|
||||
width: 100%;
|
||||
height: 30pt;
|
||||
}
|
||||
#makeImage:hover {
|
||||
background: rgb(93, 0, 214);
|
||||
}
|
||||
.flex-container {
|
||||
display: flex;
|
||||
}
|
||||
.col-50 {
|
||||
flex: 50%;
|
||||
}
|
||||
.col-free {
|
||||
flex: 1;
|
||||
}
|
||||
.collapsible {
|
||||
cursor: pointer;
|
||||
}
|
||||
.collapsible-content {
|
||||
display: none;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.collapsible-content h5 {
|
||||
padding: 5pt 0pt;
|
||||
margin: 0;
|
||||
font-size: 10pt;
|
||||
}
|
||||
.collapsible-handle {
|
||||
color: white;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.panel-box {
|
||||
background: rgb(44, 45, 48);
|
||||
border: 1px solid rgb(47, 49, 53);
|
||||
border-radius: 7px;
|
||||
padding: 5px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.panel-box h4 {
|
||||
margin: 0;
|
||||
padding: 2px 0;
|
||||
}
|
||||
.prompt-modifier-tag {
|
||||
border: 1px solid rgb(10, 0, 24);
|
||||
border-radius: 4px;
|
||||
padding: 0pt 3pt;
|
||||
margin-right: 2pt;
|
||||
cursor: pointer;
|
||||
display: inline;
|
||||
background: rgb(163, 163, 163);
|
||||
color: black;
|
||||
line-height: 25pt;
|
||||
float: left;
|
||||
font-size: 9pt;
|
||||
}
|
||||
.prompt-modifier-tag:hover {
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
#editor-modifiers-entries .prompt-modifier-tag {
|
||||
background: #110f0f;
|
||||
color: rgb(212, 212, 212);
|
||||
margin-bottom: 4pt;
|
||||
font-size: 10pt;
|
||||
}
|
||||
#editor-modifiers-entries .prompt-modifier-tag:hover {
|
||||
background: rgb(163, 163, 163);
|
||||
color: black;
|
||||
}
|
||||
#editor-modifiers .editor-modifiers-leaf {
|
||||
padding-top: 10pt;
|
||||
padding-bottom: 10pt;
|
||||
}
|
||||
#preview {
|
||||
margin-left: 20pt;
|
||||
}
|
||||
img {
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.line-separator {
|
||||
background: rgb(56, 56, 56);
|
||||
height: 1pt;
|
||||
margin: 15pt 0;
|
||||
}
|
||||
#editor-inputs-tags-container {
|
||||
margin-top: 5pt;
|
||||
display: none;
|
||||
}
|
||||
#server-status {
|
||||
float: right;
|
||||
}
|
||||
#server-status-color {
|
||||
width: 10pt;
|
||||
height: 10pt;
|
||||
border-radius: 5pt;
|
||||
background-color: rgb(128, 87, 0);
|
||||
/* background-color: rgb(197, 1, 1); */
|
||||
float: left;
|
||||
transform: translateY(15%);
|
||||
}
|
||||
#server-status-msg {
|
||||
color: rgb(128, 87, 0);
|
||||
padding-left: 2pt;
|
||||
}
|
||||
#preview-prompt {
|
||||
font-size: 16pt;
|
||||
margin-bottom: 10pt;
|
||||
}
|
||||
</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/>
|
||||
<div id="container">
|
||||
<div class="flex-container">
|
||||
<div id="editor" class="col-50">
|
||||
<div id="meta">
|
||||
<div id="server-status">
|
||||
<div id="server-status-color"> </div>
|
||||
<span id="server-status-msg">server starting..</span>
|
||||
</div>
|
||||
<h1>Stable Diffusion UI <small>v1</small></h1>
|
||||
</div>
|
||||
<div id="editor-inputs">
|
||||
<div id="editor-inputs-prompt" class="row">
|
||||
<label for="prompt">Prompt</label>
|
||||
<textarea id="prompt" class="col-free">a photograph of an astronaut riding a horse</textarea>
|
||||
</div>
|
||||
|
||||
<div id="editor-inputs-init-image" class="row">
|
||||
<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" class="image_preview_container">
|
||||
<img id="init_image_preview" src="" width="100" height="100" />
|
||||
<button id="init_image_clear" class="image_clear_btn">X</button>
|
||||
</div><br/>
|
||||
</div>
|
||||
|
||||
<div id="mask_setting">
|
||||
<label for="mask"><b>Image Mask:</b> (optional) </label> <input id="mask" name="mask" type="file" /> </button><br/>
|
||||
@ -121,31 +286,61 @@
|
||||
<button id="mask_clear" class="image_clear_btn">X</button>
|
||||
</div>
|
||||
</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" 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/>
|
||||
<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" size="4" 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><br/>
|
||||
<input id="sound_toggle" name="sound_toggle" type="checkbox" checked> <label for="sound_toggle">Play sound on task completion</label><br/>
|
||||
</div>
|
||||
|
||||
<button id="makeImage">Make Image</button> <br/><br/>
|
||||
<div id="editor-inputs-tags-container" class="row">
|
||||
<label>Tags: <small>(click a tag to remove it)</small></label>
|
||||
<div id="editor-inputs-tags-list">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="makeImage">Make Image</button>
|
||||
</div>
|
||||
|
||||
<div class="line-separator"> </div>
|
||||
|
||||
<div id="editor-settings" class="panel-box">
|
||||
<h4 class="collapsible">Advanced Settings</h4>
|
||||
<ul id="editor-settings-entries" class="collapsible-content">
|
||||
<li><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></li>
|
||||
<li><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></li>
|
||||
<li><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></li>
|
||||
<li><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></li>
|
||||
<li><label for="num_inference_steps">Number of inference steps:</label> <input id="num_inference_steps" name="num_inference_steps" size="4" value="50"></li>
|
||||
<li><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></li>
|
||||
<li><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></li>
|
||||
<li> </li>
|
||||
<li><input id="sound_toggle" name="sound_toggle" type="checkbox" checked> <label for="sound_toggle">Play sound on task completion</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="editor-modifiers" class="panel-box">
|
||||
<h4 class="collapsible">Image Modifiers (art styles, tags etc)</h4>
|
||||
<div id="editor-modifiers-entries" class="collapsible-content">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="preview" class="col-50">
|
||||
<div id="preview-prompt">Type a prompt and press the "Make Image" button.<br/><br/>You can also add modifiers like "Realistic", "Pencil Sketch", "ArtStation" etc by browsing through the "Image Modifiers" section and selecting the desired modifiers.<br/><br/>Click "Advanced Settings" for additional settings like seed, image size, number of images to generate etc.<br/><br/>Enjoy! :)</div>
|
||||
|
||||
<div id="outputMsg"></div>
|
||||
<div id="current-images" class="img-preview">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="images"></div>
|
||||
<div class="line-separator"> </div>
|
||||
|
||||
<div id="footer">
|
||||
<div id="footer" class="panel-box">
|
||||
<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>
|
||||
<div id="footer-legal">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
@ -171,7 +366,7 @@ let promptStrengthValueLabel = document.querySelector('#prompt_strength_value')
|
||||
|
||||
let makeImageBtn = document.querySelector('#makeImage')
|
||||
|
||||
let imagesContainer = document.querySelector('#images')
|
||||
let imagesContainer = document.querySelector('#current-images')
|
||||
let initImagePreviewContainer = document.querySelector('#init_image_preview_container')
|
||||
let initImageClearBtn = document.querySelector('#init_image_clear')
|
||||
let promptStrengthContainer = document.querySelector('#prompt_strength_container')
|
||||
@ -180,13 +375,23 @@ let maskSetting = document.querySelector('#mask_setting')
|
||||
let maskImagePreviewContainer = document.querySelector('#mask_preview_container')
|
||||
let maskImageClearBtn = document.querySelector('#mask_clear')
|
||||
|
||||
let editorModifierEntries = document.querySelector('#editor-modifiers-entries')
|
||||
let editorModifierTagsList = document.querySelector('#editor-inputs-tags-list')
|
||||
let editorTagsContainer = document.querySelector('#editor-inputs-tags-container')
|
||||
|
||||
let previewPrompt = document.querySelector('#preview-prompt')
|
||||
|
||||
let showConfigToggle = document.querySelector('#configToggleBtn')
|
||||
let configBox = document.querySelector('#config')
|
||||
// let configBox = document.querySelector('#config')
|
||||
let outputMsg = document.querySelector('#outputMsg')
|
||||
|
||||
let soundToggle = document.querySelector('#sound_toggle')
|
||||
|
||||
let serverStatusColor = document.querySelector('#server-status-color')
|
||||
let serverStatusMsg = document.querySelector('#server-status-msg')
|
||||
|
||||
let serverStatus = 'offline'
|
||||
let activeTags = []
|
||||
|
||||
function isSoundEnabled() {
|
||||
if (localStorage.getItem(SOUND_ENABLED_KEY) === 'false') {
|
||||
@ -196,23 +401,21 @@ function isSoundEnabled() {
|
||||
}
|
||||
|
||||
function setStatus(statusType, msg, msgType) {
|
||||
let el = ''
|
||||
|
||||
if (statusType === 'server') {
|
||||
el = '#serverStatus'
|
||||
serverStatus = msg
|
||||
} else if (statusType === 'request') {
|
||||
el = '#reqStatus'
|
||||
if (statusType !== 'server') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (msgType == 'error') {
|
||||
msg = '<span style="color: red">' + msg + '<span>'
|
||||
// msg = '<span style="color: red">' + msg + '<span>'
|
||||
serverStatusColor.style.backgroundColor = 'red'
|
||||
serverStatusMsg.style.color = 'red'
|
||||
serverStatusMsg.innerHTML = 'server offline'
|
||||
} else if (msgType == 'success') {
|
||||
msg = '<span style="color: green">' + msg + '<span>'
|
||||
}
|
||||
|
||||
if (el) {
|
||||
document.querySelector(el).innerHTML = msg
|
||||
// msg = '<span style="color: green">' + msg + '<span>'
|
||||
serverStatusColor.style.backgroundColor = 'green'
|
||||
serverStatusMsg.style.color = 'green'
|
||||
serverStatusMsg.innerHTML = 'server online'
|
||||
serverStatus = 'online'
|
||||
}
|
||||
}
|
||||
|
||||
@ -284,7 +487,7 @@ async function doMakeImage(reqBody) {
|
||||
}
|
||||
|
||||
if (!res) {
|
||||
return
|
||||
return false
|
||||
}
|
||||
|
||||
for (let idx in res.output) {
|
||||
@ -357,9 +560,16 @@ async function doMakeImage(reqBody) {
|
||||
imgItemInfo.style.opacity = 0.5
|
||||
})
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
async function makeImage() {
|
||||
if (serverStatus !== 'online') {
|
||||
logError('The server is still starting up..')
|
||||
return
|
||||
}
|
||||
|
||||
setStatus('request', 'fetching..')
|
||||
|
||||
makeImageBtn.innerHTML = 'Processing..'
|
||||
@ -374,13 +584,21 @@ async function makeImage() {
|
||||
let batchCount = Math.ceil(numOutputsTotal / numOutputsParallel)
|
||||
let batchSize = numOutputsParallel
|
||||
|
||||
let prompt = promptField.value
|
||||
if (activeTags.length > 0) {
|
||||
let promptTags = activeTags.join(", ")
|
||||
prompt += ", " + promptTags
|
||||
}
|
||||
|
||||
previewPrompt.innerHTML = prompt
|
||||
|
||||
let reqBody = {
|
||||
prompt: promptField.value,
|
||||
prompt: prompt,
|
||||
num_outputs: batchSize,
|
||||
num_inference_steps: numInferenceStepsField.value,
|
||||
guidance_scale: parseInt(guidanceScaleField.value) / 10,
|
||||
width: widthField.value,
|
||||
height: heightField.value,
|
||||
height: heightField.value
|
||||
}
|
||||
|
||||
if (imageRegex.test(initImagePreview.src)) {
|
||||
@ -395,12 +613,17 @@ async function makeImage() {
|
||||
let time = new Date().getTime()
|
||||
imagesContainer.innerHTML = ''
|
||||
|
||||
let successCount = 0
|
||||
|
||||
for (let i = 0; i < batchCount; i++) {
|
||||
reqBody['seed'] = seed + i
|
||||
|
||||
await doMakeImage(reqBody)
|
||||
let success = await doMakeImage(reqBody)
|
||||
|
||||
if (success) {
|
||||
outputMsg.innerHTML = 'Processed batch ' + (i+1) + '/' + batchCount
|
||||
successCount++
|
||||
}
|
||||
}
|
||||
|
||||
makeImageBtn.innerHTML = 'Make Image'
|
||||
@ -413,9 +636,11 @@ async function makeImage() {
|
||||
time = new Date().getTime() - time
|
||||
time /= 1000
|
||||
|
||||
if (successCount === batchCount) {
|
||||
outputMsg.innerHTML = 'Processed ' + numOutputsTotal + ' images in ' + time + ' seconds'
|
||||
|
||||
setStatus('request', 'done', 'success')
|
||||
}
|
||||
|
||||
if (randomSeedField.checked) {
|
||||
seedField.value = seed
|
||||
@ -447,13 +672,13 @@ soundToggle.checked = isSoundEnabled();
|
||||
|
||||
makeImageBtn.addEventListener('click', makeImage)
|
||||
|
||||
configBox.style.display = 'none'
|
||||
// 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
|
||||
})
|
||||
// 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
|
||||
@ -548,8 +773,125 @@ maskImageClearBtn.addEventListener('click', function() {
|
||||
maskImagePreview.src = ''
|
||||
maskImagePreviewContainer.style.display = 'none'
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
function createCollapsibles(node) {
|
||||
if (!node) {
|
||||
node = document
|
||||
}
|
||||
|
||||
setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
|
||||
let collapsibles = node.querySelectorAll(".collapsible")
|
||||
collapsibles.forEach(function(c) {
|
||||
let handle = document.createElement('span')
|
||||
handle.className = 'collapsible-handle'
|
||||
handle.innerHTML = '➕'
|
||||
c.insertBefore(handle, c.firstChild)
|
||||
|
||||
c.addEventListener('click', function() {
|
||||
this.classList.toggle("active")
|
||||
let content = this.nextElementSibling
|
||||
if (content.style.display === "block") {
|
||||
content.style.display = "none"
|
||||
handle.innerHTML = '➕' // plus
|
||||
} else {
|
||||
content.style.display = "block"
|
||||
handle.innerHTML = '➖' // minus
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
createCollapsibles()
|
||||
|
||||
function refreshTagsList() {
|
||||
editorModifierTagsList.innerHTML = ''
|
||||
|
||||
if (activeTags.length == 0) {
|
||||
editorTagsContainer.style.display = 'none'
|
||||
return
|
||||
} else {
|
||||
editorTagsContainer.style.display = 'block'
|
||||
}
|
||||
|
||||
activeTags.forEach(function(tag) {
|
||||
let el = document.createElement('div')
|
||||
el.className = 'prompt-modifier-tag'
|
||||
el.innerHTML = tag
|
||||
|
||||
editorModifierTagsList.appendChild(el)
|
||||
|
||||
el.addEventListener('click', function() {
|
||||
let idx = activeTags.indexOf(tag)
|
||||
if (idx !== -1) {
|
||||
activeTags.splice(idx, 1)
|
||||
refreshTagsList()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
let brk = document.createElement('br')
|
||||
brk.style.clear = 'both'
|
||||
editorModifierTagsList.appendChild(brk)
|
||||
}
|
||||
|
||||
async function loadModifiers() {
|
||||
try {
|
||||
let res = await fetch('/modifiers.json')
|
||||
if (res.status === 200) {
|
||||
res = await res.json()
|
||||
|
||||
res.forEach(function(m) {
|
||||
let title = m[0]
|
||||
let modifiers = m[1]
|
||||
|
||||
let titleEl = document.createElement('h5')
|
||||
titleEl.className = 'collapsible'
|
||||
titleEl.innerHTML = title
|
||||
|
||||
let modifiersEl = document.createElement('div')
|
||||
modifiersEl.classList.add('collapsible-content', 'editor-modifiers-leaf')
|
||||
|
||||
modifiers.forEach(function(modifier) {
|
||||
let tagEl = document.createElement('div')
|
||||
tagEl.className = 'prompt-modifier-tag'
|
||||
tagEl.innerHTML = modifier
|
||||
|
||||
modifiersEl.appendChild(tagEl)
|
||||
|
||||
tagEl.addEventListener('click', function() {
|
||||
if (activeTags.includes(modifier)) {
|
||||
return
|
||||
}
|
||||
|
||||
activeTags.push(modifier)
|
||||
refreshTagsList()
|
||||
})
|
||||
})
|
||||
let brk = document.createElement('br')
|
||||
brk.style.clear = 'both'
|
||||
modifiersEl.appendChild(brk)
|
||||
|
||||
let e = document.createElement('div')
|
||||
e.appendChild(titleEl)
|
||||
e.appendChild(modifiersEl)
|
||||
|
||||
editorModifierEntries.appendChild(e)
|
||||
})
|
||||
|
||||
createCollapsibles(editorModifierEntries)
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('error fetching modifiers', e)
|
||||
}
|
||||
}
|
||||
|
||||
async function init() {
|
||||
await loadModifiers()
|
||||
|
||||
setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
|
||||
healthCheck()
|
||||
}
|
||||
|
||||
init()
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
4
main.py
4
main.py
@ -67,3 +67,7 @@ async def image(req : ImageRequest):
|
||||
@app.get('/media/ding.mp3')
|
||||
def read_root():
|
||||
return FileResponse('media/ding.mp3')
|
||||
|
||||
@app.get('/modifiers.json')
|
||||
def read_modifiers():
|
||||
return FileResponse('modifiers.json')
|
||||
|
||||
92
modifiers.json
Normal file
92
modifiers.json
Normal file
@ -0,0 +1,92 @@
|
||||
[
|
||||
["Drawing Style", [
|
||||
"Sketch",
|
||||
"Doodle",
|
||||
"Children's Drawing",
|
||||
"Line Art",
|
||||
"Dot Art",
|
||||
"Crosshatch",
|
||||
"Detailed and Intricate",
|
||||
"Cel Shading"
|
||||
]],
|
||||
["Visual Style", [
|
||||
"2D",
|
||||
"Cartoon",
|
||||
"8-bit",
|
||||
"16-bit",
|
||||
"Graphic Novel",
|
||||
"Visual Novel",
|
||||
"Street Art",
|
||||
"Fantasy",
|
||||
"Realistic",
|
||||
"Photo",
|
||||
"Hard Edge Painting",
|
||||
"Mural",
|
||||
"Mosaic",
|
||||
"Hydrodipped",
|
||||
"Modern Art",
|
||||
"Concept Art",
|
||||
"Digital Art",
|
||||
"CGI",
|
||||
"Anaglyph",
|
||||
"Comic Book",
|
||||
"Lithography"
|
||||
]],
|
||||
["Pen", [
|
||||
"Graphite",
|
||||
"Colored Pencil",
|
||||
"Ink",
|
||||
"Chalk",
|
||||
"Pastel Art",
|
||||
"Oil Paint"
|
||||
]],
|
||||
["Carving and Etching", [
|
||||
"Etching",
|
||||
"Wood-Carving",
|
||||
"Papercutting",
|
||||
"Paper-Mache",
|
||||
"Paper Model",
|
||||
"Linocut",
|
||||
"Pyrography"
|
||||
]],
|
||||
["Camera", [
|
||||
"HD",
|
||||
"Color Grading",
|
||||
"Film Grain",
|
||||
"White Balance",
|
||||
"Golden Hour",
|
||||
"Glamor Shot",
|
||||
"War Photography",
|
||||
"Lens Flare",
|
||||
"Polaroid",
|
||||
"Vintage"
|
||||
]],
|
||||
["Color", [
|
||||
"Colorful",
|
||||
"Electric Colors",
|
||||
"Warm Color Palette",
|
||||
"Infrared",
|
||||
"Beautiful Lighting"
|
||||
]],
|
||||
["Emotions", [
|
||||
"Happy",
|
||||
"Excited",
|
||||
"Sad",
|
||||
"Lonely",
|
||||
"Angry",
|
||||
"Good",
|
||||
"Evil"
|
||||
]],
|
||||
["Style of an artist or community", [
|
||||
"by Andy Warhol",
|
||||
"Artstation",
|
||||
"by Asaf Hanuka",
|
||||
"by Aubrey Beardsley",
|
||||
"by H.R. Giger",
|
||||
"by Hayao Mizaki",
|
||||
"by Salvador Dali",
|
||||
"by Tivadar Csontváry Kosztka",
|
||||
"by Lisa Frank",
|
||||
"by Pablo Piccaso"
|
||||
]]
|
||||
]
|
||||
Loading…
Reference in New Issue
Block a user