@gradio/image 0.3.6 → 0.4.1

package/CHANGELOG.md

@@ -1,10 +1,68 @@
 # @gradio/image
 
+## 0.4.1
+
+### Patch Changes
+
+- Updated dependencies [[`71f1a1f99`](https://github.com/gradio-app/gradio/commit/71f1a1f9931489d465c2c1302a5c8d768a3cd23a)]:
+  - @gradio/client@0.8.2
+  - @gradio/upload@0.5.1
+
+## 0.4.0
+
+### Highlights
+
+#### New `ImageEditor` component ([#6169](https://github.com/gradio-app/gradio/pull/6169) [`9caddc17b`](https://github.com/gradio-app/gradio/commit/9caddc17b1dea8da1af8ba724c6a5eab04ce0ed8))
+
+A brand new component, completely separate from `Image` that provides simple editing capabilities.
+
+- Set background images from file uploads, webcam, or just paste!
+- Crop images with an improved cropping UI. App authors can event set specific crop size, or crop ratios (`1:1`, etc)
+- Paint on top of any image (or no image) and erase any mistakes!
+- The ImageEditor supports layers, confining draw and erase actions to that layer.
+- More flexible access to data. The image component returns a composite image representing the final state of the canvas as well as providing the background and all layers as individual images.
+- Fully customisable. All features can be enabled and disabled. Even the brush color swatches can be customised.
+
+<video src="https://user-images.githubusercontent.com/12937446/284027169-31188926-fd16-4a1c-8718-998e7aae4695.mp4" autoplay muted></video>
+
+```py
+
+def fn(im):
+    im["composite"] # the full canvas
+    im["background"] # the background image
+    im["layers"] # a list of individual layers
+
+
+im = gr.ImageEditor(
+    # decide which sources you'd like to accept
+    sources=["upload", "webcam", "clipboard"],
+    # set a cropsize constraint, can either be a ratio or a concrete [width, height]
+    crop_size="1:1",
+    # enable crop (or disable it)
+    transforms=["crop"],
+    # customise the brush
+    brush=Brush(
+      default_size="25", # or leave it as 'auto'
+      color_mode="fixed", # 'fixed' hides the user swatches and colorpicker, 'defaults' shows it
+      default_color="hotpink", # html names are supported
+      colors=[
+        "rgba(0, 150, 150, 1)", # rgb(a)
+        "#fff", # hex rgb
+        "hsl(360, 120, 120)" # in fact any valid colorstring
+      ]
+    ),
+    brush=Eraser(default_size="25")
+)
+
+```
+
+Thanks [@pngwn](https://github.com/pngwn)!
+
 ## 0.3.6
 
 ### Fixes
 
-- [#6441](https://github.com/gradio-app/gradio/pull/6441) [`2f805a7dd`](https://github.com/gradio-app/gradio/commit/2f805a7dd3d2b64b098f659dadd5d01258290521) - Small but important bugfixes for gr.Image: The upload event was not triggering at all. The paste-from-clipboard was not triggering an upload event. The clear button was not triggering a change event. The change event was triggering infinitely. Uploaded images were not preserving their original names. Uploading a new image should clear out the previous image.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+- [#6441](https://github.com/gradio-app/gradio/pull/6441) [`2f805a7dd`](https://github.com/gradio-app/gradio/commit/2f805a7dd3d2b64b098f659dadd5d01258290521) - Small but important bugfixes for gr.Image: The upload event was not triggering at all. The paste-from-clipboard was not triggering an upload event. The clear button was not triggering a change event. The change event was triggering infinitely. Uploaded images were not preserving their original names. Uploading a new image should clear out the previous image. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
 
 ## 0.3.5
 
@@ -202,4 +260,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
 
 ### Features
 
-- [#4979](https://github.com/gradio-app/gradio/pull/4979) [`44ac8ad0`](https://github.com/gradio-app/gradio/commit/44ac8ad08d82ea12c503dde5c78f999eb0452de2) - Allow setting sketch color default. Thanks [@aliabid94](https://github.com/aliabid94)!
+- [#4979](https://github.com/gradio-app/gradio/pull/4979) [`44ac8ad0`](https://github.com/gradio-app/gradio/commit/44ac8ad08d82ea12c503dde5c78f999eb0452de2) - Allow setting sketch color default. Thanks [@aliabid94](https://github.com/aliabid94)!

package/Index.svelte

@@ -5,6 +5,7 @@
 	export { default as BaseImageUploader } from "./shared/ImageUploader.svelte";
 	export { default as BaseStaticImage } from "./shared/ImagePreview.svelte";
 	export { default as BaseExample } from "./Example.svelte";
+	export { default as BaseImage } from "./shared/Image.svelte";
 </script>
 
 <script lang="ts">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.3.6",
+  "version": "0.4.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,13 +10,13 @@
     "cropperjs": "^1.5.12",
     "lazy-brush": "^1.0.1",
     "resize-observer-polyfill": "^1.5.1",
-    "@gradio/atoms": "^0.2.2",
-    "@gradio/client": "^0.8.1",
-    "@gradio/statustracker": "^0.3.2",
-    "@gradio/upload": "^0.4.2",
-    "@gradio/icons": "^0.2.1",
-    "@gradio/wasm": "^0.3.0",
-    "@gradio/utils": "^0.2.0"
+    "@gradio/atoms": "^0.3.0",
+    "@gradio/client": "^0.8.2",
+    "@gradio/icons": "^0.3.0",
+    "@gradio/upload": "^0.5.1",
+    "@gradio/utils": "^0.2.0",
+    "@gradio/statustracker": "^0.4.0",
+    "@gradio/wasm": "^0.3.0"
   },
   "main_changeset": true,
   "main": "./Index.svelte",

package/shared/ImagePreview.svelte

@@ -71,6 +71,7 @@
 		height: var(--size-full);
 		object-fit: contain;
 		display: block;
+		border-radius: var(--radius-lg);
 	}
 
 	.selectable {

package/shared/Webcam.svelte

@@ -15,21 +15,17 @@
 
 	const dispatch = createEventDispatcher<{
 		stream: undefined;
-		capture:
-			| {
-					data: FileReader["result"];
-					name: string;
-					is_example?: boolean;
-					is_file: boolean;
-			  }
-			| Blob;
+		capture: Blob;
 		error: string;
 		start_recording: undefined;
 		stop_recording: undefined;
 	}>();
 
 	onMount(() => (canvas = document.createElement("canvas")));
-
+	const size = {
+		width: { ideal: 1920 },
+		height: { ideal: 1440 }
+	};
 	async function access_webcam(device_id?: string): Promise<void> {
 		if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
 			dispatch("error", i18n("image.no_webcam_support"));
@@ -37,7 +33,7 @@
 		}
 		try {
 			stream = await navigator.mediaDevices.getUserMedia({
-				video: device_id ? { deviceId: { exact: device_id } } : true,
+				video: device_id ? { deviceId: { exact: device_id }, ...size } : size,
 				audio: include_audio
 			});
 			video_source.srcObject = stream;
@@ -95,6 +91,7 @@
 			ReaderObj.onload = function (e): void {
 				if (e.target) {
 					dispatch("capture", {
+						//@ts-ignore
 						data: e.target.result,
 						name: "sample." + mimeType.substring(6),
 						is_example: false,