New UI; A library of image modifier tags like 'realistic', 'artstation', 'pencil sketch' etc

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 {
+    #editor-settings-entries {
-        margin-top: 5px;
-        margin-bottom: 5px;
-        font-size: 10pt;
-    }
-    #config {
         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,54 +100,247 @@
     .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>
+<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">&nbsp;</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>
 
-    <br/>
+                <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>
 
-    <b>Prompt:</b><br/>
+                    <div id="mask_setting">
-    <textarea id="prompt">a photograph of an astronaut riding a horse</textarea><br/>
+                        <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>
+                    </div>
+                </div>
 
-    <label for="init_image"><b>Initial Image:</b> (optional) </label> <input id="init_image" name="init_image" type="file" /> </button><br/>
+                <div id="editor-inputs-tags-container" class="row">
-    <div id="init_image_preview_container" class="image_preview_container">
+                    <label>Tags: <small>(click a tag to remove it)</small></label>
-        <img id="init_image_preview" src="" width="100" height="100" />
+                    <div id="editor-inputs-tags-list">
-        <button id="init_image_clear" class="image_clear_btn">X</button>
+                    </div>
-    </div><br/>
+                </div>
 
-    <div id="mask_setting">
+                <button id="makeImage">Make Image</button>
-        <label for="mask"><b>Image Mask:</b> (optional) </label> <input id="mask" name="mask" type="file" /> </button><br/>
+            </div>
-        <div id="mask_preview_container" class="image_preview_container">
+
-            <img id="mask_preview" src="" width="100" height="100" />
+            <div class="line-separator">&nbsp;</div>
-            <button id="mask_clear" class="image_clear_btn">X</button>
+
+            <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>&nbsp;</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="configHeader"><b>Advanced settings:</b> [<a id="configToggleBtn" href="#">show</a>]</div>
+    <div class="line-separator">&nbsp;</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="footer" class="panel-box">
-
-    <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>
+        <div id="footer-legal">
-        <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><b>Disclaimer:</b> The authors of this project are not responsible for any content generated using this interface.</p>
-        <p>By using this software, you consent to the terms and conditions of the license.</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') {
-
+        return;
-    if (statusType === 'server') {
-        el = '#serverStatus'
-        serverStatus = msg
-    } else if (statusType === 'request') {
-        el = '#reqStatus'
     }
 
     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>'
+        // msg = '<span style="color: green">' + msg + '<span>'
-    }
+        serverStatusColor.style.backgroundColor = 'green'
-
+        serverStatusMsg.style.color = 'green'
-    if (el) {
+        serverStatusMsg.innerHTML = 'server online'
-        document.querySelector(el).innerHTML = msg
+        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)
 
-        outputMsg.innerHTML = 'Processed batch ' + (i+1) + '/' + batchCount
+        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
 
-    outputMsg.innerHTML = 'Processed ' + numOutputsTotal + ' images in ' + time + ' seconds'
+    if (successCount === batchCount) {
+        outputMsg.innerHTML = 'Processed ' + numOutputsTotal + ' images in ' + time + ' seconds'
 
-    setStatus('request', 'done', 'success')
+        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() {
+// showConfigToggle.addEventListener('click', function() {
-    configBox.style.display = (configBox.style.display === 'none' ? 'block' : 'none')
+//     configBox.style.display = (configBox.style.display === 'none' ? 'block' : 'none')
-    showConfigToggle.innerHTML = (configBox.style.display === 'none' ? 'show' : 'hide')
+//     showConfigToggle.innerHTML = (configBox.style.display === 'none' ? 'show' : 'hide')
-    return false
+//     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 = '&#x2795;'
+        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 = '&#x2795;' // plus
+            } else {
+                content.style.display = "block"
+                handle.innerHTML = '&#x2796;' // 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>

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')

modifiers.json

@@ -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"
+    ]]
+]