@gradio/imageeditor 0.8.1 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @gradio/imageeditor
 
+## 0.10.0
+
+### Features
+
+- [#8930](https://github.com/gradio-app/gradio/pull/8930) [`41d5ab9`](https://github.com/gradio-app/gradio/commit/41d5ab987ba9728753be4509490c79041655809b) - Add `placeholder` param to Image and ImageEditor to replace upload image text.  Thanks @hannahblair!
+- [#9118](https://github.com/gradio-app/gradio/pull/9118) [`e1c404d`](https://github.com/gradio-app/gradio/commit/e1c404da1143fb52b659d03e028bdba1badf443d) - setup npm-previews of all packages.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/utils@0.6.0
+- @gradio/upload@0.12.3
+- @gradio/atoms@0.8.0
+- @gradio/client@1.5.1
+- @gradio/statustracker@0.7.5
+- @gradio/wasm@0.13.0
+- @gradio/icons@0.7.1
+- @gradio/image@0.15.0
+
+## 0.9.0
+
+### Features
+
+- [#8964](https://github.com/gradio-app/gradio/pull/8964) [`bf6bbd9`](https://github.com/gradio-app/gradio/commit/bf6bbd971acddbf78f03bea431ed7d1e0003ccf9) - Add min/max-imize button to gr.Image and gr.Gallery.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/atoms@0.7.9
+- @gradio/statustracker@0.7.4
+- @gradio/client@1.5.0
+- @gradio/icons@0.7.0
+- @gradio/upload@0.12.2
+- @gradio/image@0.14.0
+
 ## 0.8.1
 
 ### Dependency updates

package/ImageEditor.stories.svelte

@@ -214,6 +214,7 @@
 			orig_name: "cheetah.jpg"
 		},
 		type: "pil",
+		placeholder: "Upload an image of a cat",
 		sources: ["upload", "webcam"],
 		interactive: "true",
 		brush: {

package/Index.svelte

@@ -44,6 +44,7 @@
 		"webcam"
 	];
 	export let interactive: boolean;
+	export let placeholder: string | undefined;
 
 	export let brush: Brush;
 	export let eraser: Eraser;
@@ -55,6 +56,7 @@
 		accept_blobs: (a: any) => void;
 	};
 	export let canvas_size: [number, number] | undefined;
+	export let show_fullscreen_button = true;
 
 	export let gradio: Gradio<{
 		change: never;
@@ -153,6 +155,7 @@
 			selectable={_selectable}
 			{show_share_button}
 			i18n={gradio.i18n}
+			{show_fullscreen_button}
 		/>
 	</Block>
 {:else}
@@ -212,6 +215,7 @@
 			status={loading_status?.status}
 			upload={gradio.client.upload}
 			stream_handler={gradio.client.stream}
+			{placeholder}
 		></InteractiveImageEditor>
 	</Block>
 {/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.8.1",
+  "version": "0.10.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,17 +10,17 @@
     "@types/tinycolor2": "^1.4.6",
     "pixi.js": "^7.3.2",
     "tinycolor2": "^1.6.0",
-    "@gradio/atoms": "^0.7.8",
-    "@gradio/client": "^1.4.0",
-    "@gradio/icons": "^0.6.1",
-    "@gradio/upload": "^0.12.1",
-    "@gradio/statustracker": "^0.7.3",
-    "@gradio/utils": "^0.5.2",
-    "@gradio/wasm": "^0.12.0",
-    "@gradio/image": "^0.13.1"
+    "@gradio/atoms": "^0.8.0",
+    "@gradio/client": "^1.5.1",
+    "@gradio/icons": "^0.7.1",
+    "@gradio/image": "^0.15.0",
+    "@gradio/utils": "^0.6.0",
+    "@gradio/upload": "^0.12.3",
+    "@gradio/statustracker": "^0.7.5",
+    "@gradio/wasm": "^0.13.0"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.10.2"
+    "@gradio/preview": "^0.11.0"
   },
   "main_changeset": true,
   "main": "./Index.svelte",
@@ -28,5 +28,10 @@
     ".": "./Index.svelte",
     "./example": "./Example.svelte",
     "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/imageeditor"
   }
 }

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,7 @@
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
 	export let dragging: boolean;
+	export let placeholder: string | undefined = undefined;
 
 	const dispatch = createEventDispatcher<{
 		clear?: never;
@@ -197,6 +199,8 @@
 
 	let active_mode: "webcam" | "color" | null = null;
 	let editor_height = 0;
+
+	$: [heading, paragraph] = placeholder ? inject(placeholder) : [false, false];
 </script>
 
 <BlockLabel
@@ -254,13 +258,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 +281,15 @@
 </ImageEditor>
 
 <style>
+	h2 {
+		font-size: var(--text-xl);
+	}
+
+	p,
+	h2 {
+		white-space: pre-line;
+	}
+
 	.empty {
 		display: flex;
 		flex-direction: column;
@@ -292,7 +314,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/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];
+}