Image and radio widgets

src/lib/widgets/CheckboxWidget.svelte

@@ -32,7 +32,12 @@
         {#key $attrsChanged}
             {#if node !== null}
                 <Block>
-                    <Checkbox disabled={isDisabled(widget)} label={widget.attrs.title} bind:value={$nodeValue} on:select={onSelect} />
+                    <Checkbox
+                        disabled={isDisabled(widget)}
+                        label={widget.attrs.title}
+                        bind:value={$nodeValue}
+                        on:select={onSelect}
+                    />
                 </Block>
             {/if}
         {/key}

src/lib/widgets/ComboWidget.svelte

@@ -136,7 +136,9 @@
 
  :global(.svelte-select) {
      width: auto;
-     max-width: 30rem;
+     max-width: 16rem;
+     --font-size: 13px;
+     --height: 32px;
  }
 
  :global(.svelte-select-list) {

src/lib/widgets/GalleryWidget.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
  import { ImageViewer } from "$lib/ImageViewer";
- import { Block } from "@gradio/atoms";
+ import { Block, BlockLabel, Empty } from "@gradio/atoms";
  import { Gallery } from "@gradio/gallery";
+ import { Image } from "@gradio/icons";
  import type { Styles } from "@gradio/utils";
  import type { WidgetLayout } from "$lib/stores/layoutState";
  import type { Writable } from "svelte/store";
@@ -123,23 +124,42 @@
  }
 </script>
 
-<div class="wrapper comfy-gallery-widget gradio-gallery" bind:this={element}>
-    {#if widget && node && nodeValue && $nodeValue != null}
-        <Block variant="solid" padding={false}>
-            <div class="padding">
-                <Gallery
-                    bind:value={$nodeValue}
-                    label={widget.attrs.title}
-                    show_label={widget.attrs.title !== ""}
-                    {style}
-                    root={""}
-                    root_url={""}
-                    on:select={onSelect}
-                />
-            </div>
-        </Block>
+{#if widget && node && nodeValue && $nodeValue != null}
+    {#if widget.attrs.variant === "image"}
+        <div class="wrapper comfy-image-widget" bind:this={element}>
+            <Block variant="solid" padding={false}>
+                {#if widget.attrs.title}
+                    <BlockLabel
+                        show_label={true}
+                        Icon={Image}
+                        label={widget.attrs.title || "Image"}
+                    />
+                {/if}
+                {#if $nodeValue.length > 0}
+                    <img src={$nodeValue[$nodeValue.length-1].data}/>
+                {:else}
+                    <Empty size="large" unpadded_box={true}><Image /></Empty>
+                {/if}
+            </Block>
+        </div>
+    {:else}
+        <div class="wrapper comfy-gallery-widget gradio-gallery" bind:this={element}>
+            <Block variant="solid" padding={false}>
+                <div class="padding">
+                    <Gallery
+                        bind:value={$nodeValue}
+                        label={widget.attrs.title}
+                        show_label={widget.attrs.title !== ""}
+                        {style}
+                        root={""}
+                        root_url={""}
+                        on:select={onSelect}
+                    />
+                </div>
+            </Block>
+        </div>
     {/if}
-</div>
+{/if}
 
 <style lang="scss">
  .wrapper {
@@ -148,13 +168,28 @@
      :global(> .block) {
          border-radius: 0px !important;
      }
+
+     :global(button.thumbnail-lg) {
+         width: var(--size-32);
+     }
+
+     &.comfy-image-widget {
+         aspect-ratio: 1/1;
+
+         :global(> .block) {
+             height: 100%;
+
+             :global(img) {
+                 width: 100%;
+                 height: 100%;
+                 object-fit: contain;
+             }
+         }
+     }
  }
 
  .padding {
      height: 30rem;
  }
 
- .wrapper :global(button.thumbnail-lg) {
-     width: var(--size-32);
- }
 </style>

src/lib/widgets/RadioWidget.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+ import type { ComfyRadioNode } from "$lib/nodes/ComfyWidgetNodes";
+ import { type WidgetLayout } from "$lib/stores/layoutState";
+ import { Block } from "@gradio/atoms";
+ import { Radio } from "@gradio/form";
+ import { get, type Writable, writable } from "svelte/store";
+ import { isDisabled } from "./utils"
+ import type { SelectData } from "@gradio/utils";
+	import { clamp } from "$lib/utils";
+
+ export let widget: WidgetLayout | null = null;
+ export let isMobile: boolean = false;
+ let node: ComfyRadioNode | null = null;
+ let nodeValue: Writable<string> | null = null;
+ let propsChanged: Writable<number> | null = null;
+ let attrsChanged: Writable<number> | null = null;
+
+ $: widget && setNodeValue(widget);
+
+ function setNodeValue(widget: WidgetLayout) {
+     if (widget) {
+         node = widget.node as ComfyRadioNode
+         nodeValue = node.value;
+         attrsChanged = widget.attrsChanged;
+     }
+ };
+
+ $: node && $propsChanged && clampIndex();
+
+ function clampIndex() {
+     node.index = clamp(node.index, 0, node.properties.choices?.length || 0)
+ }
+
+ function onSelect(e: CustomEvent<SelectData>) {
+     $nodeValue = e.detail.value
+     node.setValue($nodeValue)
+     node.index = e.detail.index as number
+     navigator.vibrate(20)
+ }
+</script>
+
+<div class="wrapper gradio-checkbox">
+    <div class="inner">
+        {#key $propsChanged}
+            {#key $attrsChanged}
+                {#if node !== null && node.properties.choices}
+                    <Block>
+                        <Radio
+                            elem_id="radio"
+                            choices={node.properties.choices}
+                            disabled={isDisabled(widget)}
+                            label={widget.attrs.title}
+                            value={$nodeValue}
+                            on:select={onSelect}
+                        />
+                    </Block>
+                {/if}
+            {/key}
+        {/key}
+    </div>
+</div>
+
+<style lang="scss">
+</style>