@gradio/imageeditor 0.20.0 → 0.20.2

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;

package/dist/shared/ImageEditor.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script module lang="ts">
 	import type { Tool, Subtool } from "./Toolbar.svelte";
 
 	export const EDITOR_KEY = Symbol("editor");
@@ -58,6 +58,7 @@
 		full_history = $bindable(null),
 		has_drawn = $bindable(false),
 		can_undo = $bindable(false),
+		has_user_edits = $bindable(false),
 		onclear,
 		onsave,
 		onchange,
@@ -90,6 +91,7 @@
 		full_history?: CommandNode | null;
 		has_drawn?: boolean;
 		can_undo?: boolean;
+		has_user_edits?: boolean;
 		onclear?: () => void;
 		onsave?: () => void;
 		onchange?: () => void;
@@ -182,6 +184,7 @@
 	}
 
 	let pending_bg: Promise<void>;
+	let loading_value = 0;
 	/**
 	 * Adds an image to the editor from a URL
 	 * @param {string | FileData} source - The URL of the image or a FileData object
@@ -199,6 +202,8 @@
 			| any
 	): Promise<void> {
 		if (!editor || !source || !check_if_should_init()) return;
+		has_user_edits = false;
+		loading_value += 1;
 		let url: string;
 
 		if (typeof source === "string") {
@@ -207,6 +212,7 @@
 			url = source.url;
 		} else {
 			console.warn("Invalid source provided to add_image_from_url:", source);
+			loading_value -= 1;
 			return;
 		}
 
@@ -222,6 +228,8 @@
 			oninput?.();
 		} catch (error) {
 			console.error("Error adding image from URL:", error);
+		} finally {
+			loading_value -= 1;
 		}
 	}
 
@@ -234,19 +242,23 @@
 		source: FileData[] | any
 	): Promise<void> {
 		if (!editor || !source.length || !check_if_should_init()) return;
+		has_user_edits = false;
+		loading_value += 1;
 
-		if (
-			Array.isArray(source) &&
-			source.every((item) => item?.meta?._type === "gradio.FileData")
-		) {
-			try {
+		try {
+			if (
+				Array.isArray(source) &&
+				source.every((item) => item?.meta?._type === "gradio.FileData")
+			) {
 				await pending_bg;
 				await editor.add_layers_from_url(source.map((item) => item.url));
 				onchange?.();
 				oninput?.();
-			} catch (error) {
-				console.error("Error adding layer from URL:", error);
 			}
+		} catch (error) {
+			console.error("Error adding layer from URL:", error);
+		} finally {
+			loading_value -= 1;
 		}
 	}
 
@@ -425,6 +437,7 @@
 		});
 
 		editor.on("change", () => {
+			if (loading_value === 0) has_user_edits = true;
 			onchange?.();
 			oninput?.();
 			full_history = editor.command_manager.history;
@@ -782,6 +795,7 @@
 	{#if ready}
 		{#if current_subtool !== "crop"}
 			<Controls
+				{i18n}
 				{changeable}
 				onset_zoom={(zoom) => handle_zoom_change(zoom)}
 				onzoom_in={() => zoom_in_out("in")}
@@ -806,6 +820,7 @@
 
 		{#if current_subtool !== "crop"}
 			<Toolbar
+				{i18n}
 				{sources}
 				{transforms}
 				background={background_image}
@@ -846,6 +861,7 @@
 
 		{#if current_subtool !== "crop" && !layer_options.disabled}
 			<SecondaryToolbar
+				{i18n}
 				enable_additional_layers={layer_options.allow_additional_layers}
 				layers={editor.layers}
 				onnew_layer={() => {
@@ -884,7 +900,7 @@
 		<div class="crop-confirm-button">
 			<IconButton
 				Icon={Check}
-				label="Confirm crop"
+				label={i18n("image_editor.confirm_crop")}
 				show_label={true}
 				size="large"
 				padded={true}

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

@@ -34,6 +34,7 @@ type $$ComponentProps = {
     full_history?: CommandNode | null;
     has_drawn?: boolean;
     can_undo?: boolean;
+    has_user_edits?: boolean;
     onclear?: () => void;
     onsave?: () => void;
     onchange?: () => void;
@@ -54,6 +55,6 @@ declare const ImageEditor: import("svelte").Component<$$ComponentProps, {
     } | any) => Promise<void>;
     add_layers_from_url: (source: FileData[] | any) => Promise<void>;
     handle_remove: () => void;
-}, "current_tool" | "can_undo" | "is_dragging" | "background_image" | "full_history" | "has_drawn">;
+}, "current_tool" | "can_undo" | "is_dragging" | "background_image" | "full_history" | "has_drawn" | "has_user_edits">;
 type ImageEditor = ReturnType<typeof ImageEditor>;
 export default ImageEditor;

package/dist/shared/Layers.svelte

@@ -11,8 +11,10 @@
 	} from "@gradio/icons";
 	import { IconButton } from "@gradio/atoms";
 	import type { Writable } from "svelte/store";
+	import type { I18nFormatter } from "@gradio/utils";
 
 	let {
+		i18n,
 		layers,
 		enable_additional_layers = true,
 		enable_layers = true,
@@ -23,6 +25,7 @@
 		ondelete_layer,
 		ontoggle_layer_visibility
 	}: {
+		i18n: I18nFormatter;
 		layers: Writable<{
 			active_layer: string;
 			layers: {
@@ -58,6 +61,13 @@
 	function delete_layer(id: string): void {
 		ondelete_layer?.(id);
 	}
+
+	function localize_layer_name(name: string): string {
+		const generated_layer_name = /^Layer (\d+)$/.exec(name);
+		return generated_layer_name
+			? `${i18n("image_editor.layer")} ${generated_layer_name[1]}`
+			: name;
+	}
 </script>
 
 {#if enable_layers}
@@ -68,15 +78,18 @@
 	>
 		<button
 			class="layer-title-button"
-			aria-label="Show Layers"
+			aria-label={i18n("image_editor.show_layers")}
 			onclick={(event) => {
 				event.stopPropagation();
 				show_layers = !show_layers;
 			}}
 		>
 			{show_layers
-				? "Layers"
-				: $layers.layers.find((l) => l.id === $layers.active_layer)?.name}
+				? i18n("image_editor.layers")
+				: localize_layer_name(
+						$layers.layers.find((l) => l.id === $layers.active_layer)?.name ??
+							""
+					)}
 			<span class="icon"><Layers /></span>
 		</button>
 		{#if show_layers}
@@ -108,7 +121,7 @@
 							onclick={(event) => {
 								event.stopPropagation();
 								change_layer(id);
-							}}>{name}</button
+							}}>{localize_layer_name(name)}</button
 						>
 						{#if $layers.layers.length > 1}
 							<div>
@@ -150,7 +163,7 @@
 					<li class="add-layer">
 						<IconButton
 							Icon={Plus}
-							label="Add Layer"
+							label={i18n("image_editor.add_layer")}
 							onclick={(e) => {
 								e.stopPropagation();
 								new_layer();

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

@@ -1,6 +1,8 @@
 import { Layers } from "@gradio/icons";
 import type { Writable } from "svelte/store";
+import type { I18nFormatter } from "@gradio/utils";
 type $$ComponentProps = {
+    i18n: I18nFormatter;
     layers: Writable<{
         active_layer: string;
         layers: {

package/dist/shared/Resize.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script module lang="ts">
 	export type Position =
 		| "top-left"
 		| "top"

package/dist/shared/SecondaryToolbar.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import Layers from "./Layers.svelte";
 	import type { Writable } from "svelte/store";
+	import type { I18nFormatter } from "@gradio/utils";
 
 	let {
+		i18n,
 		layers,
 		enable_additional_layers = true,
 		enable_layers = true,
@@ -13,6 +15,7 @@
 		ondelete_layer,
 		ontoggle_layer_visibility
 	}: {
+		i18n: I18nFormatter;
 		layers: Writable<{
 			active_layer: string;
 			layers: {
@@ -37,6 +40,7 @@
 	<div class="toolbar-wrap">
 		{#if enable_layers}
 			<Layers
+				{i18n}
 				{layers}
 				{enable_additional_layers}
 				{enable_layers}

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

@@ -1,5 +1,7 @@
 import type { Writable } from "svelte/store";
+import type { I18nFormatter } from "@gradio/utils";
 type $$ComponentProps = {
+    i18n: I18nFormatter;
     layers: Writable<{
         active_layer: string;
         layers: {

package/dist/shared/Toolbar.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script module lang="ts">
 	export type Tool = "image" | "draw" | "erase" | "pan";
 	export type Subtool =
 		| "upload"
@@ -13,6 +13,7 @@
 
 <script lang="ts">
 	import IconButton from "./IconButton.svelte";
+	import type { I18nFormatter } from "@gradio/utils";
 	import {
 		Image,
 		Brush,
@@ -33,6 +34,7 @@
 	} from "./brush/types";
 
 	let {
+		i18n,
 		tool = "image",
 		subtool = null,
 		background = false,
@@ -51,6 +53,7 @@
 		ontool_change,
 		onsubtool_change
 	}: {
+		i18n: I18nFormatter;
 		tool?: Tool;
 		subtool?: Subtool;
 		background?: boolean;
@@ -113,7 +116,7 @@
 		{#if can_edit_image}
 			<IconButton
 				Icon={Image}
-				label="Image"
+				label={i18n("image.image")}
 				highlight={tool === "image"}
 				onclick={(e) => handle_tool_click(e, "image")}
 				size="medium"
@@ -124,7 +127,7 @@
 		{#if brush_options}
 			<IconButton
 				Icon={Brush}
-				label="Brush"
+				label={i18n("image_editor.brush")}
 				onclick={(e) => handle_tool_click(e, "draw")}
 				highlight={tool === "draw"}
 				size="medium"
@@ -135,7 +138,7 @@
 		{#if eraser_options}
 			<IconButton
 				Icon={Erase}
-				label="Erase"
+				label={i18n("image_editor.erase")}
 				onclick={(e) => handle_tool_click(e, "erase")}
 				highlight={tool === "erase"}
 				size="medium"
@@ -155,7 +158,7 @@
 				{#if can_crop}
 					<IconButton
 						Icon={Crop}
-						label="Crop"
+						label={i18n("image_editor.crop")}
 						onclick={(e) => handle_subtool_click(e, "crop")}
 						highlight={subtool === "crop"}
 						size="medium"
@@ -167,7 +170,7 @@
 				{#if can_resize}
 					<IconButton
 						Icon={Resize}
-						label="Resize"
+						label={i18n("image_editor.resize")}
 						onclick={(e) => handle_subtool_click(e, "size")}
 						highlight={subtool === "size"}
 						size="medium"
@@ -180,7 +183,7 @@
 				{#if can_upload}
 					<IconButton
 						Icon={Upload}
-						label="Upload"
+						label={i18n("image_editor.upload")}
 						onclick={(e) => handle_subtool_click(e, "upload")}
 						highlight={subtool === "upload"}
 						size="medium"
@@ -192,7 +195,7 @@
 				{#if can_paste}
 					<IconButton
 						Icon={ImagePaste}
-						label="Paste"
+						label={i18n("image_editor.paste")}
 						onclick={(e) => handle_subtool_click(e, "paste")}
 						highlight={subtool === "paste"}
 						size="large"
@@ -204,7 +207,7 @@
 				{#if can_webcam}
 					<IconButton
 						Icon={Webcam}
-						label="Webcam"
+						label={i18n("image_editor.webcam")}
 						onclick={(e) => handle_subtool_click(e, "webcam")}
 						highlight={subtool === "webcam"}
 						size="medium"
@@ -219,7 +222,7 @@
 		{#if tool === "draw" && brush_options}
 			<IconButton
 				Icon={ColorPickerSolid}
-				label="Color"
+				label={i18n("image_editor.color")}
 				color={selected_color}
 				onclick={(e) => handle_subtool_click(e, "color")}
 				size="medium"
@@ -229,7 +232,7 @@
 			/>
 			<IconButton
 				Icon={BrushSize}
-				label="Brush Size"
+				label={i18n("image_editor.brush_size")}
 				onclick={(e) => handle_subtool_click(e, "size")}
 				highlight={subtool === "size"}
 				size="medium"
@@ -264,7 +267,7 @@
 		{#if tool === "erase" && eraser_options}
 			<IconButton
 				Icon={BrushSize}
-				label="Eraser Size"
+				label={i18n("image_editor.eraser_size")}
 				onclick={(e) => handle_subtool_click(e, "size")}
 				highlight={subtool === "size"}
 				size="medium"

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

@@ -1,8 +1,10 @@
 export type Tool = "image" | "draw" | "erase" | "pan";
 export type Subtool = "upload" | "paste" | "webcam" | "color" | "size" | "crop" | "remove_background" | null;
+import type { I18nFormatter } from "@gradio/utils";
 import type { Source, Transform } from "./types";
 import { type Brush as BrushType, type Eraser as EraserType } from "./brush/types";
 type $$ComponentProps = {
+    i18n: I18nFormatter;
     tool?: Tool;
     subtool?: Subtool;
     background?: boolean;

package/dist/shared/brush/brush-textures.js

@@ -41,44 +41,28 @@ export class BrushCommand {
         const erase_segments = stroke_data.segments.filter((s) => s.mode === "erase");
         if (draw_segments.length > 0) {
             const graphics = new Graphics();
-            const container = new Container();
-            container.addChild(graphics);
-            let alpha = 1;
+            const replacement_container = new Container();
+            const render_root = new Container();
+            replacement_container.blendMode = "none";
+            replacement_container.addChild(graphics);
+            render_root.addChild(replacement_container);
             for (const segment of draw_segments) {
-                if (segment.opacity < alpha) {
-                    alpha = segment.opacity;
-                }
                 let colorValue = 0xffffff;
                 if (segment.color.startsWith("#")) {
                     colorValue = parseInt(segment.color.replace("#", "0x"), 16);
                 }
                 graphics.setFillStyle({
                     color: colorValue,
-                    alpha: 1
+                    alpha: segment.opacity
                 });
                 this.render_segment_to_graphics(graphics, segment);
             }
-            // we need a sprite in order to set the alpha and for that we need a texture
-            // i'm not entirely sure why other approaches didn't work
-            const alpha_sprite_texture = RenderTexture.create({
-                width: target_texture.width,
-                height: target_texture.height,
-                resolution: window.devicePixelRatio || 1
-            });
-            const alpha_sprite = new Sprite(alpha_sprite_texture);
-            this.context.app.renderer.render({
-                container: container,
-                target: alpha_sprite_texture
-            });
-            alpha_sprite.alpha = alpha;
             this.context.app.renderer.render({
-                container: alpha_sprite,
+                container: render_root,
                 target: target_texture,
                 clear: false
             });
-            container.destroy({ children: true });
-            alpha_sprite.destroy();
-            alpha_sprite_texture.destroy();
+            render_root.destroy({ children: true });
         }
         if (erase_segments.length > 0) {
             // create a temp texture to work with

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.20.0",
+  "version": "0.20.2",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -11,16 +11,16 @@
     "pixi-filters": "^6.1.4",
     "pixi.js": "^8.14.0",
     "tinycolor2": "^1.6.0",
-    "@gradio/atoms": "^0.26.0",
-    "@gradio/client": "^2.3.1",
+    "@gradio/client": "^2.6.0",
+    "@gradio/image": "^0.28.3",
     "@gradio/icons": "^0.16.0",
-    "@gradio/image": "^0.28.0",
-    "@gradio/upload": "^0.18.1",
-    "@gradio/statustracker": "^0.15.1",
-    "@gradio/utils": "^0.13.0"
+    "@gradio/statustracker": "^0.15.3",
+    "@gradio/utils": "^0.14.1",
+    "@gradio/atoms": "^0.26.2",
+    "@gradio/upload": "^0.18.3"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.16.2"
+    "@gradio/preview": "^0.17.0"
   },
   "main_changeset": true,
   "main": "./Index.svelte",

package/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();