@gradio/imageeditor 0.9.0 → 0.10.1

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

@@ -0,0 +1 @@
+export declare function inject(text: string): [string | false, string | false];

package/dist/shared/utils/parse_placeholder.js

@@ -0,0 +1,19 @@
+const RE_HEADING = /^(#\s*)(.+)$/m;
+export function inject(text) {
+    const trimmed_text = text.trim();
+    const heading_match = trimmed_text.match(RE_HEADING);
+    if (!heading_match) {
+        return [false, trimmed_text || false];
+    }
+    const [full_match, , heading_content] = heading_match;
+    const _heading = heading_content.trim();
+    if (trimmed_text === full_match) {
+        return [_heading, false];
+    }
+    const heading_end_index = heading_match.index !== undefined
+        ? heading_match.index + full_match.length
+        : 0;
+    const remaining_text = trimmed_text.substring(heading_end_index).trim();
+    const _paragraph = remaining_text || false;
+    return [_heading, _paragraph];
+}

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

@@ -0,0 +1,76 @@
+import { Container, Graphics, Rectangle, type IRenderer, type ICanvas } from "pixi.js";
+import { type LayerScene } from "../layers/utils";
+/**
+ * interface holding references to pixi app components
+ */
+export interface PixiApp {
+    /**
+     * The pixi container for layers
+     */
+    layer_container: Container;
+    /**
+     * The pixi container for background images and colors
+     */
+    background_container: Container;
+    /**
+     * The pixi renderer
+     */
+    renderer: IRenderer;
+    /**
+     * The pixi canvas
+     */
+    view: HTMLCanvasElement & ICanvas;
+    /**
+     * The pixi container for masking
+     */
+    mask_container: Container;
+    destroy(): void;
+    /**
+     * Resizes the pixi app
+     * @param width the new width
+     * @param height the new height
+     */
+    resize(width: number, height: number): void;
+    /**
+     * Gets the blobs for the background, layers, and composite
+     * @param bounds the bounds of the canvas
+     * @returns a promise with the blobs
+     */
+    get_blobs(layers: LayerScene[], bounds: Rectangle, dimensions: [number, number]): Promise<ImageBlobs>;
+    /**
+     * Gets the layers
+     */
+    get_layers?: () => LayerScene[];
+}
+/**
+ * Creates a PIXI app and attaches it to a DOM element
+ * @param target DOM element to attach PIXI app to
+ * @param width Width of the PIXI app
+ * @param height Height of the PIXI app
+ * @param antialias Whether to use antialiasing
+ * @returns object with pixi container and renderer
+ */
+export declare function create_pixi_app({ target, dimensions: [width, height], antialias }: {
+    target: HTMLElement;
+    dimensions: [number, number];
+    antialias: boolean;
+}): PixiApp;
+/**
+ * Creates a pixi graphics object.
+ * @param z_index the z index of the graphics object
+ * @returns a graphics object
+ */
+export declare function make_graphics(z_index: number): Graphics;
+/**
+ * Clamps a number between a min and max value.
+ * @param n The number to clamp.
+ * @param min The minimum value.
+ * @param max The maximum value.
+ * @returns The clamped number.
+ */
+export declare function clamp(n: number, min: number, max: number): number;
+export interface ImageBlobs {
+    background: Blob | null;
+    layers: (Blob | null)[];
+    composite: Blob | null;
+}

package/dist/shared/utils/pixi.js

@@ -0,0 +1,152 @@
+import { Application, Container, Graphics, Sprite, Rectangle, RenderTexture } from "pixi.js";
+import {} from "../layers/utils";
+/**
+ * Creates a PIXI app and attaches it to a DOM element
+ * @param target DOM element to attach PIXI app to
+ * @param width Width of the PIXI app
+ * @param height Height of the PIXI app
+ * @param antialias Whether to use antialiasing
+ * @returns object with pixi container and renderer
+ */
+export function create_pixi_app({ target, dimensions: [width, height], antialias }) {
+    const ratio = window.devicePixelRatio || 1;
+    const app = new Application({
+        width,
+        height,
+        antialias: antialias,
+        backgroundAlpha: 0,
+        eventMode: "static"
+    });
+    const view = app.view;
+    // ensure that we can sort the background and layer containers
+    app.stage.sortableChildren = true;
+    view.style.maxWidth = `${width / ratio}px`;
+    view.style.maxHeight = `${height / ratio}px`;
+    view.style.width = "100%";
+    view.style.height = "100%";
+    target.appendChild(app.view);
+    // we need a separate container for the background so that we can
+    // clear its content without knowing too much about its children
+    const background_container = new Container();
+    background_container.zIndex = 0;
+    const layer_container = new Container();
+    layer_container.zIndex = 1;
+    // ensure we can reorder  layers via zIndex
+    layer_container.sortableChildren = true;
+    const mask_container = new Container();
+    mask_container.zIndex = 1;
+    const composite_container = new Container();
+    composite_container.zIndex = 0;
+    mask_container.addChild(background_container);
+    mask_container.addChild(layer_container);
+    app.stage.addChild(mask_container);
+    app.stage.addChild(composite_container);
+    const mask = new Graphics();
+    let text = RenderTexture.create({
+        width,
+        height
+    });
+    const sprite = new Sprite(text);
+    mask_container.mask = sprite;
+    app.render();
+    function reset_mask(width, height) {
+        background_container.removeChildren();
+        mask.beginFill(0xffffff, 1);
+        mask.drawRect(0, 0, width, height);
+        mask.endFill();
+        text = RenderTexture.create({
+            width,
+            height
+        });
+        app.renderer.render(mask, {
+            renderTexture: text
+        });
+        const sprite = new Sprite(text);
+        mask_container.mask = sprite;
+    }
+    function resize(width, height) {
+        app.renderer.resize(width, height);
+        view.style.maxWidth = `${width / ratio}px`;
+        view.style.maxHeight = `${height / ratio}px`;
+        reset_mask(width, height);
+    }
+    async function get_blobs(_layers, bounds, [w, h]) {
+        const background = await get_canvas_blob(app.renderer, background_container, bounds, w, h);
+        const layers = await Promise.all(_layers.map((layer) => get_canvas_blob(app.renderer, layer.composite, bounds, w, h)));
+        const composite = await get_canvas_blob(app.renderer, mask_container, bounds, w, h);
+        return {
+            background,
+            layers,
+            composite
+        };
+    }
+    return {
+        layer_container,
+        renderer: app.renderer,
+        destroy: () => app.destroy(true),
+        view: app.view,
+        background_container,
+        mask_container,
+        resize,
+        get_blobs
+    };
+}
+/**
+ * Creates a pixi graphics object.
+ * @param z_index the z index of the graphics object
+ * @returns a graphics object
+ */
+export function make_graphics(z_index) {
+    const graphics = new Graphics();
+    graphics.eventMode = "none";
+    graphics.zIndex = z_index;
+    return graphics;
+}
+/**
+ * Clamps a number between a min and max value.
+ * @param n The number to clamp.
+ * @param min The minimum value.
+ * @param max The maximum value.
+ * @returns The clamped number.
+ */
+export function clamp(n, min, max) {
+    return n < min ? min : n > max ? max : n;
+}
+/**
+ * Generates a blob from a pixi object.
+ * @param renderer The pixi renderer.
+ * @param obj The pixi object to generate a blob from.
+ * @param bounds The bounds of the canvas that we wish to extract
+ * @param width The full width of the canvas
+ * @param height The full height of the canvas
+ * @returns A promise with the blob.
+ */
+function get_canvas_blob(renderer, obj, bounds, width, height) {
+    return new Promise((resolve) => {
+        // for some reason pixi won't extract a cropped canvas without distorting it
+        // so we have to extract the whole canvas and crop it manually
+        const src_canvas = renderer.extract.canvas(obj, new Rectangle(0, 0, width, height));
+        // Create a new canvas for the cropped area with the appropriate size
+        let dest_canvas = document.createElement("canvas");
+        dest_canvas.width = bounds.width;
+        dest_canvas.height = bounds.height;
+        let dest_ctx = dest_canvas.getContext("2d");
+        if (!dest_ctx) {
+            resolve(null);
+            throw new Error("Could not create canvas context");
+        }
+        // Draw the cropped area onto the destination canvas
+        dest_ctx.drawImage(src_canvas, 
+        // this is the area of the source that we want to copy (the crop box)
+        bounds.x, bounds.y, bounds.width, bounds.height, 
+        // this is where we want to draw the crop box on the destination canvas
+        0, 0, bounds.width, bounds.height);
+        // we grab a blob here so we can upload it
+        dest_canvas.toBlob?.((blob) => {
+            if (!blob) {
+                resolve(null);
+            }
+            resolve(blob);
+        });
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,23 +10,39 @@
     "@types/tinycolor2": "^1.4.6",
     "pixi.js": "^7.3.2",
     "tinycolor2": "^1.6.0",
-    "@gradio/atoms": "^0.7.9",
-    "@gradio/client": "^1.5.0",
-    "@gradio/icons": "^0.7.0",
-    "@gradio/image": "^0.14.0",
-    "@gradio/statustracker": "^0.7.4",
-    "@gradio/utils": "^0.5.2",
-    "@gradio/wasm": "^0.12.0",
-    "@gradio/upload": "^0.12.2"
+    "@gradio/client": "^1.5.2",
+    "@gradio/icons": "^0.7.2",
+    "@gradio/atoms": "^0.8.1",
+    "@gradio/image": "^0.15.1",
+    "@gradio/upload": "^0.12.4",
+    "@gradio/statustracker": "^0.7.6",
+    "@gradio/utils": "^0.6.1",
+    "@gradio/wasm": "^0.13.1"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.10.2"
+    "@gradio/preview": "^0.11.1"
   },
   "main_changeset": true,
   "main": "./Index.svelte",
   "exports": {
-    ".": "./Index.svelte",
-    "./example": "./Example.svelte",
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
     "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/imageeditor"
   }
 }

package/shared/ImageEditor.svelte

@@ -28,7 +28,7 @@
 			child_bottom: number;
 		}>;
 		active_tool: Writable<tool>;
-		toolbar_box: Writable<DOMRect>;
+		toolbar_box: Writable<DOMRect | Record<string, never>>;
 		crop: Writable<[number, number, number, number]>;
 		position_spring: Spring<{
 			x: number;
@@ -74,6 +74,7 @@
 	}>();
 	export let crop_constraint = false;
 	export let canvas_size: [number, number] | undefined;
+	export let parent_height: number;
 
 	$: orig_canvas_size = canvas_size;
 
@@ -84,13 +85,13 @@
 
 	let editor_box: EditorContext["editor_box"] = writable({
 		parent_width: 0,
-		parent_height: 0,
+		parent_height: parent_height,
 		parent_top: 0,
 		parent_left: 0,
 		parent_right: 0,
 		parent_bottom: 0,
 		child_width: 0,
-		child_height: 0,
+		child_height: parent_height,
 		child_top: 0,
 		child_left: 0,
 		child_right: 0,
@@ -118,6 +119,7 @@
 	$: {
 		history = !!$current_history.previous || $active_tool !== "bg";
 	}
+	const is_browser = typeof window !== "undefined";
 
 	const active_tool: Writable<tool> = writable("bg");
 	const reset_context: Writable<PartialRecord<context_type, () => void>> =
@@ -126,7 +128,9 @@
 		PartialRecord<context_type, (dimensions?: typeof $dimensions) => void>
 	> = writable({});
 	const contexts: Writable<context_type[]> = writable([]);
-	const toolbar_box: Writable<DOMRect> = writable(new DOMRect());
+	const toolbar_box: Writable<DOMRect | Record<string, never>> = writable(
+		is_browser ? new DOMRect() : {}
+	);
 
 	const sort_order = ["bg", "layers", "crop", "draw", "erase"] as const;
 	const editor_context = setContext<EditorContext>(EDITOR_KEY, {

package/shared/InteractiveImageEditor.svelte

@@ -25,6 +25,7 @@
 	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;
@@ -49,6 +50,8 @@
 	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;
@@ -196,7 +199,9 @@
 	}
 
 	let active_mode: "webcam" | "color" | null = null;
-	let editor_height = 0;
+	let editor_height = height - 100;
+
+	$: [heading, paragraph] = placeholder ? inject(placeholder) : [false, false];
 </script>
 
 <BlockLabel
@@ -209,6 +214,7 @@
 	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}
@@ -254,13 +260,22 @@
 	{#if !bg && !history && active_mode !== "webcam" && status !== "error"}
 		<div class="empty wrap" style:height={`${editor_height}px`}>
 			{#if sources && sources.length}
-				<div>Upload an image</div>
+				{#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}
+			{#if sources && sources.length && brush && !placeholder}
 				<div class="or">or</div>
 			{/if}
-			{#if brush}
+			{#if brush && !placeholder}
 				<div>select the draw tool to start</div>
 			{/if}
 		</div>
@@ -268,6 +283,15 @@
 </ImageEditor>
 
 <style>
+	h2 {
+		font-size: var(--text-xl);
+	}
+
+	p,
+	h2 {
+		white-space: pre-line;
+	}
+
 	.empty {
 		display: flex;
 		flex-direction: column;
@@ -292,7 +316,7 @@
 		align-items: center;
 		color: var(--block-label-text-color);
 		line-height: var(--line-md);
-		font-size: var(--text-lg);
+		font-size: var(--text-md);
 		pointer-events: none;
 	}
 

package/shared/tools/Brush.svelte

@@ -187,12 +187,12 @@
 			toggle_listeners("off");
 		}
 	});
+	const toggle_options = debounce_toggle();
 
+	const unregister = register_tool(mode, {
+		cb: toggle_options
+	});
 	onMount(() => {
-		const unregister = register_tool(mode, {
-			cb: toggle_options
-		});
-
 		return () => {
 			unregister();
 			toggle_listeners("off");
@@ -230,8 +230,6 @@
 			timeout = setTimeout(later, 100);
 		};
 	}
-
-	const toggle_options = debounce_toggle();
 </script>
 
 <svelte:window

package/shared/tools/BrushOptions.svelte

@@ -17,7 +17,7 @@
 	export let parent_width: number;
 	export let parent_height: number;
 	export let parent_left: number;
-	export let toolbar_box: DOMRect;
+	export let toolbar_box: DOMRect | Record<string, never>;
 	export let show_swatch: boolean;
 
 	let color_picker = false;

package/shared/tools/Crop.svelte

@@ -170,7 +170,8 @@
 
 	$: $editor_box && get_measurements();
 
-	onMount(() => register_tool("crop"));
+	const unregister = register_tool("crop");
+	onDestroy(unregister);
 </script>
 
 {#if $active_tool === "crop" && measured}

package/shared/utils/parse_placeholder.ts

@@ -0,0 +1,27 @@
+const RE_HEADING = /^(#\s*)(.+)$/m;
+
+export function inject(text: string): [string | false, string | false] {
+	const trimmed_text = text.trim();
+
+	const heading_match = trimmed_text.match(RE_HEADING);
+	if (!heading_match) {
+		return [false, trimmed_text || false];
+	}
+
+	const [full_match, , heading_content] = heading_match;
+	const _heading = heading_content.trim();
+
+	if (trimmed_text === full_match) {
+		return [_heading, false];
+	}
+
+	const heading_end_index =
+		heading_match.index !== undefined
+			? heading_match.index + full_match.length
+			: 0;
+	const remaining_text = trimmed_text.substring(heading_end_index).trim();
+
+	const _paragraph = remaining_text || false;
+
+	return [_heading, _paragraph];
+}

package/shared/utils/pixi.ts

@@ -11,7 +11,6 @@ import {
 } from "pixi.js";
 
 import { type LayerScene } from "../layers/utils";
-import { background } from "@storybook/theming";
 
 /**
  * interface holding references to pixi app components