Improve source selection UX

js/app/src/lang/en.json

@@ -110,6 +110,7 @@
 		"drop_csv": "Drop CSV Here",
 		"drop_file": "Drop File Here",
 		"drop_image": "Drop Image Here",
-		"drop_video": "Drop Video Here"
+		"drop_video": "Drop Video Here",
+		"paste_clipboard": "Paste from Clipboard"
 	}
 }

js/atoms/src/SelectSource.svelte

@@ -1,22 +1,28 @@
 <script lang="ts">
-	import { Microphone, Upload, Video } from "@gradio/icons";
+	import { Microphone, Upload, Webcam, ImagePaste } from "@gradio/icons";
 
-	export let sources: string[];
-	export let active_source: string;
+	type sources = "upload" | "microphone" | "webcam" | "clipboard" | null;
+
+	export let sources: Partial<sources>[];
+	export let active_source: Partial<sources>;
 	export let handle_clear: () => void = () => {};
+	export let handle_select: (source_type: Partial<sources>) => void = () => {};
+
+	async function handle_select_source(source: Partial<sources>): Promise<void> {
+		handle_clear();
+		active_source = source;
+		handle_select(source);
+	}
 </script>
 
 {#if sources.length > 1}
 	<span class="source-selection" data-testid="source-select">
 		{#if sources.includes("upload")}
 			<button
 				class="icon"
-				class:selected={active_source === "upload"}
+				class:selected={active_source === "upload" || !active_source}
 				aria-label="Upload file"
-				on:click={() => {
-					handle_clear();
-					active_source = "upload";
-				}}><Upload /></button
+				on:click={() => handle_select_source("upload")}><Upload /></button
 			>
 		{/if}
 
@@ -25,10 +31,8 @@
 				class="icon"
 				class:selected={active_source === "microphone"}
 				aria-label="Record audio"
-				on:click={() => {
-					handle_clear();
-					active_source = "microphone";
-				}}><Microphone /></button
+				on:click={() => handle_select_source("microphone")}
+				><Microphone /></button
 			>
 		{/if}
 
@@ -37,10 +41,16 @@
 				class="icon"
 				class:selected={active_source === "webcam"}
 				aria-label="Record video"
-				on:click={() => {
-					handle_clear();
-					active_source = "webcam";
-				}}><Video /></button
+				on:click={() => handle_select_source("webcam")}><Webcam /></button
+			>
+		{/if}
+		{#if sources.includes("clipboard")}
+			<button
+				class="icon"
+				class:selected={active_source === "clipboard"}
+				aria-label="Paste from clipboard"
+				on:click={() => handle_select_source("clipboard")}
+				><ImagePaste /></button
 			>
 		{/if}
 	</span>

js/atoms/src/UploadText.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { I18nFormatter } from "@gradio/utils";
-	import { Upload as UploadIcon } from "@gradio/icons";
-	export let type: "video" | "image" | "audio" | "file" | "csv" = "file";
+	import { Upload as UploadIcon, ImagePaste } from "@gradio/icons";
+	export let type: "video" | "image" | "audio" | "file" | "csv" | "clipboard" =
+		"file";
 	export let i18n: I18nFormatter;
 	export let message: string | undefined = undefined;
 	export let mode: "full" | "short" = "full";
@@ -12,12 +13,19 @@
 		video: "upload_text.drop_video",
 		audio: "upload_text.drop_audio",
 		file: "upload_text.drop_file",
-		csv: "upload_text.drop_csv"
+		csv: "upload_text.drop_csv",
+		clipboard: "upload_text.paste_clipboard"
 	};
 </script>
 
 <div class="wrap">
-	<span class="icon-wrap" class:hovered><UploadIcon /> </span>
+	<span class="icon-wrap" class:hovered>
+		{#if type === "clipboard"}
+			<ImagePaste />
+		{:else}
+			<UploadIcon />
+		{/if}
+	</span>
 
 	{i18n(defs[type] || defs.file)}
 

js/image/Index.svelte

@@ -20,6 +20,8 @@
 	import type { LoadingStatus } from "@gradio/statustracker";
 	import { normalise_file } from "@gradio/client";
 
+	type sources = "upload" | "webcam" | "clipboard" | null;
+
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
@@ -66,7 +68,7 @@
 	$: url && gradio.dispatch("change");
 
 	let dragging: boolean;
-	let active_tool: null | "webcam" = null;
+	let active_source: sources = null;
 </script>
 
 {#if !interactive}
@@ -124,7 +126,7 @@
 		/>
 
 		<ImageUploader
-			bind:active_tool
+			bind:active_source
 			bind:value
 			selectable={_selectable}
 			{root}
@@ -144,17 +146,17 @@
 				loading_status.status = "error";
 				gradio.dispatch("error", detail);
 			}}
-			on:click={() => gradio.dispatch("error", "bad thing happened")}
-			on:error
 			{label}
 			{show_label}
 			{pending}
 			{streaming}
 			{mirror_webcam}
 			i18n={gradio.i18n}
 		>
-			{#if sources.includes("upload")}
-				<UploadText i18n={gradio.i18n} type="image" mode="short" />
+			{#if active_source === "upload" || !active_source}
+				<UploadText i18n={gradio.i18n} type="image" />
+			{:else if active_source === "clipboard"}
+				<UploadText i18n={gradio.i18n} type="clipboard" mode="short" />
 			{:else}
 				<Empty unpadded_box={true} size="large"><Image /></Empty>
 			{/if}

js/image/shared/ImageUploader.svelte

@@ -4,27 +4,20 @@
 	import { Image } from "@gradio/icons";
 	import type { SelectData, I18nFormatter } from "@gradio/utils";
 	import { get_coordinates_of_clicked_image } from "./utils";
-	import {
-		Webcam as WebcamIcon,
-		ImagePaste,
-		Upload as UploadIcon
-	} from "@gradio/icons";
 	import Webcam from "./Webcam.svelte";
-	import { Toolbar, IconButton } from "@gradio/atoms";
 
 	import { Upload } from "@gradio/upload";
 	import { type FileData, normalise_file } from "@gradio/client";
 	import ClearImage from "./ClearImage.svelte";
+	import { SelectSource } from "@gradio/atoms";
 
 	export let value: null | FileData;
 	export let label: string | undefined = undefined;
 	export let show_label: boolean;
 
-	export let sources: ("clipboard" | "webcam" | "upload")[] = [
-		"upload",
-		"clipboard",
-		"webcam"
-	];
+	type source_type = "upload" | "webcam" | "clipboard" | "microphone" | null;
+
+	export let sources: source_type[] = ["upload", "clipboard", "webcam"];
 	export let streaming = false;
 	export let pending = false;
 	export let mirror_webcam: boolean;
@@ -34,19 +27,25 @@
 
 	let upload: Upload;
 	let uploading = false;
-	export let active_tool: "webcam" | null = null;
+	export let active_source: source_type = null;
 
 	function handle_upload({ detail }: CustomEvent<FileData>): void {
 		value = normalise_file(detail, root, null);
 		dispatch("upload");
 	}
 
+	function handle_clear(): void {
+		value = null;
+		dispatch("clear");
+		dispatch("change", null);
+	}
+
 	async function handle_save(img_blob: Blob | any): Promise<void> {
 		pending = true;
 		const f = await upload.load_files([new File([img_blob], `webcam.png`)]);
 
 		value = f?.[0] || null;
-		if (!streaming) active_tool = null;
+		if (!streaming) active_source = null;
 
 		await tick();
 
@@ -78,31 +77,9 @@
 		}
 	}
 
-	const sources_meta = {
-		upload: {
-			icon: UploadIcon,
-			label: i18n("Upload"),
-			order: 0
-		},
-		webcam: {
-			icon: WebcamIcon,
-			label: i18n("Webcam"),
-			order: 1
-		},
-		clipboard: {
-			icon: ImagePaste,
-			label: i18n("Paste"),
-			order: 2
-		}
-	};
-
-	$: sources_list = sources.sort(
-		(a, b) => sources_meta[a].order - sources_meta[b].order
-	);
-
 	$: {
 		if (sources.length === 1 && sources[0] === "webcam") {
-			active_tool = "webcam";
+			active_source = "webcam";
 		}
 	}
 
@@ -128,12 +105,6 @@
 					}
 				});
 				break;
