@gradio/imageeditor 0.10.0 → 0.11.0-beta.1

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

@@ -0,0 +1,58 @@
+import { SvelteComponent } from "svelte";
+export interface EditorData {
+    background: FileData | null;
+    layers: FileData[] | null;
+    composite: FileData | null;
+}
+export interface ImageBlobs {
+    background: FileData | null;
+    layers: FileData[];
+    composite: FileData | null;
+}
+import { type I18nFormatter } from "@gradio/utils";
+import { type FileData, type Client } from "@gradio/client";
+import { type Brush as IBrush } from "./tools/Brush.svelte";
+import { type Eraser } from "./tools/Brush.svelte";
+declare const __propDef: {
+    props: {
+        brush: IBrush | null;
+        eraser: Eraser | null;
+        sources: ("clipboard" | "webcam" | "upload")[];
+        crop_size?: ([number, number] | `${string}:${string}` | null) | undefined;
+        i18n: I18nFormatter;
+        root: string;
+        label?: string | undefined;
+        show_label: boolean;
+        changeable?: boolean | undefined;
+        value?: (EditorData | null) | undefined;
+        transforms?: "crop"[] | undefined;
+        layers: boolean;
+        accept_blobs: (a: any) => void;
+        status?: ("pending" | "complete" | "error" | "generating" | "streaming") | undefined;
+        canvas_size: [number, number] | undefined;
+        realtime: boolean;
+        upload: Client["upload"];
+        stream_handler: Client["stream"];
+        dragging: boolean;
+        placeholder?: string | undefined;
+        height?: number | undefined;
+        get_data?: (() => Promise<ImageBlobs>) | undefined;
+        image_id?: (null | string) | undefined;
+    };
+    events: {
+        save: CustomEvent<void>;
+        clear?: CustomEvent<undefined> | undefined;
+        upload?: CustomEvent<undefined> | undefined;
+        change?: CustomEvent<undefined> | undefined;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InteractiveImageEditorProps = typeof __propDef.props;
+export type InteractiveImageEditorEvents = typeof __propDef.events;
+export type InteractiveImageEditorSlots = typeof __propDef.slots;
+export default class InteractiveImageEditor extends SvelteComponent<InteractiveImageEditorProps, InteractiveImageEditorEvents, InteractiveImageEditorSlots> {
+    get get_data(): () => Promise<ImageBlobs>;
+}
+export {};

package/dist/shared/layers/Layers.svelte

@@ -0,0 +1,216 @@
+<script>import { getContext, onMount, tick } from "svelte";
+import { click_outside } from "../utils/events";
+import { layer_manager } from "./utils";
+import { EDITOR_KEY } from "../ImageEditor.svelte";
+import { Layers } from "@gradio/icons";
+let show_layers = false;
+export let layer_files = [];
+export let enable_layers = true;
+const { pixi, current_layer, dimensions, register_context } = getContext(EDITOR_KEY);
+const LayerManager = layer_manager();
+let layers = [];
+register_context("layers", {
+  init_fn: () => {
+    new_layer();
+  },
+  reset_fn: () => {
+    LayerManager.reset();
+  }
+});
+async function validate_layers() {
+  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() {
+  if (!$pixi)
+    return;
+  const [active_layer, all_layers] = LayerManager.add_layer(
+    $pixi.layer_container,
+    $pixi.renderer,
+    ...$dimensions
+  );
+  $current_layer = active_layer;
+  layers = all_layers;
+}
+$:
+  render_layer_files(layer_files);
+function is_not_null(x) {
+  return x !== null;
+}
+async function render_layer_files(_layer_files) {
+  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();
+  let last_layer = null;
+  for (const blob of blobs.filter(is_not_null)) {
+    last_layer = await LayerManager.add_layer_from_blob(
+      $pixi.layer_container,
+      $pixi.renderer,
+      blob,
+      $pixi.view
+    );
+  }
+  if (!last_layer)
+    return;
+  $current_layer = last_layer[0];
+  layers = last_layer[1];
+}
+onMount(async () => {
+  await tick();
+  if (!$pixi)
+    return;
+  $pixi = { ...$pixi, get_layers: LayerManager.get_layers };
+});
+</script>
+
+{#if enable_layers}
+	<div
+		class="layer-wrap"
+		class:closed={!show_layers}
+		use:click_outside={() => (show_layers = false)}
+	>
+		<button
+			aria-label="Show Layers"
+			on:click={() => (show_layers = !show_layers)}
+			><span class="icon"><Layers /></span> Layer {layers.findIndex(
+				(l) => l === $current_layer
+			) + 1}
+		</button>
+		{#if show_layers}
+			<ul>
+				{#each layers as layer, i (i)}
+					<li>
+						<button
+							class:selected_layer={$current_layer === layer}
+							on:click={() =>
+								($current_layer = LayerManager.change_active_layer(i))}
+							>Layer {i + 1}</button
+						>
+					</li>
+				{/each}
+				<li>
+					<button aria-label="Add Layer" on:click={new_layer}> +</button>
+				</li>
+			</ul>
+		{/if}
+
+		<span class="sep"></span>
+	</div>
+{/if}
+
+<style>
+	.icon {
+		width: 14px;
+		margin-right: var(--spacing-md);
+		color: var(--block-label-text-color);
+		margin-right: var(--spacing-lg);
+		margin-top: 1px;
+	}
+
+	.layer-wrap {
+		position: relative;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.layer-wrap button {
+		justify-content: flex-start;
+		align-items: flex-start;
+		width: 100%;
+		border-bottom: 1px solid var(--block-border-color);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: var(--scale-000);
+		line-height: var(--line-sm);
+		padding-bottom: 1px;
+		margin-left: var(--spacing-xl);
+		padding: var(--spacing-sm) 0;
+	}
+
+	.layer-wrap li:last-child button {
+		border-bottom: none;
+		text-align: center;
+		font-size: var(--scale-0);
+		line-height: 1;
+		font-weight: var(--weight-bold);
+		padding: 5px 0 1px 0;
+	}
+
+	.closed > button {
+		border-bottom: none;
+	}
+
+	.layer-wrap button:hover {
+		background-color: none;
+	}
+
+	.layer-wrap button:hover .icon {
+		color: var(--color-accent);
+	}
+
+	.selected_layer {
+		background-color: var(--block-background-fill);
+		color: var(--color-accent);
+		font-weight: bold;
+	}
+
+	ul {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		background: var(--block-background-fill);
+		width: calc(100% + 1px);
+		list-style: none;
+		z-index: var(--layer-top);
+		border: 1px solid var(--block-border-color);
+		padding: var(--spacing-sm) 0;
+		text-wrap: none;
+		transform: translate(-1px, 1px);
+		border-radius: var(--radius-sm);
+		border-bottom-right-radius: 0;
+	}
+
+	.layer-wrap ul > li > button {
+		margin-left: 0;
+	}
+
+	.sep {
+		height: 12px;
+		background-color: var(--block-border-color);
+		width: 1px;
+		display: block;
+		margin-left: var(--spacing-xl);
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import type { FileData } from "@gradio/client";
+declare const __propDef: {
+    props: {
+        layer_files?: ((FileData | null)[] | null) | undefined;
+        enable_layers?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LayersProps = typeof __propDef.props;
+export type LayersEvents = typeof __propDef.events;
+export type LayersSlots = typeof __propDef.slots;
+export default class Layers extends SvelteComponent<LayersProps, LayersEvents, LayersSlots> {
+}
+export {};

package/dist/shared/layers/utils.d.ts

@@ -0,0 +1,69 @@
+import { Container, type IRenderer, RenderTexture, Sprite, Filter } from "pixi.js";
+/**
+ * GLSL Shader that takes two textures and erases the second texture from the first.
+ */
+export declare const erase_shader = "\nprecision highp float;\n\nuniform sampler2D uDrawingTexture;\nuniform sampler2D uEraserTexture;\n\nvarying vec2 vTextureCoord;\n\nvoid main(void) {\n\tvec4 drawingColor = texture2D(uDrawingTexture,vTextureCoord);\n\tvec4 eraserColor = texture2D(uEraserTexture, vTextureCoord);\n\n\t// Use the alpha of the eraser to determine how much to \"erase\" from the drawing\n\tfloat alpha = 1.0 - eraserColor.a;\n\tgl_FragColor = vec4(drawingColor.rgb * alpha, drawingColor.a * alpha);\n}";
+/**
+ * Interface holding data for a layer
+ */
+export interface LayerScene {
+    /**
+     * The texture used for tracking brush strokes.
+     */
+    draw_texture: RenderTexture;
+    /**
+     * The texture used for tracking eraser strokes.
+     */
+    erase_texture: RenderTexture;
+    /**
+     * The sprite used for displaying the composite of the draw and erase textures.
+     */
+    composite: Sprite;
+    /**
+     * The filter used for combining the draw and erase textures into a composite texture.
+     */
+    filter?: Filter;
+}
+/**
+ * Interface for managing layers.
+ */
+interface LayerManager {
+    /**
+     * Adds a layer to the container.
+     * @param layer The container to add the layer to.
+     * @param renderer The renderer to use for the layer.
+     * @param width the width of the layer
+     * @param height the height of the layer
+     */
+    add_layer(container: Container, renderer: IRenderer, width: number, height: number): [LayerScene, LayerScene[]];
+    /**
+     * Swaps the layer with the layer above or below it.
+     * @param layer The index layer to swap.
+     * @param direction The direction to swap the layer.
+     */
+    swap_layers(layer: number, direction: "up" | "down"): LayerScene;
+    /**
+     * Changes the active layer.
+     * @param layer The index of the layer to make active.
+     */
+    change_active_layer(layer: number): LayerScene;
+    /**
+     * Resizes the layers.
+     * @param width The new width of the layers.
+     * @param height The new height of the layers.
+     */
+    reset(): void;
+    /**
+     * Gets the layers.
+     * @returns The layers.
+     */
+    get_layers(): LayerScene[];
+    add_layer_from_blob(container: Container, renderer: IRenderer, blob: Blob, view: HTMLCanvasElement): Promise<[LayerScene, LayerScene[]]>;
+}
+/**
+ * Creates a layer manager.
+ * @param canvas_resize a function to resize the canvas
+ * @returns a layer manager
+ */
+export declare function layer_manager(): LayerManager;
+export {};

package/dist/shared/layers/utils.js

@@ -0,0 +1,131 @@
+import { Container, RenderTexture, Texture, Sprite, Filter } from "pixi.js";
+/**
+ * GLSL Shader that takes two textures and erases the second texture from the first.
+ */
+export const erase_shader = `
+precision highp float;
+
+uniform sampler2D uDrawingTexture;
+uniform sampler2D uEraserTexture;
+
+varying vec2 vTextureCoord;
+
+void main(void) {
+	vec4 drawingColor = texture2D(uDrawingTexture,vTextureCoord);
+	vec4 eraserColor = texture2D(uEraserTexture, vTextureCoord);
+
+	// Use the alpha of the eraser to determine how much to "erase" from the drawing
+	float alpha = 1.0 - eraserColor.a;
+	gl_FragColor = vec4(drawingColor.rgb * alpha, drawingColor.a * alpha);
+}`;
+/**
+ * Swaps two adjacent elements in an array.
+ * @param array The array to swap elements in.
+ * @param index The index of the first element to swap.
+ */
+function swap_adjacent(array, index) {
+    if (index < 0 || index >= array.length - 1) {
+        throw new Error("Index out of bounds");
+    }
+    [array[index], array[index + 1]] = [array[index + 1], array[index]];
+}
+/**
+ * Creates a layer manager.
+ * @param canvas_resize a function to resize the canvas
+ * @returns a layer manager
+ */
+export function layer_manager() {
+    let _layers = [];
+    let current_layer = 0;
+    let position = 0;
+    return {
+        add_layer: function (container, renderer, width, height) {
+            const layer_container = new Container();
+            position++;
+            layer_container.zIndex = position;
+            const composite_texture = RenderTexture.create({
+                width,
+                height
+            });
+            const composite = new Sprite(composite_texture);
+            layer_container.addChild(composite);
+            composite.zIndex = position;
+            const layer_scene = {
+                draw_texture: RenderTexture.create({
+                    width,
+                    height
+                }),
+                erase_texture: RenderTexture.create({
+                    width,
+                    height
+                }),
+                composite
+            };
+            const erase_filter = new Filter(undefined, erase_shader, {
+                uEraserTexture: layer_scene.erase_texture,
+                uDrawingTexture: layer_scene.draw_texture
+            });
+            composite.filters = [erase_filter];
+            container.addChild(layer_container);
+            _layers.push(layer_scene);
+            return [layer_scene, _layers];
+        },
+        swap_layers: function (layer, direction) {
+            if (direction === "up") {
+                swap_adjacent(_layers, layer);
+            }
+            else {
+                swap_adjacent(_layers, layer - 1);
+            }
+            return _layers[layer];
+        },
+        change_active_layer: function (layer) {
+            current_layer = layer;
+            return _layers[layer];
+        },
+        reset() {
+            _layers.forEach((layer) => {
+                layer.draw_texture.destroy(true);
+                layer.erase_texture.destroy(true);
+                layer.composite.destroy(true);
+            });
+            _layers = [];
+            current_layer = 0;
+            position = 0;
+        },
+        async add_layer_from_blob(container, renderer, blob, view) {
+            const img = await createImageBitmap(blob);
+            const bitmap_texture = Texture.from(img);
+            const [w, h] = resize_to_fit(bitmap_texture.width, bitmap_texture.height, view.width, view.height);
+            const sprite = new Sprite(bitmap_texture);
+            sprite.zIndex = 0;
+            sprite.width = w;
+            sprite.height = h;
+            const [layer, layers] = this.add_layer(container, renderer, view.width, view.height);
+            renderer.render(sprite, {
+                renderTexture: layer.draw_texture
+            });
+            return [layer, layers];
+        },
+        get_layers() {
+            return _layers;
+        }
+    };
+}
+function resize_to_fit(inner_width, inner_height, outer_width, outer_height) {
+    if (inner_width <= outer_width && inner_height <= outer_height) {
+        return [inner_width, inner_height];
+    }
+    const inner_aspect = inner_width / inner_height;
+    const outer_aspect = outer_width / outer_height;
+    let new_width, new_height;
+    if (inner_aspect > outer_aspect) {
+        new_width = outer_width;
+        new_height = outer_width / inner_aspect;
+    }
+    else {
+        new_height = outer_height;
+        new_width = outer_height * inner_aspect;
+    }
+    return [new_width, new_height];
+}

package/dist/shared/tools/Brush.svelte

@@ -0,0 +1,208 @@
+<script context="module">import {} from "tinycolor2";
+</script>
+
+<script>import tinycolor from "tinycolor2";
+import { clamp } from "../utils/pixi";
+import { getContext, onMount, tick } from "svelte";
+import { TOOL_KEY } from "./Tools.svelte";
+import { EDITOR_KEY } from "../ImageEditor.svelte";
+import { draw_path } from "./brush";
+import BrushOptions from "./BrushOptions.svelte";
+export let default_size;
+export let default_color = void 0;
+export let colors = void 0;
+export let color_mode = void 0;
+export let mode;
+$:
+  processed_colors = colors ? colors.map(process_color).filter((_, i) => i < 4) : [];
+$:
+  selected_color = default_color === "auto" ? processed_colors[0] : !default_color ? "black" : process_color(default_color);
+let brush_options = false;
+const {
+  pixi,
+  dimensions,
+  current_layer,
+  command_manager,
+  register_context,
+  editor_box,
+  crop,
+  toolbar_box
+} = getContext(EDITOR_KEY);
+const { active_tool, register_tool, current_color } = getContext(TOOL_KEY);
+let drawing = false;
+let draw;
+function generate_sizes(x, y) {
+  const min = clamp(Math.min(x, y), 500, 1e3);
+  return Math.round(min * 2 / 100);
+}
+$:
+  mode === "draw" && current_color.set(selected_color);
+let selected_size = default_size === "auto" ? generate_sizes(...$dimensions) : default_size;
+function pointer_down_handler(event) {
+  if ($active_tool !== mode) {
+    return;
+  }
+  drawing = true;
+  if (!$pixi || !$current_layer) {
+    return;
+  }
+  draw = draw_path(
+    $pixi.renderer,
+    $pixi.layer_container,
+    $current_layer,
+    mode
+  );
+  draw.start({
+    x: event.screen.x,
+    y: event.screen.y,
+    color: selected_color || void 0,
+    size: selected_size,
+    opacity: 1
+  });
+}
+function pointer_up_handler(event) {
+  if (!$pixi || !$current_layer) {
+    return;
+  }
+  if ($active_tool !== mode) {
+    return;
+  }
+  draw.stop();
+  command_manager.execute(draw);
+  drawing = false;
+}
+function pointer_move_handler(event) {
+  if ($active_tool !== mode) {
+    return;
+  }
+  if (drawing) {
+    draw.continue({
+      x: event.screen.x,
+      y: event.screen.y
+    });
+  }
+  const x_bound = $crop[0] * $dimensions[0];
+  const y_bound = $crop[1] * $dimensions[1];
+  if (x_bound > event.screen.x || y_bound > event.screen.y || event.screen.x > x_bound + $crop[2] * $dimensions[0] || event.screen.y > y_bound + $crop[3] * $dimensions[1]) {
+    brush_cursor = false;
+    document.body.style.cursor = "auto";
+  } else {
+    brush_cursor = true;
+    document.body.style.cursor = "none";
+  }
+  if (brush_cursor) {
+    pos = {
+      x: event.clientX - $editor_box.child_left,
+      y: event.clientY - $editor_box.child_top
+    };
+  }
+}
+let brush_cursor = false;
+async function toggle_listeners(on_off) {
+  $pixi?.layer_container[on_off]("pointerdown", pointer_down_handler);
+  $pixi?.layer_container[on_off]("pointerup", pointer_up_handler);
+  $pixi?.layer_container[on_off]("pointermove", pointer_move_handler);
+  $pixi?.layer_container[on_off](
+    "pointerenter",
+    (event) => {
+      if ($active_tool === mode) {
+        brush_cursor = true;
+        document.body.style.cursor = "none";
+      }
+    }
+  );
+  $pixi?.layer_container[on_off](
+    "pointerleave",
+    () => (brush_cursor = false, document.body.style.cursor = "auto")
+  );
+}
+register_context(mode, {
+  init_fn: () => {
+    toggle_listeners("on");
+  },
+  reset_fn: () => {
+    toggle_listeners("off");
+  }
+});
+const toggle_options = debounce_toggle();
+const unregister = register_tool(mode, {
+  cb: toggle_options
+});
+onMount(() => {
+  return () => {
+    unregister();
+    toggle_listeners("off");
+  };
+});
+let recent_colors = [null, null, null];
+function process_color(color) {
+  return tinycolor(color).toRgbString();
+}
+let pos = { x: 0, y: 0 };
+$:
+  brush_size = selected_size / $dimensions[0] * $editor_box.child_width * 2;
+function debounce_toggle() {
+  let timeout = null;
+  return function executedFunction(should_close) {
+    const later = () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+      if (should_close !== void 0) {
+        brush_options = should_close;
+        return;
+      }
+      brush_options = !brush_options;
+    };
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(later, 100);
+  };
+}
+</script>
+
+<svelte:window
+	on:keydown={({ key }) => key === "Escape" && toggle_options(false)}
+/>
+
+<span
+	style:transform="translate({pos.x}px, {pos.y}px)"
+	style:top="{$editor_box.child_top -
+		$editor_box.parent_top -
+		brush_size / 2}px"
+	style:left="{$editor_box.child_left -
+		$editor_box.parent_left -
+		brush_size / 2}px"
+	style:width="{brush_size}px"
+	style:height="{brush_size}px"
+	style:opacity={brush_cursor ? 1 : 0}
+/>
+
+{#if brush_options}
+	<div>
+		<BrushOptions
+			show_swatch={mode === "draw"}
+			on:click_outside={() => toggle_options()}
+			colors={processed_colors}
+			bind:selected_color
+			{color_mode}
+			bind:recent_colors
+			bind:selected_size
+			dimensions={$dimensions}
+			parent_width={$editor_box.parent_width}
+			parent_height={$editor_box.parent_height}
+			parent_left={$editor_box.parent_left}
+			toolbar_box={$toolbar_box}
+		/>
+	</div>
+{/if}
+
+<style>
+	span {
+		position: absolute;
+		background: rgba(0, 0, 0, 0.5);
+		pointer-events: none;
+		border-radius: 50%;
+	}
+</style>