@gradio/imageeditor 0.1.0

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@gradio/imageeditor",
+  "version": "0.1.0",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "dependencies": {
+    "@types/tinycolor2": "^1.4.6",
+    "pixi.js": "^7.3.2",
+    "tinycolor2": "^1.6.0",
+    "@gradio/atoms": "^0.3.0",
+    "@gradio/icons": "^0.3.0",
+    "@gradio/client": "^0.8.1",
+    "@gradio/image": "^0.4.0",
+    "@gradio/upload": "^0.5.0",
+    "@gradio/statustracker": "^0.4.0",
+    "@gradio/wasm": "^0.3.0",
+    "@gradio/utils": "^0.2.0"
+  },
+  "main_changeset": true,
+  "main": "./Index.svelte",
+  "exports": {
+    ".": "./Index.svelte",
+    "./example": "./Example.svelte",
+    "./package.json": "./package.json"
+  }
+}

package/shared/Controls.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { IconButton } from "@gradio/atoms";
+	import { Clear, Undo, Redo, Check } from "@gradio/icons";
+
+	/**
+	 * Can the current image be undone?
+	 */
+	export let can_undo = false;
+	/**
+	 * Can the current image be redone?
+	 */
+	export let can_redo = false;
+
+	export let can_save = false;
+	export let changeable = false;
+
+	const dispatch = createEventDispatcher<{
+		/**
+		 * Remove the current image.
+		 */
+		remove_image: void;
+		/**
+		 * Undo the last action.
+		 */
+		undo: void;
+		/**
+		 * Redo the last action.
+		 */
+		redo: void;
+		/**
+		 * Save the current image.
+		 */
+		save: void;
+	}>();
+</script>
+
+<div class="controls-wrap">
+	<div class="row-wrap">
+		<IconButton
+			disabled={!can_undo}
+			Icon={Undo}
+			label="Undo"
+			on:click={(event) => {
+				dispatch("undo");
+				event.stopPropagation();
+			}}
+		/>
+		<IconButton
+			disabled={!can_redo}
+			Icon={Redo}
+			label="Redo"
+			on:click={(event) => {
+				dispatch("redo");
+				event.stopPropagation();
+			}}
+		/>
+		<IconButton
+			Icon={Clear}
+			label="Clear canvas"
+			on:click={(event) => {
+				dispatch("remove_image");
+				event.stopPropagation();
+			}}
+		/>
+	</div>
+	{#if changeable}
+		<div class="row-wrap save">
+			<IconButton
+				disabled={!can_save}
+				Icon={Check}
+				label="Save changes"
+				on:click={(event) => {
+					dispatch("save");
+					event.stopPropagation();
+				}}
+				background={"var(--color-green-500)"}
+				color={"#fff"}
+			/>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.controls-wrap {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-lg);
+		position: absolute;
+		top: var(--size-2);
+		right: var(--size-2);
+	}
+	.row-wrap {
+		display: flex;
+
+		justify-content: flex-end;
+		gap: var(--spacing-sm);
+		z-index: var(--layer-5);
+	}
+
+	.save :global(svg) {
+		transform: translateY(1px);
+	}
+</style>

package/shared/ImageEditor.svelte

