img upload button

src/lib/components/inference-playground/img-preview.svelte

@@ -1,14 +1,16 @@
+<script lang="ts" module>
+	let img = $state<string>();
+
+	export const previewImage = (i: string) => {
+		img = i;
+	};
+</script>
+
 <script lang="ts">
 	import { clickOutside } from "$lib/attachments/click-outside.js";
 	import { fade, scale } from "svelte/transition";
 	import IconCross from "~icons/carbon/close";
 
-	interface Props {
-		img?: string;
-	}
-
-	let { img = $bindable() }: Props = $props();
-
 	let dialog: HTMLDialogElement | undefined = $state();
 
 	$effect(() => {

src/lib/components/inference-playground/message-textarea.svelte

@@ -2,7 +2,13 @@
 	import { autofocus } from "$lib/attachments/autofocus.js";
 	import { TextareaAutosize } from "$lib/spells/textarea-autosize.svelte.js";
 	import { conversations } from "$lib/state/conversations.svelte";
+	import { fileToDataURL } from "$lib/utils/file.js";
 	import { cmdOrCtrl } from "$lib/utils/platform.js";
+	import { FileUpload } from "melt/builders";
+	import IconImage from "~icons/carbon/image-reference";
+	import IconMaximize from "~icons/carbon/maximize";
+	import Tooltip from "../tooltip.svelte";
+	import { previewImage } from "./img-preview.svelte";
 
 	const multiple = $derived(conversations.active.length > 1);
 	const loading = $derived(conversations.generating);
@@ -25,56 +31,113 @@
 		input = "";
 	}
 
+	const canUploadImgs = $derived(conversations.active.every(c => c.supportsImgUpload));
+
+	const fileUpload = new FileUpload({
+		accept: "image/*",
+		multiple: true,
+		disabled: () => !canUploadImgs,
+	});
+
 	const autosized = new TextareaAutosize();
 </script>
 
 <svelte:window onkeydown={onKeydown} />
 
-<div class="mt-auto px-2 pt-1">
-	<label
-		class="flex w-full items-end rounded-[32px] bg-gray-200 p-2 pl-6 outline-gray-400 focus-within:outline-2 dark:bg-gray-800"
-	>
-		<textarea
-			placeholder="Enter your message"
-			class="max-h-100 flex-1 resize-none self-center outline-none"
-			bind:value={input}
-			{@attach autosized.attachment}
-			{@attach autofocus()}
-		></textarea>
-		<button
-			onclick={() => {
-				if (loading) conversations.stopGenerating();
-				else sendMessage();
-			}}
-			type="button"
-			class={[
-				"flex items-center justify-center gap-2 rounded-full px-3.5 py-2.5 text-sm font-medium text-white focus:ring-4 focus:ring-gray-300 focus:outline-hidden dark:focus:ring-gray-700",
-				loading && "bg-red-900 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700",
-				!loading && "bg-black hover:bg-gray-900 dark:bg-blue-600 dark:hover:bg-blue-700",
-			]}
-		>
-			{#if loading}
-				<div class="flex flex-none items-center gap-[3px]">
-					<span class="mr-2">
-						{#if conversations.active.some(c => c.data.streaming)}
-							Stop
-						{:else}
-							Cancel
-						{/if}
+<div class="relative mt-auto px-2 pt-1">
+	<label class="block rounded-[32px] bg-gray-200 p-2 pl-6 outline-gray-400 focus-within:outline-2 dark:bg-gray-800">
+		<div class="flex w-full items-end">
+			<textarea
+				placeholder="Enter your message"
+				class="max-h-100 flex-1 resize-none self-center outline-none"
+				bind:value={input}
+				{@attach autosized.attachment}
+				{@attach autofocus()}
+			></textarea>
+			{#if canUploadImgs}
+				<Tooltip openDelay={250}>
+					{#snippet trigger(tooltip)}
+						<button
+							tabindex="0"
+							type="button"
+							class="mr-2 mb-1.5 grid size-7 place-items-center rounded-full bg-white text-xs font-medium text-gray-900
+					hover:bg-gray-100
+					hover:text-blue-700 focus:z-10 focus:ring-4
+					focus:ring-gray-100 focus:outline-hidden
+					dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+							{...tooltip.trigger}
+							{...fileUpload.trigger}
+						>
+							<IconImage />
+						</button>
+						<input {...fileUpload.input} />
+					{/snippet}
+					Add image
+				</Tooltip>
+			{/if}
+			<button
+				onclick={() => {
+					if (loading) conversations.stopGenerating();
+					else sendMessage();
+				}}
+				type="button"
+				class={[
+					"flex items-center justify-center gap-2 rounded-full px-3.5 py-2.5 text-sm font-medium text-white focus:ring-4 focus:ring-gray-300 focus:outline-hidden dark:focus:ring-gray-700",
+					loading && "bg-red-900 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700",
+					!loading && "bg-black hover:bg-gray-900 dark:bg-blue-600 dark:hover:bg-blue-700",
+				]}
+			>
+				{#if loading}
+					<div class="flex flex-none items-center gap-[3px]">
+						<span class="mr-2">
+							{#if conversations.active.some(c => c.data.streaming)}
+								Stop
+							{:else}
+								Cancel
+							{/if}
+						</span>
+						{#each { length: 3 } as _, i}
+							<div
+								class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-200 dark:bg-gray-100"
+								style="animation-delay: {(i + 1) * 0.25}s;"
+							></div>
+						{/each}
+					</div>
+				{:else}
+					{multiple ? "Run all" : "Run"}
+					<span class="inline-flex gap-0.5 rounded-sm border border-white/20 bg-white/10 px-0.5 text-xs text-white/70">
+						{cmdOrCtrl}<span class="translate-y-px">↵</span>
 					</span>
-					{#each { length: 3 } as _, i}
-						<div
-							class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-200 dark:bg-gray-100"
-							style="animation-delay: {(i + 1) * 0.25}s;"
-						></div>
-					{/each}
+				{/if}
+			</button>
+		</div>
+
+		<div class="flex w-full items-center">
+			{#each fileUpload.selected as file}
+				<div class="group/img relative">
+					<button
+						aria-label="expand"
+						class="absolute inset-0 z-10 grid place-items-center bg-gray-800/70 opacity-0 group-hover/img:opacity-100"
+						onclick={() => {
+							fileToDataURL(file).then(src => previewImage(src));
+						}}
+					>
+						<IconMaximize />
+					</button>
+					<img src={await fileToDataURL(file)} alt="uploaded" class="size-12 rounded-md object-cover" />
+					<button
+						aria-label="remove"
+						type="button"
+						onclick={async e => {
+							e.stopPropagation();
+							fileUpload.remove(file);
+						}}
+						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>
-			{:else}
-				{multiple ? "Run all" : "Run"}
-				<span class="inline-flex gap-0.5 rounded-sm border border-white/20 bg-white/10 px-0.5 text-xs text-white/70">
-					{cmdOrCtrl}<span class="translate-y-px">↵</span>
-				</span>
-			{/if}
-		</button>
+			{/each}
+		</div>
 	</label>
 </div>

src/lib/components/inference-playground/message.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
 	import Tooltip from "$lib/components/tooltip.svelte";
+	import { TEST_IDS } from "$lib/constants.js";
 	import { TextareaAutosize } from "$lib/spells/textarea-autosize.svelte.js";
 	import { type ConversationClass } from "$lib/state/conversations.svelte.js";
 	import { images } from "$lib/state/images.svelte";
-	import { PipelineTag, type ConversationMessage } from "$lib/types.js";
+	import { type ConversationMessage } from "$lib/types.js";
 	import { copyToClipboard } from "$lib/utils/copy.js";
+	import { cmdOrCtrl } from "$lib/utils/platform.js";
 	import { AsyncQueue } from "$lib/utils/queue.js";
 	import { FileUpload } from "melt/builders";
 	import { fade } from "svelte/transition";
@@ -13,9 +15,7 @@
 	import IconMaximize from "~icons/carbon/maximize";
 	import IconCustom from "../icon-custom.svelte";
 	import LocalToasts from "../local-toasts.svelte";
-	import ImgPreview from "./img-preview.svelte";
-	import { TEST_IDS } from "$lib/constants.js";
-	import { cmdOrCtrl } from "$lib/utils/platform.js";
+	import { previewImage } from "./img-preview.svelte";
 
 	type Props = {
 		conversation: ConversationClass;
@@ -31,11 +31,7 @@
 	const autosized = new TextareaAutosize();
 	const shouldStick = $derived(autosized.textareaHeight > 92);
 
-	const canUploadImgs = $derived(
-		message.role === "user" &&
-			"pipeline_tag" in conversation.model &&
-			conversation.model.pipeline_tag === PipelineTag.ImageTextToText,
-	);
+	const canUploadImgs = $derived(message.role === "user" && conversation.supportsImgUpload);
 
 	const fileQueue = new AsyncQueue();
 	const fileUpload = new FileUpload({
@@ -59,8 +55,6 @@
 		disabled: () => !canUploadImgs,
 	});
 
-	let previewImg = $state<string>();
-
 	const regenLabel = $derived.by(() => {
 		if (message?.role === "assistant") return "Regenerate";
 		return isLast ? "Generate from here" : "Regenerate from here";
@@ -231,7 +225,7 @@
 						<button
 							aria-label="expand"
 							class="absolute inset-0 z-10 grid place-items-center bg-gray-800/70 opacity-0 group-hover/img:opacity-100"
-							onclick={() => (previewImg = imgSrc)}
+							onclick={() => previewImage(imgSrc)}
 						>
 							<IconMaximize />
 						</button>
@@ -257,5 +251,3 @@
 		</div>
 	</div>
 </div>
-
-<ImgPreview bind:img={previewImg} />

src/lib/state/conversations.svelte.ts

@@ -108,6 +108,10 @@ export class ConversationClass {
 		return this.isStructuredOutputAllowed && this.data.structuredOutput?.enabled;
 	}
 
+	get supportsImgUpload() {
+		return this.model.pipeline_tag === PipelineTag.ImageTextToText;
+	}
+
 	update = async (data: Partial<ConversationEntityMembers>) => {
 		if (this.data.id === -1) return;
 		// if (this.data.id === undefined) return;

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import DebugMenu from "$lib/components/debug-menu.svelte";
 	import CustomModelConfig from "$lib/components/inference-playground/custom-model-config.svelte";
+	import ImgPreview from "$lib/components/inference-playground/img-preview.svelte";
 	import Prompts from "$lib/components/prompts.svelte";
 	import QuotaModal from "$lib/components/quota-modal.svelte";
 	import ShareModal from "$lib/components/share-modal.svelte";
@@ -15,10 +16,16 @@
 	conversations.init();
 </script>
 
-{@render children?.()}
+<svelte:boundary>
+	{@render children?.()}
+	{#snippet pending()}
+		<!-- pending -->
+	{/snippet}
+</svelte:boundary>
 
 <DebugMenu />
 <Prompts />
 <QuotaModal />
 <ShareModal />
 <CustomModelConfig />
+<ImgPreview />