@gradio/imageeditor 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,71 @@
 # @gradio/imageeditor
 
+## 0.7.0
+
+### Features
+
+- [#8121](https://github.com/gradio-app/gradio/pull/8121) [`f5b710c`](https://github.com/gradio-app/gradio/commit/f5b710c919b0ce604ea955f0d5f4faa91095ca4a) - chore(deps): update dependency eslint to v9.  Thanks @renovate!
+- [#8209](https://github.com/gradio-app/gradio/pull/8209) [`b9afe93`](https://github.com/gradio-app/gradio/commit/b9afe93915401df5bd6737c89395c2477acfa585) - Rename `eventSource_Factory` and `fetch_implementation`.  Thanks @hannahblair!
+- [#8127](https://github.com/gradio-app/gradio/pull/8127) [`24b2286`](https://github.com/gradio-app/gradio/commit/24b2286a22ed247b86ee299487174c8cea2988fe) - allow the canvas size to be set on the `ImageEditor`.  Thanks @pngwn!
+
+### Fixes
+
+- [#8179](https://github.com/gradio-app/gradio/pull/8179) [`6a218b4`](https://github.com/gradio-app/gradio/commit/6a218b4148095aaa0c58d8c20973ba01c8764fc2) - rework upload to be a class method + pass client into each component.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.7.2
+- @gradio/client@0.18.0
+- @gradio/upload@0.10.0
+- @gradio/utils@0.4.1
+- @gradio/wasm@0.10.1
+- @gradio/statustracker@0.5.1
+- @gradio/image@0.11.0
+
+## 0.6.0
+
+### Highlights
+
+#### Setting File Upload Limits ([#7909](https://github.com/gradio-app/gradio/pull/7909) [`2afca65`](https://github.com/gradio-app/gradio/commit/2afca6541912b37dc84f447c7ad4af21607d7c72))
+
+We have added a `max_file_size` size parameter to `launch()` that limits to size of files uploaded to the server. This limit applies to each individual file. This parameter can be specified as a string or an integer (corresponding to the size in bytes).
+
+The following code snippet sets a max file size of 5 megabytes.
+
+```python
+import gradio as gr
+
+demo = gr.Interface(lambda x: x, "image", "image")
+
+demo.launch(max_file_size="5mb")
+# or
+demo.launch(max_file_size=5 * gr.FileSize.MB)
+```
+
+![max_file_size_upload](https://github.com/gradio-app/gradio/assets/41651716/7547330c-a082-4901-a291-3f150a197e45)
+
+
+#### Error states can now be cleared
+
+When a component encounters an error, the error state shown in the UI can now be cleared by clicking on the `x` icon in the top right of the component. This applies to all types of errors, whether it's raised in the UI or the server.
+
+![error_modal_calculator](https://github.com/gradio-app/gradio/assets/41651716/16cb071c-accd-45a6-9c18-0dea27d4bd98)
+
+ Thanks @freddyaboulton!
+
+### Fixes
+
+- [#8066](https://github.com/gradio-app/gradio/pull/8066) [`624f9b9`](https://github.com/gradio-app/gradio/commit/624f9b9477f74a581a6c14119234f9efdfcda398) - make gradio dev tools a local dependency rather than bundling.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.7.1
+- @gradio/client@0.17.0
+- @gradio/image@0.10.0
+- @gradio/statustracker@0.5.0
+- @gradio/upload@0.9.0
+- @gradio/utils@0.4.0
+
 ## 0.5.0
 
 ### Features

package/Index.svelte

@@ -54,6 +54,7 @@
 	export let server: {
 		accept_blobs: (a: any) => void;
 	};
+	export let canvas_size: [number, number] | undefined;
 
 	export let gradio: Gradio<{
 		change: never;
@@ -66,6 +67,7 @@
 		clear: never;
 		select: SelectData;
 		share: ShareData;
+		clear_status: LoadingStatus;
 	}>;
 
 	let editor_instance: InteractiveImageEditor;
@@ -136,6 +138,7 @@
 			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)}
@@ -169,9 +172,11 @@
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 
 		<InteractiveImageEditor
+			{canvas_size}
 			on:change={() => handle_history_change()}
 			bind:image_id
 			{crop_size}
@@ -196,11 +201,14 @@
 			{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_factory}
 		></InteractiveImageEditor>
 	</Block>
 {/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,14 +10,17 @@
     "@types/tinycolor2": "^1.4.6",
     "pixi.js": "^7.3.2",
     "tinycolor2": "^1.6.0",
-    "@gradio/atoms": "^0.7.0",
-    "@gradio/client": "^0.16.0",
+    "@gradio/client": "^0.18.0",
+    "@gradio/atoms": "^0.7.2",
     "@gradio/icons": "^0.4.0",
-    "@gradio/image": "^0.9.12",
-    "@gradio/statustracker": "^0.4.12",
-    "@gradio/upload": "^0.8.5",
-    "@gradio/utils": "^0.3.2",
-    "@gradio/wasm": "^0.10.0"
+    "@gradio/image": "^0.11.0",
+    "@gradio/statustracker": "^0.5.1",
+    "@gradio/utils": "^0.4.1",
+    "@gradio/upload": "^0.10.0",
+    "@gradio/wasm": "^0.10.1"
+  },
+  "devDependencies": {
+    "@gradio/preview": "^0.9.0"
   },
   "main_changeset": true,
   "main": "./Index.svelte",

package/shared/ImageEditor.svelte

@@ -62,7 +62,7 @@
 	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 crop_size: [number, number] | undefined;
 	export let changeable = false;
 	export let history: boolean;
 	export let bg = false;
@@ -73,8 +73,13 @@
 		change: void;
 	}>();
 	export let crop_constraint = false;
+	export let canvas_size: [number, number] | undefined;
 
-	let dimensions = writable(crop_size);
+	$: orig_canvas_size = canvas_size;
+
+	const BASE_DIMENSIONS: [number, number] = canvas_size || [800, 600];
+
+	let dimensions = writable(BASE_DIMENSIONS);
 	export let height = 0;
 
 	let editor_box: EditorContext["editor_box"] = writable({
@@ -260,7 +265,10 @@
 	$: $position_spring && get_dimensions(canvas_wrap, pixi_target);
 
 	export function handle_remove(): void {
-		editor_context.reset(true, $dimensions);
+		editor_context.reset(
+			true,
+			orig_canvas_size ? orig_canvas_size : $dimensions
+		);
 		if (!sources.length) {
 			set_tool("draw");
 		} else {
@@ -270,7 +278,12 @@
 	}
 
 	onMount(() => {
-		const app = create_pixi_app(pixi_target, ...crop_size, antialias);
+		const _size = (canvas_size ? canvas_size : crop_size) || [800, 600];
+		const app = create_pixi_app({
+			target: pixi_target,
+			dimensions: _size,
+			antialias
+		});
 
 		function resize(width: number, height: number): void {
 			app.resize(width, height);

package/shared/InteractiveImageEditor.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 	import { type I18nFormatter } from "@gradio/utils";
-	import { prepare_files, upload, type FileData } from "@gradio/client";
+	import { prepare_files, type FileData, type Client } from "@gradio/client";
 
 	import ImageEditor from "./ImageEditor.svelte";
 	import Layers from "./layers/Layers.svelte";
@@ -44,6 +44,10 @@
 	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_factory"];
 
 	const dispatch = createEventDispatcher<{
 		clear?: never;
@@ -70,7 +74,7 @@
 			? upload(
 					await prepare_files([new File([blobs.background], "background.png")]),
 					root
-			  )
+				)
 			: Promise.resolve(null);
 
 		const layers = blobs.layers
@@ -83,7 +87,7 @@
 			? upload(
 					await prepare_files([new File([blobs.composite], "composite.png")]),
 					root
-			  )
+				)
 			: Promise.resolve(null);
 
 		const [background, composite_, ...layers_] = await Promise.all([
@@ -131,6 +135,7 @@
 	let uploading = false;
 	let pending = false;
 	async function handle_change(e: CustomEvent<Blob | any>): Promise<void> {
+		if (!realtime) return;
 		if (uploading) {
 			pending = true;
 			return;
@@ -199,6 +204,8 @@
 	label={label || i18n("image.image")}
 />
 <ImageEditor
+	{canvas_size}
+	crop_size={Array.isArray(crop_size) ? crop_size : undefined}
 	bind:this={editor}
 	bind:height={editor_height}
 	{changeable}
@@ -217,6 +224,8 @@
 			{i18n}
 			{root}
 			{sources}
+			{upload}
+			{stream_handler}
 			bind:bg
 			bind:active_mode
 			background_file={value?.background || value?.composite || null}

package/shared/tools/Brush.svelte

@@ -51,8 +51,8 @@
 		default_color === "auto"
 			? processed_colors[0]
 			: !default_color
-			? "black"
-			: process_color(default_color);
+				? "black"
+				: process_color(default_color);
 
 	let brush_options: brush_option_type = false;
 

package/shared/tools/Sources.svelte

@@ -11,6 +11,7 @@
 	import { Webcam } from "@gradio/image";
 	import { type I18nFormatter } from "@gradio/utils";
 	import { IconButton } from "@gradio/atoms";
+	import { type Client } from "@gradio/client";
 
 	import { add_bg_color, add_bg_image } from "./sources";
 	import type { FileData } from "@gradio/client";
@@ -24,6 +25,8 @@
 	];
 	export let mirror_webcam = true;
 	export let i18n: I18nFormatter;
+	export let upload: Client["upload"];
+	export let stream_handler: Client["stream_factory"];
 
 	const { active_tool } = getContext<ToolContext>(TOOL_KEY);
 	const { pixi, dimensions, register_context, reset, editor_box } =
@@ -43,7 +46,7 @@
 			order: 0,
 			id: "bg_upload",
 			cb() {
-				upload.open_file_upload();
+				upload_component.open_file_upload();
 
 				$active_tool = "bg";
 			}
@@ -74,7 +77,7 @@
 		.map((src) => sources_meta[src])
 		.sort((a, b) => a.order - b.order);
 
-	let upload: Upload;
+	let upload_component: Upload;
 
 	async function process_clipboard(): Promise<void> {
 		const items = await navigator.clipboard.read();
@@ -179,13 +182,15 @@
 	<div class="upload-container">
 		<Upload
 			hidden={true}
-			bind:this={upload}
+			bind:this={upload_component}
 			filetype="image/*"
 			on:load={handle_upload}
 			on:error
 			{root}
 			disable_click={!sources.includes("upload")}
 			format="blob"
+			{upload}
+			{stream_handler}
 		></Upload>
 		{#if active_mode === "webcam"}
 			<div
@@ -196,6 +201,7 @@
 			>
 				<div class="modal-inner">
 					<Webcam
+						{upload}
 						{root}
 						on:capture={handle_upload}
 						on:error

package/shared/utils/pixi.ts

@@ -73,12 +73,15 @@ export interface PixiApp {
  * @param antialias Whether to use antialiasing
  * @returns object with pixi container and renderer
  */
-export function create_pixi_app(
-	target: HTMLElement,
-	width: number,
-	height: number,
-	antialias: boolean
-): PixiApp {
+export function create_pixi_app({
+	target,
+	dimensions: [width, height],
+	antialias
+}: {
+	target: HTMLElement;
+	dimensions: [number, number];
+	antialias: boolean;
+}): PixiApp {
 	const ratio = window.devicePixelRatio || 1;
 	const app = new Application({
 		width,