Merge branch 'more_qol_features' into qol_tweaks

static/models.js

@@ -442,6 +442,8 @@ export class ModelView {
     }
 
     loadModel() {
+        const controller = new AbortController();
+        const signal = controller.signal;
 
         overlay.loadingOverlay.setProgress(0, 1);
         overlay.pageOverlay.setMode("loading");
@@ -456,10 +458,18 @@ export class ModelView {
             }, 10000)
         });
 
+        overlay.loadingOverlay.onCancel = () => {
+            controller.abort();
+            overlay.pageOverlay.setMode();
+            this.error_message = "Loading cancelled";
+            this.updateView();
+        };
+
         let fetchRequest = fetch("/api/load_model", {
             method: "POST",
             headers: { "Content-Type": "application/json", },
-            body: JSON.stringify(packet)
+            body: JSON.stringify(packet),
+            signal: signal
         });
 
         const self = this;

static/overlay.css

@@ -44,4 +44,8 @@
     border-radius: 0px;
     text-align: center;
     line-height: 30px;
-}
+}
+
+.overlay .textbutton {
+    margin-top: 25px;
+}

static/overlay.js

@@ -1,4 +1,6 @@
 import * as util from "./util.js";
+import * as controls from "./controls.js";
+import * as globals from "./globals.js";
 
 class PageOverlay {
     constructor() {
@@ -60,6 +62,25 @@ class LoadingOverlay extends Overlay {
 
         this.bar = util.newDiv(null, "progressbar-bar");
         this.box.appendChild(this.bar);
+
+        this.cancelButton = new controls.Button("✖ Cancel", () => {
+            // First call the cancel handler to abort the fetch request
+            if (this.onCancel) this.onCancel();
+            
+            // Then unload the model to release GPU memory
+            fetch("/api/unload_model")
+            .then(response => response.json())
+            .then(json => {
+                if (json.result == "ok") {
+                    globals.g.loadedModelUUID = null;
+                    globals.g.failedModelUUID = null;
+                }
+            });
+        });
+        this.cancelButton.setEnabled(true);
+        this.element.appendChild(this.cancelButton.element);
+        
+        this.onCancel = null;
     }
 
     setProgress(a, b) {