@gradio/imageeditor 0.10.0 → 0.11.0-beta.1

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @gradio/imageeditor
 
+## 0.11.0-beta.1
+
+### Features
+
+- [#9201](https://github.com/gradio-app/gradio/pull/9201) [`5492e74`](https://github.com/gradio-app/gradio/commit/5492e742b1f1fa618208cce523f50ad22a6e86f1) - Move buttons from chat_interface into Chatbot.  Thanks @freddyaboulton!
+- [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/image@0.16.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+- @gradio/wasm@0.13.1-beta.1
+
+## 0.10.1-beta.0
+
+### Fixes
+
+- [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/utils@0.7.0-beta.0
+- @gradio/statustracker@0.8.0-beta.0
+- @gradio/atoms@0.8.1-beta.0
+- @gradio/client@1.6.0-beta.0
+- @gradio/icons@0.8.0-beta.0
+- @gradio/upload@0.12.4-beta.0
+- @gradio/wasm@0.13.1-beta.0
+- @gradio/image@0.16.0-beta.0
+
 ## 0.10.0
 
 ### Features

package/Index.svelte

@@ -29,7 +29,7 @@
 	export let root: string;
 	export let value_is_output = false;
 
-	export let height: number | undefined;
+	export let height: number | undefined = 400;
 	export let width: number | undefined;
 
 	export let _selectable = false;
@@ -90,10 +90,12 @@
 	let dragging: boolean;
 
 	$: value && handle_change();
+	const is_browser = typeof window !== "undefined";
+	const raf = is_browser ? window.requestAnimationFrame : () => {};
 
 	function wait_for_next_frame(): Promise<void> {
 		return new Promise((resolve) => {
-			requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+			raf(() => raf(() => resolve()));
 		});
 	}
 
@@ -192,6 +194,7 @@
 			{sources}
 			{label}
 			{show_label}
+			{height}
 			on:save={(e) => handle_save()}
 			on:edit={() => gradio.dispatch("edit")}
 			on:clear={() => gradio.dispatch("clear")}

package/dist/Example.svelte

@@ -0,0 +1,41 @@
+<script>import { BaseImage as Image } from "@gradio/image";
+export let value;
+export let type;
+export let selected = false;
+</script>
+
+<div
+	class="container"
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	<Image src={value.composite?.url || value.background?.url} alt="" />
+</div>
+
+<style>
+	.container :global(img) {
+		width: 100%;
+		height: 100%;
+	}
+
+	.container.selected {
+		border-color: var(--border-color-accent);
+	}
+
+	.container.table {
+		margin: 0 auto;
+		border: 2px solid var(--border-color-primary);
+		border-radius: var(--radius-lg);
+		width: var(--size-20);
+		height: var(--size-20);
+		object-fit: cover;
+	}
+
+	.container.gallery {
+		border: 2px solid var(--border-color-primary);
+		height: var(--size-20);
+		max-height: var(--size-20);
+		object-fit: cover;
+	}
+</style>

package/dist/Example.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { EditorData } from "./shared/InteractiveImageEditor.svelte";
+declare const __propDef: {
+    props: {
+        value: EditorData;
+        type: "gallery" | "table";
+        selected?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ExampleProps = typeof __propDef.props;
+export type ExampleEvents = typeof __propDef.events;
+export type ExampleSlots = typeof __propDef.slots;
+export default class Example extends SvelteComponent<ExampleProps, ExampleEvents, ExampleSlots> {
+}
+export {};

package/dist/Index.svelte

@@ -0,0 +1,184 @@
+<svelte:options accessors={true} immutable={true} />
+
+<script>import { BaseStaticImage as StaticImage } from "@gradio/image";
+import InteractiveImageEditor from "./shared/InteractiveImageEditor.svelte";
+import { Block } from "@gradio/atoms";
+import { StatusTracker } from "@gradio/statustracker";
+import { tick } from "svelte";
+export let elem_id = "";
+export let elem_classes = [];
+export let visible = true;
+export let value = {
+  background: null,
+  layers: [],
+  composite: null
+};
+export let label;
+export let show_label;
+export let show_download_button;
+export let root;
+export let value_is_output = false;
+export let height = 400;
+export let width;
+export let _selectable = false;
+export let container = true;
+export let scale = null;
+export let min_width = void 0;
+export let loading_status;
+export let show_share_button = false;
+export let sources = [
+  "upload",
+  "clipboard",
+  "webcam"
+];
+export let interactive;
+export let placeholder;
+export let brush;
+export let eraser;
+export let crop_size = null;
+export let transforms = ["crop"];
+export let layers = true;
+export let attached_events = [];
+export let server;
+export let canvas_size;
+export let show_fullscreen_button = true;
+export let gradio;
+let editor_instance;
+let image_id = null;
+export async function get_value() {
+  if (image_id) {
+    const val = { id: image_id };
+    image_id = null;
+    return val;
+  }
+  const blobs = await editor_instance.get_data();
+  return blobs;
+}
+let dragging;
+$:
+  value && handle_change();
+const is_browser = typeof window !== "undefined";
+const raf = is_browser ? window.requestAnimationFrame : () => {
+};
+function wait_for_next_frame() {
+  return new Promise((resolve) => {
+    raf(() => raf(() => resolve()));
+  });
+}
+async function handle_change() {
+  await wait_for_next_frame();
+  if (value && (value.background || value.layers?.length || value.composite)) {
+    gradio.dispatch("change");
+  }
+}
+function handle_save() {
+  gradio.dispatch("apply");
+}
+function handle_history_change() {
+  gradio.dispatch("change");
+  if (!value_is_output) {
+    gradio.dispatch("input");
+    tick().then((_) => value_is_output = false);
+  }
+}
+$:
+  has_value = value?.background || value?.layers?.length || value?.composite;
+</script>
+
+{#if !interactive}
+	<Block
+		{visible}
+		variant={"solid"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={false}
+		{elem_id}
+		{elem_classes}
+		height={height || undefined}
+		{width}
+		allow_overflow={false}
+		{container}
+		{scale}
+		{min_width}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+		/>
+		<StaticImage
+			on:select={({ detail }) => gradio.dispatch("select", detail)}
+			on:share={({ detail }) => gradio.dispatch("share", detail)}
+			on:error={({ detail }) => gradio.dispatch("error", detail)}
+			value={value?.composite || null}
+			{label}
+			{show_label}
+			{show_download_button}
+			selectable={_selectable}
+			{show_share_button}
+			i18n={gradio.i18n}
+			{show_fullscreen_button}
+		/>
+	</Block>
+{:else}
+	<Block
+		{visible}
+		variant={has_value ? "solid" : "dashed"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={false}
+		{elem_id}
+		{elem_classes}
+		height={height || undefined}
+		{width}
+		allow_overflow={false}
+		{container}
+		{scale}
+		{min_width}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+		/>
+
+		<InteractiveImageEditor
+			bind:dragging
+			{canvas_size}
+			on:change={() => handle_history_change()}
+			bind:image_id
+			{crop_size}
+			{value}
+			bind:this={editor_instance}
+			{root}
+			{sources}
+			{label}
+			{show_label}
+			{height}
+			on:save={(e) => handle_save()}
+			on:edit={() => gradio.dispatch("edit")}
+			on:clear={() => gradio.dispatch("clear")}
+			on:drag={({ detail }) => (dragging = detail)}
+			on:upload={() => gradio.dispatch("upload")}
+			on:share={({ detail }) => gradio.dispatch("share", detail)}
+			on:error={({ detail }) => {
+				loading_status = loading_status || {};
+				loading_status.status = "error";
+				gradio.dispatch("error", detail);
+			}}
+			on:error
+			{brush}
+			{eraser}
+			changeable={attached_events.includes("apply")}
+			realtime={attached_events.includes("change")}
+			i18n={gradio.i18n}
+			{transforms}
+			accept_blobs={server.accept_blobs}
+			{layers}
+			status={loading_status?.status}
+			upload={gradio.client.upload}
+			stream_handler={gradio.client.stream}
+			{placeholder}
+		></InteractiveImageEditor>
+	</Block>
+{/if}

package/dist/Index.svelte.d.ts

@@ -0,0 +1,192 @@
+import { SvelteComponent } from "svelte";
+import type { Brush, Eraser } from "./shared/tools/Brush.svelte";
+import type { EditorData, ImageBlobs } from "./shared/InteractiveImageEditor.svelte";
+import type { Gradio, SelectData } from "@gradio/utils";
+import type { LoadingStatus } from "@gradio/statustracker";
+declare const __propDef: {
+    props: {
+        elem_id?: string | undefined;
+        elem_classes?: string[] | undefined;
+        visible?: boolean | undefined;
+        value?: (EditorData | null) | undefined;
+        label: string;
+        show_label: boolean;
+        show_download_button: boolean;
+        root: string;
+        value_is_output?: boolean | undefined;
+        height?: number | undefined;
+        width: number | undefined;
+        _selectable?: boolean | undefined;
+        container?: boolean | undefined;
+        scale?: (number | null) | undefined;
+        min_width?: number | undefined;
+        loading_status: LoadingStatus;
+        show_share_button?: boolean | undefined;
+        sources?: ("clipboard" | "webcam" | "upload")[] | undefined;
+        interactive: boolean;
+        placeholder: string | undefined;
+        brush: Brush;
+        eraser: Eraser;
+        crop_size?: ([number, number] | `${string}:${string}` | null) | undefined;
+        transforms?: "crop"[] | undefined;
+        layers?: boolean | undefined;
+        attached_events?: string[] | undefined;
+        server: {
+            accept_blobs: (a: any) => void;
+        };
+        canvas_size: [number, number] | undefined;
+        show_fullscreen_button?: boolean | undefined;
+        gradio: Gradio<{
+            change: never;
+            error: string;
+            input: never;
+            edit: never;
+            drag: never;
+            apply: never;
+            upload: never;
+            clear: never;
+            select: SelectData;
+            share: ShareData;
+            clear_status: LoadingStatus;
+        }>;
+        get_value?: (() => Promise<ImageBlobs | {
+            id: string;
+        }>) | undefined;
+    };
+    events: {
+        error: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IndexProps = typeof __propDef.props;
+export type IndexEvents = typeof __propDef.events;
+export type IndexSlots = typeof __propDef.slots;
+export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
+    get get_value(): () => Promise<ImageBlobs | {
+        id: string;
+    }>;
+    get elem_id(): string | undefined;
+    /**accessor*/
+    set elem_id(_: string | undefined);
+    get elem_classes(): string[] | undefined;
+    /**accessor*/
+    set elem_classes(_: string[] | undefined);
+    get visible(): boolean | undefined;
+    /**accessor*/
+    set visible(_: boolean | undefined);
+    get value(): EditorData | null | undefined;
+    /**accessor*/
+    set value(_: EditorData | null | undefined);
+    get label(): string;
+    /**accessor*/
+    set label(_: string);
+    get show_label(): boolean;
+    /**accessor*/
+    set show_label(_: boolean);
+    get show_download_button(): boolean;
+    /**accessor*/
+    set show_download_button(_: boolean);
+    get root(): string;
+    /**accessor*/
+    set root(_: string);
+    get value_is_output(): boolean | undefined;
+    /**accessor*/
+    set value_is_output(_: boolean | undefined);
+    get height(): number | undefined;
+    /**accessor*/
+    set height(_: number | undefined);
+    get width(): number | undefined;
+    /**accessor*/
+    set width(_: number | undefined);
+    get _selectable(): boolean | undefined;
+    /**accessor*/
+    set _selectable(_: boolean | undefined);
+    get container(): boolean | undefined;
+    /**accessor*/
+    set container(_: boolean | undefined);
+    get scale(): number | null | undefined;
+    /**accessor*/
+    set scale(_: number | null | undefined);
+    get min_width(): number | undefined;
+    /**accessor*/
+    set min_width(_: number | undefined);
+    get loading_status(): LoadingStatus;
+    /**accessor*/
+    set loading_status(_: LoadingStatus);
+    get show_share_button(): boolean | undefined;
+    /**accessor*/
+    set show_share_button(_: boolean | undefined);
+    get sources(): ("upload" | "clipboard" | "webcam")[] | undefined;
+    /**accessor*/
+    set sources(_: ("upload" | "clipboard" | "webcam")[] | undefined);
+    get interactive(): boolean;
+    /**accessor*/
+    set interactive(_: boolean);
+    get placeholder(): string | undefined;
+    /**accessor*/
+    set placeholder(_: string | undefined);
+    get brush(): Brush;
+    /**accessor*/
+    set brush(_: Brush);
+    get eraser(): Eraser;
+    /**accessor*/
+    set eraser(_: Eraser);
+    get crop_size(): [number, number] | `${string}:${string}` | null | undefined;
+    /**accessor*/
+    set crop_size(_: [number, number] | `${string}:${string}` | null | undefined);
+    get transforms(): "crop"[] | undefined;
+    /**accessor*/
+    set transforms(_: "crop"[] | undefined);
+    get layers(): boolean | undefined;
+    /**accessor*/
+    set layers(_: boolean | undefined);
+    get attached_events(): string[] | undefined;
+    /**accessor*/
+    set attached_events(_: string[] | undefined);
+    get server(): {
+        accept_blobs: (a: any) => void;
+    };
+    /**accessor*/
+    set server(_: {
+        accept_blobs: (a: any) => void;
+    });
+    get canvas_size(): [number, number] | undefined;
+    /**accessor*/
+    set canvas_size(_: [number, number] | undefined);
+    get show_fullscreen_button(): boolean | undefined;
+    /**accessor*/
+    set show_fullscreen_button(_: boolean | undefined);
+    get gradio(): Gradio<{
+        change: never;
+        error: string;
+        input: never;
+        edit: never;
+        drag: never;
+        apply: never;
+        upload: never;
+        clear: never;
+        select: SelectData;
+        share: ShareData;
+        clear_status: LoadingStatus;
+    }>;
+    /**accessor*/
+    set gradio(_: Gradio<{
+        change: never;
+        error: string;
+        input: never;
+        edit: never;
+        drag: never;
+        apply: never;
+        upload: never;
+        clear: never;
+        select: SelectData;
+        share: ShareData;
+        clear_status: LoadingStatus;
+    }>);
+    get undefined(): any;
+    /**accessor*/
+    set undefined(_: any);
+}
+export {};

package/dist/shared/Controls.svelte

@@ -0,0 +1,73 @@
+<script>import { createEventDispatcher } from "svelte";
+import { IconButton } from "@gradio/atoms";
+import { Clear, Undo, Redo, Check, Trash } from "@gradio/icons";
+export let can_undo = false;
+export let can_redo = false;
+export let can_save = false;
+export let changeable = false;
+const dispatch = createEventDispatcher();
+</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={Trash}
+			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);
+	}
+</style>

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

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        can_undo?: boolean | undefined;
+        can_redo?: boolean | undefined;
+        can_save?: boolean | undefined;
+        changeable?: boolean | undefined;
+    };
+    events: {
+        remove_image: CustomEvent<void>;
+        undo: CustomEvent<void>;
+        redo: CustomEvent<void>;
+        save: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ControlsProps = typeof __propDef.props;
+export type ControlsEvents = typeof __propDef.events;
+export type ControlsSlots = typeof __propDef.slots;
+export default class Controls extends SvelteComponent<ControlsProps, ControlsEvents, ControlsSlots> {
+}
+export {};