Image compare widget

src/lib/components/ComfyApp.ts

@@ -352,6 +352,15 @@ export default class ComfyApp {
             }
         });
 
+        this.api.addEventListener("execution_cached", ({ detail }: CustomEvent) => {
+            // TODO detail.nodes
+        });
+
+        this.api.addEventListener("execution_error", ({ detail }: CustomEvent) => {
+            queueState.update(s => { s.progress = null; s.runningNodeId = null; return s; })
+            notify(`Execution error: ${detail.message}`, { type: "error", timeout: 10000 })
+        });
+
         this.api.init();
     }
 
@@ -447,6 +456,11 @@ export default class ComfyApp {
             state = structuredClone(blankGraph)
         }
         await this.deserialize(state)
+        uiState.update(s => {
+            s.uiUnlocked = true;
+            s.uiEditMode = "widgets";
+            return s;
+        })
     }
 
     /**

src/lib/components/ImageComparison.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+ import 'img-comparison-slider';
+
+ export let value: number = 50;
+ export let hover: boolean = false;
+ export let direction: "horizontal" | "vertical" = "horizontal";
+ export let nonce: string | null = null;
+ export let keyboard: "enabled" | "disabled" = "enabled";
+ export let handle: boolean = false;
+</script>
+
+<img-comparison-slider {value} {hover} {direction} {nonce} {keyboard} {handle} {...$$restProps}>
+    <slot/>
+</img-comparison-slider>
+
+<style>
+ img-comparison-slider {
+     visibility: hidden;
+ }
+
+ img-comparison-slider [slot='second'] {
+     display: none;
+ }
+
+ img-comparison-slider.rendered {
+     visibility: inherit;
+ }
+
+ img-comparison-slider.rendered [slot='second'] {
+     display: unset;
+ }
+</style>