@gradio/imageeditor 0.20.0 → 0.20.2

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @gradio/imageeditor
 
+## 0.20.2
+
+### Fixes
+
+- [#13787](https://github.com/gradio-app/gradio/pull/13787) [`2ae6f97`](https://github.com/gradio-app/gradio/commit/2ae6f97d0f5284c8f351ffe6d45da61944284d5a) - Fix Image and ImageEditor UI/UX issues.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/client@2.6.0
+- @gradio/atoms@0.26.2
+- @gradio/utils@0.14.1
+- @gradio/upload@0.18.3
+- @gradio/image@0.28.3
+
+## 0.20.1
+
+### Dependency updates
+
+- @gradio/client@2.5.1
+
+## 0.20.1
+
+### Dependency updates
+
+- @gradio/client@2.5.0
+
+## 0.20.1
+
+### Dependency updates
+
+- @gradio/client@2.4.0
+- @gradio/utils@0.14.0
+- @gradio/atoms@0.26.1
+- @gradio/statustracker@0.15.2
+- @gradio/upload@0.18.2
+- @gradio/image@0.28.1
+
 ## 0.20.0
 
 ### Features

package/ImageEditor.test.ts

@@ -0,0 +1,129 @@
+import { afterEach, describe, expect, test } from "vitest";
+import {
+	cleanup,
+	fireEvent,
+	mock_client,
+	render,
+	TEST_PNG,
+	waitFor
+} from "@self/tootils/render";
+import { run_shared_prop_tests } from "@self/tootils/shared-prop-tests";
+
+import es from "../core/src/lang/es.json";
+import ImageEditor from "./Index.svelte";
+import ImageEditorTestWrapper from "./ImageEditorTestWrapper.svelte";
+
+const default_props = {
+	sources: ["upload"] as const,
+	interactive: true,
+	label: "Image Editor",
+	show_label: true,
+	value: null,
+	canvas_size: [800, 600] as [number, number],
+	transforms: [] as const,
+	layers: { allow_additional_layers: true, layers: ["Layer 1"] },
+	brush: {
+		default_size: "auto" as const,
+		colors: ["#000000"],
+		default_color: "#000000",
+		color_mode: "defaults" as const
+	},
+	eraser: { default_size: "auto" as const },
+	webcam_options: { mirror: true, constraints: {} },
+	buttons: []
+};
+
+const spanish_i18n = (key: string): string => {
+	const [namespace, message] = key.split(".");
+	return (
+		(es as Record<string, Record<string, string>>)[namespace]?.[message] ?? key
+	);
+};
+
+run_shared_prop_tests({
+	component: ImageEditor,
+	name: "ImageEditor",
+	base_props: { ...default_props, interactive: false },
+	has_label: false,
+	has_validation_error: true
+});
+
+describe("get_data / set_data", () => {
+	afterEach(() => cleanup());
+
+	test("an untouched editor uploads the original image bytes", async () => {
+		const background = { ...TEST_PNG, orig_name: "background.png" };
+		const layer = { ...TEST_PNG, orig_name: "layer.png" };
+		const composite = { ...TEST_PNG, orig_name: "composite.png" };
+		const value = { background, layers: [layer], composite };
+		const { getByRole, get_data, listen } = await render(ImageEditor, {
+			...default_props,
+			client: mock_client(),
+			value
+		});
+		const uploaded = listen("upload", { retrospective: true });
+		await waitFor(
+			() => {
+				expect(getByRole("button", { name: "image_editor.pan" })).toBeVisible();
+				expect(uploaded).toHaveBeenCalled();
+			},
+			{ timeout: 5000 }
+		);
+
+		const result = (await get_data()).value;
+		const original_bytes = await (await fetch(TEST_PNG.url!)).arrayBuffer();
+
+		expect(result.background.orig_name).toBe("background.png");
+		expect(result.layers[0].orig_name).toBe("layer.png");
+		expect(result.composite.orig_name).toBe("composite.png");
+		expect(await result.background.blob.arrayBuffer()).toEqual(original_bytes);
+		expect(await result.layers[0].blob.arrayBuffer()).toEqual(original_bytes);
+		expect(await result.composite.blob.arrayBuffer()).toEqual(original_bytes);
+	});
+});
+
+describe("Internationalization", () => {
+	afterEach(() => cleanup());
+
+	test("canvas controls use translated accessible names", async () => {
+		const { getByRole } = await render(ImageEditorTestWrapper, {
+			kind: "controls",
+			i18n: spanish_i18n
+		});
+
+		expect(getByRole("button", { name: "Descargar" })).toBeVisible();
+		expect(getByRole("button", { name: "Desplazar" })).toBeVisible();
+		expect(getByRole("button", { name: "Alejar" })).toBeVisible();
+		expect(getByRole("button", { name: "Deshacer" })).toBeVisible();
+		expect(getByRole("button", { name: "Guardar cambios" })).toBeVisible();
+	});
+
+	test("editing tools use translated accessible names", async () => {
+		const { getByRole } = await render(ImageEditorTestWrapper, {
+			kind: "toolbar",
+			i18n: spanish_i18n
+		});
+
+		expect(getByRole("button", { name: "Imagen" })).toBeVisible();
+		expect(getByRole("button", { name: "Pincel" })).toBeVisible();
+		expect(getByRole("button", { name: "Borrar" })).toBeVisible();
+		expect(getByRole("button", { name: "Cargar" })).toBeVisible();
+		expect(getByRole("button", { name: "Pegar" })).toBeVisible();
+	});
+
+	test("layer controls use translated accessible names", async () => {
+		const { getByRole, getByText } = await render(ImageEditorTestWrapper, {
+			kind: "layers",
+			i18n: spanish_i18n
+		});
+		const show_layers = getByRole("button", {
+			name: "Mostrar capas"
+		});
+		expect(getByText("Capa 1")).toBeVisible();
+
+		await fireEvent.click(show_layers);
+
+		expect(getByText("Capas")).toBeVisible();
+		expect(getByRole("button", { name: "Añadir capa" })).toBeVisible();
+	});
+});

package/ImageEditorTestWrapper.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { I18nFormatter } from "@gradio/utils";
+	import { writable } from "svelte/store";
+	import Controls from "./shared/Controls.svelte";
+	import SecondaryToolbar from "./shared/SecondaryToolbar.svelte";
+	import Toolbar from "./shared/Toolbar.svelte";
+
+	let {
+		props
+	}: {
+		props: {
+			kind: "controls" | "toolbar" | "layers";
+			i18n: I18nFormatter;
+		};
+	} = $props();
+
+	const layers = writable({
+		active_layer: "layer-1",
+		layers: [
+			{ name: "Layer 1", id: "layer-1", user_created: false, visible: true }
+		]
+	});
+</script>
+
+{#if props.kind === "controls"}
+	<Controls
+		i18n={props.i18n}
+		tool="image"
+		can_undo={false}
+		can_redo={false}
+		enable_download={true}
+		changeable={true}
+	/>
+{:else if props.kind === "toolbar"}
+	<Toolbar
+		i18n={props.i18n}
+		brush_options={{
+			default_size: "auto",
+			colors: ["#000000"],
+			default_color: "#000000",
+			color_mode: "defaults"
+		}}
+		eraser_options={{ default_size: "auto" }}
+		sources={["upload", "clipboard", "webcam"]}
+		transforms={[]}
+		background={false}
+	/>
+{:else}
+	<SecondaryToolbar i18n={props.i18n} {layers} />
+{/if}

package/Index.svelte

@@ -1,5 +1,3 @@
-<svelte:options accessors={true} immutable={true} />
-
 <script lang="ts">
 	import type { ImageBlobs } from "./InteractiveImageEditor.svelte";
 

package/InteractiveImageEditor.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script module lang="ts">
 	export interface EditorData {
 		background: FileData | null;
 		layers: FileData[] | null;
@@ -115,11 +115,53 @@
 		return !!o;
 	}
 
+	async function upload_original(
+		file_data: FileData | null,
+		fallback_name: string
+	): Promise<FileData | null> {
+		if (!file_data) return null;
+
+		let file = file_data.blob;
+		if (!file) {
+			if (!file_data.url) throw new Error("Image file has no URL");
+			const response = await fetch(file_data.url);
+			if (!response.ok) throw new Error("Image file could not be fetched");
+			const blob = await response.blob();
+			file = new File([blob], file_data.orig_name || fallback_name, {
+				type: file_data.mime_type || blob.type
+			});
+		}
+
+		const uploaded = await upload(await prepare_files([file]), root);
+		return Array.isArray(uploaded) ? uploaded[0] : uploaded;
+	}
+
+	async function upload_original_data(): Promise<ImageBlobs> {
+		const [uploaded_background, uploaded_composite, ...uploaded_layers] =
+			await Promise.all([
+				upload_original(background, "background.png"),
+				upload_original(composite, "composite.png"),
+				...layers.map((layer, i) => upload_original(layer, `layer_${i}.png`))
+			]);
+
+		return {
+			background: uploaded_background,
+			layers: uploaded_layers.filter(is_file_data),
+			composite: uploaded_composite
+		};
+	}
+
 	$effect(() => {
 		if (background_image) onupload?.();
 	});
 
 	export async function get_data(): Promise<ImageBlobs> {
+		if (!has_user_edits) {
+			try {
+				return await upload_original_data();
+			} catch {}
+		}
+
 		let blobs;
 		try {
 			blobs = await editor.get_blobs();
@@ -127,38 +169,43 @@
 			return { background: null, layers: [], composite: null };
 		}
 
-		const bg = blobs.background
+		const background_upload = blobs.background
 			? upload(
 					await prepare_files([new File([blobs.background], "background.png")]),
 					root
 				)
 			: Promise.resolve(null);
 
-		const layers = blobs.layers
+		const layer_uploads = blobs.layers
 			.filter(is_not_null)
 			.map(async (blob, i) =>
 				upload(await prepare_files([new File([blob], `layer_${i}.png`)]), root)
 			);
 
-		const composite = blobs.composite
+		const composite_upload = blobs.composite
 			? upload(
 					await prepare_files([new File([blobs.composite], "composite.png")]),
 					root
 				)
 			: Promise.resolve(null);
 
-		const [background, composite_, ...layers_] = await Promise.all([
-			bg,
-			composite,
-			...layers
-		]);
+		const [uploaded_background, uploaded_composite, ...uploaded_layers] =
+			await Promise.all([
+				background_upload,
+				composite_upload,
+				...layer_uploads
+			]);
 
 		return {
-			background: Array.isArray(background) ? background[0] : background,
-			layers: layers_
+			background: Array.isArray(uploaded_background)
+				? uploaded_background[0]
+				: uploaded_background,
+			layers: uploaded_layers
 				.flatMap((layer) => (Array.isArray(layer) ? layer : [layer]))
 				.filter(is_file_data),
-			composite: Array.isArray(composite_) ? composite_[0] : composite_
+			composite: Array.isArray(uploaded_composite)
+				? uploaded_composite[0]
+				: uploaded_composite
 		};
 	}
 
@@ -176,6 +223,7 @@
 
 	let background_image = $state(false);
 	let can_undo = $state(false);
+	let has_user_edits = $state(false);
 
 	type BinaryImages = [string, string, File, number | null][];
 
@@ -282,6 +330,7 @@
 	{show_download_button}
 	{theme_mode}
 	bind:can_undo
+	bind:has_user_edits
 	bind:full_history
 >
 	{#if current_tool === "image" && !can_undo}
@@ -295,15 +344,15 @@
 						<p>{paragraph}</p>
 					{/if}
 				{:else}
-					<div>Upload an image</div>
+					<div>{i18n("image_editor.upload_image")}</div>
 				{/if}
 			{/if}
 
 			{#if sources && sources.length && brush && !placeholder}
-				<div class="or">or</div>
+				<div class="or">{i18n("common.or")}</div>
 			{/if}
 			{#if brush && !placeholder}
-				<div>select the draw tool to start</div>
+				<div>{i18n("image_editor.select_draw_tool")}</div>
 			{/if}
 		</div>
 	{/if}

package/dist/ImageEditorTestWrapper.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { I18nFormatter } from "@gradio/utils";
+	import { writable } from "svelte/store";
+	import Controls from "./shared/Controls.svelte";
+	import SecondaryToolbar from "./shared/SecondaryToolbar.svelte";
+	import Toolbar from "./shared/Toolbar.svelte";
+
+	let {
+		props
+	}: {
+		props: {
+			kind: "controls" | "toolbar" | "layers";
+			i18n: I18nFormatter;
+		};
+	} = $props();
+
+	const layers = writable({
+		active_layer: "layer-1",
+		layers: [
+			{ name: "Layer 1", id: "layer-1", user_created: false, visible: true }
+		]
+	});
+</script>
+
+{#if props.kind === "controls"}
+	<Controls
+		i18n={props.i18n}
+		tool="image"
+		can_undo={false}
+		can_redo={false}
+		enable_download={true}
+		changeable={true}
+	/>
+{:else if props.kind === "toolbar"}
+	<Toolbar
+		i18n={props.i18n}
+		brush_options={{
+			default_size: "auto",
+			colors: ["#000000"],
+			default_color: "#000000",
+			color_mode: "defaults"
+		}}
+		eraser_options={{ default_size: "auto" }}
+		sources={["upload", "clipboard", "webcam"]}
+		transforms={[]}
+		background={false}
+	/>
+{:else}
+	<SecondaryToolbar i18n={props.i18n} {layers} />
+{/if}

package/dist/ImageEditorTestWrapper.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { I18nFormatter } from "@gradio/utils";
+type $$ComponentProps = {
+    props: {
+        kind: "controls" | "toolbar" | "layers";
+        i18n: I18nFormatter;
+    };
+};
+declare const ImageEditorTestWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImageEditorTestWrapper = ReturnType<typeof ImageEditorTestWrapper>;
+export default ImageEditorTestWrapper;

package/dist/Index.svelte

@@ -1,5 +1,3 @@
-<svelte:options accessors={true} immutable={true} />
-
 <script lang="ts">
 	import type { ImageBlobs } from "./InteractiveImageEditor.svelte";
 

package/dist/InteractiveImageEditor.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script module lang="ts">
 	export interface EditorData {
 		background: FileData | null;
 		layers: FileData[] | null;
@@ -115,11 +115,53 @@
 		return !!o;
 	}
 
+	async function upload_original(
+		file_data: FileData | null,
+		fallback_name: string
+	): Promise<FileData | null> {
+		if (!file_data) return null;
+
+		let file = file_data.blob;
+		if (!file) {
+			if (!file_data.url) throw new Error("Image file has no URL");
+			const response = await fetch(file_data.url);
+			if (!response.ok) throw new Error("Image file could not be fetched");
+			const blob = await response.blob();
+			file = new File([blob], file_data.orig_name || fallback_name, {
+				type: file_data.mime_type || blob.type
+			});
+		}
+
+		const uploaded = await upload(await prepare_files([file]), root);
+		return Array.isArray(uploaded) ? uploaded[0] : uploaded;
+	}
+
+	async function upload_original_data(): Promise<ImageBlobs> {
+		const [uploaded_background, uploaded_composite, ...uploaded_layers] =
+			await Promise.all([
+				upload_original(background, "background.png"),
+				upload_original(composite, "composite.png"),
+				...layers.map((layer, i) => upload_original(layer, `layer_${i}.png`))
+			]);
+
+		return {
+			background: uploaded_background,
+			layers: uploaded_layers.filter(is_file_data),
+			composite: uploaded_composite
+		};
+	}
+
 	$effect(() => {
 		if (background_image) onupload?.();
 	});
 
 	export async function get_data(): Promise<ImageBlobs> {
+		if (!has_user_edits) {
+			try {
+				return await upload_original_data();
+			} catch {}
+		}
+
 		let blobs;
 		try {
 			blobs = await editor.get_blobs();
@@ -127,38 +169,43 @@
 			return { background: null, layers: [], composite: null };
 		}
 
-		const bg = blobs.background
+		const background_upload = blobs.background
 			? upload(
 					await prepare_files([new File([blobs.background], "background.png")]),
 					root
 				)
 			: Promise.resolve(null);
 
-		const layers = blobs.layers
+		const layer_uploads = blobs.layers
 			.filter(is_not_null)
 			.map(async (blob, i) =>
 				upload(await prepare_files([new File([blob], `layer_${i}.png`)]), root)
 			);
 
-		const composite = blobs.composite
+		const composite_upload = blobs.composite
 			? upload(
 					await prepare_files([new File([blobs.composite], "composite.png")]),
 					root
 				)
 			: Promise.resolve(null);
 
-		const [background, composite_, ...layers_] = await Promise.all([
-			bg,
-			composite,
-			...layers
-		]);
+		const [uploaded_background, uploaded_composite, ...uploaded_layers] =
+			await Promise.all([
+				background_upload,
+				composite_upload,
+				...layer_uploads
+			]);
 
 		return {
-			background: Array.isArray(background) ? background[0] : background,
-			layers: layers_
+			background: Array.isArray(uploaded_background)
+				? uploaded_background[0]
+				: uploaded_background,
+			layers: uploaded_layers
 				.flatMap((layer) => (Array.isArray(layer) ? layer : [layer]))
 				.filter(is_file_data),
-			composite: Array.isArray(composite_) ? composite_[0] : composite_
+			composite: Array.isArray(uploaded_composite)
+				? uploaded_composite[0]
+				: uploaded_composite
 		};
 	}
 
@@ -176,6 +223,7 @@
 
 	let background_image = $state(false);
 	let can_undo = $state(false);
+	let has_user_edits = $state(false);
 
 	type BinaryImages = [string, string, File, number | null][];
 
@@ -282,6 +330,7 @@
 	{show_download_button}
 	{theme_mode}
 	bind:can_undo
+	bind:has_user_edits
 	bind:full_history
 >
 	{#if current_tool === "image" && !can_undo}
@@ -295,15 +344,15 @@
 						<p>{paragraph}</p>
 					{/if}
 				{:else}
-					<div>Upload an image</div>
+					<div>{i18n("image_editor.upload_image")}</div>
 				{/if}
 			{/if}
 
 			{#if sources && sources.length && brush && !placeholder}
-				<div class="or">or</div>
+				<div class="or">{i18n("common.or")}</div>
 			{/if}
 			{#if brush && !placeholder}
-				<div>select the draw tool to start</div>
+				<div>{i18n("image_editor.select_draw_tool")}</div>
 			{/if}
 		</div>
 	{/if}

package/dist/shared/Controls.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { IconButton, IconButtonWrapper } from "@gradio/atoms";
+	import type { I18nFormatter } from "@gradio/utils";
 	import {
 		Check,
 		Trash,
@@ -11,6 +12,7 @@
 		Redo
 	} from "@gradio/icons";
 	let {
+		i18n,
 		can_save = false,
 		changeable = false,
 		current_zoom = 1,
@@ -29,6 +31,7 @@
 		onpan,
 		ondownload
 	}: {
+		i18n: I18nFormatter;
 		can_save?: boolean;
 		changeable?: boolean;
 		current_zoom?: number;
@@ -73,7 +76,7 @@
 	{#if enable_download}
 		<IconButton
 			Icon={Download}
-			label="Download"
+			label={i18n("common.download")}
 			onclick={(event) => {
 				ondownload?.();
 				event.stopPropagation();
@@ -83,7 +86,7 @@
 
 	<IconButton
 		Icon={Pan}
-		label="Pan"
+		label={i18n("image_editor.pan")}
 		onclick={(e) => {
 			e.stopPropagation();
 			onpan?.();
@@ -97,7 +100,7 @@
 
 	<IconButton
 		Icon={ZoomOut}
-		label="Zoom out"
+		label={i18n("image_editor.zoom_out")}
 		onclick={(event) => {
 			onzoom_out?.();
 			event.stopPropagation();
@@ -105,7 +108,7 @@
 	/>
 	<IconButton
 		Icon={ZoomIn}
-		label="Zoom in"
+		label={i18n("image_editor.zoom_in")}
 		onclick={(event) => {
 			onzoom_in?.();
 			event.stopPropagation();
@@ -129,7 +132,7 @@
 								handle_zoom_change("fit");
 							}}
 						>
-							Fit to screen
+							{i18n("image_editor.fit_to_screen")}
 						</button>
 					</li>
 					{#each [0.25, 0.5, 1, 2, 4] as zoom}
@@ -152,7 +155,7 @@
 
 	<IconButton
 		Icon={Undo}
-		label="Undo"
+		label={i18n("common.undo")}
 		onclick={(event) => {
 			onundo?.();
 			event.stopPropagation();
@@ -162,7 +165,7 @@
 
 	<IconButton
 		Icon={Redo}
-		label="Redo"
+		label={i18n("image_editor.redo")}
 		onclick={(event) => {
 			onredo?.();
 			event.stopPropagation();
@@ -174,7 +177,7 @@
 		<IconButton
 			disabled={!can_save}
 			Icon={Check}
-			label="Save changes"
+			label={i18n("image_editor.save_changes")}
 			onclick={(event) => {
 				onsave?.();
 				event.stopPropagation();
@@ -185,7 +188,7 @@
 
 	<IconButton
 		Icon={Trash}
-		label="Clear canvas"
+		label={i18n("image_editor.clear_canvas")}
 		onclick={(event) => {
 			onremove_image?.();
 			event.stopPropagation();