@gradio/imageeditor 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @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

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;
@@ -214,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.9.0",
+  "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.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/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];
+}