-			case "webcam":
-				active_tool = "webcam";
-				break;
-			case "upload":
-				upload.open_file_upload();
-				break;
 			default:
 				break;
 		}
@@ -153,7 +124,7 @@
 	{/if}
 	<div class="upload-container">
 		<Upload
-			hidden={value !== null || active_tool === "webcam"}
+			hidden={value !== null || active_source === "webcam"}
 			bind:this={upload}
 			bind:uploading
 			bind:dragging
@@ -163,11 +134,11 @@
 			{root}
 			disable_click={!sources.includes("upload")}
 		>
-			{#if value === null && !active_tool}
+			{#if value === null}
 				<slot />
 			{/if}
 		</Upload>
-		{#if active_tool === "webcam"}
+		{#if active_source === "webcam"}
 			<Webcam
 				on:capture={(e) => handle_save(e.detail)}
 				on:stream={(e) => handle_save(e.detail)}
@@ -192,27 +163,20 @@
 		{/if}
 	</div>
 	{#if sources.length > 1 || sources.includes("clipboard")}
-		<Toolbar show_border={!value?.url}>
-			{#each sources_list as source}
-				<IconButton
-					on:click={() => handle_toolbar(source)}
-					Icon={sources_meta[source].icon}
-					size="large"
-					label="{source}-image-toolbar-btn"
-					padded={false}
-				/>
-			{/each}
-		</Toolbar>
+		<SelectSource
+			{sources}
+			bind:active_source
+			handle_clear={() => handle_clear()}
+			handle_select={handle_toolbar}
+		/>
 	{/if}
 </div>
 
 <style>
-	/* .image-container {
-		height: auto;
-	} */
 	img {
 		width: var(--size-full);
 		height: var(--size-full);
+		object-fit: cover;
 	}
 
 	.upload-container {