@gradio/image 0.3.5 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @gradio/image
 
+## 0.4.0
+
+### Highlights
+
+#### New `ImageEditor` component ([#6169](https://github.com/gradio-app/gradio/pull/6169) [`9caddc17b`](https://github.com/gradio-app/gradio/commit/9caddc17b1dea8da1af8ba724c6a5eab04ce0ed8))
+
+A brand new component, completely separate from `Image` that provides simple editing capabilities.
+
+- Set background images from file uploads, webcam, or just paste!
+- Crop images with an improved cropping UI. App authors can event set specific crop size, or crop ratios (`1:1`, etc)
+- Paint on top of any image (or no image) and erase any mistakes!
+- The ImageEditor supports layers, confining draw and erase actions to that layer.
+- More flexible access to data. The image component returns a composite image representing the final state of the canvas as well as providing the background and all layers as individual images.
+- Fully customisable. All features can be enabled and disabled. Even the brush color swatches can be customised.
+
+<video src="https://user-images.githubusercontent.com/12937446/284027169-31188926-fd16-4a1c-8718-998e7aae4695.mp4" autoplay muted></video>
+
+```py
+
+def fn(im):
+    im["composite"] # the full canvas
+    im["background"] # the background image
+    im["layers"] # a list of individual layers
+
+
+im = gr.ImageEditor(
+    # decide which sources you'd like to accept
+    sources=["upload", "webcam", "clipboard"],
+    # set a cropsize constraint, can either be a ratio or a concrete [width, height]
+    crop_size="1:1",
+    # enable crop (or disable it)
+    transforms=["crop"],
+    # customise the brush
+    brush=Brush(
+      default_size="25", # or leave it as 'auto'
+      color_mode="fixed", # 'fixed' hides the user swatches and colorpicker, 'defaults' shows it
+      default_color="hotpink", # html names are supported
+      colors=[
+        "rgba(0, 150, 150, 1)", # rgb(a)
+        "#fff", # hex rgb
+        "hsl(360, 120, 120)" # in fact any valid colorstring
+      ]
+    ),
+    brush=Eraser(default_size="25")
+)
+
+```
+
+ Thanks [@pngwn](https://github.com/pngwn)!
+
+## 0.3.6
+
+### Fixes
+
+- [#6441](https://github.com/gradio-app/gradio/pull/6441) [`2f805a7dd`](https://github.com/gradio-app/gradio/commit/2f805a7dd3d2b64b098f659dadd5d01258290521) - Small but important bugfixes for gr.Image: The upload event was not triggering at all. The paste-from-clipboard was not triggering an upload event. The clear button was not triggering a change event. The change event was triggering infinitely. Uploaded images were not preserving their original names. Uploading a new image should clear out the previous image.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+
 ## 0.3.5
 
 ### Patch Changes
@@ -196,4 +252,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/Index.svelte

@@ -5,6 +5,7 @@
 	export { default as BaseImageUploader } from "./shared/ImageUploader.svelte";
 	export { default as BaseStaticImage } from "./shared/ImagePreview.svelte";
 	export { default as BaseExample } from "./Example.svelte";
+	export { default as BaseImage } from "./shared/Image.svelte";
 </script>
 
 <script lang="ts">
@@ -61,7 +62,9 @@
 		share: ShareData;
 	}>;
 
-	$: value?.url && gradio.dispatch("change");
+	$: url = _value?.url;
+	$: url && gradio.dispatch("change");
+
 	let dragging: boolean;
 	let active_tool: null | "webcam" = null;
 </script>
@@ -127,7 +130,10 @@
 			{root}
 			{sources}
 			on:edit={() => gradio.dispatch("edit")}
-			on:clear={() => gradio.dispatch("clear")}
+			on:clear={() => {
+				gradio.dispatch("clear");
+				gradio.dispatch("change");
+			}}
 			on:stream={() => gradio.dispatch("stream")}
 			on:drag={({ detail }) => (dragging = detail)}
 			on:upload={() => gradio.dispatch("upload")}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "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/atoms": "^0.2.1",
+    "@gradio/atoms": "^0.3.0",
+    "@gradio/icons": "^0.3.0",
     "@gradio/client": "^0.8.1",
-    "@gradio/statustracker": "^0.3.1",
-    "@gradio/icons": "^0.2.0",
+    "@gradio/statustracker": "^0.4.0",
+    "@gradio/upload": "^0.5.0",
     "@gradio/utils": "^0.2.0",
-    "@gradio/upload": "^0.4.1",
     "@gradio/wasm": "^0.3.0"
   },
   "main_changeset": true,

