@gradio/image 0.22.0 → 0.22.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @gradio/image
 
+## 0.22.1
+
+### Fixes
+
+- [#10979](https://github.com/gradio-app/gradio/pull/10979) [`975feee`](https://github.com/gradio-app/gradio/commit/975feee3925e5b65e52ae00da5c5066d8889ae6a) - improve webcam options for the ImageEditor.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/upload@0.16.1
+- @gradio/atoms@0.15.1
+- @gradio/statustracker@0.10.8
+- @gradio/icons@0.12.0
+
 ## 0.22.0
 
 ### Features

package/Image.stories.svelte

@@ -41,7 +41,11 @@
 		},
 		show_label: true,
 		placeholder: "This is a cheetah",
-		show_download_button: true
+		show_download_button: true,
+		webcam_options: {
+			mirror: true,
+			constraints: null
+		}
 	}}
 	play={async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
@@ -62,7 +66,11 @@
 			orig_name: "cheetah.jpg"
 		},
 		show_label: false,
-		show_download_button: false
+		show_download_button: false,
+		webcam_options: {
+			mirror: true,
+			constraints: null
+		}
 	}}
 />
 
@@ -73,6 +81,10 @@
 			path: image_file_100x1000,
 			url: image_file_100x1000,
 			orig_name: "image.webp"
+		},
+		webcam_options: {
+			mirror: true,
+			constraints: null
 		}
 	}}
 />
@@ -85,7 +97,11 @@
 			url: image_file_100x1000,
 			orig_name: "image.webp"
 		},
-		height: "500px"
+		height: "500px",
+		webcam_options: {
+			mirror: true,
+			constraints: null
+		}
 	}}
 />
 
@@ -97,7 +113,11 @@
 			url: image_file_100x100,
 			orig_name: "image.webp"
 		},
-		height: "500px"
+		height: "500px",
+		webcam_options: {
+			mirror: true,
+			constraints: null
+		}
 	}}
 />
 
@@ -113,7 +133,11 @@
 		show_label: false,
 		show_download_button: false,
 		interactive: true,
-		placeholder: md
+		placeholder: md,
+		webcam_options: {
+			mirror: true,
+			constraints: null
+		}
 	}}
 	play={async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
@@ -132,7 +156,11 @@
 	args={{
 		sources: ["webcam"],
 		show_download_button: true,
-		interactive: true
+		interactive: true,
+		webcam_options: {
+			mirror: true,
+			constraints: null
+		}
 	}}
 />
 
@@ -156,6 +184,10 @@
 			url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
 			orig_name: "cheetah.jpg"
 		},
-		streaming: true
+		streaming: true,
+		webcam_options: {
+			mirror: true,
+			constraints: null
+		}
 	}}
 />

package/Index.svelte

@@ -13,6 +13,7 @@
 	import StaticImage from "./shared/ImagePreview.svelte";
 	import ImageUploader from "./shared/ImageUploader.svelte";
 	import { afterUpdate } from "svelte";
+	import type { WebcamOptions } from "./shared/types";
 
 	import { Block, Empty, UploadText } from "@gradio/atoms";
 	import { Image } from "@gradio/icons";
@@ -61,11 +62,11 @@
 	export let interactive: boolean;
 	export let streaming: boolean;
 	export let pending: boolean;
-	export let mirror_webcam: boolean;
 	export let placeholder: string | undefined = undefined;
 	export let show_fullscreen_button: boolean;
 	export let input_ready: boolean;
