@gradio/image 0.3.0-beta.7 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @gradio/image
 
+## 0.3.0
+
+### Features
+
+- [#5498](https://github.com/gradio-app/gradio/pull/5498) [`287fe6782`](https://github.com/gradio-app/gradio/commit/287fe6782825479513e79a5cf0ba0fbfe51443d7) - fix circular dependency with client + upload.  Thanks [@pngwn](https://github.com/pngwn)!
+- [#5498](https://github.com/gradio-app/gradio/pull/5498) [`287fe6782`](https://github.com/gradio-app/gradio/commit/287fe6782825479513e79a5cf0ba0fbfe51443d7) - Fix selectable prop in the backend.  Thanks [@pngwn](https://github.com/pngwn)!
+- [#5498](https://github.com/gradio-app/gradio/pull/5498) [`287fe6782`](https://github.com/gradio-app/gradio/commit/287fe6782825479513e79a5cf0ba0fbfe51443d7) - Image v4.  Thanks [@pngwn](https://github.com/pngwn)!
+- [#5498](https://github.com/gradio-app/gradio/pull/5498) [`287fe6782`](https://github.com/gradio-app/gradio/commit/287fe6782825479513e79a5cf0ba0fbfe51443d7) - Publish all components to npm.  Thanks [@pngwn](https://github.com/pngwn)!
+- [#5498](https://github.com/gradio-app/gradio/pull/5498) [`287fe6782`](https://github.com/gradio-app/gradio/commit/287fe6782825479513e79a5cf0ba0fbfe51443d7) - Custom components.  Thanks [@pngwn](https://github.com/pngwn)!
+- [#6171](https://github.com/gradio-app/gradio/pull/6171) [`28322422c`](https://github.com/gradio-app/gradio/commit/28322422cb9d8d3e471e439ad602959662e79312) - strip dangling svelte imports.  Thanks [@pngwn](https://github.com/pngwn)!
+
+## 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 +153,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",
   "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",
+    "@gradio/client": "^0.7.0",
+    "@gradio/icons": "^0.2.0",
+    "@gradio/statustracker": "^0.3.0",
+    "@gradio/upload": "^0.3.0",
+    "@gradio/utils": "^0.2.0",
+    "@gradio/wasm": "^0.2.0"
   },
   "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 {