gradio/js/imageeditor/shared/InteractiveImageEditor.svelte

<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 { createEventDispatcher } from "svelte";

	import { type I18nFormatter } from "@gradio/utils";

	import { prepare_files, type FileData, type Client } 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";



	import { Tools, Crop, Brush, Sources } from "./tools";

	import { BlockLabel } from "@gradio/atoms";

	import { Image as ImageIcon } from "@gradio/icons";

	import { inject } from "./utils/parse_placeholder";



	export let brush: IBrush | null;

	export let eraser: Eraser | null;

	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 label: string | undefined = undefined;

	export let show_label: boolean;

	export let changeable = false;

	export let value: EditorData | null = {

		background: null,

		layers: [],

		composite: null

	};

	export let transforms: "crop"[] = ["crop"];

	export let layers: boolean;

	export let accept_blobs: (a: any) => void;

	export let status: "pending" | "complete" | "error" = "complete";

	export let canvas_size: [number, number] | undefined;

	export let realtime: boolean;

	export let upload: Client["upload"];

	export let stream_handler: Client["stream"];

	export let dragging: boolean;

	export let placeholder: string | undefined = undefined;

	export let height = 400;



	const dispatch = createEventDispatcher<{

		clear?: never;

		upload?: never;

		change?: never;

	}>();



	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;

	}



	$: if (bg) dispatch("upload");



	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;



	export let image_id: null | string = null;



	$: editor &&

		editor.set_tool &&

		(sources && sources.length

			? editor.set_tool("bg")

			: editor.set_tool("draw"));



	type BinaryImages = [string, string, File, number | null][];



	function nextframe(): Promise<void> {

		return new Promise((resolve) => setTimeout(() => resolve(), 30));

	}



	let uploading = false;

	let pending = false;

	async function handle_change(e: CustomEvent<Blob | any>): Promise<void> {

		if (!realtime) return;

		if (uploading) {

			pending = true;

			return;

		}



		uploading = true;



		await nextframe();

		const blobs = await editor.get_blobs();



		const images: BinaryImages = [];



		let id = Math.random().toString(36).substring(2);



		if (blobs.background)

			images.push([

				id,

				"background",

				new File([blobs.background], "background.png"),

				null

			]);

		if (blobs.composite)

			images.push([

				id,

				"composite",

				new File([blobs.composite], "composite.png"),

				null

			]);

		blobs.layers.forEach((layer, i) => {

			if (layer)

				images.push([

					id as string,

					`layer`,

					new File([layer], `layer_${i}.png`),

					i

				]);

		});



		await Promise.all(

			images.map(async ([image_id, type, data, index]) => {

				return accept_blobs({

					binary: true,

					data: { file: data, id: image_id, type, index }

				});

			})

		);

		image_id = id;

		dispatch("change");



		await nextframe();

		uploading = false;

		if (pending) {

			pending = false;

			uploading = false;

			handle_change(e);

		}

	}



	let active_mode: "webcam" | "color" | null = null;

	let editor_height = height - 100;



	$: [heading, paragraph] = placeholder ? inject(placeholder) : [false, false];

</script>



<BlockLabel

	{show_label}

	Icon={ImageIcon}

	label={label || i18n("image.image")}

/>

<ImageEditor

	{canvas_size}

	crop_size={Array.isArray(crop_size) ? crop_size : undefined}

	bind:this={editor}

	bind:height={editor_height}

	parent_height={height}

	{changeable}

	on:save

	on:change={handle_change}

	on:clear={() => dispatch("clear")}

	bind:history

	bind:bg

	{sources}

	crop_constraint={!!crop_constraint}

>

	<Tools {i18n}>

		<Layers layer_files={value?.layers || null} enable_layers={layers} />



		<Sources

			bind:dragging

			{i18n}

			{root}

			{sources}

			{upload}

			{stream_handler}

			bind:bg

			bind:active_mode

			background_file={value?.background || value?.composite || null}

		></Sources>



		{#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>



	{#if !bg && !history && active_mode !== "webcam" && status !== "error"}

		<div class="empty wrap" style:height={`${editor_height}px`}>

			{#if sources && sources.length}

				{#if heading || paragraph}

					{#if heading}

						<h2>{heading}</h2>

					{/if}

					{#if paragraph}

						<p>{paragraph}</p>

					{/if}

				{:else}

					<div>Upload an image</div>

				{/if}

			{/if}



			{#if sources && sources.length && brush && !placeholder}

				<div class="or">or</div>

			{/if}

			{#if brush && !placeholder}

				<div>select the draw tool to start</div>

			{/if}

		</div>
	{/if}
</ImageEditor>

<style>

	h2 {

		font-size: var(--text-xl);

	}



	p,

	h2 {

		white-space: pre-line;

	}



	.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);

		top: var(--size-8);

	}



	.wrap {

		display: flex;

		flex-direction: column;

		justify-content: center;

		align-items: center;

		color: var(--block-label-text-color);

		line-height: var(--line-md);

		font-size: var(--text-md);

		pointer-events: none;

	}



	.or {

		color: var(--body-text-color-subdued);

	}

</style>