@gradio/image 0.5.2 → 0.5.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @gradio/image
 
+## 0.5.4
+
+### Fixes
+
+- [#6865](https://github.com/gradio-app/gradio/pull/6865) [`15c97c6`](https://github.com/gradio-app/gradio/commit/15c97c6d346c475141d20615b5a865e9c44bdc76) - Fix webcam when `streaming=True`.  Thanks [@hannahblair](https://github.com/hannahblair)!
+
+## 0.5.3
+
+### Fixes
+
+- [#6766](https://github.com/gradio-app/gradio/pull/6766) [`73268ee`](https://github.com/gradio-app/gradio/commit/73268ee2e39f23ebdd1e927cb49b8d79c4b9a144) - Improve source selection UX.  Thanks [@hannahblair](https://github.com/hannahblair)!
+
 ## 0.5.2
 
 ### Patch Changes
@@ -294,4 +306,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
 
 ### Features
 
-- [#4979](https://github.com/gradio-app/gradio/pull/4979) [`44ac8ad0`](https://github.com/gradio-app/gradio/commit/44ac8ad08d82ea12c503dde5c78f999eb0452de2) - Allow setting sketch color default. Thanks [@aliabid94](https://github.com/aliabid94)!
+- [#4979](https://github.com/gradio-app/gradio/pull/4979) [`44ac8ad0`](https://github.com/gradio-app/gradio/commit/44ac8ad08d82ea12c503dde5c78f999eb0452de2) - Allow setting sketch color default. Thanks [@aliabid94](https://github.com/aliabid94)!

package/Image.stories.svelte

@@ -1,25 +1,10 @@
 <script lang="ts">
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
 	import StaticImage from "./Index.svelte";
+	import { userEvent, within } from "@storybook/testing-library";
 </script>
 
-<Meta
-	title="Components/Image"
-	component={Image}
-	argTypes={{
-		value: {
-			control: "object",
-			description: "The image URL or file to display",
-			name: "value"
-		},
-		show_download_button: {
-			options: [true, false],
-			description: "If false, the download button will not be visible",
-			control: { type: "boolean" },
-			defaultValue: true
-		}
-	}}
-/>
+<Meta title="Components/Image" component={Image} />
 
 <Template let:args>
 	<div
@@ -31,7 +16,7 @@
 </Template>
 
 <Story
-	name="Static Image with label and download button"
+	name="static with label and download button"
 	args={{
 		value: {
 			path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
@@ -44,7 +29,7 @@
 />
 
 <Story
-	name="Static Image with no label or download button"
+	name="static with no label or download button"
 	args={{
 		value: {
 			path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
@@ -55,3 +40,62 @@
 		show_download_button: false
 	}}
 />
+
+<Story
+	name="interactive with upload, clipboard, and webcam"
+	args={{
+		sources: ["upload", "clipboard", "webcam"],
+		value: {
+			path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			orig_name: "cheetah.jpg"
+		},
+		show_label: false,
+		show_download_button: false,
+		interactive: true
+	}}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		const webcamButton = await canvas.findByLabelText("Capture from camera");
+		userEvent.click(webcamButton);
+
+		userEvent.click(await canvas.findByTitle("select video source"));
+		userEvent.click(await canvas.findByLabelText("select source"));
+		userEvent.click(await canvas.findByLabelText("Upload file"));
+		userEvent.click(await canvas.findByLabelText("Paste from clipboard"));
+	}}
+/>
+
+<Story
+	name="interactive with webcam"
+	args={{
+		sources: ["webcam"],
+		show_download_button: true,
+		interactive: true
+	}}
+/>
+
+<Story
+	name="interactive with clipboard"
+	args={{
+		sources: ["clipboard"],
+		show_download_button: true,
+		interactive: true
+	}}
+/>
+
+<Story
+	name="interactive webcam with streaming"
+	args={{
+		sources: ["webcam"],
+		show_download_button: true,
+		interactive: true,
+		value: {
+			path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			orig_name: "cheetah.jpg"
+		},
+		streaming: true
+	}}
+/>

package/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,8 +146,6 @@
 				loading_status.status = "error";
 				gradio.dispatch("error", detail);
 			}}
-			on:click={() => gradio.dispatch("error", "bad thing happened")}
-			on:error
 			{label}
 			{show_label}
 			{pending}
@@ -153,8 +153,10 @@
 			{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}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,12 +10,12 @@
     "cropperjs": "^1.5.12",
     "lazy-brush": "^1.0.1",
     "resize-observer-polyfill": "^1.5.1",
-    "@gradio/client": "^0.9.2",
-    "@gradio/atoms": "^0.4.0",
-    "@gradio/statustracker": "^0.4.2",
-    "@gradio/upload": "^0.5.5",
-    "@gradio/utils": "^0.2.0",
+    "@gradio/atoms": "^0.4.1",
+    "@gradio/client": "^0.9.4",
     "@gradio/icons": "^0.3.2",
+    "@gradio/statustracker": "^0.4.3",
+    "@gradio/utils": "^0.2.0",
+    "@gradio/upload": "^0.5.7",
     "@gradio/wasm": "^0.4.0"
   },
   "main_changeset": true,

package/shared/ImageUploader.svelte

@@ -4,28 +4,21 @@
 	import { Image as ImageIcon } 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";
 	import Image from "./Image.svelte";
 
 	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;
@@ -35,19 +28,24 @@
 
 	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;
 
 		await tick();
 
@@ -55,7 +53,7 @@
 		pending = false;
 	}
 
-	$: active_streaming = streaming && active_tool === "webcam";
+	$: active_streaming = streaming && active_source === "webcam";
 	$: if (uploading && !active_streaming) value = null;
 
 	$: value && !value.url && (value = normalise_file(value, root, null));
@@ -80,61 +78,16 @@
 		}
 	}
 
