Merge branch 'beta' into mdiller_settings

ui/index.html

@@ -6,6 +6,7 @@
     <link rel="icon" type="image/png" href="/media/images/favicon-32x32.png" sizes="32x32">
     <link rel="stylesheet" href="/media/css/fonts.css?v=1">
     <link rel="stylesheet" href="/media/css/themes.css?v=1">
+    <link rel="stylesheet" href="/media/css/auto-save.css?v=1">
     <link rel="stylesheet" href="/media/css/main.css?v=1">
     <link rel="stylesheet" href="/media/css/auto-save.css?v=1">
     <link rel="stylesheet" href="/media/css/modifier-thumbnails.css?v=1">
@@ -18,7 +19,7 @@
 <div id="container">
     <div id="top-nav">
         <div id="logo">
-            <h1>Stable Diffusion UI <small>v2.29 <span id="updateBranchLabel"></span></small></h1>
+            <h1>Stable Diffusion UI <small>v2.3.2 <span id="updateBranchLabel"></span></small></h1>
         </div>
         <ul id="top-nav-items">
             <li class="dropdown">
@@ -107,7 +108,7 @@
                 <ul id="editor-settings-entries" class="collapsible-content">
                     <li><table>
                     <tr><b class="settings-subheader">Image Settings</b></tr>
-                    <tr class="pl-5"><td><label for="seed">Seed:</label></td><td><input id="seed" name="seed" size="10" value="30000"> <input id="random_seed" name="random_seed" type="checkbox" checked> <label for="random_seed">Random</label></td></tr>
+                    <tr class="pl-5"><td><label for="seed">Seed:</label></td><td><input id="seed" name="seed" size="10" value="30000"> <input id="random_seed" name="random_seed" type="checkbox" checked><label for="random_seed">Random</label></td></tr>
                     <tr class="pl-5"><td><label for="num_outputs_total">Number of Images:</label></td><td><input id="num_outputs_total" name="num_outputs_total" value="1" size="1"> <label><small>(total)</small></label> <input id="num_outputs_parallel" name="num_outputs_parallel" value="1" size="1"> <label for="num_outputs_parallel"><small>(in parallel)</small></label></td></tr>
                     <tr class="pl-5"><td><label for="stable_diffusion_model">Model:</label></td><td>
                         <select id="stable_diffusion_model" name="stable_diffusion_model">
@@ -250,11 +251,12 @@
 </div>
 </body>
 
-<script src="media/js/utils.js?v=1"></script>
+<script src="media/js/plugins.js?v=1"></script>
+<script src="media/js/utils.js?v=2"></script>
 <script src="media/js/inpainting-editor.js?v=1"></script>
 <script src="media/js/image-modifiers.js"></script>
 <script src="media/js/auto-save.js?v=1"></script>
-<script src="media/js/main.js?v=1"></script>
+<script src="media/js/main.js?v=2"></script>
 <script src="media/js/themes.js?v=1"></script>
 <script>
 async function init() {
@@ -263,7 +265,7 @@ async function init() {
     await getDiskPath()
     await getAppConfig()
     await loadModifiers()
-
+    await loadUIPlugins()
 
     setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
     healthCheck()

ui/media/js/main.js

@@ -285,116 +285,140 @@ function showImages(reqBody, res, outputContainer, livePreview) {
             const imageSeedLabel = imageItemElem.querySelector('.imgSeedLabel')
             imageSeedLabel.innerText = 'Seed: ' + req.seed
 
-            const buttons = {
+            let buttons = [
-                'imgUseBtn': { html: 'Use as Input', click: getUseAsInputHandler(imageItemElem) },
+                { text: 'Use as Input', on_click: onUseAsInputClick },
-                'imgSaveBtn': { html: 'Download', click: getSaveImageHandler(imageItemElem, req['output_format']) },
+                { text: 'Download', on_click: onDownloadImageClick },
-                'imgX2Btn': { html: 'Double Size', click: getStartNewTaskHandler(req, imageItemElem, 'img2img_X2') },
+                { text: 'Make Similar Images', on_click: onMakeSimilarClick },
-                'imgRedoBtn': { html: 'Redo', click: getStartNewTaskHandler(req, imageItemElem, 'img2img') },
+                { text: 'Draw another 25 steps', on_click: onContinueDrawingClick },
-            }
+                { text: 'Upscale (new)', on_click: onUpscaleClick, filter: (req, img) => !req.use_upscale },
-            if (!req.use_upscale) {
+                { text: 'Fix Faces', on_click: onFixFacesClick, filter: (req, img) => !req.use_face_correction }
-                buttons.upscaleBtn = { html: 'Upscale', click: getStartNewTaskHandler(req, imageItemElem, 'upscale') }
+            ]
-            }
+
+            // include the plugins
+            buttons = buttons.concat(PLUGINS['IMAGE_INFO_BUTTONS'])
+
             const imgItemInfo = imageItemElem.querySelector('.imgItemInfo')
-            const createButton = function(name, btnInfo) {
+            const img = imageItemElem.querySelector('img')
+            const createButton = function(btnInfo) {
                 const newButton = document.createElement('button')
-                newButton.classList.add(name)
                 newButton.classList.add('tasksBtns')
-                newButton.innerHTML = btnInfo.html
+                newButton.innerText = btnInfo.text
-                newButton.addEventListener('click', btnInfo.click)
+                newButton.addEventListener('click', function() {
+                    btnInfo.on_click(req, img)
+                })
                 imgItemInfo.appendChild(newButton)
             }
-            Object.keys(buttons).forEach((name) => createButton(name, buttons[name]))
+            buttons.forEach(btn => {
+                if (btn.filter && btn.filter(req, img) === false) {
+                    return
+                }
+
+                createButton(btn)
+            })
         }
     })
 }
 
