allow developers to control layers more granularly

Author: pngwn

demo/image_editor/run.py

@@ -236,6 +236,9 @@ def update_editor_settings(
             border_region=100,
             canvas_size=[600, 600],
             type="numpy",
+            layers=gr.LayerOptions(
+                allow_additional_layers=False, layers=["Mask", "Mask 2"]
+            ),
         )
         im_preview = gr.Image(label="Preview")
 

gradio/__init__.py

@@ -64,7 +64,7 @@
     component,
 )
 from gradio.components.audio import WaveformOptions
-from gradio.components.image_editor import Brush, Eraser
+from gradio.components.image_editor import Brush, Eraser, LayerOptions
 from gradio.data_classes import FileData
 from gradio.events import (
     CopyData,
@@ -175,6 +175,7 @@
     "Json",
     "KeyUpData",
     "Label",
+    "LayerOptions",
     "LikeData",
     "LinePlot",
     "List",

gradio/components/image_editor.py

@@ -117,6 +117,25 @@ def __post_init__(self):
             )
 
 
+@document()
+@dataclasses.dataclass
+class LayerOptions:
+    """
+    A dataclass for specifying options for the layer tool in the ImageEditor component. An instance of this class can be passed to the `layers` parameter of `gr.ImageEditor`.
+    Parameters:
+        allow_additional_layers: If True, users can add additional layers to the image. If False, the add layer button will not be shown.
+        layers: A list of layers to make available to the user when using the layer tool. One layer must be provided, if the length of the list is 0 then a layer will be generated automatically.
+    """
+
+    allow_additional_layers: bool = True
+    layers: list[str] | None = None
+    disabled: bool = False
+
+    def __post_init__(self):
+        if self.layers is None or len(self.layers) == 0:
+            self.layers = ["Layer 1"]
+
+
 @document()
 class ImageEditor(Component):
     """
@@ -215,7 +234,7 @@ def __init__(
             eraser: The options for the eraser tool in the image editor. Should be an instance of the `gr.Eraser` class, or None to use the default settings. Can also be False to hide the eraser tool. [See `gr.Eraser` docs](#eraser).
             brush: The options for the brush tool in the image editor. Should be an instance of the `gr.Brush` class, or None to use the default settings. Can also be False to hide the brush tool, which will also hide the eraser tool. [See `gr.Brush` docs](#brush).
             format: Format to save image if it does not already have a valid format (e.g. if the image is being returned to the frontend as a numpy array or PIL Image).  The format should be supported by the PIL library. This parameter has no effect on SVG files.
-            layers: If True, will allow users to add layers to the image. If False, the layers option will be hidden.
+            layers: The options for the layer tool in the image editor. Can be a boolean     or an instance of the `gr.LayerOptions` class. If True, will allow users to add layers to the image. If False, the layers option will be hidden. If an instance of `gr.LayerOptions`, it will be used to configure the layer tool. [See `gr.LayerOptions` docs](#layer-options).
             canvas_size: The size of the canvas in pixels. The first value is the width and the second value is the height. If its set, uploaded images will be rescaled to fit the canvas size while preserving the aspect ratio. The canvas size will always change to match the size of an uploaded image unless fixed_canvas is set to True.
             fixed_canvas: If True, the canvas size will not change based on the size of the background image and the image will be rescaled to fit (while preserving the aspect ratio) and placed in the center of the canvas.
             show_fullscreen_button: If True, will display button to view image in fullscreen mode.
@@ -275,7 +294,11 @@ def __init__(
         self.brush = Brush() if brush is None else brush
         self.blob_storage: dict[str, EditorDataBlobs] = {}
         self.format = format
-        self.layers = layers
+        self.layers = (
+            LayerOptions()
+            if layers is True
+            else LayerOptions(disabled=True) if layers is False else layers
+        )
         self.canvas_size = canvas_size
         self.fixed_canvas = fixed_canvas
         self.show_fullscreen_button = show_fullscreen_button

js/imageeditor/Index.svelte

@@ -11,7 +11,7 @@
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
 	import { tick } from "svelte";
-
+	import type { LayerOptions } from "./shared/types";
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
@@ -45,7 +45,7 @@
 	export let brush: Brush;
 	export let eraser: Eraser;
 	export let transforms: "crop"[] = ["crop"];
-	export let layers = true;
+	export let layers: LayerOptions;
 	export let attached_events: string[] = [];
 	export let server: {
 		accept_blobs: (a: any) => void;
@@ -54,7 +54,6 @@
 	export let fixed_canvas = false;
 	export let show_fullscreen_button = true;
 	export let full_history: any = null;
-
 	export let gradio: Gradio<{
 		change: never;
 		error: string;
@@ -86,7 +85,6 @@
 	}
 
 	let dragging: boolean;
-
 	$: value && handle_change();
 	const is_browser = typeof window !== "undefined";
 	const raf = is_browser

js/imageeditor/InteractiveImageEditor.svelte

@@ -28,7 +28,7 @@
 	import { Image as ImageIcon } from "@gradio/icons";
 	import { inject } from "./shared/utils/parse_placeholder";
 	// import Sources from "./shared/image/Sources.svelte";
-
+	import { type LayerOptions } from "./shared/types";
 	export let brush: IBrush;
 	export let eraser: Eraser;
 	export let sources: ("clipboard" | "webcam" | "upload")[];
@@ -43,7 +43,7 @@
 		composite: null,
 	};
 	// export let transforms: "crop"[] = ["crop"];
-	export let layers: boolean;
+	export let layers: LayerOptions;
 	export let transforms: "crop"[] = ["crop"];
 	export let accept_blobs: (a: any) => void;
 	export let status:
@@ -60,7 +60,6 @@
 	export let dragging: boolean;
 	export let placeholder: string | undefined = undefined;
 	export let border_region: number;
-
 	export let full_history: CommandNode | null = null;
 
 	const dispatch = createEventDispatcher<{
@@ -244,6 +243,7 @@
 	eraser_options={eraser}
 	{fixed_canvas}
 	{border_region}
+	layer_options={layers}
 >
 	{#if !background_image && current_tool === "image"}
 		<div class="empty wrap">

js/imageeditor/shared/ImageEditor.svelte

@@ -32,7 +32,7 @@
 	import { create_drag } from "@gradio/upload";
 	import Layers from "./Layers.svelte";
 	import { Check } from "@gradio/icons";
-
+	import { type LayerOptions } from "./types";
 	const { drag, open_file_upload } = create_drag();
 
 	interface WeirdTypeData {
@@ -78,6 +78,8 @@
 	export let layers: WeirdTypeData[];
 	export let background: WeirdTypeData;
 	export let border_region: number;
+	export let layer_options: LayerOptions;
+
 	/**
 	 * Gets the image blobs from the editor
 	 * @returns {Promise<ImageBlobs>} Object containing background, layers, and composite image blobs
@@ -96,7 +98,7 @@
 	 * @param {Blob | File} image - The image to add
 	 */
 	export function add_image(image: Blob | File): void {
-		editor.add_image({ image, border_region });
+		editor.add_image({ image });
 	}
 
 	let pending_bg: Promise<void>;
@@ -201,6 +203,7 @@
 			tools: ["image", zoom, new ResizeTool(), brush],
 			fixed_canvas,
 			border_region,
+			layer_options,
 		});
 
 		crop_zoom = new ZoomTool();
@@ -413,12 +416,10 @@
 	$: add_layers_from_url(layers);
 
 	async function handle_crop_confirm(): Promise<void> {
-		const { image, width, height, x, y, original_dimensions } =
-			await crop.get_crop_bounds();
+		const { image, x, y, original_dimensions } = await crop.get_crop_bounds();
 		if (!image) return;
 		editor.add_image({
 			image,
-			border_region,
 			resize: false,
 			crop_offset: { x, y },
 			original_dimensions,
@@ -517,8 +518,9 @@
 			</div>
 		{/if}
 
-		{#if current_subtool !== "crop"}
+		{#if current_subtool !== "crop" && !layer_options.disabled}
 			<Layers
+				enable_additional_layers={layer_options.allow_additional_layers}
 				layers={editor.layers}
 				on:new_layer={() => {
 					editor.add_layer();

js/imageeditor/shared/Layers.svelte

@@ -19,125 +19,10 @@
 
 	export let layers: Writable<{
 		active_layer: string;
-		layers: { name: string; id: string }[];
+		layers: { name: string; id: string; user_created: boolean }[];
 	}>;
-	// let show_layers = false;
 
-	// export let layer_files: (FileData | null)[] | null = [];
-	// export let enable_layers = true;
-
-	// const {
-	// 	pixi,
-	// 	current_layer,
-	// 	dimensions,
-	// 	register_context,
-	// 	command_manager,
-	// 	current_history
-	// } = getContext<EditorContext>(EDITOR_KEY);
-
-	// const { can_undo } = command_manager;
-
-	// const LayerManager = layer_manager();
-	// const manager_current_layer = LayerManager.active_layer;
-	// const layers = LayerManager.layers;
-
-	// $: current_layer.set($manager_current_layer);
-
-	// register_context("layers", {
-	// 	init_fn: () => {
-	// 		new_layer();
-	// 	},
-	// 	reset_fn: () => {
-	// 		LayerManager.reset();
-	// 	}
-	// });
-
-	// async function validate_layers(): Promise<void> {
-	// 	let invalid = $layers.some(
-	// 		(layer) =>
-	// 			layer.composite.texture?.width != $dimensions[0] ||
-	// 			layer.composite.texture?.height != $dimensions[1]
-	// 	);
-	// 	if (invalid) {
-	// 		LayerManager.reset();
-	// 		if (!layer_files || layer_files.length == 0) new_layer();
-	// 		else render_layer_files(layer_files);
-	// 	}
-	// }
-	// $: $dimensions, validate_layers();
-
-	// async function new_layer(): Promise<void> {
-	// 	if (!$pixi) return;
-
-	// 	const new_layer = LayerManager.add_layer(
-	// 		$pixi.layer_container,
-	// 		$pixi.renderer,
-	// 		...$dimensions
-	// 	);
-
-	// 	if ($can_undo || $layers.length > 0) {
-	// 		command_manager.execute(new_layer);
-	// 	} else {
-	// 		new_layer.execute();
-	// 	}
-	// }
-
-	// $: render_layer_files(layer_files);
-
-	// function is_not_null<T>(x: T | null): x is T {
-	// 	return x !== null;
-	// }
-
-	// async function render_layer_files(
-	// 	_layer_files: typeof layer_files
-	// ): Promise<void> {
-	// 	await tick();
-	// 	if (!_layer_files || _layer_files.length == 0) {
-	// 		LayerManager.reset();
-	// 		new_layer();
-	// 		return;
-	// 	}
-	// 	if (!$pixi) return;
-
-	// 	const fetch_promises = await Promise.all(
-	// 		_layer_files.map((f) => {
-	// 			if (!f || !f.url) return null;
-
-	// 			return fetch(f.url);
-	// 		})
-	// 	);
-
-	// 	const blobs = await Promise.all(
-	// 		fetch_promises.map((p) => {
-	// 			if (!p) return null;
-	// 			return p.blob();
-	// 		})
-	// 	);
-
-	// 	LayerManager.reset();
-
-	// 	for (const blob of blobs.filter(is_not_null)) {
-	// 		const new_layer = await LayerManager.add_layer_from_blob(
-	// 			$pixi.layer_container,
-	// 			$pixi.renderer,
-	// 			blob,
-	// 			$pixi.view
-	// 		);
-
-	// 		if ($can_undo && $layers.length === 0) {
-	// 			command_manager.execute(new_layer);
-	// 		} else {
-	// 			new_layer.execute();
-	// 		}
-	// 	}
-	// }
-
-	// onMount(async () => {
-	// 	await tick();
-	// 	if (!$pixi) return;
-
-	// 	$pixi = { ...$pixi!, get_layers: LayerManager.get_layers };
-	// });
+	export let enable_additional_layers = true;
 
 	export let enable_layers = true;
 	export let show_layers = false;
@@ -176,7 +61,7 @@
 		</button>
 		{#if show_layers}
 			<ul>
-				{#each $layers.layers as { id, name }, i (i)}
+				{#each $layers.layers as { id, name, user_created }, i (i)}
 					<li>
 						<button
 							class:selected_layer={$layers.active_layer === id}
@@ -205,7 +90,7 @@
 										size="x-small"
 									/>
 								{/if}
-								{#if $layers.layers.length > 1}
+								{#if $layers.layers.length > 1 && user_created}
 									<IconButton
 										on:click={(e) => {
 											e.stopPropagation();
@@ -219,17 +104,19 @@
 						{/if}
 					</li>
 				{/each}
-				<li class="add-layer">
-					<IconButton
-						Icon={Plus}
-						aria-label="Add Layer"
-						on:click={(e) => {
-							e.stopPropagation();
-							new_layer();
-						}}
-						size="x-small"
-					/>
-				</li>
+				{#if enable_additional_layers}
+					<li class="add-layer">
+						<IconButton
+							Icon={Plus}
+							aria-label="Add Layer"
+							on:click={(e) => {
+								e.stopPropagation();
+								new_layer();
+							}}
+							size="x-small"
+						/>
+					</li>
+				{/if}
 			</ul>
 		{/if}
 	</div>