@@ -0,0 +1,375 @@
+<script lang="ts" context="module">
+	import type { Writable, Readable } from "svelte/store";
+	import type { Spring } from "svelte/motion";
+	import { type PixiApp } from "./utils/pixi";
+	import { type CommandManager } from "./utils/commands";
+
+	export const EDITOR_KEY = Symbol("editor");
+	export type context_type = "bg" | "layers" | "crop" | "draw" | "erase";
+	type PartialRecord<K extends keyof any, T> = Partial<Record<K, T>>;
+	import { type tool } from "./tools";
+
+	export interface EditorContext {
+		pixi: Writable<PixiApp | null>;
+		current_layer: Writable<LayerScene | null>;
+		dimensions: Writable<[number, number]>;
+		editor_box: Writable<{
+			parent_width: number;
+			parent_height: number;
+			parent_left: number;
+			parent_top: number;
+			parent_right: number;
+			parent_bottom: number;
+			child_width: number;
+			child_height: number;
+			child_left: number;
+			child_top: number;
+			child_right: number;
+			child_bottom: number;
+		}>;
+		active_tool: Writable<tool>;
+		crop: Writable<[number, number, number, number]>;
+		position_spring: Spring<{
+			x: number;
+			y: number;
+		}>;
+		command_manager: CommandManager;
+		current_history: CommandManager["current_history"];
+		register_context: (
+			type: context_type,
+			{
+				reset_fn,
+				init_fn
+			}: {
+				reset_fn?: () => void;
+				init_fn?: (dimensions?: [number, number]) => void;
+			}
+		) => void;
+		reset: (clear_image: boolean, dimensions: [number, number]) => void;
+	}
+</script>
+
+<script lang="ts">
+	import { onMount, setContext, createEventDispatcher, tick } from "svelte";
+	import { writable } from "svelte/store";
+	import { spring } from "svelte/motion";
+	import { Rectangle } from "pixi.js";
+
+	import { command_manager } from "./utils/commands";
+
+	import { type LayerScene } from "./layers/utils";
+	import { create_pixi_app, type ImageBlobs } from "./utils/pixi";
+	import Controls from "./Controls.svelte";
+	export let antialias = true;
+	export let crop_size: [number, number] = [800, 600];
+	export let changeable = false;
+	export let history: boolean;
+	export let bg = false;
+	export let sources: ("clipboard" | "webcam" | "upload")[];
+	const dispatch = createEventDispatcher<{
+		save: void;
+	}>();
+	export let crop_constraint = false;
+
+	let dimensions = writable(crop_size);
+
+	let editor_box: EditorContext["editor_box"] = writable({
+		parent_width: 0,
+		parent_height: 0,
+		parent_top: 0,
+		parent_left: 0,
+		parent_right: 0,
+		parent_bottom: 0,
+		child_width: 0,
+		child_height: 0,
+		child_top: 0,
+		child_left: 0,
+		child_right: 0,
+		child_bottom: 0
+	});
+
+	const crop = writable<[number, number, number, number]>([0, 0, 1, 1]);
+	const position_spring = spring(
+		{ x: 0, y: 0 },
+		{
+			stiffness: 0.1,
+			damping: 0.5
+		}
+	);
+	const pixi = writable<PixiApp | null>(null);
+
+	const CommandManager = command_manager();
+
+	const { can_redo, can_undo, current_history } = CommandManager;
+
+	$: {
+		history = !!$current_history.previous || $active_tool !== "bg";
+	}
+
+	const active_tool: Writable<tool> = writable("bg");
+	const reset_context: Writable<PartialRecord<context_type, () => void>> =
+		writable({});
+	const init_context: Writable<
+		PartialRecord<context_type, (dimensions?: typeof $dimensions) => void>
+	> = writable({});
+	const contexts: Writable<context_type[]> = writable([]);
+
+	const sort_order = ["bg", "layers", "crop", "draw", "erase"] as const;
+	const editor_context = setContext<EditorContext>(EDITOR_KEY, {
+		pixi,
+		current_layer: writable(null),
+		dimensions,
+		editor_box,
+		active_tool,
+		crop,
+		position_spring,
+		command_manager: CommandManager,
+		current_history,
+		register_context: (
+			type: context_type,
+			{
+				reset_fn,
+				init_fn
+			}: {
+				reset_fn?: () => void;
+				init_fn?: (dimensions?: [number, number]) => void;
+			}
+		) => {
+			contexts.update((c) => [...c, type]);
+			init_context.update((c) => ({ ...c, [type]: init_fn }));
+			reset_context.update((c) => ({ ...c, [type]: reset_fn }));
+		},
+		reset: (clear_image: boolean, dimensions: [number, number]) => {
+			bg = false;
+
+			const _sorted_contexts = $contexts.sort((a, b) => {
+				return sort_order.indexOf(a) - sort_order.indexOf(b);
+			});
+			for (const k of _sorted_contexts) {
+				if (k in $reset_context && typeof $reset_context[k] === "function") {
+					$reset_context[k]?.();
+				}
+			}
+
+			for (const k of _sorted_contexts) {
+				if (k in $init_context && typeof $init_context[k] === "function") {
+					if (k === "bg" && !clear_image) {
+						continue;
+					} else {
+						$init_context[k]?.(dimensions);
+					}
+				}
+				CommandManager.reset();
+				$pixi?.resize?.(...dimensions);
+			}
+		}
+	});
+
+	let pixi_target: HTMLDivElement;
+
+	let canvas_wrap: HTMLDivElement;
+
+	function get_dimensions(parent: HTMLDivElement, child: HTMLDivElement): void {
+		if (!parent || !child) return;
+		const {
+			width: parent_width,
+			height: parent_height,
+			top: parent_top,
+			left: parent_left,
+			right: parent_right,
+			bottom: parent_bottom
+		} = canvas_wrap.getBoundingClientRect();
+		const {
+			width: child_width,
+			height: child_height,
+			top: child_top,
+			left: child_left,
+			right: child_right,
+			bottom: child_bottom
+		} = child.getBoundingClientRect();
+		editor_box.set({
+			child_width,
+			child_height,
+			child_left,
+			child_right,
+			child_top,
+			child_bottom,
+
+			parent_width,
+			parent_height,
+			parent_left,
+			parent_right,
+			parent_top,
+			parent_bottom
+		});
+	}
+
+	$: if (crop_constraint && bg && !history) {
+		set_crop();
+	}
+
+	function set_crop(): void {
+		requestAnimationFrame(() => {
+			tick().then((v) => ($active_tool = "crop"));
+		});
+	}
+
+	function reposition_canvas(): void {
+		if (!$editor_box) return;
+		const [l, t, w, h] = $crop;
+
+		const cx = l * $editor_box.child_width;
+		const cy = t * $editor_box.child_height;
+		const cw = w * $editor_box.child_width;
+		const ch = h * $editor_box.child_height;
+
+		const x = 0.5 * $editor_box.child_width - cx - cw / 2;
+		const y = 0.5 * $editor_box.child_height - cy - ch / 2;
+
+		position_spring.set({ x, y });
+	}
+
+	export async function get_blobs(): Promise<ImageBlobs> {
+		if (!$pixi || !$pixi.get_layers)
+			return { background: null, layers: [], composite: null };
+		const [l, t, w, h] = $crop;
+
+		return $pixi?.get_blobs(
+			$pixi.get_layers(),
+			new Rectangle(
+				l * $dimensions[0],
+				t * $dimensions[1],
+				w * $dimensions[0],
+				h * $dimensions[1]
+			),
+			$dimensions
+		);
+	}
+
+	$: $crop && reposition_canvas();
+	$: $position_spring && get_dimensions(canvas_wrap, pixi_target);
+
+	export function handle_remove(): void {
+		editor_context.reset(true, $dimensions);
+		if (!sources.length) {
+			set_tool("draw");
+		} else {
+			set_tool("bg");
+		}
+	}
+
+	onMount(() => {
+		const app = create_pixi_app(pixi_target, ...crop_size, antialias);
+
+		function resize(width: number, height: number): void {
+			app.resize(width, height);
+			dimensions.set([width, height]);
+		}
+
+		pixi.set({ ...app, resize });
+
+		const resizer = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				get_dimensions(canvas_wrap, pixi_target);
+			}
+		});
+
+		resizer.observe(canvas_wrap);
+		resizer.observe(pixi_target);
+
+		for (const k of $contexts) {
+			if (k in $init_context && typeof $init_context[k] === "function") {
+				$init_context[k]?.($dimensions);
+			}
+		}
+
+		resize(...$dimensions);
+
+		return () => {
+			$pixi?.destroy();
+			resizer.disconnect();
+			for (const k of $contexts) {
+				if (k in $reset_context) {
+					$reset_context[k]?.();
+				}
+			}
+		};
+	});
+
+	let saved_history: null | typeof $current_history = $current_history;
+
+	function handle_save(): void {
+		saved_history = $current_history;
+		dispatch("save");
+	}
+
+	export function set_tool(tool: tool): void {
+		$active_tool = tool;
+	}
+</script>
+
+<svelte:window on:scroll={() => get_dimensions(canvas_wrap, pixi_target)} />
+
+<div data-testid="image" class="image-container">
+	<Controls
+		can_undo={$can_undo}
+		can_redo={$can_redo}
+		can_save={saved_history !== $current_history}
+		{changeable}
+		on:undo={CommandManager.undo}
+		on:redo={CommandManager.redo}
+		on:remove_image={handle_remove}
+		on:save={handle_save}
+	/>
+	<div class="wrap" bind:this={canvas_wrap}>
+		<div
+			bind:this={pixi_target}
+			class="stage-wrap"
+			class:bg={!bg}
+			style:transform="translate({$position_spring.x}px, {$position_spring.y}px)"
+		></div>
+	</div>
+	<slot />
+	<div
+		class="border"
+		style:width="{$crop[2] * $editor_box.child_width}px"
+		style:height="{$crop[3] * $editor_box.child_height}px"
+		style:top="{$crop[1] * $editor_box.child_height +
+			($editor_box.child_top - $editor_box.parent_top)}px"
+		style:left="{$crop[0] * $editor_box.child_width +
+			($editor_box.child_left - $editor_box.parent_left)}px"
+	></div>
+</div>
+
+<style>
+	.wrap {
+		width: 100%;
+		height: 100%;
+		position: relative;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.border {
+		position: absolute;
+		border: var(--block-border-color) 1px solid;
+		pointer-events: none;
+	}
+
+	.stage-wrap {
+		margin: var(--size-8);
+		margin-bottom: var(--size-1);
+	}
+
+	.bg {
+	}
+
+	.image-container {
+		display: flex;
+		height: 100%;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		max-height: 100%;
+	}
+</style>

package/shared/InteractiveImageEditor.svelte

@@ -0,0 +1,211 @@
+<script lang="ts" context="module">
+	export interface EditorData {
+		background: FileData | null;
+		layers: FileData[] | null;
+		composite: FileData | null;
+	}
+
+	export interface ImageBlobs {
+		background: FileData | null;
+		layers: FileData[];
+		composite: FileData | null;
+	}
+</script>
+
+<script lang="ts">
+	import { type I18nFormatter } from "@gradio/utils";
+	import {
+		prepare_files,
+		upload,
+		normalise_file,
+		type FileData
+	} from "@gradio/client";
+
+	import ImageEditor from "./ImageEditor.svelte";
+	import Layers from "./layers/Layers.svelte";
+	import { type Brush as IBrush } from "./tools/Brush.svelte";
+	import { type Eraser } from "./tools/Brush.svelte";
+
+	export let brush: IBrush | null;
+	export let eraser: Eraser | null;
+	import { Tools, Crop, Brush, Sources } from "./tools";
+
+	export let sources: ("clipboard" | "webcam" | "upload")[];
+	export let crop_size: [number, number] | `${string}:${string}` | null = null;
+	export let i18n: I18nFormatter;
+	export let root: string;
+	export let proxy_url: string;
+	export let changeable = false;
+	export let value: EditorData | null = {
+		background: null,
+		layers: [],
+		composite: null
+	};
+	export let transforms: "crop"[] = ["crop"];
+
+	let editor: ImageEditor;
+
+	function is_not_null(o: Blob | null): o is Blob {
+		return !!o;
+	}
+
+	function is_file_data(o: null | FileData): o is FileData {
+		return !!o;
+	}
+
+	export async function get_data(): Promise<ImageBlobs> {
+		const blobs = await editor.get_blobs();
+
+		const bg = blobs.background
+			? upload(
+					await prepare_files([new File([blobs.background], "background.png")]),
+					root
+			  )
+			: Promise.resolve(null);
+
+		const layers = 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
+			? upload(
+					await prepare_files([new File([blobs.composite], "composite.png")]),
+					root
+			  )
+			: Promise.resolve(null);
+
+		const [background, composite_, ...layers_] = await Promise.all([
+			bg,
+			composite,
+			...layers
+		]);
+
+		return {
+			background: Array.isArray(background) ? background[0] : background,
+			layers: layers_
+				.flatMap((layer) => (Array.isArray(layer) ? layer : [layer]))
+				.filter(is_file_data),
+			composite: Array.isArray(composite_) ? composite_[0] : composite_
+		};
+	}
+
+	function handle_value(value: EditorData | null): void {
+		if (!editor) return;
+		if (value == null) {
+			editor.handle_remove();
+		}
+	}
+
+	$: handle_value(value);
+
+	$: crop_constraint = crop_size;
+	let bg = false;
+	let history = false;
+
+	$: editor &&
+		editor.set_tool &&
+		(sources && sources.length
+			? editor.set_tool("bg")
+			: editor.set_tool("draw"));
+</script>
+
+<ImageEditor
+	bind:this={editor}
+	{changeable}
+	on:save
+	bind:history
+	bind:bg
+	{sources}
+	crop_constraint={!!crop_constraint}
+>
+	<Tools {i18n}>
+		{#if sources && sources.length}
+			<Sources
+				{i18n}
+				{root}
+				{sources}
+				bind:bg
+				background_file={normalise_file(
+					value?.background || null,
+					root,
+					proxy_url
+				)}
+			></Sources>
+		{/if}
+		{#if transforms.includes("crop")}
+			<Crop {crop_constraint} />
+		{/if}
+		{#if brush}
+			<Brush
+				color_mode={brush.color_mode}
+				default_color={brush.default_color}
+				default_size={brush.default_size}
+				colors={brush.colors}
+				mode="draw"
+			/>
+		{/if}
+
+		{#if brush && eraser}
+			<Brush default_size={eraser.default_size} mode="erase" />
+		{/if}
+	</Tools>
+
+	<Layers
+		layer_files={normalise_file(value?.layers || null, root, proxy_url)}
+	/>
+
+	{#if !bg && !history}
+		<div class="empty wrap">
+			{#if sources && sources.length}
+				<div>Upload an image</div>
+			{/if}
+
+			{#if sources && sources.length && brush}
+				<div class="or">or</div>
+			{/if}
+			{#if brush}
+				<div>select the draw tool to start</div>
+			{/if}
+		</div>
+	{/if}
+</ImageEditor>
+
+<style>
+	.empty {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+
+		position: absolute;
+		height: 100%;
+		width: 100%;
+		left: 0;
+		right: 0;
+		margin: auto;
+		z-index: var(--layer-top);
+		text-align: center;
+		color: var(--body-text-color);
+	}
+
+	.wrap {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		min-height: var(--size-60);
+		color: var(--block-label-text-color);
+		line-height: var(--line-md);
+		height: 100%;
+		padding-top: var(--size-3);
+		font-size: var(--text-lg);
+		pointer-events: none;
+		transform: translateY(-30px);
+	}
+
+	.or {
+		color: var(--body-text-color-subdued);
+	}
+</style>