From 8d21ee23f4e4d6c72e91748cc52c01b047521d86 Mon Sep 17 00:00:00 2001
From: cmdr2 <secondary.cmdr2@gmail.com>
Date: Fri, 23 Sep 2022 19:48:48 +0530
Subject: [PATCH] Move the CSS and JS into separate files

---
 ui/index.html     | 1577 +--------------------------------------------
 ui/media/main.css |  359 +++++++++++
 ui/media/main.js  | 1205 ++++++++++++++++++++++++++++++++++
 3 files changed, 1570 insertions(+), 1571 deletions(-)
 create mode 100644 ui/media/main.css
 create mode 100644 ui/media/main.js
diff --git a/ui/index.html b/ui/index.html
index dbcc891e..c84dbeff 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -1,380 +1,21 @@
 <!DOCTYPE html>
 <html>
+<head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/png" href="/media/favicon-16x16.png" sizes="16x16">
     <link rel="icon" type="image/png" href="/media/favicon-32x32.png" sizes="32x32">
-    <style>
-    body {
-        font-family: Arial, Helvetica, sans-serif;
-        font-size: 11pt;
-        background-color: rgb(32, 33, 36);
-        color: #eee;
-    }
-    a {
-        color: rgb(0, 102, 204);
-    }
-    a:visited {
-        color: rgb(0, 102, 204);
-    }
-    label {
-        font-size: 10pt;
-    }
-    #prompt {
-        width: 100%;
-        height: 65pt;
-        box-sizing: border-box;
-    }
-    @media screen and (max-width: 600px) {
-        #prompt {
-            width: 95%;
-        }
-    }
-    .image_preview_container {
-        /* display: none; */
-        margin-top: 10pt;
-    }
-    .image_clear_btn {
-        position: absolute;
-        transform: translateX(-50%) translateY(-35%);
-        background: black;
-        color: white;
-        border: 2pt solid #ccc;
-        padding: 0;
-        cursor: pointer;
-        outline: inherit;
-        border-radius: 8pt;
-        width: 16pt;
-        height: 16pt;
-        font-family: Verdana;
-        font-size: 8pt;
-    }
-    .settings-box ul {
-        font-size: 9pt;
-        margin-bottom: 5px;
-        padding-left: 10px;
-        list-style-type: none;
-    }
-    .settings-box li {
-        padding-bottom: 4pt;
-    }
-    .editor-slider {
-        transform: translateY(30%);
-    }
-    #outputMsg {
-        font-size: small;
-    }
-    #progressBar {
-        font-size: small;
-    }
-    #footer {
-        font-size: small;
-        padding-left: 10pt;
-        background: none;
-    }
-    #footer-legal {
-        font-size: 8pt;
-    }
-    .imgSeedLabel {
-        position: absolute;
-        transform: translateX(-100%);
-        margin-top: 5pt;
-        margin-left: -5pt;
-        font-size: 10pt;
-
-        background-color: #333;
-        opacity: 0.8;
-        color: #ddd;
-        border-radius: 3pt;
-        padding: 1pt 3pt;
-    }
-    .imgUseBtn {
-        position: absolute;
-        transform: translateX(-100%);
-        margin-top: 30pt;
-        margin-left: -5pt;
-    }
-    .imgSaveBtn {
-        position: absolute;
-        transform: translateX(-100%);
-        margin-top: 55pt;
-        margin-left: -5pt;
-    }
-    .imgItem {
-        display: inline;
-        padding-right: 10px;
-    }
-    .imgItemInfo {
-        opacity: 0.5;
-    }
-
-    #container {
-        width: 90%;
-        margin-left: auto;
-        margin-right: auto;
-    }
-    @media screen and (max-width: 1800px) {
-        #container {
-            width: 100%;
-        }
-    }
-    #logo small {
-        font-size: 11pt;
-    }
-    #editor {
-        padding: 5px;
-    }
-    #editor label {
-        font-weight: normal;
-    }
-    .settings-box label small {
-        color: rgb(153, 153, 153);
-    }
-    #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);
-    }
-    #stopImage {
-        flex: 0 0 70px;
-        background: rgb(132, 8, 0);
-        border: 2px solid rgb(122, 29, 0);
-        color: rgb(255, 221, 255);
-        width: 100%;
-        height: 30pt;
-        border-radius: 6px;
-        display: none;
-    }
-    #stopImage:hover {
-        background: rgb(214, 32, 0);
-    }
-    .flex-container {
-        display: flex;
-    }
-    .col-50 {
-        flex: 50%;
-    }
-    .col-fixed-10 {
-        flex: 0 0 400pt;
-    }
-    .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;
-    }
-    #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 {
-        display: inline;
-        float: right;
-        transform: translateY(-5pt);
-    }
-    #server-status-color {
-        /* width: 8pt;
-        height: 8pt;
-        border-radius: 4pt; */
-        font-size: 14pt;
-        color: rgb(128, 87, 0);
-        /* background-color: rgb(197, 1, 1); */
-        /* transform: translateY(15%); */
-        display: inline;
-    }
-    #server-status-msg {
-        color: rgb(128, 87, 0);
-        padding-left: 2pt;
-        font-size: 10pt;
-    }
-    #preview-prompt {
-        font-size: 16pt;
-        margin-bottom: 10pt;
-    }
-    #coffeeButton {
-        height: 23px;
-        transform: translateY(25%);
-    }
-
-    #inpaintingEditor {
-        width: 300pt;
-        height: 300pt;
-        margin-top: 5pt;
-    }
-    .drawing-board-canvas-wrapper {
-        background-size: 100% 100%;
-    }
-    #inpaintingEditor canvas {
-        opacity: 0.6;
-    }
-    #enable_mask {
-        margin-top: 8pt;
-    }
-
-    #top-nav {
-        padding-top: 3pt;
-        padding-bottom: 15pt;
-    }
-    #top-nav .icon {
-        padding-right: 4pt;
-        font-size: 14pt;
-        transform: translateY(1pt);
-    }
-    #logo {
-        display: inline;
-    }
-    #logo h1 {
-        display: inline;
-    }
-    #top-nav-items {
-        list-style-type: none;
-        display: inline;
-        float: right;
-    }
-    #top-nav-items > li {
-        float: left;
-        display: inline;
-        padding-left: 20pt;
-        cursor: default;
-    }
-    #initial-text {
-        padding-top: 15pt;
-        padding-left: 4pt;
-    }
-    .settings-subheader {
-        font-size: 10pt;
-        font-weight: bold;
-    }
-    .pl-5 {
-        padding-left: 5pt;
-    }
-    #system-settings {
-        width: 360pt;
-        transform: translateX(-100%) translateX(70pt);
-
-        padding-top: 10pt;
-        padding-bottom: 10pt;
-    }
-    #system-settings ul {
-        margin: 0;
-        padding: 0;
-    }
-    #system-settings li {
-        padding-left: 5pt;
-    }
-    #community-links {
-        list-style-type: none;
-        margin: 0;
-        padding: 12pt;
-        padding-bottom: 0pt;
-        transform: translateX(-15%);
-    }
-    #community-links li {
-        padding-bottom: 12pt;
-        display: block;
-        font-size: 10pt;
-    }
-    #community-links li .fa-fw {
-        padding-right: 2pt;
-    }
-    #community-links li a {
-        color: white;
-        text-decoration: none;
-    }
-    .dropdown {
-        overflow: hidden;
-    }
-    .dropdown-content {
-        display: none;
-        position: absolute;
-        z-index: 2;
-
-        background: rgb(18, 18, 19);
-        border: 2px solid rgb(37, 38, 41);
-        border-radius: 7px;
-        padding: 5px;
-        margin-bottom: 15px;
-        box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
-    }
-    .dropdown:hover .dropdown-content {
-        display: block;
-    }
-    </style>
-    <link rel="stylesheet" href="/media/modifier-thumbnails.css">
+    <link rel="stylesheet" href="/media/main.css?v=1">
+    <link rel="stylesheet" href="/media/modifier-thumbnails.css?v=1">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
     <link rel="stylesheet" href="/media/drawingboard.min.css">
     <script src="/media/jquery-3.6.1.min.js"></script>
     <script src="/media/drawingboard.min.js"></script>
-</html>
+</head>
 <body>
 <div id="container">
     <div id="top-nav">
         <div id="logo">
-            <h1>Stable Diffusion UI <small>v2.16 <span id="updateBranchLabel"></span></small></h1>
+            <h1>Stable Diffusion UI <small>v2.17 <span id="updateBranchLabel"></span></small></h1>
         </div>
         <ul id="top-nav-items">
             <li class="dropdown">
@@ -570,1214 +211,8 @@
 </div>
 </body>
 
+<script src="media/main.js?v=1"></script>
 <script>
