@gradio/image 0.22.18 → 0.23.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @gradio/image
 
+## 0.23.1
+
+### Fixes
+
+- [#11969](https://github.com/gradio-app/gradio/pull/11969) [`c8f7909`](https://github.com/gradio-app/gradio/commit/c8f79090ede3b071a8d9620a885350b6ee5a8926) - Show UploadProgress for Webcam Uploads.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/upload@0.17.1
+- @gradio/atoms@0.18.1
+
+## 0.23.0
+
+### Features
+
+- [#11858](https://github.com/gradio-app/gradio/pull/11858) [`3f8ea13`](https://github.com/gradio-app/gradio/commit/3f8ea13a8ca92abf0ad34392e403a449fda3c6c2) - remove lite.  Thanks @pngwn!
+
+### Fixes
+
+- [#11784](https://github.com/gradio-app/gradio/pull/11784) [`d9dd3f5`](https://github.com/gradio-app/gradio/commit/d9dd3f54b7fb34cf7118e549d39fc63937ca3489) - Add "hidden" option to component's `visible` kwarg to render but visually hide the component.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/statustracker@0.11.1
+- @gradio/atoms@0.18.0
+- @gradio/client@1.19.0
+- @gradio/upload@0.17.0
+
 ## 0.22.18
 
 ### Dependency updates

package/Index.svelte

@@ -36,7 +36,7 @@
 	export let value_is_output = false;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
-	export let visible = true;
+	export let visible: boolean | "hidden" = true;
 	export let value: null | FileData = null;
 	let old_value: null | FileData = null;
 	export let label: string;

package/dist/Index.svelte.d.ts

@@ -16,7 +16,7 @@ declare const __propDef: {
         value_is_output?: boolean;
         elem_id?: string;
         elem_classes?: string[];
-        visible?: boolean;
+        visible?: boolean | "hidden";
         value?: null | FileData;
         label: string;
         show_label: boolean;
@@ -82,12 +82,12 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get elem_classes(): string[] | undefined;
     /**accessor*/
     set elem_classes(_: string[] | undefined);
-    get visible(): boolean | undefined;
+    get visible(): boolean | "hidden" | undefined;
     /**accessor*/
-    set visible(_: boolean | undefined);
-    get value(): FileData | null | undefined;
+    set visible(_: boolean | "hidden" | undefined);
+    get value(): any;
     /**accessor*/
-    set value(_: FileData | null | undefined);
+    set value(_: any);
     get label(): string;
     /**accessor*/
     set label(_: string);

package/dist/shared/Image.svelte

@@ -1,21 +1,8 @@
-<script>import { resolve_wasm_src } from "@gradio/wasm/svelte";
-export let src = void 0;
-let resolved_src;
-let latest_src;
-$: {
-  resolved_src = src;
-  latest_src = src;
-  const resolving_src = src;
-  resolve_wasm_src(resolving_src).then((s) => {
-    if (latest_src === resolving_src) {
-      resolved_src = s;
-    }
-  });
-}
+<script>export let src = void 0;
 </script>
 
 <!-- svelte-ignore a11y-missing-attribute -->
-<img src={resolved_src} {...$$restProps} on:load />
+<img {src} {...$$restProps} on:load />
 
 <style>
 	img {

package/dist/shared/ImagePreview.svelte

@@ -6,12 +6,12 @@ import {
   IconButton,
   ShareButton,
   IconButtonWrapper,
-  FullscreenButton
+  FullscreenButton,
+  DownloadLink
 } from "@gradio/atoms";
 import { Download, Image as ImageIcon } from "@gradio/icons";
 import { get_coordinates_of_clicked_image } from "./utils";
 import Image from "./Image.svelte";
-import { DownloadLink } from "@gradio/wasm/svelte";
 export let value;
 export let label = void 0;
 export let show_label;

package/dist/shared/ImageUploader.svelte

@@ -6,7 +6,7 @@ import {
 } from "@gradio/utils";
 import { get_coordinates_of_clicked_image } from "./utils";
 import Webcam from "./Webcam.svelte";
-import { Upload } from "@gradio/upload";
+import { Upload, UploadProgress } from "@gradio/upload";
 import { FileData } from "@gradio/client";
 import { SelectSource } from "@gradio/atoms";
 import Image from "./Image.svelte";
@@ -31,6 +31,8 @@ let upload_input;
 export let uploading = false;
 export let active_source = null;
 export let fullscreen = false;
+let files = [];
+let upload_id;
 async function handle_upload({
   detail
 }) {
@@ -66,10 +68,20 @@ async function handle_save(img_blob, event) {
     });
     return;
   }
+  upload_id = Math.random().toString(36).substring(2, 15);
+  const f_ = new File([img_blob], `image.${streaming ? "jpeg" : "png"}`);
+  files = [
+    new FileData({
+      path: f_.name,
+      orig_name: f_.name,
+      blob: f_,
+      size: f_.size,
+      mime_type: f_.type,
+      is_stream: false
+    })
+  ];
   pending = true;
-  const f = await upload_input.load_files([
-    new File([img_blob], `image/${streaming ? "jpeg" : "png"}`)
-  ]);
+  const f = await upload_input.load_files([f_], upload_id);
   if (event === "change" || event === "upload") {
     value = f?.[0] || null;
     await tick();
@@ -165,7 +177,9 @@ async function on_drop(evt) {
 				<slot />
 			{/if}
 		</Upload>
-		{#if active_source === "webcam" && (streaming || (!streaming && !value))}
+		{#if active_source === "webcam" && !streaming && pending}
+			<UploadProgress {root} {upload_id} {stream_handler} {files} />
+		{:else if active_source === "webcam" && (streaming || (!streaming && !value))}
 			<Webcam
 				{root}
 				{value}

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

@@ -28,7 +28,7 @@ declare const __propDef: {
     };
     events: {
         fullscreen: CustomEvent<boolean>;
-        error: CustomEvent<string> | CustomEvent<any>;
+        error: CustomEvent<any> | CustomEvent<string>;
         drag: CustomEvent<any>;
         close_stream: CustomEvent<undefined>;
         change?: CustomEvent<undefined> | undefined;

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

@@ -23,7 +23,7 @@ declare const __propDef: {
     };
     events: {
         stream: CustomEvent<string | Blob>;
-        capture: CustomEvent<Blob | FileData | null>;
+        capture: CustomEvent<any>;
         error: CustomEvent<string>;
         start_recording: CustomEvent<undefined>;
         stop_recording: CustomEvent<undefined>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.22.18",
+  "version": "0.23.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,13 +10,12 @@
     "cropperjs": "^1.5.12",
     "lazy-brush": "^1.0.1",
     "resize-observer-polyfill": "^1.5.1",
+    "@gradio/atoms": "^0.18.1",
+    "@gradio/client": "^1.19.0",
+    "@gradio/statustracker": "^0.11.1",
     "@gradio/icons": "^0.14.0",
-    "@gradio/atoms": "^0.17.0",
-    "@gradio/statustracker": "^0.11.0",
-    "@gradio/client": "^1.18.0",
-    "@gradio/utils": "^0.10.2",
-    "@gradio/upload": "^0.16.17",
-    "@gradio/wasm": "^0.18.1"
+    "@gradio/upload": "^0.17.1",
+    "@gradio/utils": "^0.10.2"
   },
   "devDependencies": {
     "@gradio/preview": "^0.14.0"

package/shared/Image.svelte

@@ -6,36 +6,11 @@
 	}
 	type $$Props = Props;
 
-	import { resolve_wasm_src } from "@gradio/wasm/svelte";
-
 	export let src: HTMLImgAttributes["src"] = undefined;
-
-	let resolved_src: typeof src;
-
-	// The `src` prop can be updated before the Promise from `resolve_wasm_src` is resolved.
-	// In such a case, the resolved value for the old `src` has to be discarded,
-	// This variable `latest_src` is used to pick up only the value resolved for the latest `src` prop.
-	let latest_src: typeof src;
-	$: {
-		// In normal (non-Wasm) Gradio, the `<img>` element should be rendered with the passed `src` props immediately
-		// without waiting for `resolve_wasm_src()` to resolve.
-		// If it waits, a blank image is displayed until the async task finishes
-		// and it leads to undesirable flickering.
-		// So set `src` to `resolved_src` here.
-		resolved_src = src;
-
-		latest_src = src;
-		const resolving_src = src;
-		resolve_wasm_src(resolving_src).then((s) => {
-			if (latest_src === resolving_src) {
-				resolved_src = s;
-			}
-		});
-	}
 </script>
 
 <!-- svelte-ignore a11y-missing-attribute -->
-<img src={resolved_src} {...$$restProps} on:load />
+<img {src} {...$$restProps} on:load />
 
 <style>
 	img {

package/shared/ImagePreview.svelte

@@ -8,12 +8,12 @@
 		IconButton,
 		ShareButton,
 		IconButtonWrapper,
-		FullscreenButton
+		FullscreenButton,
+		DownloadLink
 	} from "@gradio/atoms";
 	import { Download, Image as ImageIcon } from "@gradio/icons";
 	import { get_coordinates_of_clicked_image } from "./utils";
 	import Image from "./Image.svelte";
-	import { DownloadLink } from "@gradio/wasm/svelte";
 
 	import type { I18nFormatter } from "@gradio/utils";
 	import type { FileData } from "@gradio/client";

package/shared/ImageUploader.svelte

@@ -11,7 +11,7 @@
 	import { get_coordinates_of_clicked_image } from "./utils";
 	import Webcam from "./Webcam.svelte";
 
-	import { Upload } from "@gradio/upload";
+	import { Upload, UploadProgress } from "@gradio/upload";
 	import { FileData, type Client } from "@gradio/client";
 	import { SelectSource } from "@gradio/atoms";
 	import Image from "./Image.svelte";
@@ -44,6 +44,9 @@
 	export let active_source: source_type = null;
 	export let fullscreen = false;
 
+	let files: FileData[] = [];
+	let upload_id: string;
+
 	async function handle_upload({
 		detail
 	}: CustomEvent<FileData>): Promise<void> {
@@ -86,11 +89,20 @@
 			});
 			return;
 		}
+		upload_id = Math.random().toString(36).substring(2, 15);
+		const f_ = new File([img_blob], `image.${streaming ? "jpeg" : "png"}`);
+		files = [
+			new FileData({
+				path: f_.name,
+				orig_name: f_.name,
+				blob: f_,
+				size: f_.size,
+				mime_type: f_.type,
+				is_stream: false
+			})
+		];
 		pending = true;
-		const f = await upload_input.load_files([
-			new File([img_blob], `image/${streaming ? "jpeg" : "png"}`)
-		]);
-
+		const f = await upload_input.load_files([f_], upload_id);
 		if (event === "change" || event === "upload") {
 			value = f?.[0] || null;
 			await tick();
@@ -209,7 +221,9 @@
 				<slot />
 			{/if}
 		</Upload>
-		{#if active_source === "webcam" && (streaming || (!streaming && !value))}
+		{#if active_source === "webcam" && !streaming && pending}
+			<UploadProgress {root} {upload_id} {stream_handler} {files} />
+		{:else if active_source === "webcam" && (streaming || (!streaming && !value))}
 			<Webcam
 				{root}
 				{value}