add aspect ratio management + improve styles extension + various small fixes

.gitignore

@@ -7,6 +7,8 @@
 /configs/*.yaml
 !/configs/kubin.default.yaml
 /extensions/*/config.yaml
+/extensions/*/*custom.yaml
+/extensions/*/*user.yaml
 !/extensions/*/config.default.yaml
 /models
 /output

README.md

@@ -28,8 +28,9 @@
 🕒 Multiple samplers <br>
 🕒 Advanced prompt syntax <br>
 🕒 Prompt weighting <br>
-🕒 ext. Animation <br>
 🕒 Checkpoint conversion <br>
+🕒 ext. Area composition <br>
+🕒 ext. Animation <br>
 
 
 ## Screenshots

client/css.3.aspect_ratio.css

@@ -0,0 +1,13 @@
+.prompt-size input[type='range'] {
+  margin-top: 12px;
+}
+
+.ar-adjusted-size {
+  position: absolute;
+  font-size: 12px;
+  top: 35px;
+  right: 20px;
+  width: 74px;
+  text-align: center;
+  cursor: default;
+}

client/dist/bundle.css

@@ -212,3 +212,16 @@ html.has-lightbox body {
   color: white !important;
   text-decoration: none !important;
 }
+.prompt-size input[type='range'] {
+  margin-top: 12px;
+}
+
+.ar-adjusted-size {
+  position: absolute;
+  font-size: 12px;
+  top: 35px;
+  right: 20px;
+  width: 74px;
+  text-align: center;
+  cursor: default;
+}

client/dist/bundle.js

@@ -80,8 +80,8 @@
 
     kubin.UI.loadParams(window._kubinParams)
     kubin.UI.customEventListeners()
-    kubin.UI.reveal()
 
+    kubin.UI.reveal()
     console.log('UI successfully loaded')
   })
 
@@ -377,6 +377,74 @@
   }
 })(window)
 ;
+(() => {
+  let justTriggered = false
+
+  const closestDivisible = (number, denom) => {
+    let q = Math.ceil(number / denom)
+    return denom * q
+  }
+
+  const changeSize = (inputElement, size, adjustedSize) => {
+    inputElement.value = size
+    const changeEvent = new Event("input", {
+      bubbles: true,
+      cancelable: true
+    })
+
+    inputElement.dispatchEvent(changeEvent)
+  }
+
+  const addAdjustedSize = (element, size) => {
+    let adjustedSize = element.nextSibling
+    if (!adjustedSize) {
+      adjustedSize = document.createElement('span')
+      adjustedSize.className = 'ar-adjusted-size'
+      adjustedSize.title = 'The size must be evenly divisible by 64 (as required by the MOVQ configuration), so the actual output size will be adjusted accordingly'
+      element.parentNode.insertBefore(adjustedSize, element.nextSibling)
+    }
+
+    adjustedSize.textContent = `scaled: ${size}`
+  }
+
+  const removeAdjustedSize = element => {
+    element.nextSibling && element.parentNode.removeChild(element.nextSibling)
+  }
+
+  kubin.UI.aspectRatio = {
+    sizeChanged: (widthTarget, heightTarget, dimension, size, ar, denom) => {
+      if (ar != "none") {
+        if (justTriggered) {
+          justTriggered = false
+        } else {
+          justTriggered = true
+
+          const [w_ratio, h_ratio] = ar.trim().split(":").map(x => parseFloat(x))
+          const ratio = dimension == 'width' ? h_ratio / w_ratio : w_ratio / h_ratio
+          const newSize = parseInt(parseFloat(size) * ratio)
+          const newAdjustedDependableSize = closestDivisible(newSize, denom)
+
+          const inputElement = document.querySelector(`#${dimension == 'width' ? heightTarget : widthTarget} input[type=number]`)
+          changeSize(inputElement, newSize, newAdjustedDependableSize)
+          if (newAdjustedDependableSize != newSize) {
+            addAdjustedSize(inputElement, newAdjustedDependableSize)
+          } else {
+            removeAdjustedSize(inputElement)
+          }
+        }
+      }
+
+      const newAdjustedSize = closestDivisible(size, denom)
+      const inputSizeElement = document.querySelector(`#${dimension == 'width' ? widthTarget : heightTarget} input[type=number]`)
+      if (newAdjustedSize != size) {
+        addAdjustedSize(inputSizeElement, newAdjustedSize)
+      } else {
+        removeAdjustedSize(inputSizeElement)
+      }
+    }
+  }
+})()
+;
 (global => {
   kubin.mix = {
     createWidget: () => {

client/js.0.loader.js

@@ -80,8 +80,8 @@
 
     kubin.UI.loadParams(window._kubinParams)
     kubin.UI.customEventListeners()
-    kubin.UI.reveal()
 
+    kubin.UI.reveal()
     console.log('UI successfully loaded')
   })
 

client/js.3.aspect_ratio.js

@@ -0,0 +1,67 @@
+(() => {
+  let justTriggered = false
+
+  const closestDivisible = (number, denom) => {
+    let q = Math.ceil(number / denom)
+    return denom * q
+  }
+
+  const changeSize = (inputElement, size, adjustedSize) => {
+    inputElement.value = size
+    const changeEvent = new Event("input", {
+      bubbles: true,
+      cancelable: true
+    })
+
+    inputElement.dispatchEvent(changeEvent)
+  }
+
+  const addAdjustedSize = (element, size) => {
+    let adjustedSize = element.nextSibling
+    if (!adjustedSize) {
+      adjustedSize = document.createElement('span')
+      adjustedSize.className = 'ar-adjusted-size'
+      adjustedSize.title = 'The size must be evenly divisible by 64 (as required by the MOVQ configuration), so the actual output size will be adjusted accordingly'
+      element.parentNode.insertBefore(adjustedSize, element.nextSibling)
+    }
+
+    adjustedSize.textContent = `scaled: ${size}`
+  }
+
+  const removeAdjustedSize = element => {
+    element.nextSibling && element.parentNode.removeChild(element.nextSibling)
+  }
+
+  kubin.UI.aspectRatio = {
+    sizeChanged: (widthTarget, heightTarget, dimension, size, ar, denom) => {
+      if (ar != "none") {
+        if (justTriggered) {
+          justTriggered = false
+        } else {
+          justTriggered = true
+
+          const [w_ratio, h_ratio] = ar.trim().split(":").map(x => parseFloat(x))
+          const ratio = dimension == 'width' ? h_ratio / w_ratio : w_ratio / h_ratio
+          const newSize = parseInt(parseFloat(size) * ratio)
+          const newAdjustedDependableSize = closestDivisible(newSize, denom)
+
+          const inputElement = document.querySelector(`#${dimension == 'width' ? heightTarget : widthTarget} input[type=number]`)
+          changeSize(inputElement, newSize, newAdjustedDependableSize)
+          if (newAdjustedDependableSize != newSize) {
+            addAdjustedSize(inputElement, newAdjustedDependableSize)
+          } else {
+            removeAdjustedSize(inputElement)
+          }
+        }
+      }
+
+      const newAdjustedSize = closestDivisible(size, denom)
+      const inputSizeElement = document.querySelector(`#${dimension == 'width' ? widthTarget : heightTarget} input[type=number]`)
+      if (newAdjustedSize != size) {
+        addAdjustedSize(inputSizeElement, newAdjustedSize)
+      } else {
+        removeAdjustedSize(inputSizeElement)
+      }
+    }
+  }
+})()

configs/kubin.default.yaml

@@ -21,6 +21,7 @@ gradio:
   concurrency_count: 2
   debug: true
   theme: default
+  analytics: true
 
 ui:
   image_width_min: 64
@@ -33,6 +34,7 @@ ui:
   image_height_default: 768
   decoder_steps_default: 50
   max_batch_count: 64
+  aspect_ratio_list: 1:1;2:1;16:9;3:2;2:3;9:16;1:2
   allow_params_panel_resize: true
   enable_vertical_alignment: false
   collapse_advanced_params: false

extensions/kd-prompt-styles/client/style-view.css

@@ -0,0 +1,15 @@
+.kd-prompt-styles-selector .kd-styles-radiobutton-list {
+    max-height: 185px;
+    overflow-y: scroll !important;
+}
+
+.kd-prompt-styles-selector .kd-styles-radiobutton-list label {
+    flex: 40%;
+    box-shadow: initial !important;
+    border: initial !important;
+    background: var(--button-secondary-background-fill) !important;
+}
+
+.kd-prompt-styles-selector .kd-styles-radiobutton-list label.selected {
+    background: var(--slider-color) !important;
+}

extensions/kd-prompt-styles/client/style-view.js

@@ -0,0 +1,12 @@
+((window) => {
+    Array.from(document.querySelectorAll('.kd-prompt-styles-selector')).forEach(searchBox => {
+        const searchInput = searchBox.querySelector('textarea')
+        searchInput.addEventListener('input', event => {
+            const value = event.target.value.toUpperCase()
+            Array.from(searchBox.querySelectorAll(':scope .kd-styles-radiobutton-list label')).forEach(item => {
+                const itemName = item.getAttribute('data-testid').toUpperCase()
+                item.style.display = itemName.includes(value) ? 'initial' : 'none'
+            })
+        })
+    })
+})(window)

extensions/kd-prompt-styles/config.default.yaml

@@ -0,0 +1 @@
+use_radiobutton_list: true