package/shared/ImagePreview.svelte

@@ -40,7 +40,7 @@
 			<a
 				href={value.url}
 				target={window.__is_colab__ ? "_blank" : null}
-				download={"image"}
+				download={value.orig_name || "image"}
 			>
 				<IconButton Icon={Download} label={i18n("common.download")} />
 			</a>
@@ -71,6 +71,7 @@
 		height: var(--size-full);
 		object-fit: contain;
 		display: block;
+		border-radius: var(--radius-lg);
 	}
 
 	.selectable {

package/shared/ImageUploader.svelte

@@ -33,10 +33,12 @@
 	export let i18n: I18nFormatter;
 
 	let upload: Upload;
+	let uploading = false;
 	export let active_tool: "webcam" | null = null;
 
 	function handle_upload({ detail }: CustomEvent<FileData>): void {
 		value = normalise_file(detail, root, null);
+		dispatch("upload");
 	}
 
 	async function handle_save(img_blob: Blob | any): Promise<void> {
@@ -52,6 +54,8 @@
 		pending = false;
 	}
 
+	$: if (uploading) value = null;
+
 	$: value && !value.url && (value = normalise_file(value, root, null));
 
 	const dispatch = createEventDispatcher<{
@@ -111,6 +115,7 @@
 					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/", "")}`)
@@ -139,12 +144,18 @@
 
 <div data-testid="image" class="image-container">
 	{#if value?.url}
-		<ClearImage on:remove_image={() => (value = null)} />
+		<ClearImage
+			on:remove_image={() => {
+				value = null;
+				dispatch("clear");
+			}}
+		/>
 	{/if}
 	<div class="upload-container">
 		<Upload
 			hidden={value !== null || active_tool === "webcam"}
 			bind:this={upload}
+			bind:uploading
 			bind:dragging
 			filetype="image/*"
 			on:load={handle_upload}
@@ -187,6 +198,7 @@
 					on:click={() => handle_toolbar(source)}
 					Icon={sources_meta[source].icon}
 					size="large"
+					label="{source}-image-toolbar-btn"
 					padded={false}
 				/>
 			{/each}

package/shared/Webcam.svelte

@@ -15,21 +15,17 @@
 
 	const dispatch = createEventDispatcher<{
 		stream: undefined;
-		capture:
-			| {
-					data: FileReader["result"];
-					name: string;
-					is_example?: boolean;
-					is_file: boolean;
-			  }
-			| Blob;
+		capture: Blob;
 		error: string;
 		start_recording: undefined;
 		stop_recording: undefined;
 	}>();
 
 	onMount(() => (canvas = document.createElement("canvas")));
-
+	const size = {
+		width: { ideal: 1920 },
+		height: { ideal: 1440 }
+	};
 	async function access_webcam(device_id?: string): Promise<void> {
 		if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
 			dispatch("error", i18n("image.no_webcam_support"));
@@ -37,7 +33,7 @@
 		}
 		try {
 			stream = await navigator.mediaDevices.getUserMedia({
-				video: device_id ? { deviceId: { exact: device_id } } : true,
+				video: device_id ? { deviceId: { exact: device_id }, ...size } : size,
 				audio: include_audio
 			});
 			video_source.srcObject = stream;
@@ -95,6 +91,7 @@
 			ReaderObj.onload = function (e): void {
 				if (e.target) {
 					dispatch("capture", {
+						//@ts-ignore
 						data: e.target.result,
 						name: "sample." + mimeType.substring(6),
 						is_example: false,