@gradio/imageeditor 0.4.11 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @gradio/imageeditor
 
+## 0.5.0
+
+### Features
+
+- [#8042](https://github.com/gradio-app/gradio/pull/8042) [`92139f3`](https://github.com/gradio-app/gradio/commit/92139f3d7d6b832b649ff1f6c10c87e6fb522cde) - refresh the `ImageEditor` UI.  Thanks @pngwn!
+- [#8059](https://github.com/gradio-app/gradio/pull/8059) [`074ce38`](https://github.com/gradio-app/gradio/commit/074ce3805ada6ba829c17da3af5f186d9f5f9865) - ensure the `ImageEditor` works correctly with layers and `change` events.  Thanks @pngwn!
+- [#7845](https://github.com/gradio-app/gradio/pull/7845) [`dbb7373`](https://github.com/gradio-app/gradio/commit/dbb7373dde69d4ed2741942b5a1898f8620cec24) - ensure `ImageEditor` events work as expected.  Thanks @pngwn!
+
+### Fixes
+
+- [#8046](https://github.com/gradio-app/gradio/pull/8046) [`d6c289b`](https://github.com/gradio-app/gradio/commit/d6c289b34668f0011676737ee8edb4cb62b0620a) - round [x, y, w, h] before cropping to avoid unexpected interpolation on pixel values.  Thanks @ernestchu!
+- [#7959](https://github.com/gradio-app/gradio/pull/7959) [`2a5cb97`](https://github.com/gradio-app/gradio/commit/2a5cb978240960fd8b150a1eae6ae8328a5c0c59) - ensure `ImageEditor` always draws at the correct position.  Thanks @hrrbay!
+
+### Dependency updates
+
+- @gradio/utils@0.3.2
+- @gradio/statustracker@0.4.12
+- @gradio/client@0.16.0
+- @gradio/upload@0.8.5
+- @gradio/atoms@0.7.0
+- @gradio/icons@0.4.0
+- @gradio/image@0.9.12
+
 ## 0.4.11
 
 ### Fixes

package/ImageEditor.stories.svelte

@@ -26,7 +26,11 @@
 		class="image-container"
 		style="width: 500px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
 	>
-		<ImageEditor i18n={get(format)} {...args} />
+		<ImageEditor
+			i18n={get(format)}
+			{...args}
+			server={{ accept_blobs: () => {} }}
+		/>
 	</div>
 </Template>
 
@@ -118,7 +122,7 @@
 			coords: { clientX: 100, clientY: 100 }
 		});
 
-		await userEvent.click(canvas.getByLabelText("Color button"));
+		await userEvent.click(canvas.getByLabelText("Draw button"));
 
 		var availableColors = document.querySelectorAll(
 			"button.color:not(.empty):not(.selected):not(.hidden)"

package/Index.svelte

@@ -1,4 +1,4 @@
-<svelte:options accessors={true} />
+<svelte:options accessors={true} immutable={true} />
 
 <script lang="ts">
 	import type { Brush, Eraser } from "./shared/tools/Brush.svelte";
@@ -13,6 +13,7 @@
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
+	import { tick } from "svelte";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
@@ -26,6 +27,7 @@
 	export let show_label: boolean;
 	export let show_download_button: boolean;
 	export let root: string;
+	export let value_is_output = false;
 
 	export let height: number | undefined;
 	export let width: number | undefined;
@@ -47,16 +49,19 @@
 	export let eraser: Eraser;
 	export let crop_size: [number, number] | `${string}:${string}` | null = null;
 	export let transforms: "crop"[] = ["crop"];
-
+	export let layers = true;
 	export let attached_events: string[] = [];
+	export let server: {
+		accept_blobs: (a: any) => void;
+	};
 
 	export let gradio: Gradio<{
 		change: never;
 		error: string;
 		input: never;
 		edit: never;
-		stream: never;
 		drag: never;
+		apply: never;
 		upload: never;
 		clear: never;
 		select: SelectData;
@@ -64,13 +69,16 @@
 	}>;
 
 	let editor_instance: InteractiveImageEditor;
+	let image_id: null | string = null;
+
+	export async function get_value(): Promise<ImageBlobs | { id: string }> {
+		if (image_id) {
+			const val = { id: image_id };
+			image_id = null;
+			return val;
+		}
 
-	export async function get_value(): Promise<ImageBlobs> {
-		// @ts-ignore
-		loading_status = { status: "pending" };
 		const blobs = await editor_instance.get_data();
-		// @ts-ignore
-		loading_status = { status: "complete" };
 
 		return blobs;
 	}
@@ -79,7 +87,15 @@
 
 	$: value && handle_change();
 
-	function handle_change(): void {
+	function wait_for_next_frame(): Promise<void> {
+		return new Promise((resolve) => {
+			requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+		});
+	}
+
+	async function handle_change(): Promise<void> {
+		await wait_for_next_frame();
+
 		if (
 			value &&
 			(value.background || value.layers?.length || value.composite)
@@ -89,8 +105,15 @@
 	}
 
 	function handle_save(): void {
+		gradio.dispatch("apply");
+	}
+
+	function handle_history_change(): void {
 		gradio.dispatch("change");
-		gradio.dispatch("input");
+		if (!value_is_output) {
+			gradio.dispatch("input");
+			tick().then((_) => (value_is_output = false));
+		}
 	}
 </script>
 
@@ -149,6 +172,8 @@
 		/>
 
 		<InteractiveImageEditor
+			on:change={() => handle_history_change()}
+			bind:image_id
 			{crop_size}
 			{value}
 			bind:this={editor_instance}
@@ -159,10 +184,8 @@
 			on:save={(e) => handle_save()}
 			on:edit={() => gradio.dispatch("edit")}
 			on:clear={() => gradio.dispatch("clear")}
-			on:stream={() => gradio.dispatch("stream")}
 			on:drag={({ detail }) => (dragging = detail)}
 			on:upload={() => gradio.dispatch("upload")}
-			on:select={({ detail }) => gradio.dispatch("select", detail)}
 			on:share={({ detail }) => gradio.dispatch("share", detail)}
 			on:error={({ detail }) => {
 				loading_status = loading_status || {};
@@ -172,9 +195,12 @@
 			on:error
 			{brush}
 			{eraser}
-			changeable={attached_events.includes("change")}
+			changeable={attached_events.includes("apply")}
 			i18n={gradio.i18n}
 			{transforms}
+			accept_blobs={server.accept_blobs}
+			{layers}
+			status={loading_status?.status}
 		></InteractiveImageEditor>
 	</Block>
 {/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.4.11",
+  "version": "0.5.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,14 +10,14 @@
     "@types/tinycolor2": "^1.4.6",
     "pixi.js": "^7.3.2",
     "tinycolor2": "^1.6.0",
-    "@gradio/atoms": "^0.6.2",
-    "@gradio/icons": "^0.3.4",
-    "@gradio/image": "^0.9.11",
-    "@gradio/statustracker": "^0.4.11",
-    "@gradio/client": "^0.15.1",
-    "@gradio/utils": "^0.3.1",
-    "@gradio/wasm": "^0.10.0",
-    "@gradio/upload": "^0.8.4"
+    "@gradio/atoms": "^0.7.0",
+    "@gradio/client": "^0.16.0",
+    "@gradio/icons": "^0.4.0",
+    "@gradio/image": "^0.9.12",
+    "@gradio/statustracker": "^0.4.12",
+    "@gradio/upload": "^0.8.5",
+    "@gradio/utils": "^0.3.2",
+    "@gradio/wasm": "^0.10.0"
   },
   "main_changeset": true,
   "main": "./Index.svelte",

package/shared/Controls.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 	import { IconButton } from "@gradio/atoms";
-	import { Clear, Undo, Redo, Check } from "@gradio/icons";
+	import { Clear, Undo, Redo, Check, Trash } from "@gradio/icons";
 
 	/**
 	 * Can the current image be undone?
@@ -56,7 +56,7 @@
 			}}
 		/>
 		<IconButton
-			Icon={Clear}
+			Icon={Trash}
 			label="Clear canvas"
 			on:click={(event) => {
 				dispatch("remove_image");

package/shared/ImageEditor.svelte

@@ -28,6 +28,7 @@
 			child_bottom: number;
 		}>;
 		active_tool: Writable<tool>;
+		toolbar_box: Writable<DOMRect>;
 		crop: Writable<[number, number, number, number]>;
 		position_spring: Spring<{
 			x: number;
@@ -69,10 +70,12 @@
 	const dispatch = createEventDispatcher<{
 		clear?: never;
 		save: void;
+		change: void;
 	}>();
 	export let crop_constraint = false;
 
 	let dimensions = writable(crop_size);
+	export let height = 0;
 
 	let editor_box: EditorContext["editor_box"] = writable({
 		parent_width: 0,
@@ -89,6 +92,8 @@
 		child_bottom: 0
 	});
 
+	$: height = $editor_box.child_height;
+
 	const crop = writable<[number, number, number, number]>([0, 0, 1, 1]);
 	const position_spring = spring(
 		{ x: 0, y: 0 },
@@ -103,6 +108,8 @@
 
 	const { can_redo, can_undo, current_history } = CommandManager;
 
+	$: $current_history.previous, dispatch("change");
+
 	$: {
 		history = !!$current_history.previous || $active_tool !== "bg";
 	}
@@ -114,6 +121,7 @@
 		PartialRecord<context_type, (dimensions?: typeof $dimensions) => void>
 	> = writable({});
 	const contexts: Writable<context_type[]> = writable([]);
+	const toolbar_box: Writable<DOMRect> = writable(new DOMRect());
 
 	const sort_order = ["bg", "layers", "crop", "draw", "erase"] as const;
 	const editor_context = setContext<EditorContext>(EDITOR_KEY, {
@@ -121,6 +129,7 @@
 		current_layer: writable(null),
 		dimensions,
 		editor_box,
+		toolbar_box,
 		active_tool,
 		crop,
 		position_spring,
@@ -238,10 +247,10 @@
 		return $pixi?.get_blobs(
 			$pixi.get_layers(),
 			new Rectangle(
-				l * $dimensions[0],
-				t * $dimensions[1],
-				w * $dimensions[0],
-				h * $dimensions[1]
+				Math.round(l * $dimensions[0]),
+				Math.round(t * $dimensions[1]),
+				Math.round(w * $dimensions[0]),
+				Math.round(h * $dimensions[1])
 			),
 			$dimensions
 		);
@@ -331,39 +340,53 @@
 			style:transform="translate({$position_spring.x}px, {$position_spring.y}px)"
 		></div>
 	</div>
-	<slot />
+	<div class="tools-wrap">
+		<slot />
+	</div>
 	<div
 		class="border"
-		style:width="{$crop[2] * $editor_box.child_width}px"
-		style:height="{$crop[3] * $editor_box.child_height}px"
+		style:width="{$crop[2] * $editor_box.child_width + 1}px"
+		style:height="{$crop[3] * $editor_box.child_height + 1}px"
 		style:top="{$crop[1] * $editor_box.child_height +
-			($editor_box.child_top - $editor_box.parent_top)}px"
+			($editor_box.child_top - $editor_box.parent_top) -
+			0.5}px"
 		style:left="{$crop[0] * $editor_box.child_width +
-			($editor_box.child_left - $editor_box.parent_left)}px"
+			($editor_box.child_left - $editor_box.parent_left) -
+			0.5}px"
 	></div>
 </div>
 
 <style>
 	.wrap {
+		display: flex;
 		width: 100%;
 		height: 100%;
 		position: relative;
-		display: flex;
 		justify-content: center;
-		align-items: center;
+		align-items: flex-start;
 	}
 	.border {
 		position: absolute;
 		border: var(--block-border-color) 1px solid;
 		pointer-events: none;
+		border-radius: var(--radius-md);
 	}
 
 	.stage-wrap {
 		margin: var(--size-8);
 		margin-bottom: var(--size-1);
+		border-radius: var(--radius-md);
+		overflow: hidden;
 	}
 
-	.bg {
+	.tools-wrap {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 0 var(--spacing-xl) 0 0;
+		border: 1px solid var(--block-border-color);
+		border-radius: var(--radius-sm);
+		margin: var(--spacing-xxl) 0 var(--spacing-xxl) 0;
 	}
 
 	.image-container {

package/shared/InteractiveImageEditor.svelte

@@ -22,12 +22,12 @@
 	import { type Brush as IBrush } from "./tools/Brush.svelte";
 	import { type Eraser } from "./tools/Brush.svelte";
 
-	export let brush: IBrush | null;
-	export let eraser: Eraser | null;
 	import { Tools, Crop, Brush, Sources } from "./tools";
 	import { BlockLabel } from "@gradio/atoms";
 	import { Image as ImageIcon } from "@gradio/icons";
 
+	export let brush: IBrush | null;
+	export let eraser: Eraser | null;
 	export let sources: ("clipboard" | "webcam" | "upload")[];
 	export let crop_size: [number, number] | `${string}:${string}` | null = null;
 	export let i18n: I18nFormatter;
@@ -41,9 +41,14 @@
 		composite: null
 	};
 	export let transforms: "crop"[] = ["crop"];
+	export let layers: boolean;
+	export let accept_blobs: (a: any) => void;
+	export let status: "pending" | "complete" | "error" = "complete";
 
 	const dispatch = createEventDispatcher<{
 		clear?: never;
+		upload?: never;
+		change?: never;
 	}>();
 
 	let editor: ImageEditor;
@@ -56,6 +61,8 @@
 		return !!o;
 	}
 
+	$: if (bg) dispatch("upload");
+
 	export async function get_data(): Promise<ImageBlobs> {
 		const blobs = await editor.get_blobs();
 
@@ -107,11 +114,83 @@
 	let bg = false;
 	let history = false;
 
+	export let image_id: null | string = null;
+
 	$: editor &&
 		editor.set_tool &&
 		(sources && sources.length
 			? editor.set_tool("bg")
 			: editor.set_tool("draw"));
+
+	type BinaryImages = [string, string, File, number | null][];
+
+	function nextframe(): Promise<void> {
+		return new Promise((resolve) => setTimeout(() => resolve(), 30));
+	}
+
+	let uploading = false;
+	let pending = false;
+	async function handle_change(e: CustomEvent<Blob | any>): Promise<void> {
+		if (uploading) {
+			pending = true;
+			return;
+		}
+
+		uploading = true;
+
+		await nextframe();
+		const blobs = await editor.get_blobs();
+
+		const images: BinaryImages = [];
+
+		let id = Math.random().toString(36).substring(2);
+
+		if (blobs.background)
+			images.push([
+				id,
+				"background",
+				new File([blobs.background], "background.png"),
+				null
+			]);
+		if (blobs.composite)
+			images.push([
+				id,
+				"composite",
+				new File([blobs.composite], "composite.png"),
+				null
+			]);
+		blobs.layers.forEach((layer, i) => {
+			if (layer)
+				images.push([
+					id as string,
+					`layer`,
+					new File([layer], `layer_${i}.png`),
+					i
+				]);
+		});
+
+		await Promise.all(
+			images.map(async ([image_id, type, data, index]) => {
+				return accept_blobs({
+					binary: true,
+					data: { file: data, id: image_id, type, index }
+				});
+			})
+		);
+		image_id = id;
+		dispatch("change");
+
+		await nextframe();
+		uploading = false;
+		if (pending) {
+			pending = false;
+			uploading = false;
+			handle_change(e);
+		}
+	}
+
+	let active_mode: "webcam" | "color" | null = null;
+	let editor_height = 0;
 </script>
 
 <BlockLabel
@@ -121,8 +200,10 @@
 />
 <ImageEditor
 	bind:this={editor}
+	bind:height={editor_height}
 	{changeable}
 	on:save
+	on:change={handle_change}
 	on:clear={() => dispatch("clear")}
 	bind:history
 	bind:bg
@@ -130,15 +211,17 @@
 	crop_constraint={!!crop_constraint}
 >
 	<Tools {i18n}>
-		{#if sources && sources.length}
-			<Sources
-				{i18n}
-				{root}
-				{sources}
-				bind:bg
-				background_file={value?.background || null}
-			></Sources>
-		{/if}
+		<Layers layer_files={value?.layers || null} enable_layers={layers} />
+
+		<Sources
+			{i18n}
+			{root}
+			{sources}
+			bind:bg
+			bind:active_mode
+			background_file={value?.background || value?.composite || null}
+		></Sources>
+
 		{#if transforms.includes("crop")}
 			<Crop {crop_constraint} />
 		{/if}
@@ -157,10 +240,8 @@
 		{/if}
 	</Tools>
 
-	<Layers layer_files={value?.layers || null} />
-
-	{#if !bg && !history}
-		<div class="empty wrap">
+	{#if !bg && !history && active_mode !== "webcam" && status !== "error"}
+		<div class="empty wrap" style:height={`${editor_height}px`}>
 			{#if sources && sources.length}
 				<div>Upload an image</div>
 			{/if}
@@ -181,7 +262,6 @@
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
-
 		position: absolute;
 		height: 100%;
 		width: 100%;
@@ -191,6 +271,7 @@
 		z-index: var(--layer-top);
 		text-align: center;
 		color: var(--body-text-color);
+		top: var(--size-8);
 	}
 
 	.wrap {
@@ -198,14 +279,10 @@
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
-		min-height: var(--size-60);
 		color: var(--block-label-text-color);
 		line-height: var(--line-md);
-		height: 100%;
-		padding-top: var(--size-3);
 		font-size: var(--text-lg);
 		pointer-events: none;
-		transform: translateY(-30px);
 	}
 
 	.or {