images upload

src/routes/canvas/+page.svelte

@@ -8,6 +8,7 @@
 	import ChatNode from "./chat-node.svelte";
 	import { edges, nodes } from "./state.js";
 	import { models } from "$lib/state/models.svelte";
+	import ImgPreview from "$lib/components/inference-playground/img-preview.svelte";
 
 	const nodeTypes = { chat: ChatNode } as const;
 
@@ -80,3 +81,5 @@
 		</SvelteFlow>
 	{/if}
 </div>
+
+<ImgPreview />

src/routes/canvas/chat-node.svelte

@@ -1,28 +1,32 @@
 <script lang="ts">
+	import { previewImage } from "$lib/components/inference-playground/img-preview.svelte";
 	import { TextareaAutosize } from "$lib/spells/textarea-autosize.svelte";
+	import { images } from "$lib/state/images.svelte.js";
 	import { models } from "$lib/state/models.svelte";
 	import { token } from "$lib/state/token.svelte";
 	import type { Model } from "$lib/types.js";
+	import { AsyncQueue } from "$lib/utils/queue.js";
 	import { InferenceClient } from "@huggingface/inference";
+	import type { ChatCompletionInputMessage } from "@huggingface/tasks";
 	import { Handle, Position, useSvelteFlow, type Edge, type Node, type NodeProps } from "@xyflow/svelte";
+	import { marked } from "marked";
+	import { FileUpload } from "melt/builders";
+	import { ElementSize } from "runed";
 	import { onMount } from "svelte";
-	import { edges, nodes } from "./state.js";
-	import IconLoading from "~icons/lucide/loader-2";
-	import IconAdd from "~icons/lucide/plus";
-	import IconX from "~icons/lucide/x";
-	import IconStop from "~icons/lucide/square";
+	import { fade } from "svelte/transition";
+	import IconImage from "~icons/carbon/image-reference";
+	import IconMaximize from "~icons/carbon/maximize";
+	import IconCode from "~icons/lucide/code";
 	import IconCopy from "~icons/lucide/copy";
+	import IconLoading from "~icons/lucide/loader-2";
 	import IconAttachment from "~icons/lucide/paperclip";
-	import IconCode from "~icons/lucide/code";
+	import IconAdd from "~icons/lucide/plus";
 	import IconSend from "~icons/lucide/send";
-	import type { ChatCompletionInputMessage } from "@huggingface/tasks";
+	import IconStop from "~icons/lucide/square";
+	import IconX from "~icons/lucide/x";
 	import ModelPicker from "./model-picker.svelte";
 	import ProviderPicker from "./provider-picker.svelte";
-	import { ElementSize } from "runed";
-	import { marked } from "marked";
-	import { images } from "$lib/state/images.svelte.js";
-	import { AsyncQueue } from "$lib/utils/queue.js";
-	import { FileUpload } from "melt/builders";
+	import { edges, nodes } from "./state.js";
 
 	type Props = Omit<NodeProps, "data"> & {
 		data: { query: string; response: string; modelId?: Model["id"]; provider?: string; imageIds?: string[] };
@@ -315,7 +319,17 @@
 			<!-- Message container with top bar, textarea, and bottom bar -->
 			<div
 				class="rounded-lg border border-gray-200 bg-gray-50 focus-within:border-gray-900 focus-within:ring-2 focus-within:ring-gray-900/10"
+				{...fileUpload.dropzone}
 			>
+				{#if fileUpload.isDragging}
+					<div
+						class="absolute inset-2 z-10 flex flex-col items-center justify-center rounded-xl bg-gray-800/50 backdrop-blur-md"
+						transition:fade={{ duration: 100 }}
+					>
+						<IconImage />
+						<p>Drop the image here to upload</p>
+					</div>
+				{/if}
 				<!-- Top bar with buttons and character count -->
 				<div class="flex items-center justify-between border-b border-gray-200 px-4 py-2">
 					<div class="flex items-center gap-2">
@@ -323,8 +337,10 @@
 							type="button"
 							class="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-gray-600 transition-colors hover:bg-gray-200 hover:text-gray-900"
 							title="Attach file"
+							{...fileUpload.trigger}
 						>
 							<IconAttachment class="h-4 w-4" />
+							<input {...fileUpload.input} />
 						</button>
 						<button
 							type="button"
@@ -355,6 +371,39 @@
 			</div>
 		</div>
 
+		<div class="mt-2">
+			<div class="flex items-center gap-2">
+				{#each data.imageIds ?? [] as imgKey (imgKey)}
+					{#await images.get(imgKey)}
+						<!-- nothing -->
+					{:then imgSrc}
+						<div class="group/img relative">
+							<button
+								aria-label="expand"
+								class="absolute inset-0 z-10 grid place-items-center rounded-md bg-gray-800/70 text-white opacity-0 group-hover/img:opacity-100"
+								onclick={() => previewImage(imgSrc)}
+							>
+								<IconMaximize />
+							</button>
+							<img src={imgSrc} alt="uploaded" class="size-12 rounded-md object-cover" />
+							<button
+								aria-label="remove"
+								type="button"
+								onclick={async e => {
+									e.stopPropagation();
+									updateNodeData(id, { imageIds: data.imageIds?.filter(i => i !== imgKey) });
+									images.delete(imgKey);
+								}}
+								class="invisible absolute -top-1 -right-1 z-20 grid size-5 place-items-center rounded-full bg-gray-800 text-xs text-white group-hover/img:visible hover:bg-gray-700"
+							>
+								✕
+							</button>
+						</div>
+					{/await}
+				{/each}
+			</div>
+		</div>
+
 		<!-- Bottom bar with hint and send button (outside textarea) -->
 		<div class="mt-2 flex items-center justify-between">
 			<div class="text-xs text-gray-500">Shift + Enter for newline</div>