Custom modifiers

ui/index.html

@@ -8,7 +8,7 @@
     <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/modifier-thumbnails.css?v=1">
+    <link rel="stylesheet" href="/media/css/modifier-thumbnails.css?v=2">
     <link rel="stylesheet" href="/media/css/fontawesome-all.min.css?v=1">
     <link rel="stylesheet" href="/media/css/drawingboard.min.css">
     <script src="/media/js/jquery-3.6.1.min.js"></script>
@@ -18,7 +18,7 @@
 <div id="container">
     <div id="top-nav">
         <div id="logo">
-            <h1>Stable Diffusion UI <small>v2.3.2 <span id="updateBranchLabel"></span></small></h1>
+            <h1>Stable Diffusion UI <small>v2.3.3 <span id="updateBranchLabel"></span></small></h1>
         </div>
         <ul id="top-nav-items">
             <li class="dropdown">
@@ -201,6 +201,7 @@
             </div>
 
             <div id="editor-modifiers" class="panel-box">
+                <button id="modifier-settings-btn" title="Add custom modifiers"><i class="fa fa-gear"></i></button>
                 <h4 class="collapsible">Image Modifiers (art styles, tags etc)</h4>
                 <div id="editor-modifiers-entries" class="collapsible-content">
                     <label for="preview-image">Image Style:</label>
@@ -236,6 +237,15 @@
         </div>
     </div>
 
+    <div id="modifier-settings-config" style="display:none">
+        <div>
+            <span id="modifier-settings-config-close-btn">X</span>
+            <h1>Modifier Settings</h1>
+            <p>Set your custom modifiers (one per line)</p>
+            <textarea id="custom-modifiers-input" placeholder="Enter your custom modifiers, one-per-line"></textarea>
+        </div>
+    </div>
+
     <div class="line-separator">&nbsp;</div>
 
     <div id="footer" class="panel-box">

ui/media/css/modifier-thumbnails.css

@@ -214,3 +214,36 @@
     margin-bottom: 0.5em;
     vertical-align: middle;
 }
+#modifier-settings-btn {
+    float: right;
+}
+
+#modifier-settings-config {
+    position: fixed;
+    background: rgba(32, 33, 36, 50%);
+    top: 0px;
+    left: 0px;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1000;
+}
+
+#modifier-settings-config > div {
+    background: var(--background-color2);
+    max-width: 600px;
+    margin: auto;
+    margin-top: 100px;
+    border-radius: 6px;
+    padding: 30px;
+    text-align: center;
+}
+#modifier-settings-config-close-btn {
+    float: right;
+    cursor: pointer;
+    padding: 10px;
+    transform: translate(50%, -50%) scaleX(130%);
+}
+#modifier-settings-config textarea {
+    width: 90%;
+    height: 150px;
+}

ui/media/js/image-modifiers.js

@@ -1,14 +1,19 @@
 let activeTags = []
 let modifiers = []
+let customModifiersGroupElement = undefined
 
 let editorModifierEntries = document.querySelector('#editor-modifiers-entries')
 let editorModifierTagsList = document.querySelector('#editor-inputs-tags-list')
 let editorTagsContainer = document.querySelector('#editor-inputs-tags-container')
 let modifierCardSizeSlider = document.querySelector('#modifier-card-size-slider')
 let previewImageField = document.querySelector('#preview-image')
+let modifierSettingsBtn = document.querySelector('#modifier-settings-btn')
+let modifierSettingsOverlay = document.querySelector('#modifier-settings-config')
+let customModifiersTextBox = document.querySelector('#custom-modifiers-input')
 
 const modifierThumbnailPath = 'media/modifier-thumbnails'
 const activeCardClass = 'modifier-card-active'
+const CUSTOM_MODIFIERS_KEY = "customModifiers"
 
 function createModifierCard(name, previews) {
     const modifierCard = document.createElement('div')
@@ -56,15 +61,7 @@ function createModifierCard(name, previews) {
     return modifierCard
 }
 
-async function loadModifiers() {
+function createModifierGroup(modifierGroup, initiallyExpanded) {
-    try {
-        let res = await fetch('/get/modifiers')
-        if (res.status === 200) {
-            res = await res.json()
-
-            modifiers = res; // update global variable
-
-            res.forEach((modifierGroup, idx) => {
     const title = modifierGroup.category
     const modifiers = modifierGroup.modifiers
 
@@ -75,7 +72,7 @@ async function loadModifiers() {
     const modifiersEl = document.createElement('div')
     modifiersEl.classList.add('collapsible-content', 'editor-modifiers-leaf')
 
-                if (idx == 0) {
+    if (initiallyExpanded === true) {
         titleEl.className += ' active'
         modifiersEl.style.display = 'block'
     }
@@ -123,7 +120,23 @@ async function loadModifiers() {
     e.appendChild(titleEl)
     e.appendChild(modifiersEl)
 
-                editorModifierEntries.appendChild(e)
+    editorModifierEntries.insertBefore(e, editorModifierEntries.firstChild)
+
+    return e
+}
+
+async function loadModifiers() {
+    try {
+        let res = await fetch('/get/modifiers')
+        if (res.status === 200) {
+            res = await res.json()
+
+            modifiers = res; // update global variable
+
+            res.reverse()
+
+            res.forEach((modifierGroup, idx) => {
+                createModifierGroup(modifierGroup, idx === res.length - 1)
             })
 
             createCollapsibles(editorModifierEntries)
@@ -131,6 +144,8 @@ async function loadModifiers() {
     } catch (e) {
         console.log('error fetching modifiers', e)
     }
+
+    loadCustomModifiers()
 }
 
 function refreshTagsList() {
@@ -228,3 +243,51 @@ function resizeModifierCards(val) {
 
 modifierCardSizeSlider.onchange = () => resizeModifierCards(modifierCardSizeSlider.value)
 previewImageField.onchange = () => changePreviewImages(previewImageField.value)
+
+modifierSettingsBtn.addEventListener('click', function() {
+    modifierSettingsOverlay.style.display = 'block'
+})
+document.getElementById("modifier-settings-config-close-btn").addEventListener('click', () => {
+    modifierSettingsOverlay.style.display = 'none'
+})
+modifierSettingsOverlay.addEventListener('click', (event) => {
+    if (event.target.id == modifierSettingsOverlay.id) {
+        modifierSettingsOverlay.style.display = 'none'
+    }
+})
+
+function saveCustomModifiers() {
+    localStorage.setItem(CUSTOM_MODIFIERS_KEY, customModifiersTextBox.value.trim())
+
+    loadCustomModifiers()
+}
+
+function loadCustomModifiers() {
+    let customModifiers = localStorage.getItem(CUSTOM_MODIFIERS_KEY)
+    customModifiersTextBox.value = customModifiers
+
+    if (customModifiersGroupElement !== undefined) {
+        customModifiersGroupElement.remove()
+    }
+
+    if (customModifiers.trim() !== '') {
+        customModifiers = customModifiers.split('\n')
+        customModifiers = customModifiers.filter(m => m.trim() !== '')
+        customModifiers = customModifiers.map(function(m) {
+            return {
+                "modifier": m
+            }
+        })
+
+        let customGroup = {
+            'category': 'Custom Modifiers',
+            'modifiers': customModifiers
+        }
+
+        customModifiersGroupElement = createModifierGroup(customGroup, true)
+
+        createCollapsibles(customModifiersGroupElement)
+    }
+}
+
+customModifiersTextBox.addEventListener('change', saveCustomModifiers)