@gradio/imageeditor 0.20.1 → 0.21.0

package/ImageEditorTestWrapper.svelte

@@ -0,0 +1,81 @@
+<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;
+			[key: string]: any;
+		};
+	} = $props();
+
+	const identity: I18nFormatter = (s: string) => s;
+
+	const default_brush = {
+		default_size: "auto" as const,
+		colors: ["#000000"],
+		default_color: "#000000",
+		color_mode: "defaults" as const
+	};
+
+	const layers = writable(
+		props.layer_store ?? {
+			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 ?? identity}
+		tool={props.tool ?? "image"}
+		can_undo={props.can_undo ?? false}
+		can_redo={props.can_redo ?? false}
+		can_save={props.can_save ?? false}
+		enable_download={props.enable_download ?? true}
+		changeable={props.changeable ?? true}
+		current_zoom={props.current_zoom ?? 1}
+		onundo={props.onundo}
+		onredo={props.onredo}
+		onsave={props.onsave}
+		onremove_image={props.onremove_image}
+		ondownload={props.ondownload}
+		onzoom_in={props.onzoom_in}
+		onzoom_out={props.onzoom_out}
+		onpan={props.onpan}
+	/>
+{:else if props.kind === "toolbar"}
+	<Toolbar
+		i18n={props.i18n ?? identity}
+		brush_options={props.brush_options === undefined
+			? default_brush
+			: props.brush_options}
+		eraser_options={props.eraser_options === undefined
+			? { default_size: "auto" }
+			: props.eraser_options}
+		sources={props.sources ?? ["upload", "clipboard", "webcam"]}
+		transforms={props.transforms ?? []}
+		background={props.background ?? false}
+		tool={props.tool ?? "image"}
+		subtool={props.subtool ?? null}
+		ontool_change={props.ontool_change}
+		onsubtool_change={props.onsubtool_change}
+	/>
+{:else}
+	<SecondaryToolbar
+		i18n={props.i18n ?? identity}
+		{layers}
+		enable_layers={props.enable_layers ?? true}
+		enable_additional_layers={props.enable_additional_layers ?? true}
+		onnew_layer={props.onnew_layer}
+	/>
+{/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,81 @@
+<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;
+			[key: string]: any;
+		};
+	} = $props();
+
+	const identity: I18nFormatter = (s: string) => s;
+
+	const default_brush = {
+		default_size: "auto" as const,
+		colors: ["#000000"],
+		default_color: "#000000",
+		color_mode: "defaults" as const
+	};
+
+	const layers = writable(
+		props.layer_store ?? {
+			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 ?? identity}
+		tool={props.tool ?? "image"}
+		can_undo={props.can_undo ?? false}
+		can_redo={props.can_redo ?? false}
+		can_save={props.can_save ?? false}
+		enable_download={props.enable_download ?? true}
+		changeable={props.changeable ?? true}
+		current_zoom={props.current_zoom ?? 1}
+		onundo={props.onundo}
+		onredo={props.onredo}
+		onsave={props.onsave}
+		onremove_image={props.onremove_image}
+		ondownload={props.ondownload}
+		onzoom_in={props.onzoom_in}
+		onzoom_out={props.onzoom_out}
+		onpan={props.onpan}
+	/>
+{:else if props.kind === "toolbar"}
+	<Toolbar
+		i18n={props.i18n ?? identity}
+		brush_options={props.brush_options === undefined
+			? default_brush
+			: props.brush_options}
+		eraser_options={props.eraser_options === undefined
+			? { default_size: "auto" }
+			: props.eraser_options}
+		sources={props.sources ?? ["upload", "clipboard", "webcam"]}
+		transforms={props.transforms ?? []}
+		background={props.background ?? false}
+		tool={props.tool ?? "image"}
+		subtool={props.subtool ?? null}
+		ontool_change={props.ontool_change}
+		onsubtool_change={props.onsubtool_change}
+	/>
+{:else}
+	<SecondaryToolbar
+		i18n={props.i18n ?? identity}
+		{layers}
+		enable_layers={props.enable_layers ?? true}
+		enable_additional_layers={props.enable_additional_layers ?? true}
+		onnew_layer={props.onnew_layer}
+	/>
+{/if}

package/dist/ImageEditorTestWrapper.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { I18nFormatter } from "@gradio/utils";
+type $$ComponentProps = {
+    props: {
+        kind: "controls" | "toolbar" | "layers";
+        i18n?: I18nFormatter;
+        [key: string]: any;
+    };
+};
+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();

package/dist/shared/Controls.svelte.d.ts

@@ -1,4 +1,6 @@
+import type { I18nFormatter } from "@gradio/utils";
 type $$ComponentProps = {
+    i18n: I18nFormatter;
     can_save?: boolean;
     changeable?: boolean;
     current_zoom?: number;