Merge branch 'beta' of https://github.com/patriceac/stable-diffusion-ui into beta

CHANGES.md

@@ -21,6 +21,7 @@
 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.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).
 * 2.5.32 - 19 Apr 2023 - Automatically check for black images, and set full-precision if necessary (for attn). This means custom models based on Stable Diffusion v2.1 will just work, without needing special command-line arguments or editing of yaml config files.

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.83",
+    "sdkit": "1.0.87",
     "stable-diffusion-sdkit": "2.1.4",
     "rich": "12.6.0",
     "uvicorn": "0.19.0",

ui/easydiffusion/renderer.py

@@ -17,6 +17,7 @@ from sdkit.utils import (
     img_to_base64_str,
     img_to_buffer,
     latent_samples_to_images,
+    get_device_usage,
 )
 
 context = Context()  # thread-local
@@ -40,6 +41,9 @@ def init(device):
         app_config.get("test_diffusers", False) and app_config.get("update_branch", "main") != "main"
     )
 
+    log.info("Device usage during initialization:")
+    get_device_usage(device, log_info=True, process_usage_only=False)
+
     device_manager.device_init(context, device)
 
 

ui/easydiffusion/task_manager.py

@@ -7,7 +7,7 @@ Notes:
 import json
 import traceback
 
-TASK_TTL = 15 * 60  # seconds, Discard last session's task timeout
+TASK_TTL = 30 * 60  # seconds, Discard last session's task timeout
 
 import queue
 import threading
@@ -398,8 +398,8 @@ def get_devices():
             return {"name": device_manager.get_processor_name()}
 
         mem_free, mem_total = torch.cuda.mem_get_info(device)
-        mem_free /= float(10 ** 9)
-        mem_total /= float(10 ** 9)
+        mem_free /= float(10**9)
+        mem_total /= float(10**9)
 
         return {
             "name": torch.cuda.get_device_name(device),

ui/index.html

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

ui/media/css/main.css

@@ -1302,3 +1302,54 @@ body.wait-pause {
 .displayNone {
     display:none !important;
 }
+
+/* TOAST NOTIFICATIONS */
+.toast-notification {
+    position: fixed;
+    bottom: 10px;
+    right: -300px;
+    width: 300px;
+    background-color: #333;
+    color: #fff;
+    padding: 10px 20px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    z-index: 9999;
+    animation: slideInRight 0.5s ease forwards;
+    transition: bottom 0.5s ease; // Add a transition to smoothly reposition the toasts
+}
+
+.toast-notification-error {
+    color: red;
+}
+
+@keyframes slideInRight {
+    from {
+        right: -300px;
+    }
+    to {
+        right: 10px;
+    }
+}
+
+.toast-notification.hide {
+    animation: slideOutRight 0.5s ease forwards;
+}
+
+@keyframes slideOutRight {
+    from {
+        right: 10px;
+    }
+    to {
+        right: -300px;
+    }
+}
+
+@keyframes slideDown {
+    from {
+        bottom: 10px;
+    }
+    to {
+        bottom: 0;
+    }
+}

ui/media/js/main.js

@@ -692,6 +692,9 @@ function makeImage() {
     if (guidanceScaleField.value == "") {
         guidanceScaleField.value = guidanceScaleSlider.value / 10
     }
+    if (hypernetworkStrengthField.value == "") {
+        hypernetworkStrengthField.value = hypernetworkStrengthSlider.value / 100
+    }
     const taskTemplate = getCurrentUserRequest()
     const newTaskRequests = getPrompts().map((prompt) =>
         Object.assign({}, taskTemplate, {

ui/media/js/parameters.js

@@ -181,7 +181,7 @@ var PARAMETERS = [
     {
         id: "listen_to_network",
         type: ParameterType.checkbox,
-        label: "Make Stable Diffusion available on your network",
+        label: "Make Stable Diffusion available on your network. Please restart the program after changing this.",
         note: "Other devices on your network can access this web page",
         icon: "fa-network-wired",
         default: true,
@@ -191,7 +191,7 @@ var PARAMETERS = [
         id: "listen_port",
         type: ParameterType.custom,
         label: "Network port",
-        note: "Port that this server listens to. The '9000' part in 'http://localhost:9000'",
+        note: "Port that this server listens to. The '9000' part in 'http://localhost:9000'. Please restart the program after changing this.",
         icon: "fa-anchor",
         render: (parameter) => {
             return `<input id="${parameter.id}" name="${parameter.id}" size="6" value="9000" onkeypress="preventNonNumericalInput(event)">`

ui/media/js/utils.js

@@ -840,3 +840,60 @@ function createTab(request) {
         }
     })
 }
+
+/* TOAST NOTIFICATIONS */
+function showToast(message, duration = 5000, error = false) {
+    const toast = document.createElement("div");
+    toast.classList.add("toast-notification");
+    if (error === true) {
+        toast.classList.add("toast-notification-error");
+    }
+    toast.innerHTML = message;
+    document.body.appendChild(toast);
+
+    // Set the position of the toast on the screen
+    const toastCount = document.querySelectorAll(".toast-notification").length;
+    const toastHeight = toast.offsetHeight;
+    const previousToastsHeight = Array.from(document.querySelectorAll(".toast-notification"))
+        .slice(0, -1) // exclude current toast
+        .reduce((totalHeight, toast) => totalHeight + toast.offsetHeight + 10, 0); // add 10 pixels for spacing
+    toast.style.bottom = `${10 + previousToastsHeight}px`;
+    toast.style.right = "10px";
+
+    // Delay the removal of the toast until animation has completed
+    const removeToast = () => {
+        toast.classList.add("hide");
+        const removeTimeoutId = setTimeout(() => {
+            toast.remove();
+            // Adjust the position of remaining toasts
+            const remainingToasts = document.querySelectorAll(".toast-notification");
+            const removedToastBottom = toast.getBoundingClientRect().bottom;
+        
+            remainingToasts.forEach((toast) => {
+                if (toast.getBoundingClientRect().bottom < removedToastBottom) {
+                    toast.classList.add("slide-down");
+                }
+            });
+        
+            // Wait for the slide-down animation to complete
+            setTimeout(() => {
+                // Remove the slide-down class after the animation has completed
+                const slidingToasts = document.querySelectorAll(".slide-down");
+                slidingToasts.forEach((toast) => {
+                    toast.classList.remove("slide-down");
+                });
+        
+                // Adjust the position of remaining toasts again, in case there are multiple toasts being removed at once
+                const remainingToastsDown = document.querySelectorAll(".toast-notification");
+                let heightSoFar = 0;
+                remainingToastsDown.forEach((toast) => {
+                    toast.style.bottom = `${10 + heightSoFar}px`;
+                    heightSoFar += toast.offsetHeight + 10; // add 10 pixels for spacing
+                });
+            }, 0); // The duration of the slide-down animation (in milliseconds)
+        }, 500);
+    };
+
+    // Remove the toast after specified duration
+    setTimeout(removeToast, duration);
+}