@gradio/image 0.3.0-beta.7 → 0.3.0-beta.9

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @gradio/image
 
+## 0.3.0-beta.9
+
+### Features
+
+- [#6143](https://github.com/gradio-app/gradio/pull/6143) [`e4f7b4b40`](https://github.com/gradio-app/gradio/commit/e4f7b4b409323b01aa01b39e15ce6139e29aa073) - fix circular dependency with client + upload.  Thanks [@pngwn](https://github.com/pngwn)!
+- [#6136](https://github.com/gradio-app/gradio/pull/6136) [`667802a6c`](https://github.com/gradio-app/gradio/commit/667802a6cdbfb2ce454a3be5a78e0990b194548a) - JS Component Documentation.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+- [#6094](https://github.com/gradio-app/gradio/pull/6094) [`c476bd5a5`](https://github.com/gradio-app/gradio/commit/c476bd5a5b70836163b9c69bf4bfe068b17fbe13) - Image v4.  Thanks [@pngwn](https://github.com/pngwn)!
+- [#6149](https://github.com/gradio-app/gradio/pull/6149) [`90318b1dd`](https://github.com/gradio-app/gradio/commit/90318b1dd118ae08a695a50e7c556226234ab6dc) - swap `mode` on the frontned to `interactive` to match the backend.  Thanks [@pngwn](https://github.com/pngwn)!
+- [#6135](https://github.com/gradio-app/gradio/pull/6135) [`bce37ac74`](https://github.com/gradio-app/gradio/commit/bce37ac744496537e71546d2bb889bf248dcf5d3) - Fix selectable prop in the backend.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+
+### Fixes
+
+- [#6146](https://github.com/gradio-app/gradio/pull/6146) [`40a171ea6`](https://github.com/gradio-app/gradio/commit/40a171ea60c74afa9519d6cb159def16ce68e1ca) - Fix image double change bug.  Thanks [@pngwn](https://github.com/pngwn)!
+
+## 0.3.0-beta.8
+
+### Features
+
+- [#6016](https://github.com/gradio-app/gradio/pull/6016) [`83e947676`](https://github.com/gradio-app/gradio/commit/83e947676d327ca2ab6ae2a2d710c78961c771a0) - Format js in v4 branch.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+- [#6044](https://github.com/gradio-app/gradio/pull/6044) [`9053c95a1`](https://github.com/gradio-app/gradio/commit/9053c95a10de12aef572018ee37c71106d2da675) - Simplify File Component.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+
+### Fixes
+
+- [#6046](https://github.com/gradio-app/gradio/pull/6046) [`dbb7de5e0`](https://github.com/gradio-app/gradio/commit/dbb7de5e02c53fee05889d696d764d212cb96c74) - fix tests.  Thanks [@pngwn](https://github.com/pngwn)!
+
 ## 0.3.0-beta.7
 
 ### Patch Changes
@@ -117,4 +142,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,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
 	import StaticImage from "./Index.svelte";
 </script>
@@ -8,10 +8,14 @@
 	component={Image}
 	argTypes={{
 		value: {
-			control: "text",
+			control: "object",
 			description: "The image URL or file to display",
 			name: "value",
-			value: "https://i.ibb.co/6BgKdSj/groot.jpg"
+			value: {
+				name: "https://i.ibb.co/6BgKdSj/groot.jpg",
+				is_file: true,
+				data: null
+			}
 		},
 		show_download_button: {
 			options: [true, false],
@@ -34,7 +38,11 @@
 <Story
 	name="Static Image with label and download button"
 	args={{
-		value: "https://i.ibb.co/6BgKdSj/groot.jpg",
+		value: {
+			name: "https://i.ibb.co/6BgKdSj/groot.jpg",
+			is_file: true,
+			data: null
+		},
 		show_label: true,
 		show_download_button: true
 	}}
@@ -43,7 +51,11 @@
 <Story
 	name="Static Image with no label or download button"
 	args={{
-		value: "https://i.ibb.co/6BgKdSj/groot.jpg",
+		value: {
+			name: "https://i.ibb.co/6BgKdSj/groot.jpg",
+			is_file: true,
+			data: null
+		},
 		show_label: false,
 		show_download_button: false
 	}}

package/Image.test.ts

@@ -11,7 +11,7 @@ import { spy } from "tinyspy";
 import { cleanup, render } from "@gradio/tootils";
 import { setupi18n } from "../app/src/i18n";
 
-import Image from "./interactive";
+import Image from "./Index.svelte";
 import type { LoadingStatus } from "@gradio/statustracker";
 
 const loading_status = {
@@ -37,25 +37,30 @@ describe("Image", () => {
 		const { component, listen } = await render(Image, {
 			show_label: true,
 			loading_status,
-			value:
-				"https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png",
+			value: {
+				url: "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png",
+				orig_name: "bus.png",
+				path: "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png"
+			},
 			streaming: false,
 			pending: false,
-			source: "upload",
 			label: "Test Label",
 			width: 224,
 			height: 224,
 			mirror_webcam: false,
-			shape: [224, 224],
-			brush_color: "#000000",
-			brush_radius: 5,
-			mask_opacity: 0.5
+			// brush_color: "#000000",
+			// brush_radius: 5,
+			// mask_opacity: 0.5,
+			interactive: true
 		});
 
 		const mock = listen("change");
 
-		component.value =
-			"https://github.com/gradio-app/gradio/blob/main/test/test_files/cheetah1.jpg";
+		component.value = {
+			url: "https://github.com/gradio-app/gradio/blob/main/test/test_files/cheetah1.jpg",
+			orig_name: "bus.png",
+			path: "https://github.com/gradio-app/gradio/blob/main/test/test_files/cheetah1.jpg"
+		};
 		assert.equal(mock.callCount, 1);
 	});
 });

package/Index.svelte

@@ -2,17 +2,20 @@
 
 <script context="module" lang="ts">
 	export { default as Webcam } from "./shared/Webcam.svelte";
+	export { default as BaseImageUploader } from "./shared/ImageUploader.svelte";
+	export { default as BaseStaticImage } from "./shared/ImagePreview.svelte";
+	export { default as BaseExample } from "./Example.svelte";
 </script>
 
 <script lang="ts">
 	import type { Gradio, SelectData } from "@gradio/utils";
 	import StaticImage from "./shared/ImagePreview.svelte";
-	import Image from "./shared/ImageEditor.svelte";
-
-	import { Block, UploadText } from "@gradio/atoms";
+	import ImageUploader from "./shared/ImageUploader.svelte";
 
+	import { Block, Empty, UploadText } from "@gradio/atoms";
+	import { Image } from "@gradio/icons";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { FileData } from "js/upload/src";
+	import type { FileData } from "@gradio/client";
 	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let elem_id = "";
@@ -27,23 +30,21 @@
 	export let height: number | undefined;
 	export let width: number | undefined;
 
-	export let selectable = false;
+	export let _selectable = false;
 	export let container = true;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
 	export let show_share_button = false;
-
-	export let mode: "static" | "interactive";
-	export let source: "canvas" | "webcam" | "upload" = "upload";
-	export let tool: "editor" | "select" | "sketch" | "color-sketch" = "editor";
+	export let sources: ("clipboard" | "webcam" | "upload")[] = [
+		"upload",
+		"clipboard",
+		"webcam"
+	];
+	export let interactive: boolean;
 	export let streaming: boolean;
 	export let pending: boolean;
 	export let mirror_webcam: boolean;
-	export let shape: [number, number];
-	export let brush_radius: number;
-	export let brush_color: string;
-	export let mask_opacity: number;
 
 	export let gradio: Gradio<{
 		change: never;
@@ -57,15 +58,15 @@
 		share: ShareData;
 	}>;
 
-	$: value, gradio.dispatch("change");
+	$: value?.url && gradio.dispatch("change");
 	let dragging: boolean;
 
 	$: value = !value ? null : value;
 
-	const FIXED_HEIGHT = 240;
+	let active_tool: null | "webcam" = null;
 </script>
 
-{#if mode === "static"}
+{#if !interactive}
 	<Block
 		{visible}
 		variant={"solid"}
@@ -81,9 +82,11 @@
 		{min_width}
 	>
 		<StatusTracker
+			translucent={true}
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
+			show_progress="hidden"
 		/>
 		<StaticImage
 			on:select={({ detail }) => gradio.dispatch("select", detail)}
@@ -94,7 +97,7 @@
 			{label}
 			{show_label}
 			{show_download_button}
-			{selectable}
+			selectable={_selectable}
 			{show_share_button}
 			i18n={gradio.i18n}
 		/>
@@ -102,12 +105,12 @@
 {:else}
 	<Block
 		{visible}
-		variant={value === null && source === "upload" ? "dashed" : "solid"}
+		variant={value === null ? "dashed" : "solid"}
 		border_mode={dragging ? "focus" : "base"}
 		padding={false}
 		{elem_id}
 		{elem_classes}
-		height={height || (source === "webcam" ? undefined : FIXED_HEIGHT)}
+		height={height || undefined}
 		{width}
 		allow_overflow={false}
 		{container}
@@ -120,16 +123,12 @@
 			{...loading_status}
 		/>
 
-		<Image
-			{brush_radius}
-			{brush_color}
-			{shape}
+		<ImageUploader
+			bind:active_tool
 			bind:value
-			{source}
-			{tool}
-			{selectable}
-			{mask_opacity}
+			selectable={_selectable}
 			{root}
+			{sources}
 			on:edit={() => gradio.dispatch("edit")}
 			on:clear={() => gradio.dispatch("clear")}
 			on:stream={() => gradio.dispatch("stream")}
@@ -142,6 +141,8 @@
 				loading_status.status = "error";
 				gradio.dispatch("error", detail);
 			}}
+			on:click={() => gradio.dispatch("error", "bad thing happened")}
+			on:error
 			{label}
 			{show_label}
 			{pending}
@@ -149,7 +150,11 @@
 			{mirror_webcam}
 			i18n={gradio.i18n}
 		>
-			<UploadText i18n={gradio.i18n} type="image" />
-		</Image>
+			{#if sources.includes("upload")}
+				<UploadText i18n={gradio.i18n} type="image" mode="short" />
+			{:else}
+				<Empty unpadded_box={true} size="large"><Image /></Empty>
+			{/if}
+		</ImageUploader>
 	</Block>
 {/if}

package/README.md

@@ -1,11 +1,53 @@
-# `@gradio/button`
+# `@gradio/image`
 
 ```html
 <script>
-	import { Button } from "@gradio/button";
+	import { BaseImageUploader, BaseStaticImage, Webcam, BaseExample } from "@gradio/image";
 </script>
+```
+
+BaseImageUploader
+```javascript
+	export let sources: ("clipboard" | "webcam" | "upload")[] = [
+		"upload",
+		"clipboard",
+		"webcam"
+	];
+	export let streaming = false;
+	export let pending = false;
+	export let mirror_webcam: boolean;
+	export let selectable = false;
+	export let root: string;
+	export let i18n: I18nFormatter;
+```
 
-<button type="primary|secondary" href="string" on:click="{e.detail === href}">
-	content
-</button>
+BaseStaticImage
+```javascript
+	export let value: null | FileData;
+	export let label: string | undefined = undefined;
+	export let show_label: boolean;
+	export let show_download_button = true;
+	export let selectable = false;
+	export let show_share_button = false;
+	export let root: string;
+	export let i18n: I18nFormatter;
 ```
+
+Webcam
+```javascript
+	export let streaming = false;
+	export let pending = false;
+
+	export let mode: "image" | "video" = "image";
+	export let mirror_webcam: boolean;
+	export let include_audio: boolean;
+	export let i18n: I18nFormatter;
+```
+
+BaseExample
+```javascript
+	export let value: string;
+	export let samples_dir: string;
+	export let type: "gallery" | "table";
+	export let selected = false;
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.3.0-beta.7",
+  "version": "0.3.0-beta.9",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,14 +10,16 @@
     "cropperjs": "^1.5.12",
     "lazy-brush": "^1.0.1",
     "resize-observer-polyfill": "^1.5.1",
-    "@gradio/atoms": "^0.2.0-beta.4",
-    "@gradio/icons": "^0.2.0-beta.1",
-    "@gradio/statustracker": "^0.3.0-beta.6",
-    "@gradio/upload": "^0.3.0-beta.4",
-    "@gradio/utils": "^0.2.0-beta.4",
-    "@gradio/wasm": "^0.2.0-beta.1"
+    "@gradio/atoms": "^0.2.0-beta.6",
+    "@gradio/client": "^0.7.0-beta.1",
+    "@gradio/icons": "^0.2.0-beta.3",
+    "@gradio/statustracker": "^0.3.0-beta.8",
+    "@gradio/upload": "^0.3.0-beta.6",
+    "@gradio/utils": "^0.2.0-beta.6",
+    "@gradio/wasm": "^0.2.0-beta.2"
   },
   "main_changeset": true,
+  "main": "./Index.svelte",
   "exports": {
     ".": "./Index.svelte",
     "./example": "./Example.svelte",

package/shared/{ModifySketch.svelte → ClearImage.svelte}

@@ -1,27 +1,12 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 	import { IconButton } from "@gradio/atoms";
-	import { Undo, Clear, Erase } from "@gradio/icons";
+	import { Clear } from "@gradio/icons";
 
 	const dispatch = createEventDispatcher();
-
-	export let show_eraser = false;
 </script>
 
 <div>
-	<IconButton Icon={Undo} label="Undo" on:click={() => dispatch("undo")} />
-
-	{#if show_eraser}
-		<IconButton
-			Icon={Erase}
-			label="Clear"
-			on:click={(event) => {
-				dispatch("clear_mask");
-				event.stopPropagation();
-			}}
-		/>
-	{/if}
-
 	<IconButton
 		Icon={Clear}
 		label="Remove Image"

package/shared/ImagePreview.svelte

@@ -7,11 +7,10 @@
 	import { get_coordinates_of_clicked_image } from "./utils";
 
 	import { Image } from "@gradio/icons";
-	import { type FileData, normalise_file } from "@gradio/upload";
+	import { type FileData, normalise_file } from "@gradio/client";
 	import type { I18nFormatter } from "@gradio/utils";
 
 	export let value: null | FileData;
-	let value_: null | FileData;
 	export let label: string | undefined = undefined;
 	export let show_label: boolean;
 	export let show_download_button = true;
@@ -25,12 +24,7 @@
 		select: SelectData;
 	}>();
 
-	$: value && dispatch("change", value.data);
-
-	$: if (value !== value_) {
-		value_ = value;
-		normalise_file(value_, root, null);
-	}
+	$: value = normalise_file(value, root, null);
 
 	const handle_click = (evt: MouseEvent): void => {
 		let coordinates = get_coordinates_of_clicked_image(evt);
@@ -41,13 +35,13 @@
 </script>
 
 <BlockLabel {show_label} Icon={Image} label={label || i18n("image.image")} />
-{#if value_ === null}
+{#if value === null || !value.url}
 	<Empty unpadded_box={true} size="large"><Image /></Empty>
 {:else}
 	<div class="icon-buttons">
 		{#if show_download_button}
 			<a
-				href={value_.data}
+				href={value.url}
 				target={window.__is_colab__ ? "_blank" : null}
 				download={"image"}
 			>
@@ -69,15 +63,17 @@
 		{/if}
 	</div>
 	<button on:click={handle_click}>
-		<img src={value_.data} alt="" class:selectable loading="lazy" />
+		<img src={value.url} alt="" class:selectable loading="lazy" />
 	</button>
 {/if}
 
 <style>
-	img {
+	img,
+	button {
 		width: var(--size-full);
 		height: var(--size-full);
 		object-fit: contain;
+		display: block;
 	}
 
 	.selectable {

package/shared/ImageUploader.svelte

@@ -0,0 +1,224 @@
+<script lang="ts">
+	import { createEventDispatcher, tick } from "svelte";
+	import { BlockLabel } from "@gradio/atoms";
+	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";
+
+	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"
+	];
+	export let streaming = false;
+	export let pending = false;
+	export let mirror_webcam: boolean;
+	export let selectable = false;
+	export let root: string;
+	export let i18n: I18nFormatter;
+
+	let upload: Upload;
+	export let active_tool: "webcam" | null = null;
+
+	function handle_upload({ detail }: CustomEvent<FileData>): void {
+		value = normalise_file(detail, root, 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();
+
+		dispatch(streaming ? "stream" : "change");
+		pending = false;
+	}
+
+	$: value && !value.url && (value = normalise_file(value, root, null));
+
+	const dispatch = createEventDispatcher<{
+		change?: never;
+		stream?: never;
+		clear?: never;
+		drag: boolean;
+		upload?: never;
+		select: SelectData;
+	}>();
+
+	let dragging = false;
+
+	$: dispatch("drag", dragging);
+
+	function handle_click(evt: MouseEvent): void {
+		let coordinates = get_coordinates_of_clicked_image(evt);
+		if (coordinates) {
+			dispatch("select", { index: coordinates, value: null });
+		}
+	}
+
+	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";
+		}
+	}
+
+	async function handle_toolbar(
+		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) {
+							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();
+				break;
+			default:
+				break;
+		}
+	}
+</script>
+
+<BlockLabel {show_label} Icon={Image} label={label || "Image"} />
+
+<div data-testid="image" class="image-container">
+	{#if value?.url}
+		<ClearImage on:remove_image={() => (value = null)} />
+	{/if}
+	<div class="upload-container">
+		<Upload
+			hidden={value !== null || active_tool === "webcam"}
+			bind:this={upload}
+			bind:dragging
+			filetype="image/*"
+			on:load={handle_upload}
+			on:error
+			{root}
+			disable_click={!sources.includes("upload")}
+		>
+			{#if value === null && !active_tool}
+				<slot />
+			{/if}
+		</Upload>
+		{#if active_tool === "webcam"}
+			<Webcam
+				on:capture={(e) => handle_save(e.detail)}
+				on:stream={(e) => handle_save(e.detail)}
+				on:error
+				on:drag
+				on:upload={(e) => handle_save(e.detail)}
+				{mirror_webcam}
+				{streaming}
+				mode="image"
+				include_audio={false}
+				{i18n}
+			/>
+		{:else if value !== null && !streaming}
+			<!-- svelte-ignore a11y-click-events-have-key-events-->
+			<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
+			<img
+				src={value.url}
+				alt={value.alt_text}
+				on:click={handle_click}
+				class:selectable
+			/>
+		{/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"
+					padded={false}
+				/>
+			{/each}
+		</Toolbar>
+	{/if}
+</div>
+
+<style>
+	/* .image-container {
+		height: auto;
+	} */
+	img {
+		width: var(--size-full);
+		height: var(--size-full);
+	}
+
+	.upload-container {
+		height: 100%;
+		flex-shrink: 1;
+		max-height: 100%;
+	}
+
+	.image-container {
+		display: flex;
+		height: 100%;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		max-height: 100%;
+	}
+
+	.selectable {
+		cursor: crosshair;
+	}
+</style>