-function getUseAsInputHandler(imageItemElem) {
+function onUseAsInputClick(req, img) {
-    return function() {
+    const imgData = img.src
-        const imageElem = imageItemElem.querySelector('img')
-        const imgData = imageElem.src
-        const imageSeed = imageElem.getAttribute('data-seed')
 
-        initImageSelector.value = null
+    initImageSelector.value = null
-        initImagePreview.src = imgData
+    initImagePreview.src = imgData
 
-        initImagePreviewContainer.style.display = 'block'
+    initImagePreviewContainer.style.display = 'block'
-        inpaintingEditorContainer.style.display = 'none'
+    inpaintingEditorContainer.style.display = 'none'
-        promptStrengthContainer.style.display = 'table-row'
+    promptStrengthContainer.style.display = 'table-row'
-        maskSetting.checked = false
+    maskSetting.checked = false
-        samplerSelectionContainer.style.display = 'none'
+    samplerSelectionContainer.style.display = 'none'
-
-        // maskSetting.style.display = 'block'
-
-        // randomSeedField.checked = false
-        // seedField.value = imageSeed
-        // seedField.disabled = false
-    }
 }
 
-function getSaveImageHandler(imageItemElem, outputFormat) {
+function onDownloadImageClick(req, img) {
-    return function() {
+    const imgData = img.src
-        const imageElem = imageItemElem.querySelector('img')
+    const imageSeed = img.getAttribute('data-seed')
-        const imgData = imageElem.src
+    const imagePrompt = img.getAttribute('data-prompt')
-        const imageSeed = imageElem.getAttribute('data-seed')
+    const imageInferenceSteps = img.getAttribute('data-steps')
-        const imagePrompt = imageElem.getAttribute('data-prompt')
+    const imageGuidanceScale = img.getAttribute('data-guidance')
-        const imageInferenceSteps = imageElem.getAttribute('data-steps')
-        const imageGuidanceScale = imageElem.getAttribute('data-guidance')
 
-        const imgDownload = document.createElement('a')
+    const imgDownload = document.createElement('a')
-        imgDownload.download = createFileName(imagePrompt, imageSeed, imageInferenceSteps, imageGuidanceScale, outputFormat)
+    imgDownload.download = createFileName(imagePrompt, imageSeed, imageInferenceSteps, imageGuidanceScale, req['output_format'])
-        imgDownload.href = imgData
+    imgDownload.href = imgData
-        imgDownload.click()
+    imgDownload.click()
-    }
 }
-function getStartNewTaskHandler(reqBody, imageItemElem, mode) {
+
-    return function() {
+function onMakeSimilarClick(req, img) {
-        if (!isServerAvailable()) {
+    let newTaskRequest = getCurrentUserRequest()
-            alert('The server is not available.')
+
-            return
+    newTaskRequest.reqBody = Object.assign({}, req, {
-        }
+        num_outputs: 1,
-        const imageElem = imageItemElem.querySelector('img')
+        use_cpu: useCPUField.checked,
-        const newTaskRequest = getCurrentUserRequest()
+        num_inference_steps: 50,
-        switch (mode) {
+        guidance_scale: 7.5,
-            case 'img2img':
+        prompt_strength: 0.7,
-            case 'img2img_X2':
+        init_image: img.src,
-                newTaskRequest.reqBody = Object.assign({}, reqBody, {
+        seed: Math.floor(Math.random() * 10000000)
-                    num_outputs: 1,
+    })
-                    use_cpu: useCPUField.checked,
+
-                })
+    newTaskRequest.numOutputsTotal = 5
-                if (!newTaskRequest.reqBody.init_image || mode === 'img2img_X2') {
+    newTaskRequest.batchCount = 5
-                    newTaskRequest.reqBody.sampler = 'ddim'
+    newTaskRequest.seed = newTaskRequest.reqBody.seed
-                    newTaskRequest.reqBody.prompt_strength = '0.5'
+
-                    newTaskRequest.reqBody.init_image = imageElem.src
+    delete newTaskRequest.reqBody.mask
-                    delete newTaskRequest.reqBody.mask
+
-                } else {
+    createTask(newTaskRequest)
-                    newTaskRequest.reqBody.seed = 1 + newTaskRequest.reqBody.seed
+}
-                }
+
-                if (mode === 'img2img_X2') {
+function onUpscaleClick(req, img) {
-                    newTaskRequest.reqBody.width = reqBody.width * 2
+    let newTaskRequest = getCurrentUserRequest()
-                    newTaskRequest.reqBody.height = reqBody.height * 2
+    const imageSeed = img.getAttribute('data-seed')
-                    newTaskRequest.reqBody.num_inference_steps = Math.min(100, reqBody.num_inference_steps * 2)
+
-                    if (useUpscalingField.checked) {
+    newTaskRequest.reqBody = Object.assign({}, req, {
-                        newTaskRequest.reqBody.use_upscale = upscaleModelField.value
+        num_outputs: 1,
-                    } else {
+        use_cpu: useCPUField.checked,
-                        delete newTaskRequest.reqBody.use_upscale
+        use_upscale: upscaleModelField.value,
-                    }
+        seed: imageSeed
-                }
+    })
-                break
+
-            case 'upscale':
+    newTaskRequest.numOutputsTotal = 1
-                newTaskRequest.reqBody = Object.assign({}, reqBody, {
+    newTaskRequest.batchCount = 1
-                    num_outputs: 1,
+    newTaskRequest.seed = newTaskRequest.reqBody.seed
-                    //use_face_correction: 'GFPGANv1.3',
+
-                    use_upscale: upscaleModelField.value,
+    createTask(newTaskRequest)
-                })
+}
-                break
+
-            default:
+function onFixFacesClick(req, img) {
-                throw new Error("Unknown upscale mode: " + mode)
+    let newTaskRequest = getCurrentUserRequest()
-        }
+    const imageSeed = img.getAttribute('data-seed')
-        newTaskRequest.seed = newTaskRequest.reqBody.seed
+
-        newTaskRequest.numOutputsTotal = 1
+    newTaskRequest.reqBody = Object.assign({}, req, {
-        newTaskRequest.batchCount = 1
+        num_outputs: 1,
-        createTask(newTaskRequest)
+        use_cpu: useCPUField.checked,
-    }
+        use_face_correction: 'GFPGANv1.3',
+        seed: imageSeed
+    })
+
+    newTaskRequest.numOutputsTotal = 1
+    newTaskRequest.batchCount = 1
+    newTaskRequest.seed = newTaskRequest.reqBody.seed
+
+    createTask(newTaskRequest)
+}
+
+function onContinueDrawingClick(req, img) {
+    let newTaskRequest = getCurrentUserRequest()
+    const imageSeed = img.getAttribute('data-seed')
+
+    newTaskRequest.reqBody = Object.assign({}, req, {
+        num_outputs: 1,
+        use_cpu: useCPUField.checked,
+        num_inference_steps: parseInt(req.num_inference_steps) + 25,
+        seed: imageSeed
+    })
+
+    newTaskRequest.numOutputsTotal = 1
+    newTaskRequest.batchCount = 1
+    newTaskRequest.seed = newTaskRequest.reqBody.seed
+
+    createTask(newTaskRequest)
 }
 
 // makes a single image. don't call this directly, use makeImage() instead
@@ -662,7 +686,7 @@ async function checkTasks() {
             })
         }
         if (genSeeds) {
-            newTask.reqBody.seed = startSeed + (i * newTask.reqBody.num_outputs)
+            newTask.reqBody.seed = parseInt(startSeed) + (i * newTask.reqBody.num_outputs)
             newTask.seed = newTask.reqBody.seed
         } else if (newTask.seed !== newTask.reqBody.seed) {
             newTask.seed = newTask.reqBody.seed
@@ -859,14 +883,34 @@ function getPrompts() {
     }
 
     prompts = prompts.split('\n')
+    prompts = prompts.map(prompt => prompt.trim())
+    prompts = prompts.filter(prompt => prompt !== '')
 
+    let promptsToMake = applySetOperator(prompts)
+    promptsToMake = applyPermuteOperator(promptsToMake)
+
+    if (activeTags.length <= 0) {
+        return promptsToMake
+    }
+
+    const promptTags = activeTags.map(x => x.name).join(", ")
+    return promptsToMake.map((prompt) => `${prompt}, ${promptTags}`)
+}
+
+function applySetOperator(prompts) {
+    let promptsToMake = []
+    let braceExpander = new BraceExpander()
+    prompts.forEach(prompt => {
+        let expandedPrompts = braceExpander.expand(prompt)
+        promptsToMake = promptsToMake.concat(expandedPrompts)
+    })
+
+    return promptsToMake
+}
+
+function applyPermuteOperator(prompts) {
     let promptsToMake = []
     prompts.forEach(prompt => {
-        prompt = prompt.trim()
-        if (prompt === '') {
-            return
-        }
-
         let promptMatrix = prompt.split('|')
         prompt = promptMatrix.shift().trim()
         promptsToMake.push(prompt)
@@ -879,11 +923,8 @@ function getPrompts() {
             promptsToMake = promptsToMake.concat(promptPermutations)
         }
     })
-    if (activeTags.length <= 0) {
+
-        return promptsToMake
+    return promptsToMake
-    }
-    const promptTags = activeTags.map(x => x.name).join(", ")
-    return promptsToMake.map((prompt) => `${prompt}, ${promptTags}`)
 }
 
 function permutePrompts(promptBase, promptMatrix) {

ui/media/js/plugins.js

@@ -0,0 +1,47 @@
+const PLUGIN_API_VERSION = "1.0"
+
+const PLUGINS = {
+    /**
+     * Register new buttons to show on each output image.
+     * 
+     * Example:
+     * PLUGINS['IMAGE_INFO_BUTTONS'].push({
+     *   text: 'Make a Similar Image',
+     *   on_click: function(origRequest, image) {
+     *     let newTaskRequest = getCurrentUserRequest()
+     *     newTaskRequest.reqBody = Object.assign({}, origRequest, {
+     *       init_image: image.src,
+     *       prompt_strength: 0.7,
+     *       seed: Math.floor(Math.random() * 10000000)
+     *     })
+     *     newTaskRequest.seed = newTaskRequest.reqBody.seed
+     *     createTask(newTaskRequest)
+     *   },
+     *   filter: function(origRequest, image) {
+     *     // this is an optional function. return true/false to show/hide the button
+     *     // if this function isn't set, the button will always be visible
+     *     return true
+     *   }
+     * })
+     */
+    IMAGE_INFO_BUTTONS: []
+}
+
+async function loadUIPlugins() {
+    try {
+        let res = await fetch('/get/ui_plugins')
+        if (res.status === 200) {
+            res = await res.json()
+            res.forEach(pluginPath => {
+                let script = document.createElement('script')
+                script.src = pluginPath
+
+                console.log('loading plugin', pluginPath)
+
+                document.head.appendChild(script)
+            })
+        }
+    } catch (e) {
+        console.log('error fetching plugin paths', e)
+    }
+}

ui/media/js/utils.js

@@ -138,3 +138,176 @@ function millisecondsToStr(milliseconds) {
 
     return s
 }
+
+// https://rosettacode.org/wiki/Brace_expansion#JavaScript
+function BraceExpander() {
+    'use strict'
+
+    // Index of any closing brace matching the opening
+    // brace at iPosn,
+    // with the indices of any immediately-enclosed commas.
+    function bracePair(tkns, iPosn, iNest, lstCommas) {
+        if (iPosn >= tkns.length || iPosn < 0) return null;
+
+        var t = tkns[iPosn],
+            n = (t === '{') ? (
+                iNest + 1
+            ) : (t === '}' ? (
+                iNest - 1
+            ) : iNest),
+            lst = (t === ',' && iNest === 1) ? (
+                lstCommas.concat(iPosn)
+            ) : lstCommas;
+
+        return n ? bracePair(tkns, iPosn + 1, n, lst) : {
+            close: iPosn,
+            commas: lst
+        };
+    }
+
+    // Parse of a SYNTAGM subtree
+    function andTree(dctSofar, tkns) {
+        if (!tkns.length) return [dctSofar, []];
+
+        var dctParse = dctSofar ? dctSofar : {
+                fn: and,
+                args: []
+            },
+
+            head = tkns[0],
+            tail = head ? tkns.slice(1) : [],
+
+            dctBrace = head === '{' ? bracePair(
+                tkns, 0, 0, []
+            ) : null,
+
+            lstOR = dctBrace && (
+                dctBrace.close
+            ) && dctBrace.commas.length ? (
+                splitAt(dctBrace.close + 1, tkns)
+            ) : null;
+
+        return andTree({
+            fn: and,
+            args: dctParse.args.concat(
+                lstOR ? (
+                    orTree(dctParse, lstOR[0], dctBrace.commas)
+                ) : head
+            )
+        }, lstOR ? (
+            lstOR[1]
+        ) : tail);
+    }
+
+    // Parse of a PARADIGM subtree
+    function orTree(dctSofar, tkns, lstCommas) {
+        if (!tkns.length) return [dctSofar, []];
+        var iLast = lstCommas.length;
+
+        return {
+            fn: or,
+            args: splitsAt(
+                lstCommas, tkns
+            ).map(function (x, i) {
+                var ts = x.slice(
+                    1, i === iLast ? (
+                        -1
+                    ) : void 0
+                );
+
+                return ts.length ? ts : [''];
+            }).map(function (ts) {
+                return ts.length > 1 ? (
+                    andTree(null, ts)[0]
+                ) : ts[0];
+            })
+        };
+    }
+
+    // List of unescaped braces and commas, and remaining strings
+    function tokens(str) {
+        // Filter function excludes empty splitting artefacts
+        var toS = function (x) {
+            return x.toString();
+        };
+
+        return str.split(/(\\\\)/).filter(toS).reduce(function (a, s) {
+            return a.concat(s.charAt(0) === '\\' ? s : s.split(
+                /(\\*[{,}])/
+            ).filter(toS));
+        }, []);
+    }
+
+    // PARSE TREE OPERATOR (1 of 2)
+    // Each possible head * each possible tail
+    function and(args) {
+        var lng = args.length,
+            head = lng ? args[0] : null,
+            lstHead = "string" === typeof head ? (
+                [head]
+            ) : head;
+
+        return lng ? (
+            1 < lng ? lstHead.reduce(function (a, h) {
+                return a.concat(
+                    and(args.slice(1)).map(function (t) {
+                        return h + t;
+                    })
+                );
+            }, []) : lstHead
+        ) : [];
+    }
+
+    // PARSE TREE OPERATOR (2 of 2)
+    // Each option flattened
+    function or(args) {
+        return args.reduce(function (a, b) {
+            return a.concat(b);
+        }, []);
+    }
+
+    // One list split into two (first sublist length n)
+    function splitAt(n, lst) {
+        return n < lst.length + 1 ? [
+            lst.slice(0, n), lst.slice(n)
+        ] : [lst, []];
+    }
+
+    // One list split into several (sublist lengths [n])
+    function splitsAt(lstN, lst) {
+        return lstN.reduceRight(function (a, x) {
+            return splitAt(x, a[0]).concat(a.slice(1));
+        }, [lst]);
+    }
+
+    // Value of the parse tree
+    function evaluated(e) {
+        return typeof e === 'string' ? e :
+            e.fn(e.args.map(evaluated));
+    }
+
+    // JSON prettyprint (for parse tree, token list etc)
+    function pp(e) {
+        return JSON.stringify(e, function (k, v) {
+            return typeof v === 'function' ? (
+                '[function ' + v.name + ']'
+            ) : v;
+        }, 2)
+    }
+
+
+    // ----------------------- MAIN ------------------------
+
+    // s -> [s]
+    this.expand = function(s) {
+        // BRACE EXPRESSION PARSED
+        var dctParse = andTree(null, tokens(s))[0];
+
+        // ABSTRACT SYNTAX TREE LOGGED
+        // console.log(pp(dctParse));
+
+        // AST EVALUATED TO LIST OF STRINGS
+        return evaluated(dctParse);
+    }
+
+}

ui/sd_internal/runtime.py

@@ -207,6 +207,7 @@ def get_base_path(disk_path, session_id, prompt, img_id, ext, suffix=None):
 
     prompt_flattened = filename_regex.sub('_', prompt)[:50]
     
+
     if suffix is not None:
         return os.path.join(session_out_path, f"{prompt_flattened}_{img_id}_{suffix}.{ext}")
     return os.path.join(session_out_path, f"{prompt_flattened}_{img_id}.{ext}")
@@ -316,8 +317,7 @@ def do_mk_img(req: Request):
     opt_f = 8
     opt_ddim_eta = 0.0
     opt_init_img = req.init_image
-    img_id = base64.b64encode(int(time.time()).to_bytes(8, 'big')).decode() # Generate unique ID based on time.
+    
-    img_id = img_id.translate({43:None, 47:None, 61:None})[-8:] # Remove + / = and keep last 8 chars.
 
     print(req.to_string(), '\n    device', device)
 
@@ -462,6 +462,8 @@ def do_mk_img(req: Request):
 
                     print("saving images")
                     for i in range(batch_size):
+                        img_id = base64.b64encode(int(time.time()+i).to_bytes(8, 'big')).decode() # Generate unique ID based on time.
+                        img_id = img_id.translate({43:None, 47:None, 61:None})[-8:] # Remove + / = and keep last 8 chars.
 
                         x_samples_ddim = modelFS.decode_first_stage(x_samples[i].unsqueeze(0))
                         x_sample = torch.clamp((x_samples_ddim + 1.0) / 2.0, min=0.0, max=1.0)

ui/server.py

@@ -12,6 +12,7 @@ sys.path.append(os.path.dirname(SD_UI_DIR))
 
 CONFIG_DIR = os.path.abspath(os.path.join(SD_UI_DIR, '..', 'scripts'))
 MODELS_DIR = os.path.abspath(os.path.join(SD_DIR, '..', 'models'))
+UI_PLUGINS_DIR = os.path.abspath(os.path.join(SD_DIR, '..', 'plugins', 'ui'))
 
 OUTPUT_DIRNAME = "Stable Diffusion UI" # in the user's home folder
 TASK_TTL = 15 * 60 # Discard last session's task timeout
@@ -31,11 +32,15 @@ app = FastAPI()
 modifiers_cache = None
 outpath = os.path.join(os.path.expanduser("~"), OUTPUT_DIRNAME)
 
+os.makedirs(UI_PLUGINS_DIR, exist_ok=True)
+
 # don't show access log entries for URLs that start with the given prefix
 ACCESS_LOG_SUPPRESS_PATH_PREFIXES = ['/ping', '/image', '/modifier-thumbnails']
 
 NOCACHE_HEADERS={"Cache-Control": "no-cache, no-store, must-revalidate", "Pragma": "no-cache", "Expires": "0"}
-app.mount('/media', StaticFiles(directory=os.path.join(SD_UI_DIR, 'media/')), name="media")
+
+app.mount('/media', StaticFiles(directory=os.path.join(SD_UI_DIR, 'media')), name="media")
+app.mount('/plugins', StaticFiles(directory=UI_PLUGINS_DIR), name="plugins")
 
 class SetAppConfigRequest(BaseModel):
     update_branch: str = "main"
@@ -251,6 +256,15 @@ def getModels():
 
     return models
 
+def getUIPlugins():
+    plugins = []
+
+    for file in os.listdir(UI_PLUGINS_DIR):
+        if file.endswith('.plugin.js'):
+            plugins.append(f'/plugins/{file}')
+
+    return plugins
+
 @app.get('/get/{key:path}')
 def read_web_data(key:str=None):
     if not key: # /get without parameters, stable-diffusion easter egg.
@@ -264,6 +278,7 @@ def read_web_data(key:str=None):
         return JSONResponse(getModels(), headers=NOCACHE_HEADERS)
     elif key == 'modifiers': return FileResponse(os.path.join(SD_UI_DIR, 'modifiers.json'), headers=NOCACHE_HEADERS)
     elif key == 'output_dir': return JSONResponse({ 'output_dir': outpath }, headers=NOCACHE_HEADERS)
+    elif key == 'ui_plugins': return JSONResponse(getUIPlugins(), headers=NOCACHE_HEADERS)
     else:
         raise HTTPException(status_code=404, detail=f'Request for unknown {key}') # HTTP404 Not Found