@gradio/imageeditor 0.19.0 → 0.20.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @gradio/imageeditor
 
+## 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
+
+- [#13543](https://github.com/gradio-app/gradio/pull/13543) [`0533483`](https://github.com/gradio-app/gradio/commit/0533483bccdee38f334a598f18297e8c02966343) - Migrate Image components to Svelte 5.  Thanks @dawoodkhan82!
+
+### Fixes
+
+- [#13571](https://github.com/gradio-app/gradio/pull/13571) [`c576675`](https://github.com/gradio-app/gradio/commit/c576675c1d0d9a917706bb830f7a738d9f96672f) - Fix `gr.ImageEditor` high CPU usage when idle by sleeping the render loop when nothing is changing.  Thanks @abidlabs!
+- [`dcc654d`](https://github.com/gradio-app/gradio/commit/dcc654d8467c9202a78c50b31e7d123e9804ebf4) - Fix ImageEditor transform tools and hidden cleanup.  Thanks @dawoodkhan82!
+- [#13597](https://github.com/gradio-app/gradio/pull/13597) [`7a595cb`](https://github.com/gradio-app/gradio/commit/7a595cb72d8a82151ee2231e86d20c91d0bb9062) - Fix ImageEditor brush texture resets.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/statustracker@0.15.1
+- @gradio/icons@0.16.0
+- @gradio/atoms@0.26.0
+- @gradio/image@0.28.0
+- @gradio/client@2.3.1
+- @gradio/upload@0.18.1
+
 ## 0.19.0
 
 ### Features

package/Example.svelte

@@ -2,9 +2,15 @@
 	import { BaseImage as Image } from "@gradio/image";
 	import type { EditorData } from "./InteractiveImageEditor.svelte";
 
-	export let value: EditorData;
-	export let type: "gallery" | "table";
-	export let selected = false;
+	let {
+		value,
+		type,
+		selected = false
+	}: {
+		value: EditorData;
+		type: "gallery" | "table";
+		selected?: boolean;
+	} = $props();
 </script>
 
 <div

package/Index.svelte

@@ -10,7 +10,7 @@
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 
-	import { Gradio } from "@gradio/utils";
+	import { Gradio, type ShareData } from "@gradio/utils";
 	import type { ImageEditorEvents, ImageEditorProps } from "./types";
 
 	let props = $props();
@@ -47,7 +47,7 @@
 		return blobs;
 	}
 
-	let is_dragging: boolean;
+	let is_dragging = $state(false);
 
 	const is_browser = typeof window !== "undefined";
 
@@ -84,6 +84,14 @@
 	let normalised_layers = $derived(
 		gradio.props.value?.layers?.map((layer) => new FileData(layer)) || []
 	);
+	let resolved_theme_mode: "dark" | "light" = $derived(
+		gradio.shared.theme_mode === "dark" ||
+			(gradio.shared.theme_mode === "system" &&
+				typeof window !== "undefined" &&
+				window.matchMedia?.("(prefers-color-scheme: dark)").matches)
+			? "dark"
+			: "light"
+	);
 </script>
 
 {#if !gradio.shared.interactive}
@@ -110,9 +118,9 @@
 				gradio.dispatch("clear_status", gradio.shared.loading_status)}
 		/>
 		<StaticImage
-			on:select={({ detail }) => gradio.dispatch("select", detail)}
-			on:share={({ detail }) => gradio.dispatch("share", detail)}
-			on:error={({ detail }) => gradio.dispatch("error", detail)}
+			onselect={(detail) => gradio.dispatch("select", detail)}
+			onshare={(detail) => gradio.dispatch("share", detail as ShareData)}
+			onerror={(detail) => gradio.dispatch("error", detail)}
 			value={gradio.props.value?.composite || null}
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
@@ -159,38 +167,29 @@
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
 			fixed_canvas={gradio.props.fixed_canvas}
-			on:input={() => {
+			oninput={() => {
 				if (!has_run_input) {
 					has_run_input = true;
 				} else {
 					gradio.dispatch("input");
 				}
 			}}
-			on:save={(e) => handle_save()}
-			on:edit={() => gradio.dispatch("edit")}
-			on:clear={() => gradio.dispatch("clear")}
-			on:drag={({ detail }) => (is_dragging = detail)}
-			on:upload={() => gradio.dispatch("upload")}
-			on:share={({ detail }) => gradio.dispatch("share", detail)}
-			on:error={({ detail }) => {
-				gradio.shared.loading_status = gradio.shared.loading_status || {};
-				gradio.shared.loading_status.status = "error";
-				gradio.dispatch("error", detail);
-			}}
-			on:receive_null={() =>
+			onsave={() => handle_save()}
+			onclear={() => gradio.dispatch("clear")}
+			onupload={() => gradio.dispatch("upload")}
+			onreceive_null={() =>
 				(gradio.props.value = {
 					background: null,
 					layers: [],
 					composite: null
 				})}
-			on:change={() => {
+			onchange={() => {
 				if (!has_run_change) {
 					has_run_change = true;
 				} else {
 					gradio.dispatch("change");
 				}
 			}}
-			on:error
 			brush={gradio.props.brush ?? false}
 			eraser={gradio.props.eraser ?? false}
 			changeable={gradio.shared.attached_events?.includes("apply") ?? false}
@@ -199,15 +198,15 @@
 			i18n={gradio.i18n}
 			transforms={gradio.props.transforms ?? []}
 			accept_blobs={gradio.shared.server.accept_blobs}
-			layer_options={gradio.props.layers}
+			layer_options={gradio.props.layers!}
 			upload={(...args) => gradio.shared.client.upload(...args)}
 			placeholder={gradio.props.placeholder}
-			webcam_options={gradio.props.webcam_options}
+			webcam_options={gradio.props.webcam_options!}
 			show_download_button={gradio.props.buttons === null
 				? true
 				: (gradio.props.buttons ?? []).includes("download")}
-			theme_mode={gradio.shared.theme_mode === "dark" ? "dark" : "light"}
-			on:download_error={(e) => gradio.dispatch("error", e.detail)}
+			theme_mode={resolved_theme_mode}
+			ondownload_error={(detail) => gradio.dispatch("error", detail)}
 		></InteractiveImageEditor>
 	</Block>
 {/if}

package/InteractiveImageEditor.svelte

@@ -13,7 +13,6 @@
 </script>
 
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
 	import { type I18nFormatter } from "@gradio/utils";
 	import { prepare_files, type FileData, type Client } from "@gradio/client";
 	import { type CommandNode } from "./shared/core/commands";
@@ -31,48 +30,82 @@
 		type WebcamOptions
 	} from "./shared/types";
 
-	export let brush: IBrush | false;
-	export let eraser: Eraser | false;
-	export let sources: Source[];
-	export let i18n: I18nFormatter;
-	export let root: string;
-	export let label: string | undefined = undefined;
-	export let show_label: boolean;
-	export let changeable = false;
-	export let theme_mode: "dark" | "light";
-
-	export let layers: FileData[];
-	export let composite: FileData | null;
-	export let background: FileData | null;
-
-	export let layer_options: LayerOptions = {
-		allow_additional_layers: true,
-		layers: [],
-		disabled: false
-	};
-	export let transforms: Transform[];
-	export let accept_blobs: (a: any) => void;
-
-	export let canvas_size: [number, number];
-	export let fixed_canvas = false;
-	export let realtime = false;
-	export let upload: Client["upload"];
-	export let is_dragging: boolean;
-	export let placeholder: string | undefined = undefined;
-	export let border_region: number;
-	export let full_history: CommandNode | null = null;
-	export let webcam_options: WebcamOptions = { mirror: true, constraints: {} };
-	export let show_download_button = false;
-
-	const dispatch = createEventDispatcher<{
-		clear?: never;
-		upload?: never;
-		change?: never;
-		receive_null?: never;
-	}>();
+	let {
+		brush,
+		eraser,
+		sources,
+		i18n,
+		root,
+		label = undefined,
+		show_label,
+		changeable = false,
+		theme_mode,
+		layers,
+		composite,
+		background,
+		layer_options = {
+			allow_additional_layers: true,
+			layers: [],
+			disabled: false
+		},
+		transforms,
+		accept_blobs,
+		canvas_size,
+		fixed_canvas = false,
+		realtime = false,
+		upload,
+		is_dragging = $bindable(),
+		placeholder = undefined,
+		border_region,
+		full_history = $bindable(null),
+		webcam_options = { mirror: true, constraints: {} },
+		show_download_button = false,
+		image_id = $bindable(null),
+		onclear,
+		onupload,
+		onchange,
+		oninput,
+		onsave,
+		onreceive_null,
+		ondownload_error
+	}: {
+		brush: IBrush | false;
+		eraser: Eraser | false;
+		sources: Source[];
+		i18n: I18nFormatter;
+		root: string;
+		label?: string;
+		show_label: boolean;
+		changeable?: boolean;
+		theme_mode: "dark" | "light";
+		layers: FileData[];
+		composite: FileData | null;
+		background: FileData | null;
+		layer_options?: LayerOptions;
+		transforms: Transform[];
+		accept_blobs: (a: any) => void;
+		canvas_size: [number, number];
+		fixed_canvas?: boolean;
+		realtime?: boolean;
+		upload: Client["upload"];
+		is_dragging?: boolean;
+		placeholder?: string;
+		border_region: number;
+		full_history?: CommandNode | null;
+		webcam_options?: WebcamOptions;
+		show_download_button?: boolean;
+		image_id?: null | string;
+		onclear?: () => void;
+		onupload?: () => void;
+		onchange?: () => void;
+		oninput?: () => void;
+		onsave?: () => void;
+		onreceive_null?: () => void;
+		ondownload_error?: (error: string) => void;
+	} = $props();
 
 	let editor: ImageEditor;
-	let has_drawn = false;
+	let has_drawn = $state(false);
 
 	function is_not_null(o: Blob | null): o is Blob {
 		return !!o;
@@ -82,7 +115,9 @@
 		return !!o;
 	}
 
-	$: if (background_image) dispatch("upload");
+	$effect(() => {
+		if (background_image) onupload?.();
+	});
 
 	export async function get_data(): Promise<ImageBlobs> {
 		let blobs;
@@ -131,16 +166,16 @@
 		if (!editor) return;
 		if (value == null) {
 			editor.handle_remove();
-			dispatch("receive_null");
+			onreceive_null?.();
 		}
 	}
 
-	$: handle_value({ layers, composite, background });
-
-	let background_image = false;
-	let can_undo: boolean;
+	$effect(() => {
+		handle_value({ layers, composite, background });
+	});
 
-	export let image_id: null | string = null;
+	let background_image = $state(false);
+	let can_undo = $state(false);
 
 	type BinaryImages = [string, string, File, number | null][];
 
@@ -148,9 +183,9 @@
 		return new Promise((resolve) => setTimeout(() => resolve(), 30));
 	}
 
-	let uploading = false;
-	let pending = false;
-	async function handle_change(e: CustomEvent<Blob | any>): Promise<void> {
+	let uploading = $state(false);
+	let pending = $state(false);
+	async function handle_change(): Promise<void> {
 		if (!realtime) return;
 		if (uploading) {
 			pending = true;
@@ -193,19 +228,23 @@
 			})
 		);
 		image_id = id;
-		dispatch("change");
+		onchange?.();
 		await nextframe();
 		uploading = false;
 		if (pending) {
 			pending = false;
 			uploading = false;
-			handle_change(e);
+			handle_change();
 		}
 	}
 
-	$: [heading, paragraph] = placeholder ? inject(placeholder) : [false, false];
+	let placeholder_parts = $derived(
+		placeholder ? inject(placeholder) : [false, false]
+	);
+	let heading = $derived(placeholder_parts[0]);
+	let paragraph = $derived(placeholder_parts[1]);
 
-	let current_tool: ToolbarTool;
+	let current_tool = $state<ToolbarTool>("image");
 </script>
 
 <BlockLabel
@@ -218,15 +257,14 @@
 	{composite}
 	{layers}
 	{background}
-	on:history
 	{canvas_size}
 	bind:this={editor}
 	{changeable}
-	on:save
-	on:input
-	on:change={handle_change}
-	on:clear={() => dispatch("clear")}
-	on:download_error
+	{onsave}
+	{oninput}
+	onchange={handle_change}
+	onclear={() => onclear?.()}
+	{ondownload_error}
 	{sources}
 	bind:background_image
 	bind:current_tool

package/dist/Example.svelte

@@ -2,9 +2,15 @@
 	import { BaseImage as Image } from "@gradio/image";
 	import type { EditorData } from "./InteractiveImageEditor.svelte";
 
-	export let value: EditorData;
-	export let type: "gallery" | "table";
-	export let selected = false;
+	let {
+		value,
+		type,
+		selected = false
+	}: {
+		value: EditorData;
+		type: "gallery" | "table";
+		selected?: boolean;
+	} = $props();
 </script>
 
 <div

package/dist/Example.svelte.d.ts

@@ -1,23 +1,9 @@
 import type { EditorData } from "./InteractiveImageEditor.svelte";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Example: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     value: EditorData;
     type: "gallery" | "table";
     selected?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Example = InstanceType<typeof Example>;
+};
+declare const Example: import("svelte").Component<$$ComponentProps, {}, "">;
+type Example = ReturnType<typeof Example>;
 export default Example;

package/dist/Index.svelte

@@ -10,7 +10,7 @@
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 
-	import { Gradio } from "@gradio/utils";
+	import { Gradio, type ShareData } from "@gradio/utils";
 	import type { ImageEditorEvents, ImageEditorProps } from "./types";
 
 	let props = $props();
@@ -47,7 +47,7 @@
 		return blobs;
 	}
 
-	let is_dragging: boolean;
+	let is_dragging = $state(false);
 
 	const is_browser = typeof window !== "undefined";
 
@@ -84,6 +84,14 @@
 	let normalised_layers = $derived(
 		gradio.props.value?.layers?.map((layer) => new FileData(layer)) || []
 	);
+	let resolved_theme_mode: "dark" | "light" = $derived(
+		gradio.shared.theme_mode === "dark" ||
+			(gradio.shared.theme_mode === "system" &&
+				typeof window !== "undefined" &&
+				window.matchMedia?.("(prefers-color-scheme: dark)").matches)
+			? "dark"
+			: "light"
+	);
 </script>
 
 {#if !gradio.shared.interactive}
@@ -110,9 +118,9 @@
 				gradio.dispatch("clear_status", gradio.shared.loading_status)}
 		/>
 		<StaticImage
-			on:select={({ detail }) => gradio.dispatch("select", detail)}
-			on:share={({ detail }) => gradio.dispatch("share", detail)}
-			on:error={({ detail }) => gradio.dispatch("error", detail)}
+			onselect={(detail) => gradio.dispatch("select", detail)}
+			onshare={(detail) => gradio.dispatch("share", detail as ShareData)}
+			onerror={(detail) => gradio.dispatch("error", detail)}
 			value={gradio.props.value?.composite || null}
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
@@ -159,38 +167,29 @@
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
 			fixed_canvas={gradio.props.fixed_canvas}
-			on:input={() => {
+			oninput={() => {
 				if (!has_run_input) {
 					has_run_input = true;
 				} else {
 					gradio.dispatch("input");
 				}
 			}}
-			on:save={(e) => handle_save()}
-			on:edit={() => gradio.dispatch("edit")}
-			on:clear={() => gradio.dispatch("clear")}
-			on:drag={({ detail }) => (is_dragging = detail)}
-			on:upload={() => gradio.dispatch("upload")}
-			on:share={({ detail }) => gradio.dispatch("share", detail)}
-			on:error={({ detail }) => {
-				gradio.shared.loading_status = gradio.shared.loading_status || {};
-				gradio.shared.loading_status.status = "error";
-				gradio.dispatch("error", detail);
-			}}
-			on:receive_null={() =>
+			onsave={() => handle_save()}
+			onclear={() => gradio.dispatch("clear")}
+			onupload={() => gradio.dispatch("upload")}
+			onreceive_null={() =>
 				(gradio.props.value = {
 					background: null,
 					layers: [],
 					composite: null
 				})}
-			on:change={() => {
+			onchange={() => {
 				if (!has_run_change) {
 					has_run_change = true;
 				} else {
 					gradio.dispatch("change");
 				}
 			}}
-			on:error
 			brush={gradio.props.brush ?? false}
 			eraser={gradio.props.eraser ?? false}
 			changeable={gradio.shared.attached_events?.includes("apply") ?? false}
@@ -199,15 +198,15 @@
 			i18n={gradio.i18n}
 			transforms={gradio.props.transforms ?? []}
 			accept_blobs={gradio.shared.server.accept_blobs}
-			layer_options={gradio.props.layers}
+			layer_options={gradio.props.layers!}
 			upload={(...args) => gradio.shared.client.upload(...args)}
 			placeholder={gradio.props.placeholder}
-			webcam_options={gradio.props.webcam_options}
+			webcam_options={gradio.props.webcam_options!}
 			show_download_button={gradio.props.buttons === null
 				? true
 				: (gradio.props.buttons ?? []).includes("download")}
-			theme_mode={gradio.shared.theme_mode === "dark" ? "dark" : "light"}
-			on:download_error={(e) => gradio.dispatch("error", e.detail)}
+			theme_mode={resolved_theme_mode}
+			ondownload_error={(detail) => gradio.dispatch("error", detail)}
 		></InteractiveImageEditor>
 	</Block>
 {/if}

package/dist/Index.svelte.d.ts

@@ -1,20 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Index: $$__sveltets_2_IsomorphicComponent<$$ComponentProps, {
-    error: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Index = InstanceType<typeof Index>;
+declare const Index: import("svelte").Component<$$ComponentProps, {}, "">;
+type Index = ReturnType<typeof Index>;
 export default Index;