-	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";
-		}
+	$: if (!active_source && sources) {
+		active_source = sources[0];
 	}
 
-	async function handle_toolbar(
+	async function handle_select_source(
 		source: (typeof sources)[number]
 	): Promise<void> {
 		switch (source) {
 			case "clipboard":
-				navigator.clipboard.read().then(async (items) => {
-					for (let i = 0; i < items.length; i++) {
-						const type = items[i].types.find((t) => t.startsWith("image/"));
-						if (type) {
-							value = null;
-							items[i].getType(type).then(async (blob) => {
-								const f = await upload.load_files([
-									new File([blob], `clipboard.${type.replace("image/", "")}`)
-								]);
-								f;
-								value = f?.[0] || null;
-							});
-							break;
-						}
-					}
-				});
-				break;
-			case "webcam":
-				active_tool = "webcam";
-				break;
-			case "upload":
-				upload.open_file_upload();
+				upload.paste_clipboard();
 				break;
 			default:
 				break;
@@ -155,21 +108,21 @@
 	{/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
-			filetype="image/*"
+			filetype={active_source === "clipboard" ? "clipboard" : "image/*"}
 			on:load={handle_upload}
 			on:error
 			{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" && (streaming || (!streaming && !value))}
 			<Webcam
 				on:capture={(e) => handle_save(e.detail)}
 				on:stream={(e) => handle_save(e.detail)}
@@ -191,17 +144,12 @@
 		{/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_select={handle_select_source}
+		/>
 	{/if}
 </div>
 
@@ -209,6 +157,13 @@
 	.image-frame :global(img) {
 		width: var(--size-full);
 		height: var(--size-full);
+		object-fit: cover;
+	}
+
+	.image-frame {
+		object-fit: cover;
+		width: 100%;
+		height: 100%;
 	}
 
 	.upload-container {

package/shared/Webcam.svelte

@@ -182,7 +182,7 @@
 	<!-- need to suppress for video streaming https://github.com/sveltejs/svelte/issues/5967 -->
 	<video bind:this={video_source} class:flip={mirror_webcam} />
 	{#if !streaming}
-		<div class:capture={!recording} class="button-wrap">
+		<div class="button-wrap">
 			<button
 				on:click={mode === "image" ? take_picture : take_recording}
 				aria-label={mode === "image" ? "capture photo" : "start recording"}
@@ -212,29 +212,32 @@
 					<div class="icon" title="select video source">
 						<DropdownArrow />
 					</div>
-
-					{#if options_open}
-						<div class="select-wrap" use:click_outside={handle_click_outside}>
-							<!-- svelte-ignore a11y-click-events-have-key-events-->
-							<!-- svelte-ignore a11y-no-static-element-interactions-->
-							<span
-								class="inset-icon"
-								on:click|stopPropagation={() => (options_open = false)}
-							>
-								<DropdownArrow />
-							</span>
-							{#each video_sources as source}
-								<!-- svelte-ignore a11y-click-events-have-key-events-->
-								<!-- svelte-ignore a11y-no-static-element-interactions-->
-								<div on:click={() => selectVideoSource(source.deviceId)}>
-									{source.label}
-								</div>
-							{/each}
-						</div>
-					{/if}
 				</button>
 			{/if}
 		</div>
+		{#if options_open}
+			<select
+				class="select-wrap"
+				aria-label="select source"
+				use:click_outside={handle_click_outside}
+			>
+				<button
+					class="inset-icon"
+					on:click|stopPropagation={() => (options_open = false)}
+				>
+					<DropdownArrow />
+				</button>
+				{#if video_sources.length === 0}
+					<option value="">{i18n("common.no_devices")}</option>
+				{:else}
+					{#each video_sources as source}
+						<option on:click={() => selectVideoSource(source.deviceId)}>
+							{source.label}
+						</option>
+					{/each}
+				{/if}
+			</select>
+		{/if}
 	{/if}
 </div>
 
@@ -243,36 +246,28 @@
 		position: relative;
 		width: var(--size-full);
 		height: var(--size-full);
-		min-height: var(--size-60);
 	}
 
 	video {
 		width: var(--size-full);
 		height: var(--size-full);
+		object-fit: cover;
 	}
 
 	.button-wrap {
-		display: flex;
 		position: absolute;
-		right: 0px;
+		background-color: var(--block-background-fill);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-xl);
+		padding: var(--size-1-5);
+		display: flex;
 		bottom: var(--size-2);
-		left: 0px;
-		justify-content: center;
-		align-items: center;
-		margin: auto;
+		left: 50%;
+		transform: translate(-50%, 0);
 		box-shadow: var(--shadow-drop-lg);
 		border-radius: var(--radius-xl);
-		background-color: rgba(0, 0, 0, 0.9);
-		width: var(--size-10);
-		height: var(--size-8);
-		padding: var(--size-2-5);
-		padding-right: var(--size-1);
-		z-index: var(--layer-3);
-	}
-
-	.capture {
-		width: var(--size-14);
-		transform: translateX(var(--size-2-5));
+		line-height: var(--size-3);
+		color: var(--button-secondary-text-color);
 	}
 
 	@media (--screen-md) {
@@ -289,9 +284,8 @@
 
 	.icon {
 		opacity: 0.8;
-		width: 100%;
-		height: 100%;
-		color: white;
+		width: 18px;
+		height: 18px;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
@@ -310,35 +304,39 @@
 		-webkit-appearance: none;
 		-moz-appearance: none;
 		appearance: none;
+		color: var(--button-secondary-text-color);
 		background-color: transparent;
-		border: none;
-		width: auto;
-		font-size: 1rem;
-		/* padding: 0.5rem; */
-		width: max-content;
+		width: 95%;
+		font-size: var(--text-md);
 		position: absolute;
-		top: 0;
-		right: 0;
+		bottom: var(--size-2);
 		background-color: var(--block-background-fill);
 		box-shadow: var(--shadow-drop-lg);
 		border-radius: var(--radius-xl);
 		z-index: var(--layer-top);
-		border: 1px solid var(--border-color-accent);
+		border: 1px solid var(--border-color-primary);
 		text-align: left;
-		overflow: hidden;
+		line-height: var(--size-4);
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		left: 50%;
+		transform: translate(-50%, 0);
+		max-width: var(--size-52);
 	}
 
-	.select-wrap > div {
+	.select-wrap > option {
 		padding: 0.25rem 0.5rem;
 		border-bottom: 1px solid var(--border-color-accent);
 		padding-right: var(--size-8);
+		text-overflow: ellipsis;
+		overflow: hidden;
 	}
 
-	.select-wrap > div:hover {
+	.select-wrap > option:hover {
 		background-color: var(--color-accent);
 	}
 
-	.select-wrap > div:last-child {
+	.select-wrap > option:last-child {
 		border: none;
 	}