-const SOUND_ENABLED_KEY = "soundEnabled"
-const SAVE_TO_DISK_KEY = "saveToDisk"
-const USE_CPU_KEY = "useCPU"
-const USE_FULL_PRECISION_KEY = "useFullPrecision"
-const USE_TURBO_MODE_KEY = "useTurboMode"
-const DISK_PATH_KEY = "diskPath"
-const ADVANCED_PANEL_OPEN_KEY = "advancedPanelOpen"
-const MODIFIERS_PANEL_OPEN_KEY = "modifiersPanelOpen"
-const USE_FACE_CORRECTION_KEY = "useFaceCorrection"
-const USE_UPSCALING_KEY = "useUpscaling"
-const SHOW_ONLY_FILTERED_IMAGE_KEY = "showOnlyFilteredImage"
-const STREAM_IMAGE_PROGRESS_KEY = "streamImageProgress"
-const HEALTH_PING_INTERVAL = 5 // seconds
-const MAX_INIT_IMAGE_DIMENSION = 768
-
-const IMAGE_REGEX = new RegExp('data:image/[A-Za-z]+;base64')
-
-let sessionId = new Date().getTime()
-
-let promptField = document.querySelector('#prompt')
-let numOutputsTotalField = document.querySelector('#num_outputs_total')
-let numOutputsParallelField = document.querySelector('#num_outputs_parallel')
-let numInferenceStepsField = document.querySelector('#num_inference_steps')
-let guidanceScaleSlider = document.querySelector('#guidance_scale_slider')
-let guidanceScaleField = document.querySelector('#guidance_scale')
-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 maskImageSelector = document.querySelector("#mask")
-let maskImagePreview = document.querySelector("#mask_preview")
-let turboField = document.querySelector('#turbo')
-let useCPUField = document.querySelector('#use_cpu')
-let useFullPrecisionField = document.querySelector('#use_full_precision')
-let saveToDiskField = document.querySelector('#save_to_disk')
-let diskPathField = document.querySelector('#diskPath')
-// let allowNSFWField = document.querySelector("#allow_nsfw")
-let useBetaChannelField = document.querySelector("#use_beta_channel")
-let promptStrengthSlider = document.querySelector('#prompt_strength_slider')
-let promptStrengthField = document.querySelector('#prompt_strength')
-let samplerField = document.querySelector('#sampler')
-let samplerSelectionContainer = document.querySelector("#samplerSelection")
-let useFaceCorrectionField = document.querySelector("#use_face_correction")
-let useUpscalingField = document.querySelector("#use_upscale")
-let upscaleModelField = document.querySelector("#upscale_model")
-let showOnlyFilteredImageField = document.querySelector("#show_only_filtered_image")
-let updateBranchLabel = document.querySelector("#updateBranchLabel")
-let streamImageProgressField = document.querySelector("#stream_image_progress")
-
-let makeImageBtn = document.querySelector('#makeImage')
-let stopImageBtn = document.querySelector('#stopImage')
-
-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')
-
-// let maskSetting = document.querySelector('#editor-inputs-mask_setting')
-// let maskImagePreviewContainer = document.querySelector('#mask_preview_container')
-// let maskImageClearBtn = document.querySelector('#mask_clear')
-let maskSetting = document.querySelector('#enable_mask')
-
-let editorModifierEntries = document.querySelector('#editor-modifiers-entries')
-let editorModifierTagsList = document.querySelector('#editor-inputs-tags-list')
-let editorTagsContainer = document.querySelector('#editor-inputs-tags-container')
-
-let previewImageField = document.querySelector('#preview-image')
-previewImageField.onchange = () => changePreviewImages(previewImageField.value);
-
-let modifierCardSizeSlider = document.querySelector('#modifier-card-size-slider')
-modifierCardSizeSlider.onchange = () => resizeModifierCards(modifierCardSizeSlider.value);
-
-let previewPrompt = document.querySelector('#preview-prompt')
-
-let showConfigToggle = document.querySelector('#configToggleBtn')
-// let configBox = document.querySelector('#config')
-let outputMsg = document.querySelector('#outputMsg')
-let progressBar = document.querySelector("#progressBar")
-
-let soundToggle = document.querySelector('#sound_toggle')
-
-let serverStatusColor = document.querySelector('#server-status-color')
-let serverStatusMsg = document.querySelector('#server-status-msg')
-
-let advancedPanelHandle = document.querySelector("#editor-settings .collapsible")
-let modifiersPanelHandle = document.querySelector("#editor-modifiers .collapsible")
-let inpaintingEditorContainer = document.querySelector('#inpaintingEditor')
-let inpaintingEditor = new DrawingBoard.Board('inpaintingEditor', {
-    color: "#ffffff",
-    background: false,
-    size: 30,
-    webStorage: false,
-    controls: [{'DrawingMode': {'filler': false}}, 'Size', 'Navigation']
-})
-let inpaintingEditorCanvasBackground = document.querySelector('.drawing-board-canvas-wrapper')
-// let inpaintingEditorControls = document.querySelector('.drawing-board-controls')
-
-// let inpaintingEditorMetaControl = document.createElement('div')
-// inpaintingEditorMetaControl.className = 'drawing-board-control'
-// let initImageClearBtnToolbar = document.createElement('button')
-// initImageClearBtnToolbar.className = 'init_image_clear'
-// initImageClearBtnToolbar.innerHTML = 'Remove Image'
-// inpaintingEditorMetaControl.appendChild(initImageClearBtnToolbar)
-// inpaintingEditorControls.appendChild(inpaintingEditorMetaControl)
-
-let maskResetButton = document.querySelector('.drawing-board-control-navigation-reset')
-maskResetButton.innerHTML = 'Clear'
-maskResetButton.style.fontWeight = 'normal'
-maskResetButton.style.fontSize = '10pt'
-
-let serverStatus = 'offline'
-let activeTags = []
-let modifiers = []
-let lastPromptUsed = ''
-let taskStopped = true
-let batchesDone = 0
-
-const modifierThumbnailPath = 'media/modifier-thumbnails';
-const activeCardClass = 'modifier-card-active';
-
-function getLocalStorageItem(key, fallback) {
-    let item = localStorage.getItem(key)
-    if (item === null) {
-        return fallback
-    }
-
-    return item
-}
-
-function getLocalStorageBoolItem(key, fallback) {
-    let item = localStorage.getItem(key)
-    if (item === null) {
-        return fallback
-    }
-
-    return (item === 'true' ? true : false)
-}
-
-function handleBoolSettingChange(key) {
-    return function(e) {
-        localStorage.setItem(key, e.target.checked.toString())
-    }
-}
-
-function handleStringSettingChange(key) {
-    return function(e) {
-        localStorage.setItem(key, e.target.value.toString())
-    }
-}
-
-function isSoundEnabled() {
-    return getLocalStorageBoolItem(SOUND_ENABLED_KEY, true)
-}
-
-function isFaceCorrectionEnabled() {
-    return getLocalStorageBoolItem(USE_FACE_CORRECTION_KEY, false)
-}
-
-function isUpscalingEnabled() {
-    return getLocalStorageBoolItem(USE_UPSCALING_KEY, false)
-}
-
-function isShowOnlyFilteredImageEnabled() {
-    return getLocalStorageBoolItem(SHOW_ONLY_FILTERED_IMAGE_KEY, true)
-}
-
-function isSaveToDiskEnabled() {
-    return getLocalStorageBoolItem(SAVE_TO_DISK_KEY, false)
-}
-
-function isUseCPUEnabled() {
-    return getLocalStorageBoolItem(USE_CPU_KEY, false)
-}
-
-function isUseFullPrecisionEnabled() {
-    return getLocalStorageBoolItem(USE_FULL_PRECISION_KEY, false)
-}
-
-function isUseTurboModeEnabled() {
-    return getLocalStorageBoolItem(USE_TURBO_MODE_KEY, true)
-}
-
-function getSavedDiskPath() {
-    return getLocalStorageItem(DISK_PATH_KEY, '')
-}
-
-function isAdvancedPanelOpenEnabled() {
-    return getLocalStorageBoolItem(ADVANCED_PANEL_OPEN_KEY, false)
-}
-
-function isModifiersPanelOpenEnabled() {
-    return getLocalStorageBoolItem(MODIFIERS_PANEL_OPEN_KEY, false)
-}
-
-function isStreamImageProgressEnabled() {
-    return getLocalStorageBoolItem(STREAM_IMAGE_PROGRESS_KEY, false)
-}
-
-function setStatus(statusType, msg, msgType) {
-    if (statusType !== 'server') {
-        return;
-    }
-
-    if (msgType == 'error') {
-        // msg = '<span style="color: red">' + msg + '<span>'
-        serverStatusColor.style.color = 'red'
-        serverStatusMsg.style.color = 'red'
-        serverStatusMsg.innerText = 'Stable Diffusion has stopped'
-    } else if (msgType == 'success') {
-        // msg = '<span style="color: green">' + msg + '<span>'
-        serverStatusColor.style.color = 'green'
-        serverStatusMsg.style.color = 'green'
-        serverStatusMsg.innerText = 'Stable Diffusion is ready'
-        serverStatus = 'online'
-    }
-}
-
-function logMsg(msg, level) {
-    if (level === 'error') {
-        outputMsg.innerHTML = '<span style="color: red">Error: ' + msg + '</span>'
-    } else if (level === 'warn') {
-        outputMsg.innerHTML = '<span style="color: orange">Warning: ' + msg + '</span>'
-    } else {
-        outputMsg.innerText = msg
-    }
-
-    console.log(level, msg)
-}
-
-function logError(msg, res) {
-    logMsg(msg, 'error')
-
-    console.log('request error', res)
-    setStatus('request', 'error', 'error')
-}
-
-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')
-    }
-}
-
-function makeImageElement(width, height) {
-    let imgItem = document.createElement('div')
-    imgItem.className = 'imgItem'
-
-    let img = document.createElement('img')
-    img.width = parseInt(width)
-    img.height = parseInt(height)
-
-    imgItem.appendChild(img)
-    imagesContainer.appendChild(imgItem)
-
-    return imgItem
-}
-
-// makes a single image. don't call this directly, use makeImage() instead
-async function doMakeImage(reqBody, batchCount) {
-    if (taskStopped) {
-        return
-    }
-
-    let res = ''
-    let seed = reqBody['seed']
-    let numOutputs = parseInt(reqBody['num_outputs'])
-
-    let images = []
-
-    function makeImageContainers(numImages) {
-        for (let i = images.length; i < numImages; i++) {
-            images.push(makeImageElement(reqBody.width, reqBody.height))
-        }
-    }
-
-    try {
-        res = await fetch('/image', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(reqBody)
-        })
-
-        let reader = res.body.getReader()
-        let textDecoder = new TextDecoder()
-        let finalJSON = ''
-        let prevTime = -1
-        while (true) {
-            try {
-                let t = new Date().getTime()
-
-                const {value, done} = await reader.read()
-                if (done) {
-                    break
-                }
-
-                let timeTaken = (prevTime === -1 ? -1 : t - prevTime)
-
-                let jsonStr = textDecoder.decode(value)
-
-                try {
-                    let stepUpdate = JSON.parse(jsonStr)
-
-                    if (stepUpdate.step === undefined) {
-                        finalJSON += jsonStr
-                    } else {
-                        let batchSize = stepUpdate.total_steps
-                        let overallStepCount = stepUpdate.step + batchesDone * batchSize
-                        let totalSteps = batchCount * batchSize
-                        let percent = 100 * (overallStepCount / totalSteps)
-                        percent = (percent > 100 ? 100 : percent)
-                        percent = percent.toFixed(0)
-
-                        stepsRemaining = totalSteps - overallStepCount
-                        stepsRemaining = (stepsRemaining < 0 ? 0 : stepsRemaining)
-                        timeRemaining = (timeTaken === -1 ? '' : stepsRemaining * timeTaken) // ms
-
-                        outputMsg.innerHTML = `Batch ${batchesDone+1} of ${batchCount}`
-                        progressBar.innerHTML = `Generating image(s): ${percent}%`
-
-                        if (timeTaken !== -1) {
-                            progressBar.innerHTML += `<br>Time remaining (approx): ${millisecondsToStr(timeRemaining)}`
-                        }
-                        progressBar.style.display = 'block'
-
-                        if (stepUpdate.output !== undefined) {
-                            makeImageContainers(numOutputs)
-
-                            for (idx in stepUpdate.output) {
-                                let imgItem = images[idx]
-                                let img = imgItem.firstChild
-                                let tmpImageData = stepUpdate.output[idx]
-                                img.src = tmpImageData['path'] + '?t=' + new Date().getTime()
-                            }
-                        }
-                    }
-                } catch (e) {
-                    finalJSON += jsonStr
-                }
-
-                prevTime = t
-            } catch (e) {
-                logError('Stable Diffusion had an error. Please check the logs in the command-line window.', res)
-                res = undefined
-                throw e
-            }
-        }
-
-        if (res.status != 200) {
-            if (serverStatus === 'online') {
-                logError('Stable Diffusion had an error: ' + await res.text(), res)
-            } else {
-                logError("Stable Diffusion is still starting up, please wait. If this goes on beyond a few minutes, Stable Diffusion has probably crashed. Please check the error message in the command-line window.", res)
-            }
-            res = undefined
-            progressBar.style.display = 'none'
-        } else {
-            res = JSON.parse(finalJSON)
-            progressBar.style.display = 'none'
-
-            if (res.status !== 'succeeded') {
-                let msg = ''
-                if (res.detail !== undefined) {
-                    msg = res.detail
-
-                    if (msg.toLowerCase().includes('out of memory')) {
-                        msg += `<br/><br/>
-                                <b>Suggestions</b>:
-                                <br/>
-                                1. If you have set an initial image, please try reducing its dimension to ${MAX_INIT_IMAGE_DIMENSION}x${MAX_INIT_IMAGE_DIMENSION} or smaller.<br/>
-                                2. Try disabling the '<em>Turbo mode</em>' under '<em>Advanced Settings</em>'.<br/>
-                                3. Try generating a smaller image.<br/>`
-                    }
-                } else {
-                    msg = res
-                }
-                logError(msg, res)
-                res = undefined
-            }
-        }
-    } catch (e) {
-        console.log('request error', e)
-        logError('Stable Diffusion had an error. Please check the logs in the command-line window. <br/><br/>' + e + '<br/><pre>' + e.stack + '</pre>', res)
-        setStatus('request', 'error', 'error')
-        progressBar.style.display = 'none'
-        res = undefined
-    }
-
-    if (!res) {
-        return false
-    }
-
-    lastPromptUsed = reqBody['prompt']
-
-    makeImageContainers(res.output.length)
-
-    for (let idx in res.output) {
-        let imgBody = ''
-        let seed = 0
-
-        try {
-            let imgData = res.output[idx]
-            imgBody = imgData.data
-            seed = imgData.seed
-        } catch (e) {
-            console.log(imgBody)
-            setStatus('request', 'invalid image', 'error')
-            continue
-        }
-
-        let imgItem = images[idx]
-        let img = imgItem.firstChild
-
-        img.src = imgBody
-
-        let imgItemInfo = document.createElement('span')
-        imgItemInfo.className = 'imgItemInfo'
-
-        let imgSeedLabel = document.createElement('span')
-        imgSeedLabel.className = 'imgSeedLabel'
-        imgSeedLabel.innerText = 'Seed: ' + seed
-
-        let imgUseBtn = document.createElement('button')
-        imgUseBtn.className = 'imgUseBtn'
-        imgUseBtn.innerText = 'Use as Input'
-
-        let imgSaveBtn = document.createElement('button')
-        imgSaveBtn.className = 'imgSaveBtn'
-        imgSaveBtn.innerText = 'Download'
-
-        imgItem.appendChild(imgItemInfo)
-        imgItemInfo.appendChild(imgSeedLabel)
-        imgItemInfo.appendChild(imgUseBtn)
-        imgItemInfo.appendChild(imgSaveBtn)
-
-        imgUseBtn.addEventListener('click', function() {
-            initImageSelector.value = null
-            initImagePreview.src = imgBody
-
-            initImagePreviewContainer.style.display = 'block'
-            inpaintingEditorContainer.style.display = 'none'
-            promptStrengthContainer.style.display = 'block'
-            maskSetting.checked = false
-
-            // maskSetting.style.display = 'block'
-
-            randomSeedField.checked = false
-            seedField.value = seed
-            seedField.disabled = false
-        })
-
-        imgSaveBtn.addEventListener('click', function() {
-            let imgDownload = document.createElement('a')
-            imgDownload.download = createFileName();
-            imgDownload.href = imgBody
-            imgDownload.click()
-        })
-
-        imgItem.addEventListener('mouseenter', function() {
-            imgItemInfo.style.opacity = 1
-        })
-
-        imgItem.addEventListener('mouseleave', function() {
-            imgItemInfo.style.opacity = 0.5
-        })
-    }
-
-    return true
-}
-
-function validateInput() {
-    let width = parseInt(widthField.value)
-    let height = parseInt(heightField.value)
-
-    if (IMAGE_REGEX.test(initImagePreview.src)) {
-        if (initImagePreview.naturalWidth > MAX_INIT_IMAGE_DIMENSION || initImagePreview.naturalHeight > MAX_INIT_IMAGE_DIMENSION) {
-            return {'isValid': false, 'warning': `The dimensions of your initial image are very large, and can cause 'Out of Memory' errors! Please ensure that its dimensions are equal (or smaller) than the desired output image.
-                    <br/><br/>
-                    Your initial image size is ${initImagePreview.naturalWidth}x${initImagePreview.naturalHeight} pixels. Please try to keep it smaller than ${MAX_INIT_IMAGE_DIMENSION}x${MAX_INIT_IMAGE_DIMENSION}.`}
-        }
-    }
-
-    return {'isValid': true}
-}
-
-async function makeImage() {
-    if (serverStatus !== 'online') {
-        logError('The server is still starting up..')
-        return
-    }
-
-    let validation = validateInput()
-    if (validation['isValid']) {
-        outputMsg.innerHTML = 'Starting..'
-    } else {
-        if (validation['error']) {
-            logError(validation['error'])
-            return
-        } else if (validation['warning']) {
-            logMsg(validation['warning'], 'warn')
-        }
-    }
-
-    setStatus('request', 'fetching..')
-
-    makeImageBtn.innerHTML = 'Processing..'
-    makeImageBtn.disabled = true
-    makeImageBtn.style.display = 'none'
-    stopImageBtn.style.display = 'block'
-
-    taskStopped = false
-    batchesDone = 0
-
-    let seed = (randomSeedField.checked ? Math.floor(Math.random() * 10000000) : parseInt(seedField.value))
-    let numOutputsTotal = parseInt(numOutputsTotalField.value)
-    let numOutputsParallel = parseInt(numOutputsParallelField.value)
-    let batchCount = Math.ceil(numOutputsTotal / numOutputsParallel)
-    let batchSize = numOutputsParallel
-
-    let streamImageProgress = (numOutputsTotal > 50 ? false : streamImageProgressField.checked)
-
-    let prompt = promptField.value
-    if (activeTags.length > 0) {
-        let promptTags = activeTags.map(x => x.name).join(", ");
-        prompt += ", " + promptTags;
-    }
-
-    previewPrompt.innerText = prompt
-
-    let reqBody = {
-        session_id: sessionId,
-        prompt: prompt,
-        num_outputs: batchSize,
-        num_inference_steps: numInferenceStepsField.value,
-        guidance_scale: guidanceScaleField.value,
-        width: widthField.value,
-        height: heightField.value,
-        // allow_nsfw: allowNSFWField.checked,
-        turbo: turboField.checked,
-        use_cpu: useCPUField.checked,
-        use_full_precision: useFullPrecisionField.checked,
-        stream_progress_updates: true,
-        stream_image_progress: streamImageProgress,
-        show_only_filtered_image: showOnlyFilteredImageField.checked
-    }
-
-    if (IMAGE_REGEX.test(initImagePreview.src)) {
-        reqBody['init_image'] = initImagePreview.src
-        reqBody['prompt_strength'] = promptStrengthField.value
-
-        // if (IMAGE_REGEX.test(maskImagePreview.src)) {
-        //     reqBody['mask'] = maskImagePreview.src
-        // }
-        if (maskSetting.checked) {
-            reqBody['mask'] = inpaintingEditor.getImg()
-        }
-
-        reqBody['sampler'] = 'ddim'
-    } else {
-        reqBody['sampler'] = samplerField.value
-    }
-
-    if (saveToDiskField.checked && diskPathField.value.trim() !== '') {
-        reqBody['save_to_disk_path'] = diskPathField.value.trim()
-    }
-
-    if (useFaceCorrectionField.checked) {
-        reqBody['use_face_correction'] = 'GFPGANv1.3'
-    }
-
-    if (useUpscalingField.checked) {
-        reqBody['use_upscale'] = upscaleModelField.value
-    }
-
-    let time = new Date().getTime()
-    imagesContainer.innerHTML = ''
-
-    let successCount = 0
-
-    for (let i = 0; i < batchCount; i++) {
-        reqBody['seed'] = seed + (i * batchSize)
-
-        let success = await doMakeImage(reqBody, batchCount)
-        batchesDone++
-
-        if (success) {
-            outputMsg.innerText = 'Processed batch ' + (i+1) + '/' + batchCount
-            successCount++
-        }
-    }
-
-    makeImageBtn.innerText = 'Make Image'
-    makeImageBtn.disabled = false
-    makeImageBtn.style.display = 'block'
-    stopImageBtn.style.display = 'none'
-
-    if (isSoundEnabled()) {
-        playSound()
-    }
-
-    time = new Date().getTime() - time
-    time /= 1000
-
-    if (successCount === batchCount) {
-        outputMsg.innerText = 'Processed ' + numOutputsTotal + ' images in ' + time + ' seconds'
-
-        setStatus('request', 'done', 'success')
-    }
-
-    if (randomSeedField.checked) {
-        seedField.value = seed
-    }
-}
-
-// create a file name with embedded prompt and metadata
-// for easier cateloging and comparison
-function createFileName() {
-
-    // Most important information is the prompt
-    let underscoreName = lastPromptUsed.replace(/[^a-zA-Z0-9]/g, '_')
-    underscoreName = underscoreName.substring(0, 100)
-    const seed = seedField.value
-    const steps = numInferenceStepsField.value
-    const guidance =  guidanceScaleField.value
-
-    // name and the top level metadata
-    let fileName = `${underscoreName}_Seed-${seed}_Steps-${steps}_Guidance-${guidance}`
-
-    // add the tags
-    // let tags = [];
-    // let tagString = '';
-    // document.querySelectorAll(modifyTagsSelector).forEach(function(tag) {
-    //     tags.push(tag.innerHTML);
-    // })
-
-    // join the tags with a pipe
-    // if (activeTags.length > 0) {
-    //     tagString = '_Tags-';
-    //     tagString += tags.join('|');
-    // }
-
-    // // append empty or populated tags
-    // fileName += `${tagString}`;
-
-    // add the file extension
-    fileName += `.png`
-
-    return fileName
-}
-
-stopImageBtn.addEventListener('click', async function() {
-    try {
-        let res = await fetch('/image/stop')
-    } catch (e) {
-        console.log(e)
-    }
-
-    stopImageBtn.style.display = 'none'
-    makeImageBtn.style.display = 'block'
-
-    taskStopped = true
-})
-
-soundToggle.addEventListener('click', handleBoolSettingChange(SOUND_ENABLED_KEY))
-soundToggle.checked = isSoundEnabled()
-
-saveToDiskField.checked = isSaveToDiskEnabled()
-diskPathField.disabled = !saveToDiskField.checked
-
-useFaceCorrectionField.addEventListener('click', handleBoolSettingChange(USE_FACE_CORRECTION_KEY))
-useFaceCorrectionField.checked = isFaceCorrectionEnabled()
-
-useUpscalingField.checked = isUpscalingEnabled()
-upscaleModelField.disabled = !useUpscalingField.checked
-
-showOnlyFilteredImageField.addEventListener('click', handleBoolSettingChange(SHOW_ONLY_FILTERED_IMAGE_KEY))
-showOnlyFilteredImageField.checked = isShowOnlyFilteredImageEnabled()
-
-useCPUField.addEventListener('click', handleBoolSettingChange(USE_CPU_KEY))
-useCPUField.checked = isUseCPUEnabled()
-
-useFullPrecisionField.addEventListener('click', handleBoolSettingChange(USE_FULL_PRECISION_KEY))
-useFullPrecisionField.checked = isUseFullPrecisionEnabled()
-
-turboField.addEventListener('click', handleBoolSettingChange(USE_TURBO_MODE_KEY))
-turboField.checked = isUseTurboModeEnabled()
-
-streamImageProgressField.addEventListener('click', handleBoolSettingChange(STREAM_IMAGE_PROGRESS_KEY))
-streamImageProgressField.checked = isStreamImageProgressEnabled()
-
-diskPathField.addEventListener('change', handleStringSettingChange(DISK_PATH_KEY))
-
-saveToDiskField.addEventListener('click', function(e) {
-    diskPathField.disabled = !this.checked
-    handleBoolSettingChange(SAVE_TO_DISK_KEY)(e)
-})
-
-useUpscalingField.addEventListener('click', function(e) {
-    upscaleModelField.disabled = !this.checked
-    handleBoolSettingChange(USE_UPSCALING_KEY)(e)
-})
-
-function setPanelOpen(panelHandle) {
-    let panelContents = panelHandle.nextElementSibling
-    panelHandle.classList.add('active')
-    panelContents.style.display = 'block'
-}
-
-if (isAdvancedPanelOpenEnabled()) {
-    setPanelOpen(advancedPanelHandle)
-}
-
-if (isModifiersPanelOpenEnabled()) {
-    setPanelOpen(modifiersPanelHandle)
-}
-
-makeImageBtn.addEventListener('click', makeImage)
-
-
-function updateGuidanceScale() {
-    guidanceScaleField.value = guidanceScaleSlider.value / 10
-}
-
-function updateGuidanceScaleSlider() {
-    if (guidanceScaleField.value < 0) {
-        guidanceScaleField.value = 0
-    } else if (guidanceScaleField.value > 50) {
-        guidanceScaleField.value = 50
-    }
-
-    guidanceScaleSlider.value = guidanceScaleField.value * 10
-}
-
-guidanceScaleSlider.addEventListener('input', updateGuidanceScale)
-guidanceScaleField.addEventListener('input', updateGuidanceScaleSlider)
-updateGuidanceScale()
-
-function updatePromptStrength() {
-    promptStrengthField.value = promptStrengthSlider.value / 100
-}
-
-function updatePromptStrengthSlider() {
-    if (promptStrengthField.value < 0) {
-        promptStrengthField.value = 0
-    } else if (promptStrengthField.value > 0.99) {
-        promptStrengthField.value = 0.99
-    }
-
-    promptStrengthSlider.value = promptStrengthField.value * 100
-}
-
-promptStrengthSlider.addEventListener('input', updatePromptStrength)
-promptStrengthField.addEventListener('input', updatePromptStrengthSlider)
-updatePromptStrength()
-
-useBetaChannelField.addEventListener('click', async function(e) {
-    if (serverStatus !== 'online') {
-        logError('The server is still starting up..')
-        alert('The server is still starting up..')
-        e.preventDefault()
-        return false
-    }
-
-    let updateBranch = (this.checked ? 'beta' : 'main')
-
-    try {
-        let res = await fetch('/app_config', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                'update_branch': updateBranch
-            })
-        })
-        res = await res.json()
-
-        console.log('set config status response', res)
-    } catch (e) {
-        console.log('set config status error', e)
-    }
-})
-
-async function getAppConfig() {
-    try {
-        let res = await fetch('/app_config')
-        config = await res.json()
-
-        if (config.update_branch === 'beta') {
-            useBetaChannelField.checked = true
-            updateBranchLabel.innerText = "(beta)"
-        }
-
-        console.log('get config status response', config)
-    } catch (e) {
-        console.log('get config status error', e)
-    }
-}
-
-function checkRandomSeed() {
-    if (randomSeedField.checked) {
-        seedField.disabled = true
-        seedField.value = "0"
-    } else {
-        seedField.disabled = false
-    }
-}
-randomSeedField.addEventListener('input', checkRandomSeed)
-checkRandomSeed()
-
-function showInitImagePreview() {
-    if (initImageSelector.files.length === 0) {
-        initImagePreviewContainer.style.display = 'none'
-        // inpaintingEditorContainer.style.display = 'none'
-        promptStrengthContainer.style.display = 'none'
-        // maskSetting.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'
-        inpaintingEditorContainer.style.display = 'none'
-        promptStrengthContainer.style.display = 'block'
-        samplerSelectionContainer.style.display = 'none'
-        // maskSetting.checked = false
-    })
-
-    if (file) {
-        reader.readAsDataURL(file)
-    }
-}
-initImageSelector.addEventListener('change', showInitImagePreview)
-showInitImagePreview()
-
-initImagePreview.addEventListener('load', function() {
-    inpaintingEditorCanvasBackground.style.backgroundImage = "url('" + this.src + "')"
-    // maskSetting.style.display = 'block'
-    // inpaintingEditorContainer.style.display = 'block'
-})
-
-initImageClearBtn.addEventListener('click', function() {
-    initImageSelector.value = null
-    // maskImageSelector.value = null
-
-    initImagePreview.src = ''
-    // maskImagePreview.src = ''
-    maskSetting.checked = false
-
-    initImagePreviewContainer.style.display = 'none'
-    // inpaintingEditorContainer.style.display = 'none'
-    // maskImagePreviewContainer.style.display = 'none'
-
-    // maskSetting.style.display = 'none'
-
-    promptStrengthContainer.style.display = 'none'
-    samplerSelectionContainer.style.display = 'block'
-})
-
-maskSetting.addEventListener('click', function() {
-    inpaintingEditorContainer.style.display = (this.checked ? 'block' : 'none')
-})
-
-// 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'
-// })
-
-// https://stackoverflow.com/a/8212878
-function millisecondsToStr(milliseconds) {
-    function numberEnding (number) {
-        return (number > 1) ? 's' : '';
-    }
-
-    var temp = Math.floor(milliseconds / 1000);
-    var hours = Math.floor((temp %= 86400) / 3600);
-    var s = ''
-    if (hours) {
-        s += hours + ' hour' + numberEnding(hours) + ' ';
-    }
-    var minutes = Math.floor((temp %= 3600) / 60);
-    if (minutes) {
-        s += minutes + ' minute' + numberEnding(minutes) + ' ';
-    }
-    var seconds = temp % 60;
-    if (!hours && minutes < 4 && seconds) {
-        s += seconds + ' second' + numberEnding(seconds);
-    }
-
-    return s;
-}
-</script>
-<script>
-function createCollapsibles(node) {
-    if (!node) {
-        node = document
-    }
-
-    let collapsibles = node.querySelectorAll(".collapsible")
-    collapsibles.forEach(function(c) {
-        let handle = document.createElement('span')
-        handle.className = 'collapsible-handle'
-
-        if (c.className.indexOf('active') !== -1) {
-            handle.innerHTML = '&#x2796;' // minus
-        } else {
-            handle.innerHTML = '&#x2795;' // plus
-        }
-        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
-            }
-
-            if (this == advancedPanelHandle) {
-                let state = (content.style.display === 'block' ? 'true' : 'false')
-                localStorage.setItem(ADVANCED_PANEL_OPEN_KEY, state)
-            } else if (this == modifiersPanelHandle) {
-                let state = (content.style.display === 'block' ? 'true' : 'false')
-                localStorage.setItem(MODIFIERS_PANEL_OPEN_KEY, state)
-            }
-        })
-    })
-}
-createCollapsibles()
-
-function refreshTagsList() {
-    editorModifierTagsList.innerHTML = '';
-
-    if (activeTags.length == 0) {
-        editorTagsContainer.style.display = 'none';
-        return;
-    } else {
-        editorTagsContainer.style.display = 'block';
-    }
-
-    activeTags.forEach((tag, index) => {
-        tag.element.querySelector('.modifier-card-image-overlay').innerText = '-';
-        tag.element.classList.add('modifier-card-tiny');
-
-        editorModifierTagsList.appendChild(tag.element);
-
-        tag.element.addEventListener('click', () => {
-            let idx = activeTags.indexOf(tag);
-
-            if (idx !== -1) {
-                activeTags[idx].originElement.classList.remove(activeCardClass);
-                activeTags[idx].originElement.querySelector('.modifier-card-image-overlay').innerText = '+';
-
-                activeTags.splice(idx, 1);
-                refreshTagsList();
-            }
-        });
-    });
-
-    let brk = document.createElement('br')
-    brk.style.clear = 'both'
-    editorModifierTagsList.appendChild(brk)
-}
-
-async function getDiskPath() {
-    try {
-        let diskPath = getSavedDiskPath()
-
-        if (diskPath !== '') {
-            diskPathField.value = diskPath
-            return
-        }
-
-        let res = await fetch('/output_dir')
-        if (res.status === 200) {
-            res = await res.json()
-            res = res[0]
-
-            document.querySelector('#diskPath').value = res
-        }
-    } catch (e) {
-        console.log('error fetching output dir path', e)
-    }
-}
-
-function createModifierCard(name, previews) {
-    const modifierCard = document.createElement('div');
-    modifierCard.className = 'modifier-card';
-    modifierCard.innerHTML = `
-    <div class="modifier-card-overlay"></div>
-    <div class="modifier-card-image-container">
-        <div class="modifier-card-image-overlay">+</div>
-        <p class="modifier-card-error-label"></p>
-        <img onerror="this.remove()" alt="Modifier Image" class="modifier-card-image">
-    </div>
-    <div class="modifier-card-container">
-        <div class="modifier-card-label"><p></p></div>
-    </div>`;
-
-    const image = modifierCard.querySelector('.modifier-card-image');
-    const errorText =  modifierCard.querySelector('.modifier-card-error-label');
-    const label = modifierCard.querySelector('.modifier-card-label');
-
-    errorText.innerText = 'No Image';
-
-    if (typeof previews == 'object') {
-        image.src = previews[0]; // portrait
-        image.setAttribute('preview-type', 'portrait');
-    } else {
-        image.remove();
-    }
-
-    const maxLabelLength = 30;
-    const nameWithoutBy = name.replace('by ', '');
-
-    if(nameWithoutBy.length <= maxLabelLength) {
-        label.querySelector('p').innerText = nameWithoutBy;
-    } else {
-        const tooltipText = document.createElement('span');
-        tooltipText.className = 'tooltip-text';
-        tooltipText.innerText = name;
-
-        label.classList.add('tooltip');
-        label.appendChild(tooltipText);
-
-        label.querySelector('p').innerText = nameWithoutBy.substring(0, maxLabelLength) + '...';
-    }
-
-    return modifierCard;
-}
-
-function changePreviewImages(val) {
-    const previewImages = document.querySelectorAll('.modifier-card-image-container img');
-
-    let previewArr = [];
-
-    modifiers.map(x => x.modifiers).forEach(x => previewArr.push(...x.map(m => m.previews)));
-    
-    previewArr = previewArr.map(x => {
-        let obj = {};
-
-        x.forEach(preview => {
-            obj[preview.name] = preview.path;
-        });
-        
-        return obj;
-    });
-
-    previewImages.forEach(previewImage => {
-        const currentPreviewType = previewImage.getAttribute('preview-type');
-        const relativePreviewPath = previewImage.src.split(modifierThumbnailPath + '/').pop();
-
-        const previews = previewArr.find(preview => relativePreviewPath == preview[currentPreviewType]);
-
-        if(typeof previews == 'object') {
-            let preview = null;
-
-            if (val == 'portrait') {
-                preview = previews.portrait;
-            }
-            else if (val == 'landscape') {
-                preview = previews.landscape;
-            }
-
-            if(preview != null) {
-                previewImage.src = `${modifierThumbnailPath}/${preview}`;
-                previewImage.setAttribute('preview-type', val);
-            }
-        }
-    });
-}
-
-function resizeModifierCards(val) {
-    const cardSizePrefix = 'modifier-card-size_';
-    const modifierCardClass = 'modifier-card';
-
-    const modifierCards = document.querySelectorAll(`.${modifierCardClass}`);
-    const cardSize = n => `${cardSizePrefix}${n}`;
-
-    modifierCards.forEach(card => {
-        // remove existing size classes
-        const classes = card.className.split(' ').filter(c => !c.startsWith(cardSizePrefix));
-        card.className = classes.join(' ').trim();
-
-        if(val != 0)
-            card.classList.add(cardSize(val));
-    });
-}
-
-async function loadModifiers() {
-    try {
-        let res = await fetch('/modifiers.json')
-        if (res.status === 200) {
-            res = await res.json()
-
-            modifiers = res; // update global variable
-
-            res.forEach(modifierGroup => {
-                const title = modifierGroup.category;
-                const modifiers = modifierGroup.modifiers;
-
-                const titleEl = document.createElement('h5');
-                titleEl.className = 'collapsible';
-                titleEl.innerText = title;
-
-                const modifiersEl = document.createElement('div');
-                modifiersEl.classList.add('collapsible-content', 'editor-modifiers-leaf');
-
-                modifiers.forEach(modObj => {
-                    const modifierName = modObj.modifier;
-                    const modifierPreviews = modObj?.previews?.map(preview => `${modifierThumbnailPath}/${preview.path}`);
-
-                    const modifierCard = createModifierCard(modifierName, modifierPreviews);
-
-                    if(typeof modifierCard == 'object') {
-                        modifiersEl.appendChild(modifierCard);
-
-                        modifierCard.addEventListener('click', () => {
-                            if (activeTags.map(x => x.name).includes(modifierName)) {
-                                // remove modifier from active array
-                                activeTags = activeTags.filter(x => x.name != modifierName);
-                                modifierCard.classList.remove(activeCardClass);
-                                
-                                modifierCard.querySelector('.modifier-card-image-overlay').innerText = '+';
-                            } else {
-                                // add modifier to active array
-                                activeTags.push({
-                                    'name': modifierName,
-                                    'element': modifierCard.cloneNode(true),
-                                    'originElement': modifierCard,
-                                    'previews': modifierPreviews
-                                });
-
-                                modifierCard.classList.add(activeCardClass);
-
-                                modifierCard.querySelector('.modifier-card-image-overlay').innerText = '-';
-                            }
-
-                            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()
     await getDiskPath()
diff --git a/ui/media/main.css b/ui/media/main.css
new file mode 100644
index 00000000..516ae713
--- /dev/null
+++ b/ui/media/main.css
@@ -0,0 +1,359 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 11pt;
+    background-color: rgb(32, 33, 36);
+    color: #eee;
+}
+a {
+    color: rgb(0, 102, 204);
+}
+a:visited {
+    color: rgb(0, 102, 204);
+}
+label {
+    font-size: 10pt;
+}
+#prompt {
+    width: 100%;
+    height: 65pt;
+    box-sizing: border-box;
+}
+@media screen and (max-width: 600px) {
+    #prompt {
+        width: 95%;
+    }
+}
+.image_preview_container {
+    /* display: none; */
+    margin-top: 10pt;
+}
+.image_clear_btn {
+    position: absolute;
+    transform: translateX(-50%) translateY(-35%);
+    background: black;
+    color: white;
+    border: 2pt solid #ccc;
+    padding: 0;
+    cursor: pointer;
+    outline: inherit;
+    border-radius: 8pt;
+    width: 16pt;
+    height: 16pt;
+    font-family: Verdana;
+    font-size: 8pt;
+}
+.settings-box ul {
+    font-size: 9pt;
+    margin-bottom: 5px;
+    padding-left: 10px;
+    list-style-type: none;
+}
+.settings-box li {
+    padding-bottom: 4pt;
+}
+.editor-slider {
+    transform: translateY(30%);
+}
+#outputMsg {
+    font-size: small;
+}
+#progressBar {
+    font-size: small;
+}
+#footer {
+    font-size: small;
+    padding-left: 10pt;
+    background: none;
+}
+#footer-legal {
+    font-size: 8pt;
+}
+.imgSeedLabel {
+    position: absolute;
+    transform: translateX(-100%);
+    margin-top: 5pt;
+    margin-left: -5pt;
+    font-size: 10pt;
+
+    background-color: #333;
+    opacity: 0.8;
+    color: #ddd;
+    border-radius: 3pt;
+    padding: 1pt 3pt;
+}
+.imgUseBtn {
+    position: absolute;
+    transform: translateX(-100%);
+    margin-top: 30pt;
+    margin-left: -5pt;
+}
+.imgSaveBtn {
+    position: absolute;
+    transform: translateX(-100%);
+    margin-top: 55pt;
+    margin-left: -5pt;
+}
+.imgItem {
+    display: inline;
+    padding-right: 10px;
+}
+.imgItemInfo {
+    opacity: 0.5;
+}
+
+#container {
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+}
+@media screen and (max-width: 1800px) {
+    #container {
+        width: 100%;
+    }
+}
+#logo small {
+    font-size: 11pt;
+}
+#editor {
+    padding: 5px;
+}
+#editor label {
+    font-weight: normal;
+}
+.settings-box label small {
+    color: rgb(153, 153, 153);
+}
+#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);
+}
+#stopImage {
+    flex: 0 0 70px;
+    background: rgb(132, 8, 0);
+    border: 2px solid rgb(122, 29, 0);
+    color: rgb(255, 221, 255);
+    width: 100%;
+    height: 30pt;
+    border-radius: 6px;
+    display: none;
+}
+#stopImage:hover {
+    background: rgb(214, 32, 0);
+}
+.flex-container {
+    display: flex;
+}
+.col-50 {
+    flex: 50%;
+}
+.col-fixed-10 {
+    flex: 0 0 400pt;
+}
+.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;
+}
+#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 {
+    display: inline;
+    float: right;
+    transform: translateY(-5pt);
+}
+#server-status-color {
+    /* width: 8pt;
+    height: 8pt;
+    border-radius: 4pt; */
+    font-size: 14pt;
+    color: rgb(128, 87, 0);
+    /* background-color: rgb(197, 1, 1); */
+    /* transform: translateY(15%); */
+    display: inline;
+}
+#server-status-msg {
+    color: rgb(128, 87, 0);
+    padding-left: 2pt;
+    font-size: 10pt;
+}
+#preview-prompt {
+    font-size: 16pt;
+    margin-bottom: 10pt;
+}
+#coffeeButton {
+    height: 23px;
+    transform: translateY(25%);
+}
+
+#inpaintingEditor {
+    width: 300pt;
+    height: 300pt;
+    margin-top: 5pt;
+}
+.drawing-board-canvas-wrapper {
+    background-size: 100% 100%;
+}
+#inpaintingEditor canvas {
+    opacity: 0.6;
+}
+#enable_mask {
+    margin-top: 8pt;
+}
+
+#top-nav {
+    padding-top: 3pt;
+    padding-bottom: 15pt;
+}
+#top-nav .icon {
+    padding-right: 4pt;
+    font-size: 14pt;
+    transform: translateY(1pt);
+}
+#logo {
+    display: inline;
+}
+#logo h1 {
+    display: inline;
+}
+#top-nav-items {
+    list-style-type: none;
+    display: inline;
+    float: right;
+}
+#top-nav-items > li {
+    float: left;
+    display: inline;
+    padding-left: 20pt;
+    cursor: default;
+}
+#initial-text {
+    padding-top: 15pt;
+    padding-left: 4pt;
+}
+.settings-subheader {
+    font-size: 10pt;
+    font-weight: bold;
+}
+.pl-5 {
+    padding-left: 5pt;
+}
+#system-settings {
+    width: 360pt;
+    transform: translateX(-100%) translateX(70pt);
+
+    padding-top: 10pt;
+    padding-bottom: 10pt;
+}
+#system-settings ul {
+    margin: 0;
+    padding: 0;
+}
+#system-settings li {
+    padding-left: 5pt;
+}
+#community-links {
+    list-style-type: none;
+    margin: 0;
+    padding: 12pt;
+    padding-bottom: 0pt;
+    transform: translateX(-15%);
+}
+#community-links li {
+    padding-bottom: 12pt;
+    display: block;
+    font-size: 10pt;
+}
+#community-links li .fa-fw {
+    padding-right: 2pt;
+}
+#community-links li a {
+    color: white;
+    text-decoration: none;
+}
+.dropdown {
+    overflow: hidden;
+}
+.dropdown-content {
+    display: none;
+    position: absolute;
+    z-index: 2;
+
+    background: rgb(18, 18, 19);
+    border: 2px solid rgb(37, 38, 41);
+    border-radius: 7px;
+    padding: 5px;
+    margin-bottom: 15px;
+    box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
+}
+.dropdown:hover .dropdown-content {
+    display: block;
+}
\ No newline at end of file
diff --git a/ui/media/main.js b/ui/media/main.js
new file mode 100644
index 00000000..fe2f69df
--- /dev/null
+++ b/ui/media/main.js
@@ -0,0 +1,1205 @@
+const SOUND_ENABLED_KEY = "soundEnabled"
+const SAVE_TO_DISK_KEY = "saveToDisk"
+const USE_CPU_KEY = "useCPU"
+const USE_FULL_PRECISION_KEY = "useFullPrecision"
+const USE_TURBO_MODE_KEY = "useTurboMode"
+const DISK_PATH_KEY = "diskPath"
+const ADVANCED_PANEL_OPEN_KEY = "advancedPanelOpen"
+const MODIFIERS_PANEL_OPEN_KEY = "modifiersPanelOpen"
+const USE_FACE_CORRECTION_KEY = "useFaceCorrection"
+const USE_UPSCALING_KEY = "useUpscaling"
+const SHOW_ONLY_FILTERED_IMAGE_KEY = "showOnlyFilteredImage"
+const STREAM_IMAGE_PROGRESS_KEY = "streamImageProgress"
+const HEALTH_PING_INTERVAL = 5 // seconds
+const MAX_INIT_IMAGE_DIMENSION = 768
+
+const IMAGE_REGEX = new RegExp('data:image/[A-Za-z]+;base64')
+
+let sessionId = new Date().getTime()
+
+let promptField = document.querySelector('#prompt')
+let numOutputsTotalField = document.querySelector('#num_outputs_total')
+let numOutputsParallelField = document.querySelector('#num_outputs_parallel')
+let numInferenceStepsField = document.querySelector('#num_inference_steps')
+let guidanceScaleSlider = document.querySelector('#guidance_scale_slider')
+let guidanceScaleField = document.querySelector('#guidance_scale')
+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 maskImageSelector = document.querySelector("#mask")
+let maskImagePreview = document.querySelector("#mask_preview")
+let turboField = document.querySelector('#turbo')
+let useCPUField = document.querySelector('#use_cpu')
+let useFullPrecisionField = document.querySelector('#use_full_precision')
+let saveToDiskField = document.querySelector('#save_to_disk')
+let diskPathField = document.querySelector('#diskPath')
+// let allowNSFWField = document.querySelector("#allow_nsfw")
+let useBetaChannelField = document.querySelector("#use_beta_channel")
+let promptStrengthSlider = document.querySelector('#prompt_strength_slider')
+let promptStrengthField = document.querySelector('#prompt_strength')
+let samplerField = document.querySelector('#sampler')
+let samplerSelectionContainer = document.querySelector("#samplerSelection")
+let useFaceCorrectionField = document.querySelector("#use_face_correction")
+let useUpscalingField = document.querySelector("#use_upscale")
+let upscaleModelField = document.querySelector("#upscale_model")
+let showOnlyFilteredImageField = document.querySelector("#show_only_filtered_image")
+let updateBranchLabel = document.querySelector("#updateBranchLabel")
+let streamImageProgressField = document.querySelector("#stream_image_progress")
+
+let makeImageBtn = document.querySelector('#makeImage')
+let stopImageBtn = document.querySelector('#stopImage')
+
+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')
+
+// let maskSetting = document.querySelector('#editor-inputs-mask_setting')
+// let maskImagePreviewContainer = document.querySelector('#mask_preview_container')
+// let maskImageClearBtn = document.querySelector('#mask_clear')
+let maskSetting = document.querySelector('#enable_mask')
+
+let editorModifierEntries = document.querySelector('#editor-modifiers-entries')
+let editorModifierTagsList = document.querySelector('#editor-inputs-tags-list')
+let editorTagsContainer = document.querySelector('#editor-inputs-tags-container')
+
+let previewImageField = document.querySelector('#preview-image')
+previewImageField.onchange = () => changePreviewImages(previewImageField.value);
+
+let modifierCardSizeSlider = document.querySelector('#modifier-card-size-slider')
+modifierCardSizeSlider.onchange = () => resizeModifierCards(modifierCardSizeSlider.value);
+
+let previewPrompt = document.querySelector('#preview-prompt')
+
+let showConfigToggle = document.querySelector('#configToggleBtn')
+// let configBox = document.querySelector('#config')
+let outputMsg = document.querySelector('#outputMsg')
+let progressBar = document.querySelector("#progressBar")
+
+let soundToggle = document.querySelector('#sound_toggle')
+
+let serverStatusColor = document.querySelector('#server-status-color')
+let serverStatusMsg = document.querySelector('#server-status-msg')
+
+let advancedPanelHandle = document.querySelector("#editor-settings .collapsible")
+let modifiersPanelHandle = document.querySelector("#editor-modifiers .collapsible")
+let inpaintingEditorContainer = document.querySelector('#inpaintingEditor')
+let inpaintingEditor = new DrawingBoard.Board('inpaintingEditor', {
+    color: "#ffffff",
+    background: false,
+    size: 30,
+    webStorage: false,
+    controls: [{'DrawingMode': {'filler': false}}, 'Size', 'Navigation']
+})
+let inpaintingEditorCanvasBackground = document.querySelector('.drawing-board-canvas-wrapper')
+// let inpaintingEditorControls = document.querySelector('.drawing-board-controls')
+
+// let inpaintingEditorMetaControl = document.createElement('div')
+// inpaintingEditorMetaControl.className = 'drawing-board-control'
+// let initImageClearBtnToolbar = document.createElement('button')
+// initImageClearBtnToolbar.className = 'init_image_clear'
+// initImageClearBtnToolbar.innerHTML = 'Remove Image'
+// inpaintingEditorMetaControl.appendChild(initImageClearBtnToolbar)
+// inpaintingEditorControls.appendChild(inpaintingEditorMetaControl)
+
+let maskResetButton = document.querySelector('.drawing-board-control-navigation-reset')
+maskResetButton.innerHTML = 'Clear'
+maskResetButton.style.fontWeight = 'normal'
+maskResetButton.style.fontSize = '10pt'
+
+let serverStatus = 'offline'
+let activeTags = []
+let modifiers = []
+let lastPromptUsed = ''
+let taskStopped = true
+let batchesDone = 0
+
+const modifierThumbnailPath = 'media/modifier-thumbnails';
+const activeCardClass = 'modifier-card-active';
+
+function getLocalStorageItem(key, fallback) {
+    let item = localStorage.getItem(key)
+    if (item === null) {
+        return fallback
+    }
+
+    return item
+}
+
+function getLocalStorageBoolItem(key, fallback) {
+    let item = localStorage.getItem(key)
+    if (item === null) {
+        return fallback
+    }
+
+    return (item === 'true' ? true : false)
+}
+
+function handleBoolSettingChange(key) {
+    return function(e) {
+        localStorage.setItem(key, e.target.checked.toString())
+    }
+}
+
+function handleStringSettingChange(key) {
+    return function(e) {
+        localStorage.setItem(key, e.target.value.toString())
+    }
+}
+
+function isSoundEnabled() {
+    return getLocalStorageBoolItem(SOUND_ENABLED_KEY, true)
+}
+
+function isFaceCorrectionEnabled() {
+    return getLocalStorageBoolItem(USE_FACE_CORRECTION_KEY, false)
+}
+
+function isUpscalingEnabled() {
+    return getLocalStorageBoolItem(USE_UPSCALING_KEY, false)
+}
+
+function isShowOnlyFilteredImageEnabled() {
+    return getLocalStorageBoolItem(SHOW_ONLY_FILTERED_IMAGE_KEY, true)
+}
+
+function isSaveToDiskEnabled() {
+    return getLocalStorageBoolItem(SAVE_TO_DISK_KEY, false)
+}
+
+function isUseCPUEnabled() {
+    return getLocalStorageBoolItem(USE_CPU_KEY, false)
+}
+
+function isUseFullPrecisionEnabled() {
+    return getLocalStorageBoolItem(USE_FULL_PRECISION_KEY, false)
+}
+
+function isUseTurboModeEnabled() {
+    return getLocalStorageBoolItem(USE_TURBO_MODE_KEY, true)
+}
+
+function getSavedDiskPath() {
+    return getLocalStorageItem(DISK_PATH_KEY, '')
+}
+
+function isAdvancedPanelOpenEnabled() {
+    return getLocalStorageBoolItem(ADVANCED_PANEL_OPEN_KEY, false)
+}
+
+function isModifiersPanelOpenEnabled() {
+    return getLocalStorageBoolItem(MODIFIERS_PANEL_OPEN_KEY, false)
+}
+
+function isStreamImageProgressEnabled() {
+    return getLocalStorageBoolItem(STREAM_IMAGE_PROGRESS_KEY, false)
+}
+
+function setStatus(statusType, msg, msgType) {
+    if (statusType !== 'server') {
+        return;
+    }
+
+    if (msgType == 'error') {
+        // msg = '<span style="color: red">' + msg + '<span>'
+        serverStatusColor.style.color = 'red'
+        serverStatusMsg.style.color = 'red'
+        serverStatusMsg.innerText = 'Stable Diffusion has stopped'
+    } else if (msgType == 'success') {
+        // msg = '<span style="color: green">' + msg + '<span>'
+        serverStatusColor.style.color = 'green'
+        serverStatusMsg.style.color = 'green'
+        serverStatusMsg.innerText = 'Stable Diffusion is ready'
+        serverStatus = 'online'
+    }
+}
+
+function logMsg(msg, level) {
+    if (level === 'error') {
+        outputMsg.innerHTML = '<span style="color: red">Error: ' + msg + '</span>'
+    } else if (level === 'warn') {
+        outputMsg.innerHTML = '<span style="color: orange">Warning: ' + msg + '</span>'
+    } else {
+        outputMsg.innerText = msg
+    }
+
+    console.log(level, msg)
+}
+
+function logError(msg, res) {
+    logMsg(msg, 'error')
+
+    console.log('request error', res)
+    setStatus('request', 'error', 'error')
+}
+
+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')
+    }
+}
+
+function makeImageElement(width, height) {
+    let imgItem = document.createElement('div')
+    imgItem.className = 'imgItem'
+
+    let img = document.createElement('img')
+    img.width = parseInt(width)
+    img.height = parseInt(height)
+
+    imgItem.appendChild(img)
+    imagesContainer.appendChild(imgItem)
+
+    return imgItem
+}
+
+// makes a single image. don't call this directly, use makeImage() instead
+async function doMakeImage(reqBody, batchCount) {
+    if (taskStopped) {
+        return
+    }
+
+    let res = ''
+    let seed = reqBody['seed']
+    let numOutputs = parseInt(reqBody['num_outputs'])
+
+    let images = []
+
+    function makeImageContainers(numImages) {
+        for (let i = images.length; i < numImages; i++) {
+            images.push(makeImageElement(reqBody.width, reqBody.height))
+        }
+    }
+
+    try {
+        res = await fetch('/image', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(reqBody)
+        })
+
+        let reader = res.body.getReader()
+        let textDecoder = new TextDecoder()
+        let finalJSON = ''
+        let prevTime = -1
+        while (true) {
+            try {
+                let t = new Date().getTime()
+
+                const {value, done} = await reader.read()
+                if (done) {
+                    break
+                }
+
+                let timeTaken = (prevTime === -1 ? -1 : t - prevTime)
+
+                let jsonStr = textDecoder.decode(value)
+
+                try {
+                    let stepUpdate = JSON.parse(jsonStr)
+
+                    if (stepUpdate.step === undefined) {
+                        finalJSON += jsonStr
+                    } else {
+                        let batchSize = stepUpdate.total_steps
+                        let overallStepCount = stepUpdate.step + batchesDone * batchSize
+                        let totalSteps = batchCount * batchSize
+                        let percent = 100 * (overallStepCount / totalSteps)
+                        percent = (percent > 100 ? 100 : percent)
+                        percent = percent.toFixed(0)
+
+                        stepsRemaining = totalSteps - overallStepCount
+                        stepsRemaining = (stepsRemaining < 0 ? 0 : stepsRemaining)
+                        timeRemaining = (timeTaken === -1 ? '' : stepsRemaining * timeTaken) // ms
+
+                        outputMsg.innerHTML = `Batch ${batchesDone+1} of ${batchCount}`
+                        progressBar.innerHTML = `Generating image(s): ${percent}%`
+
+                        if (timeTaken !== -1) {
+                            progressBar.innerHTML += `<br>Time remaining (approx): ${millisecondsToStr(timeRemaining)}`
+                        }
+                        progressBar.style.display = 'block'
+
+                        if (stepUpdate.output !== undefined) {
+                            makeImageContainers(numOutputs)
+
+                            for (idx in stepUpdate.output) {
+                                let imgItem = images[idx]
+                                let img = imgItem.firstChild
+                                let tmpImageData = stepUpdate.output[idx]
+                                img.src = tmpImageData['path'] + '?t=' + new Date().getTime()
+                            }
+                        }
+                    }
+                } catch (e) {
+                    finalJSON += jsonStr
+                }
+
+                prevTime = t
+            } catch (e) {
+                logError('Stable Diffusion had an error. Please check the logs in the command-line window.', res)
+                res = undefined
+                throw e
+            }
+        }
+
+        if (res.status != 200) {
+            if (serverStatus === 'online') {
+                logError('Stable Diffusion had an error: ' + await res.text(), res)
+            } else {
+                logError("Stable Diffusion is still starting up, please wait. If this goes on beyond a few minutes, Stable Diffusion has probably crashed. Please check the error message in the command-line window.", res)
+            }
+            res = undefined
+            progressBar.style.display = 'none'
+        } else {
+            res = JSON.parse(finalJSON)
+            progressBar.style.display = 'none'
+
+            if (res.status !== 'succeeded') {
+                let msg = ''
+                if (res.detail !== undefined) {
+                    msg = res.detail
+
+                    if (msg.toLowerCase().includes('out of memory')) {
+                        msg += `<br/><br/>
+                                <b>Suggestions</b>:
+                                <br/>
+                                1. If you have set an initial image, please try reducing its dimension to ${MAX_INIT_IMAGE_DIMENSION}x${MAX_INIT_IMAGE_DIMENSION} or smaller.<br/>
+                                2. Try disabling the '<em>Turbo mode</em>' under '<em>Advanced Settings</em>'.<br/>
+                                3. Try generating a smaller image.<br/>`
+                    }
+                } else {
+                    msg = res
+                }
+                logError(msg, res)
+                res = undefined
+            }
+        }
+    } catch (e) {
+        console.log('request error', e)
+        logError('Stable Diffusion had an error. Please check the logs in the command-line window. <br/><br/>' + e + '<br/><pre>' + e.stack + '</pre>', res)
+        setStatus('request', 'error', 'error')
+        progressBar.style.display = 'none'
+        res = undefined
+    }
+
+    if (!res) {
+        return false
+    }
+
+    lastPromptUsed = reqBody['prompt']
+
+    makeImageContainers(res.output.length)
+
+    for (let idx in res.output) {
+        let imgBody = ''
+        let seed = 0
+
+        try {
+            let imgData = res.output[idx]
+            imgBody = imgData.data
+            seed = imgData.seed
+        } catch (e) {
+            console.log(imgBody)
+            setStatus('request', 'invalid image', 'error')
+            continue
+        }
+
+        let imgItem = images[idx]
+        let img = imgItem.firstChild
+
+        img.src = imgBody
+
+        let imgItemInfo = document.createElement('span')
+        imgItemInfo.className = 'imgItemInfo'
+
+        let imgSeedLabel = document.createElement('span')
+        imgSeedLabel.className = 'imgSeedLabel'
+        imgSeedLabel.innerText = 'Seed: ' + seed
+
+        let imgUseBtn = document.createElement('button')
+        imgUseBtn.className = 'imgUseBtn'
+        imgUseBtn.innerText = 'Use as Input'
+
+        let imgSaveBtn = document.createElement('button')
+        imgSaveBtn.className = 'imgSaveBtn'
+        imgSaveBtn.innerText = 'Download'
+
+        imgItem.appendChild(imgItemInfo)
+        imgItemInfo.appendChild(imgSeedLabel)
+        imgItemInfo.appendChild(imgUseBtn)
+        imgItemInfo.appendChild(imgSaveBtn)
+
+        imgUseBtn.addEventListener('click', function() {
+            initImageSelector.value = null
+            initImagePreview.src = imgBody
+
+            initImagePreviewContainer.style.display = 'block'
+            inpaintingEditorContainer.style.display = 'none'
+            promptStrengthContainer.style.display = 'block'
+            maskSetting.checked = false
+
+            // maskSetting.style.display = 'block'
+
+            randomSeedField.checked = false
+            seedField.value = seed
+            seedField.disabled = false
+        })
+
+        imgSaveBtn.addEventListener('click', function() {
+            let imgDownload = document.createElement('a')
+            imgDownload.download = createFileName();
+            imgDownload.href = imgBody
+            imgDownload.click()
+        })
+
+        imgItem.addEventListener('mouseenter', function() {
+            imgItemInfo.style.opacity = 1
+        })
+
+        imgItem.addEventListener('mouseleave', function() {
+            imgItemInfo.style.opacity = 0.5
+        })
+    }
+
+    return true
+}
+
+function validateInput() {
+    let width = parseInt(widthField.value)
+    let height = parseInt(heightField.value)
+
+    if (IMAGE_REGEX.test(initImagePreview.src)) {
+        if (initImagePreview.naturalWidth > MAX_INIT_IMAGE_DIMENSION || initImagePreview.naturalHeight > MAX_INIT_IMAGE_DIMENSION) {
+            return {'isValid': false, 'warning': `The dimensions of your initial image are very large, and can cause 'Out of Memory' errors! Please ensure that its dimensions are equal (or smaller) than the desired output image.
+                    <br/><br/>
+                    Your initial image size is ${initImagePreview.naturalWidth}x${initImagePreview.naturalHeight} pixels. Please try to keep it smaller than ${MAX_INIT_IMAGE_DIMENSION}x${MAX_INIT_IMAGE_DIMENSION}.`}
+        }
+    }
+
+    return {'isValid': true}
+}
+
+async function makeImage() {
+    if (serverStatus !== 'online') {
+        logError('The server is still starting up..')
+        return
+    }
+
+    let validation = validateInput()
+    if (validation['isValid']) {
+        outputMsg.innerHTML = 'Starting..'
+    } else {
+        if (validation['error']) {
+            logError(validation['error'])
+            return
+        } else if (validation['warning']) {
+            logMsg(validation['warning'], 'warn')
+        }
+    }
+
+    setStatus('request', 'fetching..')
+
+    makeImageBtn.innerHTML = 'Processing..'
+    makeImageBtn.disabled = true
+    makeImageBtn.style.display = 'none'
+    stopImageBtn.style.display = 'block'
+
+    taskStopped = false
+    batchesDone = 0
+
+    let seed = (randomSeedField.checked ? Math.floor(Math.random() * 10000000) : parseInt(seedField.value))
+    let numOutputsTotal = parseInt(numOutputsTotalField.value)
+    let numOutputsParallel = parseInt(numOutputsParallelField.value)
+    let batchCount = Math.ceil(numOutputsTotal / numOutputsParallel)
+    let batchSize = numOutputsParallel
+
+    let streamImageProgress = (numOutputsTotal > 50 ? false : streamImageProgressField.checked)
+
+    let prompt = promptField.value
+    if (activeTags.length > 0) {
+        let promptTags = activeTags.map(x => x.name).join(", ");
+        prompt += ", " + promptTags;
+    }
+
+    previewPrompt.innerText = prompt
+
+    let reqBody = {
+        session_id: sessionId,
+        prompt: prompt,
+        num_outputs: batchSize,
+        num_inference_steps: numInferenceStepsField.value,
+        guidance_scale: guidanceScaleField.value,
+        width: widthField.value,
+        height: heightField.value,
+        // allow_nsfw: allowNSFWField.checked,
+        turbo: turboField.checked,
+        use_cpu: useCPUField.checked,
+        use_full_precision: useFullPrecisionField.checked,
+        stream_progress_updates: true,
+        stream_image_progress: streamImageProgress,
+        show_only_filtered_image: showOnlyFilteredImageField.checked
+    }
+
+    if (IMAGE_REGEX.test(initImagePreview.src)) {
+        reqBody['init_image'] = initImagePreview.src
+        reqBody['prompt_strength'] = promptStrengthField.value
+
+        // if (IMAGE_REGEX.test(maskImagePreview.src)) {
+        //     reqBody['mask'] = maskImagePreview.src
+        // }
+        if (maskSetting.checked) {
+            reqBody['mask'] = inpaintingEditor.getImg()
+        }
+
+        reqBody['sampler'] = 'ddim'
+    } else {
+        reqBody['sampler'] = samplerField.value
+    }
+
+    if (saveToDiskField.checked && diskPathField.value.trim() !== '') {
+        reqBody['save_to_disk_path'] = diskPathField.value.trim()
+    }
+
+    if (useFaceCorrectionField.checked) {
+        reqBody['use_face_correction'] = 'GFPGANv1.3'
+    }
+
+    if (useUpscalingField.checked) {
+        reqBody['use_upscale'] = upscaleModelField.value
+    }
+
+    let time = new Date().getTime()
+    imagesContainer.innerHTML = ''
+
+    let successCount = 0
+
+    for (let i = 0; i < batchCount; i++) {
+        reqBody['seed'] = seed + (i * batchSize)
+
+        let success = await doMakeImage(reqBody, batchCount)
+        batchesDone++
+
+        if (success) {
+            outputMsg.innerText = 'Processed batch ' + (i+1) + '/' + batchCount
+            successCount++
+        }
+    }
+
+    makeImageBtn.innerText = 'Make Image'
+    makeImageBtn.disabled = false
+    makeImageBtn.style.display = 'block'
+    stopImageBtn.style.display = 'none'
+
+    if (isSoundEnabled()) {
+        playSound()
+    }
+
+    time = new Date().getTime() - time
+    time /= 1000
+
+    if (successCount === batchCount) {
+        outputMsg.innerText = 'Processed ' + numOutputsTotal + ' images in ' + time + ' seconds'
+
+        setStatus('request', 'done', 'success')
+    }
+
+    if (randomSeedField.checked) {
+        seedField.value = seed
+    }
+}
+
+// create a file name with embedded prompt and metadata
+// for easier cateloging and comparison
+function createFileName() {
+
+    // Most important information is the prompt
+    let underscoreName = lastPromptUsed.replace(/[^a-zA-Z0-9]/g, '_')
+    underscoreName = underscoreName.substring(0, 100)
+    const seed = seedField.value
+    const steps = numInferenceStepsField.value
+    const guidance =  guidanceScaleField.value
+
+    // name and the top level metadata
+    let fileName = `${underscoreName}_Seed-${seed}_Steps-${steps}_Guidance-${guidance}`
+
+    // add the tags
+    // let tags = [];
+    // let tagString = '';
+    // document.querySelectorAll(modifyTagsSelector).forEach(function(tag) {
+    //     tags.push(tag.innerHTML);
+    // })
+
+    // join the tags with a pipe
+    // if (activeTags.length > 0) {
+    //     tagString = '_Tags-';
+    //     tagString += tags.join('|');
+    // }
+
+    // // append empty or populated tags
+    // fileName += `${tagString}`;
+
+    // add the file extension
+    fileName += `.png`
+
+    return fileName
+}
+
+stopImageBtn.addEventListener('click', async function() {
+    try {
+        let res = await fetch('/image/stop')
+    } catch (e) {
+        console.log(e)
+    }
+
+    stopImageBtn.style.display = 'none'
+    makeImageBtn.style.display = 'block'
+
+    taskStopped = true
+})
+
+soundToggle.addEventListener('click', handleBoolSettingChange(SOUND_ENABLED_KEY))
+soundToggle.checked = isSoundEnabled()
+
+saveToDiskField.checked = isSaveToDiskEnabled()
+diskPathField.disabled = !saveToDiskField.checked
+
+useFaceCorrectionField.addEventListener('click', handleBoolSettingChange(USE_FACE_CORRECTION_KEY))
+useFaceCorrectionField.checked = isFaceCorrectionEnabled()
+
+useUpscalingField.checked = isUpscalingEnabled()
+upscaleModelField.disabled = !useUpscalingField.checked
+
+showOnlyFilteredImageField.addEventListener('click', handleBoolSettingChange(SHOW_ONLY_FILTERED_IMAGE_KEY))
+showOnlyFilteredImageField.checked = isShowOnlyFilteredImageEnabled()
+
+useCPUField.addEventListener('click', handleBoolSettingChange(USE_CPU_KEY))
+useCPUField.checked = isUseCPUEnabled()
+
+useFullPrecisionField.addEventListener('click', handleBoolSettingChange(USE_FULL_PRECISION_KEY))
+useFullPrecisionField.checked = isUseFullPrecisionEnabled()
+
+turboField.addEventListener('click', handleBoolSettingChange(USE_TURBO_MODE_KEY))
+turboField.checked = isUseTurboModeEnabled()
+
+streamImageProgressField.addEventListener('click', handleBoolSettingChange(STREAM_IMAGE_PROGRESS_KEY))
+streamImageProgressField.checked = isStreamImageProgressEnabled()
+
+diskPathField.addEventListener('change', handleStringSettingChange(DISK_PATH_KEY))
+
+saveToDiskField.addEventListener('click', function(e) {
+    diskPathField.disabled = !this.checked
+    handleBoolSettingChange(SAVE_TO_DISK_KEY)(e)
+})
+
+useUpscalingField.addEventListener('click', function(e) {
+    upscaleModelField.disabled = !this.checked
+    handleBoolSettingChange(USE_UPSCALING_KEY)(e)
+})
+
+function setPanelOpen(panelHandle) {
+    let panelContents = panelHandle.nextElementSibling
+    panelHandle.classList.add('active')
+    panelContents.style.display = 'block'
+}
+
+if (isAdvancedPanelOpenEnabled()) {
+    setPanelOpen(advancedPanelHandle)
+}
+
+if (isModifiersPanelOpenEnabled()) {
+    setPanelOpen(modifiersPanelHandle)
+}
+
+makeImageBtn.addEventListener('click', makeImage)
+
+
+function updateGuidanceScale() {
+    guidanceScaleField.value = guidanceScaleSlider.value / 10
+}
+
+function updateGuidanceScaleSlider() {
+    if (guidanceScaleField.value < 0) {
+        guidanceScaleField.value = 0
+    } else if (guidanceScaleField.value > 50) {
+        guidanceScaleField.value = 50
+    }
+
+    guidanceScaleSlider.value = guidanceScaleField.value * 10
+}
+
+guidanceScaleSlider.addEventListener('input', updateGuidanceScale)
+guidanceScaleField.addEventListener('input', updateGuidanceScaleSlider)
+updateGuidanceScale()
+
+function updatePromptStrength() {
+    promptStrengthField.value = promptStrengthSlider.value / 100
+}
+
+function updatePromptStrengthSlider() {
+    if (promptStrengthField.value < 0) {
+        promptStrengthField.value = 0
+    } else if (promptStrengthField.value > 0.99) {
+        promptStrengthField.value = 0.99
+    }
+
+    promptStrengthSlider.value = promptStrengthField.value * 100
+}
+
+promptStrengthSlider.addEventListener('input', updatePromptStrength)
+promptStrengthField.addEventListener('input', updatePromptStrengthSlider)
+updatePromptStrength()
+
+useBetaChannelField.addEventListener('click', async function(e) {
+    if (serverStatus !== 'online') {
+        logError('The server is still starting up..')
+        alert('The server is still starting up..')
+        e.preventDefault()
+        return false
+    }
+
+    let updateBranch = (this.checked ? 'beta' : 'main')
+
+    try {
+        let res = await fetch('/app_config', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                'update_branch': updateBranch
+            })
+        })
+        res = await res.json()
+
+        console.log('set config status response', res)
+    } catch (e) {
+        console.log('set config status error', e)
+    }
+})
+
+async function getAppConfig() {
+    try {
+        let res = await fetch('/app_config')
+        config = await res.json()
+
+        if (config.update_branch === 'beta') {
+            useBetaChannelField.checked = true
+            updateBranchLabel.innerText = "(beta)"
+        }
+
+        console.log('get config status response', config)
+    } catch (e) {
+        console.log('get config status error', e)
+    }
+}
+
+function checkRandomSeed() {
+    if (randomSeedField.checked) {
+        seedField.disabled = true
+        seedField.value = "0"
+    } else {
+        seedField.disabled = false
+    }
+}
+randomSeedField.addEventListener('input', checkRandomSeed)
+checkRandomSeed()
+
+function showInitImagePreview() {
+    if (initImageSelector.files.length === 0) {
+        initImagePreviewContainer.style.display = 'none'
+        // inpaintingEditorContainer.style.display = 'none'
+        promptStrengthContainer.style.display = 'none'
+        // maskSetting.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'
+        inpaintingEditorContainer.style.display = 'none'
+        promptStrengthContainer.style.display = 'block'
+        samplerSelectionContainer.style.display = 'none'
+        // maskSetting.checked = false
+    })
+
+    if (file) {
+        reader.readAsDataURL(file)
+    }
+}
+initImageSelector.addEventListener('change', showInitImagePreview)
+showInitImagePreview()
+
+initImagePreview.addEventListener('load', function() {
+    inpaintingEditorCanvasBackground.style.backgroundImage = "url('" + this.src + "')"
+    // maskSetting.style.display = 'block'
+    // inpaintingEditorContainer.style.display = 'block'
+})
+
+initImageClearBtn.addEventListener('click', function() {
+    initImageSelector.value = null
+    // maskImageSelector.value = null
+
+    initImagePreview.src = ''
+    // maskImagePreview.src = ''
+    maskSetting.checked = false
+
+    initImagePreviewContainer.style.display = 'none'
+    // inpaintingEditorContainer.style.display = 'none'
+    // maskImagePreviewContainer.style.display = 'none'
+
+    // maskSetting.style.display = 'none'
+
+    promptStrengthContainer.style.display = 'none'
+    samplerSelectionContainer.style.display = 'block'
+})
+
+maskSetting.addEventListener('click', function() {
+    inpaintingEditorContainer.style.display = (this.checked ? 'block' : 'none')
+})
+
+// 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'
+// })
+
+// https://stackoverflow.com/a/8212878
+function millisecondsToStr(milliseconds) {
+    function numberEnding (number) {
+        return (number > 1) ? 's' : '';
+    }
+
+    var temp = Math.floor(milliseconds / 1000);
+    var hours = Math.floor((temp %= 86400) / 3600);
+    var s = ''
+    if (hours) {
+        s += hours + ' hour' + numberEnding(hours) + ' ';
+    }
+    var minutes = Math.floor((temp %= 3600) / 60);
+    if (minutes) {
+        s += minutes + ' minute' + numberEnding(minutes) + ' ';
+    }
+    var seconds = temp % 60;
+    if (!hours && minutes < 4 && seconds) {
+        s += seconds + ' second' + numberEnding(seconds);
+    }
+
+    return s;
+}
+
+function createCollapsibles(node) {
+    if (!node) {
+        node = document
+    }
+
+    let collapsibles = node.querySelectorAll(".collapsible")
+    collapsibles.forEach(function(c) {
+        let handle = document.createElement('span')
+        handle.className = 'collapsible-handle'
+
+        if (c.className.indexOf('active') !== -1) {
+            handle.innerHTML = '&#x2796;' // minus
+        } else {
+            handle.innerHTML = '&#x2795;' // plus
+        }
+        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
+            }
+
+            if (this == advancedPanelHandle) {
+                let state = (content.style.display === 'block' ? 'true' : 'false')
+                localStorage.setItem(ADVANCED_PANEL_OPEN_KEY, state)
+            } else if (this == modifiersPanelHandle) {
+                let state = (content.style.display === 'block' ? 'true' : 'false')
+                localStorage.setItem(MODIFIERS_PANEL_OPEN_KEY, state)
+            }
+        })
+    })
+}
+createCollapsibles()
+
+function refreshTagsList() {
+    editorModifierTagsList.innerHTML = '';
+
+    if (activeTags.length == 0) {
+        editorTagsContainer.style.display = 'none';
+        return;
+    } else {
+        editorTagsContainer.style.display = 'block';
+    }
+
+    activeTags.forEach((tag, index) => {
+        tag.element.querySelector('.modifier-card-image-overlay').innerText = '-';
+        tag.element.classList.add('modifier-card-tiny');
+
+        editorModifierTagsList.appendChild(tag.element);
+
+        tag.element.addEventListener('click', () => {
+            let idx = activeTags.indexOf(tag);
+
+            if (idx !== -1) {
+                activeTags[idx].originElement.classList.remove(activeCardClass);
+                activeTags[idx].originElement.querySelector('.modifier-card-image-overlay').innerText = '+';
+
+                activeTags.splice(idx, 1);
+                refreshTagsList();
+            }
+        });
+    });
+
+    let brk = document.createElement('br')
+    brk.style.clear = 'both'
+    editorModifierTagsList.appendChild(brk)
+}
+
+async function getDiskPath() {
+    try {
+        let diskPath = getSavedDiskPath()
+
+        if (diskPath !== '') {
+            diskPathField.value = diskPath
+            return
+        }
+
+        let res = await fetch('/output_dir')
+        if (res.status === 200) {
+            res = await res.json()
+            res = res[0]
+
+            document.querySelector('#diskPath').value = res
+        }
+    } catch (e) {
+        console.log('error fetching output dir path', e)
+    }
+}
+
+function createModifierCard(name, previews) {
+    const modifierCard = document.createElement('div');
+    modifierCard.className = 'modifier-card';
+    modifierCard.innerHTML = `
+    <div class="modifier-card-overlay"></div>
+    <div class="modifier-card-image-container">
+        <div class="modifier-card-image-overlay">+</div>
+        <p class="modifier-card-error-label"></p>
+        <img onerror="this.remove()" alt="Modifier Image" class="modifier-card-image">
+    </div>
+    <div class="modifier-card-container">
+        <div class="modifier-card-label"><p></p></div>
+    </div>`;
+
+    const image = modifierCard.querySelector('.modifier-card-image');
+    const errorText =  modifierCard.querySelector('.modifier-card-error-label');
+    const label = modifierCard.querySelector('.modifier-card-label');
+
+    errorText.innerText = 'No Image';
+
+    if (typeof previews == 'object') {
+        image.src = previews[0]; // portrait
+        image.setAttribute('preview-type', 'portrait');
+    } else {
+        image.remove();
+    }
+
+    const maxLabelLength = 30;
+    const nameWithoutBy = name.replace('by ', '');
+
+    if(nameWithoutBy.length <= maxLabelLength) {
+        label.querySelector('p').innerText = nameWithoutBy;
+    } else {
+        const tooltipText = document.createElement('span');
+        tooltipText.className = 'tooltip-text';
+        tooltipText.innerText = name;
+
+        label.classList.add('tooltip');
+        label.appendChild(tooltipText);
+
+        label.querySelector('p').innerText = nameWithoutBy.substring(0, maxLabelLength) + '...';
+    }
+
+    return modifierCard;
+}
+
+function changePreviewImages(val) {
+    const previewImages = document.querySelectorAll('.modifier-card-image-container img');
+
+    let previewArr = [];
+
+    modifiers.map(x => x.modifiers).forEach(x => previewArr.push(...x.map(m => m.previews)));
+    
+    previewArr = previewArr.map(x => {
+        let obj = {};
+
+        x.forEach(preview => {
+            obj[preview.name] = preview.path;
+        });
+        
+        return obj;
+    });
+
+    previewImages.forEach(previewImage => {
+        const currentPreviewType = previewImage.getAttribute('preview-type');
+        const relativePreviewPath = previewImage.src.split(modifierThumbnailPath + '/').pop();
+
+        const previews = previewArr.find(preview => relativePreviewPath == preview[currentPreviewType]);
+
+        if(typeof previews == 'object') {
+            let preview = null;
+
+            if (val == 'portrait') {
+                preview = previews.portrait;
+            }
+            else if (val == 'landscape') {
+                preview = previews.landscape;
+            }
+
+            if(preview != null) {
+                previewImage.src = `${modifierThumbnailPath}/${preview}`;
+                previewImage.setAttribute('preview-type', val);
+            }
+        }
+    });
+}
+
+function resizeModifierCards(val) {
+    const cardSizePrefix = 'modifier-card-size_';
+    const modifierCardClass = 'modifier-card';
+
+    const modifierCards = document.querySelectorAll(`.${modifierCardClass}`);
+    const cardSize = n => `${cardSizePrefix}${n}`;
+
+    modifierCards.forEach(card => {
+        // remove existing size classes
+        const classes = card.className.split(' ').filter(c => !c.startsWith(cardSizePrefix));
+        card.className = classes.join(' ').trim();
+
+        if(val != 0)
+            card.classList.add(cardSize(val));
+    });
+}
+
+async function loadModifiers() {
+    try {
+        let res = await fetch('/modifiers.json')
+        if (res.status === 200) {
+            res = await res.json()
+
+            modifiers = res; // update global variable
+
+            res.forEach(modifierGroup => {
+                const title = modifierGroup.category;
+                const modifiers = modifierGroup.modifiers;
+
+                const titleEl = document.createElement('h5');
+                titleEl.className = 'collapsible';
+                titleEl.innerText = title;
+
+                const modifiersEl = document.createElement('div');
+                modifiersEl.classList.add('collapsible-content', 'editor-modifiers-leaf');
+
+                modifiers.forEach(modObj => {
+                    const modifierName = modObj.modifier;
+                    const modifierPreviews = modObj?.previews?.map(preview => `${modifierThumbnailPath}/${preview.path}`);
+
+                    const modifierCard = createModifierCard(modifierName, modifierPreviews);
+
+                    if(typeof modifierCard == 'object') {
+                        modifiersEl.appendChild(modifierCard);
+
+                        modifierCard.addEventListener('click', () => {
+                            if (activeTags.map(x => x.name).includes(modifierName)) {
+                                // remove modifier from active array
+                                activeTags = activeTags.filter(x => x.name != modifierName);
+                                modifierCard.classList.remove(activeCardClass);
+                                
+                                modifierCard.querySelector('.modifier-card-image-overlay').innerText = '+';
+                            } else {
+                                // add modifier to active array
+                                activeTags.push({
+                                    'name': modifierName,
+                                    'element': modifierCard.cloneNode(true),
+                                    'originElement': modifierCard,
+                                    'previews': modifierPreviews
+                                });
+
+                                modifierCard.classList.add(activeCardClass);
+
+                                modifierCard.querySelector('.modifier-card-image-overlay').innerText = '-';
+                            }
+
+                            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)
+    }
+}
\ No newline at end of file
