@gradio/image 0.23.0 → 0.23.2-dev.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @gradio/image
 
+## 0.23.2-dev.0
+
+### Dependency updates
+
+- @gradio/upload@0.17.2-dev.0
+- @gradio/client@2.0.0-dev.0
+
+## 0.23.1
+
+### Dependency updates
+
+- @gradio/client@1.19.1
+
+## 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

package/Image.test.ts

@@ -56,9 +56,9 @@ describe("Image", () => {
 		const mock = listen("change");
 
 		component.value = {
-			url: "https://github.com/gradio-app/gradio/blob/main/test/test_files/cheetah1.jpg",
-			orig_name: "bus.png",
-			path: "https://github.com/gradio-app/gradio/blob/main/test/test_files/cheetah1.jpg"
+			url: "https://github.com/gradio-app/gradio/blob/main/gradio/media_assets/images/cheetah1.jpg",
+			orig_name: "cheetah1.jpg",
+			path: "https://github.com/gradio-app/gradio/blob/main/gradio/media_assets/images/cheetah1.jpg"
 		};
 		assert.equal(mock.callCount, 1);
 	});

package/Index.svelte

@@ -41,7 +41,7 @@
 	let old_value: null | FileData = null;
 	export let label: string;
 	export let show_label: boolean;
-	export let show_download_button: boolean;
+	export let buttons: string[] | null = null;
 	export let root: string;
 
 	export let height: number | undefined;