-	export let webcam_constraints: { [key: string]: any } | undefined = undefined;
+	export let webcam_options: WebcamOptions;
+
 	let uploading = false;
 	$: input_ready = !uploading;
 	export let gradio: Gradio<{
@@ -215,11 +216,10 @@
 			{show_label}
 			{pending}
 			{streaming}
-			{mirror_webcam}
+			{webcam_options}
 			{stream_every}
 			bind:modify_stream={_modify_stream}
 			bind:set_time_limit
-			{webcam_constraints}
 			max_file_size={gradio.max_file_size}
 			i18n={gradio.i18n}
 			upload={(...args) => gradio.client.upload(...args)}

package/dist/Index.svelte

@@ -50,11 +50,10 @@ export let sources = [
 export let interactive;
 export let streaming;
 export let pending;
-export let mirror_webcam;
 export let placeholder = void 0;
 export let show_fullscreen_button;
 export let input_ready;
-export let webcam_constraints = void 0;
+export let webcam_options;
 let uploading = false;
 $:
   input_ready = !uploading;
@@ -187,11 +186,10 @@ const handle_drop = (event) => {
 			{show_label}
 			{pending}
 			{streaming}
-			{mirror_webcam}
+			{webcam_options}
 			{stream_every}
 			bind:modify_stream={_modify_stream}
 			bind:set_time_limit
-			{webcam_constraints}
 			max_file_size={gradio.max_file_size}
 			i18n={gradio.i18n}
 			upload={(...args) => gradio.client.upload(...args)}

package/dist/Index.svelte.d.ts

@@ -5,6 +5,7 @@ export { default as BaseStaticImage } from "./shared/ImagePreview.svelte";
 export { default as BaseExample } from "./Example.svelte";
 export { default as BaseImage } from "./shared/Image.svelte";
 import type { Gradio, SelectData, ValueData } from "@gradio/utils";
+import type { WebcamOptions } from "./shared/types";
 import { type FileData } from "@gradio/client";
 import type { LoadingStatus } from "@gradio/statustracker";
 declare const __propDef: {
@@ -34,13 +35,10 @@ declare const __propDef: {
         interactive: boolean;
         streaming: boolean;
         pending: boolean;
-        mirror_webcam: boolean;
         placeholder?: string | undefined;
         show_fullscreen_button: boolean;
         input_ready: boolean;
-        webcam_constraints?: {
-            [key: string]: any;
-        } | undefined;
+        webcam_options: WebcamOptions;
         gradio: Gradio<{
             input: never;
             change: never;
@@ -139,9 +137,6 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get pending(): boolean;
     /**accessor*/
     set pending(_: boolean);
-    get mirror_webcam(): boolean;
-    /**accessor*/
-    set mirror_webcam(_: boolean);
     get placeholder(): string | undefined;
     /**accessor*/
     set placeholder(_: string | undefined);
@@ -151,13 +146,9 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get input_ready(): boolean;
     /**accessor*/
     set input_ready(_: boolean);
-    get webcam_constraints(): {
-        [key: string]: any;
-    } | undefined;
+    get webcam_options(): WebcamOptions;
     /**accessor*/
-    set webcam_constraints(_: {
-        [key: string]: any;
-    } | undefined);
+    set webcam_options(_: WebcamOptions);
     get gradio(): Gradio<{
         input: never;
         change: never;

package/dist/shared/ImageUploader.svelte

@@ -16,7 +16,7 @@ export let show_label;
 export let sources = ["upload", "clipboard", "webcam"];
 export let streaming = false;
 export let pending = false;
-export let mirror_webcam;
+export let webcam_options;
 export let selectable = false;
 export let root;
 export let i18n;
@@ -30,7 +30,6 @@ export let show_fullscreen_button = true;
 let upload_input;
 export let uploading = false;
 export let active_source = null;
-export let webcam_constraints = void 0;
 async function handle_upload({
   detail
 }) {
@@ -156,7 +155,7 @@ let image_container;
 				on:drag
 				on:upload={(e) => handle_save(e.detail, "upload")}
 				on:close_stream
-				{mirror_webcam}
+				mirror_webcam={webcam_options.mirror}
 				{stream_every}
 				{streaming}
 				mode="image"
@@ -165,7 +164,7 @@ let image_container;
 				{upload}
 				bind:modify_stream
 				bind:set_time_limit
-				{webcam_constraints}
+				webcam_constraints={webcam_options.constraints}
 			/>
 		{:else if value !== null && !streaming}
 			<!-- svelte-ignore a11y-click-events-have-key-events-->

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

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 import { type SelectData, type I18nFormatter, type ValueData } from "@gradio/utils";
 import { FileData, type Client } from "@gradio/client";
-import type { Base64File } from "./types";
+import type { Base64File, WebcamOptions } from "./types";
 declare const __propDef: {
     props: {
         value?: null | FileData | Base64File;
@@ -10,7 +10,7 @@ declare const __propDef: {
         sources?: ("clipboard" | "upload" | "microphone" | "webcam" | null)[] | undefined;
         streaming?: boolean | undefined;
         pending?: boolean | undefined;
-        mirror_webcam: boolean;
+        webcam_options: WebcamOptions;
         selectable?: boolean | undefined;
         root: string;
         i18n: I18nFormatter;
@@ -23,9 +23,6 @@ declare const __propDef: {
         show_fullscreen_button?: boolean | undefined;
         uploading?: boolean | undefined;
         active_source?: ("clipboard" | "upload" | "microphone" | "webcam" | null) | undefined;
-        webcam_constraints?: {
-            [key: string]: any;
-        } | undefined;
         dragging?: boolean | undefined;
     };
     events: {

package/dist/shared/types.d.ts

@@ -2,3 +2,7 @@ export interface Base64File {
     url: string;
     alt_text: string;
 }
+export interface WebcamOptions {
+    mirror: boolean;
+    constraints: MediaStreamConstraints;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.22.0",
+  "version": "0.22.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/icons": "^0.11.0",
-    "@gradio/atoms": "^0.15.0",
-    "@gradio/statustracker": "^0.10.7",
+    "@gradio/atoms": "^0.15.1",
     "@gradio/client": "^1.14.1",
+    "@gradio/upload": "^0.16.1",
+    "@gradio/icons": "^0.12.0",
     "@gradio/utils": "^0.10.1",
-    "@gradio/upload": "^0.16.0",
-    "@gradio/wasm": "^0.18.1"
+    "@gradio/wasm": "^0.18.1",
+    "@gradio/statustracker": "^0.10.8"
   },
   "devDependencies": {
     "@gradio/preview": "^0.13.0"

package/shared/ImageUploader.svelte

@@ -15,7 +15,7 @@
 	import { FileData, type Client } from "@gradio/client";
 	import { SelectSource } from "@gradio/atoms";
 	import Image from "./Image.svelte";
-	import type { Base64File } from "./types";
+	import type { Base64File, WebcamOptions } from "./types";
 
 	export let value: null | FileData | Base64File = null;
 	export let label: string | undefined = undefined;
@@ -26,7 +26,7 @@
 	export let sources: source_type[] = ["upload", "clipboard", "webcam"];
 	export let streaming = false;
 	export let pending = false;
-	export let mirror_webcam: boolean;
+	export let webcam_options: WebcamOptions;
 	export let selectable = false;
 	export let root: string;
 	export let i18n: I18nFormatter;
@@ -43,8 +43,6 @@
 	export let uploading = false;
 	export let active_source: source_type = null;
 
-	export let webcam_constraints: { [key: string]: any } | undefined = undefined;
-
 	async function handle_upload({
 		detail
 	}: CustomEvent<FileData>): Promise<void> {
@@ -189,7 +187,7 @@
 				on:drag
 				on:upload={(e) => handle_save(e.detail, "upload")}
 				on:close_stream
-				{mirror_webcam}
+				mirror_webcam={webcam_options.mirror}
 				{stream_every}
 				{streaming}
 				mode="image"
@@ -198,7 +196,7 @@
 				{upload}
 				bind:modify_stream
 				bind:set_time_limit
-				{webcam_constraints}
+				webcam_constraints={webcam_options.constraints}
 			/>
 		{:else if value !== null && !streaming}
 			<!-- svelte-ignore a11y-click-events-have-key-events-->

package/shared/types.ts

@@ -2,3 +2,8 @@ export interface Base64File {
 	url: string;
 	alt_text: string;
 }
+
+export interface WebcamOptions {
+	mirror: boolean;
+	constraints: MediaStreamConstraints;
+}