Merge pull request #1264 from cmdr2/beta

Beta

CHANGES.md

@@ -21,6 +21,8 @@
 Our focus continues to remain on an easy installation experience, and an easy user-interface. While still remaining pretty powerful, in terms of features and speed.
 
 ### Detailed changelog
+* 2.5.36 - 11 May 2023 - (beta-only) More VRAM optimizations for "low" VRAM usage mode.
+* 2.5.36 - 10 May 2023 - (beta-only) Bug fix for "meta" error when using a LoRA in 'low' VRAM usage mode.
 * 2.5.35 - 3 May 2023 - (beta-only) First round of VRAM Optimizations for the "Test Diffusers" version. This change significantly reduces the amount of VRAM used by the diffusers version during image generation. The VRAM usage is still not equal to the "non-diffusers" version, but more optimizations are coming soon.
 * 2.5.34 - 22 Apr 2023 - Don't start the browser in an incognito new profile (on Windows). Thanks @JeLuf.
 * 2.5.33 - 21 Apr 2023 - Install PyTorch 2.0 on new installations (on Windows and Linux).

scripts/check_modules.py

@@ -18,7 +18,7 @@ os_name = platform.system()
 modules_to_check = {
     "torch": ("1.11.0", "1.13.1", "2.0.0"),
     "torchvision": ("0.12.0", "0.14.1", "0.15.1"),
-    "sdkit": "1.0.84",
+    "sdkit": "1.0.91",
     "stable-diffusion-sdkit": "2.1.4",
     "rich": "12.6.0",
     "uvicorn": "0.19.0",

ui/index.html

@@ -30,7 +30,7 @@
             <h1>
                 <img id="logo_img" src="/media/images/icon-512x512.png" >
                 Easy Diffusion
-                <small>v2.5.35 <span id="updateBranchLabel"></span></small>
+                <small>v2.5.36 <span id="updateBranchLabel"></span></small>
             </h1>
         </div>
         <div id="server-status">

ui/media/css/image-modal.css

@@ -70,6 +70,14 @@
     max-height: calc(100vh - (var(--popup-padding) * 2) - 4px);
 }
 
+#viewFullSizeImgModal img:not(.natural-zoom) {
+    cursor: grab;
+}
+
+#viewFullSizeImgModal .grabbing img:not(.natural-zoom) {
+    cursor: grabbing;
+}
+
 #viewFullSizeImgModal .content > div::-webkit-scrollbar-track, #viewFullSizeImgModal .content > div::-webkit-scrollbar-corner {
     background: rgba(0, 0, 0, .5)
 }

ui/media/js/image-modal.js

@@ -63,15 +63,73 @@ const imageModal = (function() {
         setZoomLevel(imageContainer.querySelector("img")?.classList?.contains("natural-zoom"))
     )
 
-    const state = {
+    const initialState = () => ({
         previous: undefined,
         next: undefined,
+
+        start: {
+            x: 0,
+            y: 0,
+        },
+
+        scroll: {
+            x: 0,
+            y: 0,
+        },
+    })
+
+    const state = initialState()
+
+    // Allow grabbing the image to scroll
+    const stopGrabbing = (e) => {
+        if(imageContainer.classList.contains("grabbing")) {
+            imageContainer.classList.remove("grabbing")
+            e?.preventDefault()
+            console.log(`stopGrabbing()`, e)
+        }
+    }
+
+    const addImageGrabbing = (image) => {
+        image?.addEventListener('mousedown', (e) => {
+            if (!image.classList.contains("natural-zoom")) {
+                e.stopPropagation()
+                e.stopImmediatePropagation()
+                e.preventDefault()
+
+                imageContainer.classList.add("grabbing")
+                state.start.x = e.pageX - imageContainer.offsetLeft
+                state.scroll.x = imageContainer.scrollLeft
+                state.start.y = e.pageY - imageContainer.offsetTop
+                state.scroll.y = imageContainer.scrollTop
+            }
+        })
+
+        image?.addEventListener('mouseup', stopGrabbing)
+        image?.addEventListener('mouseleave', stopGrabbing)
+        image?.addEventListener('mousemove', (e) => {
+            if(imageContainer.classList.contains("grabbing")) {
+                e.stopPropagation()
+                e.stopImmediatePropagation()
+                e.preventDefault()
+
+                // Might need to increase this multiplier based on the image size to window size ratio
+                // The default 1:1 is pretty slow
+                const multiplier = 1.0
+
+                const deltaX = e.pageX - imageContainer.offsetLeft - state.start.x
+                imageContainer.scrollLeft = state.scroll.x - (deltaX * multiplier)
+                const deltaY = e.pageY - imageContainer.offsetTop - state.start.y
+                imageContainer.scrollTop = state.scroll.y - (deltaY * multiplier)
+            }
+        })
     }
 
     const clear = () => {
         imageContainer.innerHTML = ""
 
-        Object.keys(state).forEach((key) => delete state[key])
+        Object.entries(initialState()).forEach(([key, value]) => state[key] = value)
+
+        stopGrabbing()
     }
 
     const close = () => {
@@ -95,6 +153,7 @@ const imageModal = (function() {
         const src = typeof options === "string" ? options : options.src
 
         const imgElem = createElement("img", { src }, "natural-zoom")
+        addImageGrabbing(imgElem)
         imageContainer.appendChild(imgElem)
         modalElem.classList.add("active")
         document.body.style.overflow = "hidden"

ui/media/js/image-modifiers.js

@@ -246,7 +246,7 @@ function refreshInactiveTags(inactiveTags) {
     overlays.forEach((i) => {
         let modifierName = i.parentElement.getElementsByClassName("modifier-card-label")[0].getElementsByTagName("p")[0]
             .dataset.fullName
-        if (inactiveTags?.find((element) => element === modifierName) !== undefined) {
+        if (inactiveTags?.find((element) => trimModifiers(element) === modifierName) !== undefined) {
             i.parentElement.classList.add("modifier-toggle-inactive")
         }
     })