@@ -53,7 +53,6 @@
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
-	export let show_share_button = false;
 	export let sources: ("clipboard" | "webcam" | "upload")[] = [
 		"upload",
 		"clipboard",
@@ -63,7 +62,6 @@
 	export let streaming: boolean;
 	export let pending: boolean;
 	export let placeholder: string | undefined = undefined;
-	export let show_fullscreen_button: boolean;
 	export let input_ready: boolean;
 	export let webcam_options: WebcamOptions;
 	let fullscreen = false;
@@ -159,11 +157,9 @@
 			{value}
 			{label}
 			{show_label}
-			{show_download_button}
+			{buttons}
 			selectable={_selectable}
-			{show_share_button}
 			i18n={gradio.i18n}
-			{show_fullscreen_button}
 		/>
 	</Block>
 {:else}
@@ -203,6 +199,9 @@
 			{root}
 			{sources}
 			{fullscreen}
+			show_fullscreen_button={buttons === null
+				? true
+				: buttons.includes("fullscreen")}
 			on:edit={() => gradio.dispatch("edit")}
 			on:clear={() => {
 				fullscreen = false;

package/dist/Index.svelte

@@ -31,7 +31,7 @@ export let value = null;
 let old_value = null;
 export let label;
 export let show_label;
-export let show_download_button;
+export let buttons = null;
 export let root;
 export let height;
 export let width;
@@ -41,7 +41,6 @@ export let container = true;
 export let scale = null;
 export let min_width = void 0;
 export let loading_status;
-export let show_share_button = false;
 export let sources = [
   "upload",
   "clipboard",
@@ -51,7 +50,6 @@ export let interactive;
 export let streaming;
 export let pending;
 export let placeholder = void 0;
-export let show_fullscreen_button;
 export let input_ready;
 export let webcam_options;
 let fullscreen = false;
@@ -128,11 +126,9 @@ const handle_drop = (event) => {
 			{value}
 			{label}
 			{show_label}
-			{show_download_button}
+			{buttons}
 			selectable={_selectable}
-			{show_share_button}
 			i18n={gradio.i18n}
-			{show_fullscreen_button}
 		/>
 	</Block>
 {:else}
@@ -172,6 +168,9 @@ const handle_drop = (event) => {
 			{root}
 			{sources}
 			{fullscreen}
+			show_fullscreen_button={buttons === null
+				? true
+				: buttons.includes("fullscreen")}
 			on:edit={() => gradio.dispatch("edit")}
 			on:clear={() => {
 				fullscreen = false;

package/dist/Index.svelte.d.ts

@@ -20,7 +20,7 @@ declare const __propDef: {
         value?: null | FileData;
         label: string;
         show_label: boolean;
-        show_download_button: boolean;
+        buttons?: string[] | null;
         root: string;
         height: number | undefined;
         width: number | undefined;
@@ -30,13 +30,11 @@ declare const __propDef: {
         scale?: number | null;
         min_width?: number | undefined;
         loading_status: LoadingStatus;
-        show_share_button?: boolean;
         sources?: ("clipboard" | "webcam" | "upload")[];
         interactive: boolean;
         streaming: boolean;
         pending: boolean;
         placeholder?: string | undefined;
-        show_fullscreen_button: boolean;
         input_ready: boolean;
         webcam_options: WebcamOptions;
         gradio: Gradio<{
@@ -94,9 +92,9 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get show_label(): boolean;
     /**accessor*/
     set show_label(_: boolean);
-    get show_download_button(): boolean;
+    get buttons(): string[] | null | undefined;
     /**accessor*/
-    set show_download_button(_: boolean);
+    set buttons(_: string[] | null | undefined);
     get root(): string;
     /**accessor*/
     set root(_: string);
@@ -124,9 +122,6 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get loading_status(): LoadingStatus;
     /**accessor*/
     set loading_status(_: LoadingStatus);
-    get show_share_button(): boolean | undefined;
-    /**accessor*/
-    set show_share_button(_: boolean | undefined);
     get sources(): ("clipboard" | "upload" | "webcam")[] | undefined;
     /**accessor*/
     set sources(_: ("clipboard" | "upload" | "webcam")[] | undefined);
@@ -142,9 +137,6 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get placeholder(): string | undefined;
     /**accessor*/
     set placeholder(_: string | undefined);
-    get show_fullscreen_button(): boolean;
-    /**accessor*/
-    set show_fullscreen_button(_: boolean);
     get input_ready(): boolean;
     /**accessor*/
     set input_ready(_: boolean);

package/dist/shared/ImagePreview.svelte

@@ -15,11 +15,9 @@ import Image from "./Image.svelte";
 export let value;
 export let label = void 0;
 export let show_label;
-export let show_download_button = true;
+export let buttons = null;
 export let selectable = false;
-export let show_share_button = false;
 export let i18n;
-export let show_fullscreen_button = true;
 export let display_icon_button_wrapper_top_corner = false;
 export let fullscreen = false;
 const dispatch = createEventDispatcher();
@@ -44,16 +42,16 @@ let image_container;
 		<IconButtonWrapper
 			display_top_corner={display_icon_button_wrapper_top_corner}
 		>
-			{#if show_fullscreen_button}
+			{#if buttons === null ? true : buttons.includes("fullscreen")}
 				<FullscreenButton {fullscreen} on:fullscreen />
 			{/if}
 
-			{#if show_download_button}
+			{#if buttons === null ? true : buttons.includes("download")}
 				<DownloadLink href={value.url} download={value.orig_name || "image"}>
 					<IconButton Icon={Download} label={i18n("common.download")} />
 				</DownloadLink>
 			{/if}
-			{#if show_share_button}
+			{#if buttons === null ? true : buttons.includes("share")}
 				<ShareButton
 					{i18n}
 					on:share

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

@@ -7,11 +7,9 @@ declare const __propDef: {
         value: null | FileData;
         label?: string | undefined;
         show_label: boolean;
-        show_download_button?: boolean;
+        buttons?: string[] | null;
         selectable?: boolean;
-        show_share_button?: boolean;
         i18n: I18nFormatter;
-        show_fullscreen_button?: boolean;
         display_icon_button_wrapper_top_corner?: boolean;
         fullscreen?: boolean;
     };

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.23.0",
+  "version": "0.23.2-dev.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,12 +10,12 @@
     "cropperjs": "^1.5.12",
     "lazy-brush": "^1.0.1",
     "resize-observer-polyfill": "^1.5.1",
-    "@gradio/atoms": "^0.18.0",
-    "@gradio/icons": "^0.14.0",
+    "@gradio/atoms": "^0.18.1",
     "@gradio/statustracker": "^0.11.1",
-    "@gradio/client": "^1.19.0",
-    "@gradio/upload": "^0.17.0",
-    "@gradio/utils": "^0.10.2"
+    "@gradio/icons": "^0.14.0",
+    "@gradio/client": "^2.0.0-dev.0",
+    "@gradio/utils": "^0.10.2",
+    "@gradio/upload": "^0.17.2-dev.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.14.0"

package/shared/ImagePreview.svelte

@@ -21,11 +21,9 @@
 	export let value: null | FileData;
 	export let label: string | undefined = undefined;
 	export let show_label: boolean;
-	export let show_download_button = true;
+	export let buttons: string[] | null = null;
 	export let selectable = false;
-	export let show_share_button = false;
 	export let i18n: I18nFormatter;
-	export let show_fullscreen_button = true;
 	export let display_icon_button_wrapper_top_corner = false;
 	export let fullscreen = false;
 
@@ -57,16 +55,16 @@
 		<IconButtonWrapper
 			display_top_corner={display_icon_button_wrapper_top_corner}
 		>
-			{#if show_fullscreen_button}
+			{#if buttons === null ? true : buttons.includes("fullscreen")}
 				<FullscreenButton {fullscreen} on:fullscreen />
 			{/if}
 
-			{#if show_download_button}
+			{#if buttons === null ? true : buttons.includes("download")}
 				<DownloadLink href={value.url} download={value.orig_name || "image"}>
 					<IconButton Icon={Download} label={i18n("common.download")} />
 				</DownloadLink>
 			{/if}
-			{#if show_share_button}
+			{#if buttons === null ? true : buttons.includes("share")}
 				<ShareButton
 					{i18n}
 					on:share

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}