Tha gallery widget

src/lib/widgets/ComboWidget.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+ import type { WidgetUIState } from "$lib/stores/widgetState";
+ import { Dropdown } from "@gradio/form";
+ export let item: WidgetUIState | null = null;
+</script>
+
+<div class="wrapper">
+    {#if item}
+        <Dropdown
+            bind:value={item.value}
+            choices={item.widget.options.values}
+            multiselect={false}
+            max_choices={1}
+            label={item.widget.name}
+            show_label={true}
+            disabled={item.widget.options.values.length === 0}
+            on:change
+            on:select
+            on:blur
+        />
+    {/if}
+</div>
+
+<style>
+ .wrapper {
+     padding: 2px;
+     width: 100%;
+ }
+</style>

src/lib/widgets/ComfyGalleryWidget.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+ import type { WidgetUIState } from "$lib/stores/widgetState";
+	import { Block } from "@gradio/atoms";
+ import { Gallery } from "@gradio/gallery";
+ export let item: WidgetUIState | null = null;
+</script>
+
+<div class="wrapper comfy-gallery-widget">
+    {#if item}
+        <Block variant="solid" padding={false}>
+            <Gallery
+                bind:value={item.value}
+                label={item.widget.name}
+                show_label={true}
+                root={""}
+                root_url={""}
+                on:select
+            />
+        </Block>
+    {/if}
+</div>
+
+<style>
+ .wrapper {
+     padding: 2px;
+     width: 100%;
+ }
+</style>

src/lib/widgets/ComfyGalleryWidget.ts

@@ -0,0 +1,12 @@
+import type { WidgetPanelOptions } from "@litegraph-ts/core";
+import ComfyWidget from "./ComfyWidget";
+import type { ComfyImageResult } from "$lib/nodes/ComfySaveImageNode";
+
+export type ComfyGalleryEntry = [string, string | null]; // <img> src and alt/title, gradio format
+
+export interface ComfyGalleryWidgetOptions extends WidgetPanelOptions {
+}
+
+export default class ComfyGalleryWidget extends ComfyWidget<ComfyGalleryWidgetOptions, ComfyGalleryEntry[]> {
+    override type = "comfy/gallery";
+}

src/lib/widgets/ComfyWidget.ts

@@ -0,0 +1,39 @@
+import type ComfyGraphNode from "$lib/nodes/ComfyGraphNode";
+import type { IWidget, LGraphNode, SerializedLGraphNode, Vector2, WidgetCallback, WidgetTypes } from "@litegraph-ts/core";
+import widgetState from "$lib/stores/widgetState";
+
+export default abstract class ComfyWidget<T = any, V = any> implements IWidget<T, V> {
+    name: string;
+    value: V;
+    node: ComfyGraphNode;
+
+    constructor(name: string, value: V, node: ComfyGraphNode) {
+        this.name = name;
+        this.value = value
+        this.node = node;
+    }
+
+    options?: T;
+    type?: WidgetTypes | string | any;
+    y?: number;
+    property?: string;
+    last_y?: number;
+    width?: number;
+    clicked?: boolean;
+    marker?: boolean;
+    disabled?: boolean;
+    callback?: WidgetCallback<this>;
+
+    setValue(value: V) {
+        this.value = value;
+        widgetState.widgetStateChanged(this);
+    }
+
+    draw?(ctx: CanvasRenderingContext2D, node: LGraphNode, width: number, posY: number, height: number): void;
+
+    mouse?(event: MouseEvent, pos: Vector2, node: LGraphNode): boolean;
+
+    computeSize?(width: number): [number, number];
+
+    serializeValue?(serialized: SerializedLGraphNode<LGraphNode>, slot: number): Promise<any>;
+}

src/lib/widgets/RangeWidget.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+ import type { WidgetUIState } from "$lib/stores/widgetState";
+ import { Range } from "@gradio/form";
+ export let item: WidgetUIState | null = null;
+</script>
+
+<div class="wrapper">
+    {#if item}
+        <Range
+            bind:value={item.value}
+            minimum={item.widget.options.min}
+            maximum={item.widget.options.max}
+            step={item.widget.options.step}
+            label={item.widget.name}
+            show_label={true}
+            on:change
+            on:release
+        />
+    {/if}
+</div>
+
+<style>
+ .wrapper {
+     padding: 2px;
+     width: 100%;
+ }
+</style>

src/lib/widgets/TextWidget.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+ import type { WidgetUIState } from "$lib/stores/widgetState";
+ import { TextBox } from "@gradio/form";
+ export let item: WidgetUIState | null = null;
+</script>
+
+<div class="wrapper">
+    {#if item}
+        <TextBox
+            bind:value={item.value}
+            label={item.widget.name}
+            lines={item.widget.options.multiline ? 5 : 1}
+            max_lines={item.widget.options.multiline ? 5 : 1}
+            show_label={true}
+            on:change
+            on:submit
+            on:blur
+            on:select
+        />
+    {/if}
+</div>
+
+<style>
+ .wrapper {
+     padding: 2px;
+     width: 100%;
+ }
+</style>

src/lib/widgets/index.ts

@@ -0,0 +1,2 @@
+export { default as ComfyGalleryWidget } from "./ComfyGalleryWidget"
+export { default as ComfyGalleryWidget_Svelte } from "./ComfyGalleryWidget.svelte"