Show an explanation for why the CPU toggle is disabled; utility class for alert() and confirm() that matches the ED theme; code formatting

ui/media/js/main.js

@@ -261,20 +261,11 @@ function shiftOrConfirm(e, prompt, fn) {
     if (e.shiftKey || !confirmDangerousActionsField.checked) {
         fn(e)
     } else {
-        $.confirm({
+        confirm(
-            theme: "modern",
-            title: prompt,
-            useBootstrap: false,
-            animateFromElement: false,
-            content:
             '<small>Tip: To skip this dialog, use shift-click or disable the "Confirm dangerous actions" setting in the Settings tab.</small>',
-            buttons: {
+            prompt,
-                yes: () => {
+            fn
-                    fn(e)
+        )
-                },
-                cancel: () => {},
-            },
-        })
     }
 }
 

ui/media/js/parameters.js

@@ -191,7 +191,8 @@ 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'. Please restart the program after changing this.",
+        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)">`
@@ -396,14 +397,14 @@ async function getAppConfig() {
             document.querySelector("#lora_model_container").style.display = "none"
             document.querySelector("#lora_alpha_container").style.display = "none"
 
-            document.querySelectorAll("#sampler_name option.diffusers-only").forEach(option => {
+            document.querySelectorAll("#sampler_name option.diffusers-only").forEach((option) => {
                 option.style.display = "none"
             })
         } else {
             document.querySelector("#lora_model_container").style.display = ""
             document.querySelector("#lora_alpha_container").style.display = loraModelField.value ? "" : "none"
 
-            document.querySelectorAll("#sampler_name option.k_diffusion-only").forEach(option => {
+            document.querySelectorAll("#sampler_name option.k_diffusion-only").forEach((option) => {
                 option.disabled = true
             })
             document.querySelector("#clip_skip_config").classList.remove("displayNone")
@@ -568,6 +569,16 @@ async function getSystemInfo() {
         if (allDeviceIds.length === 0) {
             useCPUField.checked = true
             useCPUField.disabled = true // no compatible GPUs, so make the CPU mandatory
+
+            getParameterSettingsEntry("use_cpu").addEventListener("click", function() {
+                alert(
+                    "Sorry, we could not find a compatible graphics card! Easy Diffusion supports graphics cards with minimum 2 GB of RAM. " +
+                        "Only NVIDIA cards are supported on Windows. NVIDIA and AMD cards are supported on Linux.<br/><br/>" +
+                        "If you have a compatible graphics card, please try updating to the latest drivers.<br/><br/>" +
+                        "Only the CPU can be used for generating images, without a compatible graphics card.",
+                    "No compatible graphics card found!"
+                )
+            })
         }
 
         autoPickGPUsField.checked = devices["config"] === "auto"
@@ -586,7 +597,7 @@ async function getSystemInfo() {
             $("#use_gpus").val(activeDeviceIds)
         }
 
-        document.dispatchEvent(new CustomEvent("system_info_update", { detail: devices}))
+        document.dispatchEvent(new CustomEvent("system_info_update", { detail: devices }))
         setHostInfo(res["hosts"])
         let force = false
         if (res["enforce_output_dir"] !== undefined) {

ui/media/js/utils.js

@@ -843,57 +843,85 @@ function createTab(request) {
 
 /* TOAST NOTIFICATIONS */
 function showToast(message, duration = 5000, error = false) {
-    const toast = document.createElement("div");
+    const toast = document.createElement("div")
-    toast.classList.add("toast-notification");
+    toast.classList.add("toast-notification")
     if (error === true) {
-        toast.classList.add("toast-notification-error");
+        toast.classList.add("toast-notification-error")
     }
-    toast.innerHTML = message;
+    toast.innerHTML = message
-    document.body.appendChild(toast);
+    document.body.appendChild(toast)
 
     // Set the position of the toast on the screen
-    const toastCount = document.querySelectorAll(".toast-notification").length;
+    const toastCount = document.querySelectorAll(".toast-notification").length
-    const toastHeight = toast.offsetHeight;
+    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
+        .reduce((totalHeight, toast) => totalHeight + toast.offsetHeight + 10, 0) // add 10 pixels for spacing
-    toast.style.bottom = `${10 + previousToastsHeight}px`;
+    toast.style.bottom = `${10 + previousToastsHeight}px`
-    toast.style.right = "10px";
+    toast.style.right = "10px"
 
     // Delay the removal of the toast until animation has completed
     const removeToast = () => {
-        toast.classList.add("hide");
+        toast.classList.add("hide")
         const removeTimeoutId = setTimeout(() => {
-            toast.remove();
+            toast.remove()
             // Adjust the position of remaining toasts
-            const remainingToasts = document.querySelectorAll(".toast-notification");
+            const remainingToasts = document.querySelectorAll(".toast-notification")
-            const removedToastBottom = toast.getBoundingClientRect().bottom;
+            const removedToastBottom = toast.getBoundingClientRect().bottom
 
             remainingToasts.forEach((toast) => {
                 if (toast.getBoundingClientRect().bottom < removedToastBottom) {
-                    toast.classList.add("slide-down");
+                    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");
+                const slidingToasts = document.querySelectorAll(".slide-down")
                 slidingToasts.forEach((toast) => {
-                    toast.classList.remove("slide-down");
+                    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");
+                const remainingToastsDown = document.querySelectorAll(".toast-notification")
-                let heightSoFar = 0;
+                let heightSoFar = 0
                 remainingToastsDown.forEach((toast) => {
-                    toast.style.bottom = `${10 + heightSoFar}px`;
+                    toast.style.bottom = `${10 + heightSoFar}px`
-                    heightSoFar += toast.offsetHeight + 10; // add 10 pixels for spacing
+                    heightSoFar += toast.offsetHeight + 10 // add 10 pixels for spacing
-                });
+                })
-            }, 0); // The duration of the slide-down animation (in milliseconds)
+            }, 0) // The duration of the slide-down animation (in milliseconds)
-        }, 500);
+        }, 500)
-    };
+    }
 
     // Remove the toast after specified duration
-    setTimeout(removeToast, duration);
+    setTimeout(removeToast, duration)
+}
+
+function alert(msg, title) {
+    title = title || ""
+    $.alert({
+        theme: "modern",
+        title: title,
+        useBootstrap: false,
+        animateFromElement: false,
+        content: msg,
+    })
+}
+
+function confirm(msg, title, fn) {
+    title = title || ""
+    $.confirm({
+        theme: "modern",
+        title: title,
+        useBootstrap: false,
+        animateFromElement: false,
+        content: msg,
+        buttons: {
+            yes: () => {
+                fn(e)
+            },
+            cancel: () => {},
+        },
+    })
 }