@gradio/image 0.16.0-beta.4 → 0.16.0-beta.6

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @gradio/image
 
+## 0.16.0-beta.6
+
+### Features
+
+- [#9483](https://github.com/gradio-app/gradio/pull/9483) [`8dc7c12`](https://github.com/gradio-app/gradio/commit/8dc7c12389311b60efcde1b9d3e3668a34d2dc00) - Send Streaming data over Websocket if possible. Also support base64 output format for images.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+- @gradio/client@1.6.0-beta.4
+- @gradio/upload@0.13.0-beta.6
+
+## 0.16.0-beta.5
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.5
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
 ## 0.16.0-beta.4
 
 ### Dependency updates

package/dist/shared/ImageUploader.svelte

@@ -10,7 +10,7 @@ import { FileData } from "@gradio/client";
 import ClearImage from "./ClearImage.svelte";
 import { SelectSource } from "@gradio/atoms";
 import Image from "./Image.svelte";
-export let value;
+export let value = null;
 export let label = void 0;
 export let show_label;
 export let sources = ["upload", "clipboard", "webcam"];
@@ -41,6 +41,13 @@ function handle_clear() {
   dispatch("change", null);
 }
 async function handle_save(img_blob, event) {
+  if (event === "stream") {
+    dispatch("stream", {
+      value: { url: img_blob },
+      is_value_data: true
+    });
+    return;
+  }
   pending = true;
   const f = await upload_input.load_files([
     new File([img_blob], `image/${streaming ? "jpeg" : "png"}`)
@@ -49,8 +56,6 @@ async function handle_save(img_blob, event) {
     value = f?.[0] || null;
     await tick();
     dispatch("change");
-  } else {
-    dispatch("stream", { value: f?.[0] || null, is_value_data: true });
   }
   pending = false;
 }

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

@@ -1,9 +1,10 @@
 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";
 declare const __propDef: {
     props: {
-        value: null | FileData;
+        value?: (null | FileData | Base64File) | undefined;
         label?: string | undefined;
         show_label: boolean;
         sources?: ("upload" | "clipboard" | "microphone" | "webcam" | null)[] | undefined;

package/dist/shared/Webcam.svelte

@@ -47,7 +47,16 @@ export let i18n;
 export let upload;
 export let value = null;
 const dispatch = createEventDispatcher();
-onMount(() => canvas = document.createElement("canvas"));
+onMount(() => {
+  canvas = document.createElement("canvas");
+  if (streaming && mode === "image") {
+    window.setInterval(() => {
+      if (video_source && !pending) {
+        take_picture();
+      }
+    }, stream_every * 1e3);
+  }
+});
 const handle_device_change = async (event) => {
   const target = event.target;
   const device_id = target.value;
@@ -102,6 +111,11 @@ function take_picture() {
     if (streaming && (!recording || stream_state === "waiting")) {
       return;
     }
+    if (streaming) {
+      const image_data = canvas.toDataURL("image/jpeg");
+      dispatch("stream", image_data);
+      return;
+    }
     canvas.toBlob(
       (blob) => {
         dispatch(streaming ? "stream" : "capture", blob);
@@ -179,13 +193,6 @@ function record_video_or_photo() {
     value = null;
   }
 }
-if (streaming && mode === "image") {
-  window.setInterval(() => {
-    if (video_source && !pending) {
-      take_picture();
-    }
-  }, stream_every * 1e3);
-}
 let options_open = false;
 export function click_outside(node, cb) {
   const handle_click = (event) => {

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

@@ -1,6 +1,7 @@
 import { SvelteComponent } from "svelte";
 import type { I18nFormatter } from "@gradio/utils";
 import { type FileData, type Client } from "@gradio/client";
+import type { Base64File } from "./types";
 declare const __propDef: {
     props: {
         modify_stream?: ((state: "open" | "closed" | "waiting") => void) | undefined;
@@ -14,11 +15,11 @@ declare const __propDef: {
         include_audio: boolean;
         i18n: I18nFormatter;
         upload: Client["upload"];
-        value?: (FileData | null) | undefined;
+        value?: (FileData | null | Base64File) | undefined;
         click_outside?: ((node: Node, cb: any) => any) | undefined;
     };
     events: {
-        stream: CustomEvent<undefined>;
+        stream: CustomEvent<string | Blob>;
         capture: CustomEvent<Blob | FileData | null>;
         error: CustomEvent<string>;
         start_recording: CustomEvent<undefined>;

package/dist/shared/types.d.ts

@@ -0,0 +1,4 @@
+export interface Base64File {
+    url: string;
+    alt_text: string;
+}

package/dist/shared/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.16.0-beta.4",
+  "version": "0.16.0-beta.6",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,11 +10,11 @@
     "cropperjs": "^1.5.12",
     "lazy-brush": "^1.0.1",
     "resize-observer-polyfill": "^1.5.1",
-    "@gradio/atoms": "^0.9.0-beta.2",
-    "@gradio/client": "^1.6.0-beta.3",
-    "@gradio/icons": "^0.8.0-beta.2",
-    "@gradio/statustracker": "^0.8.0-beta.2",
-    "@gradio/upload": "^0.13.0-beta.4",
+    "@gradio/atoms": "^0.9.0-beta.4",
+    "@gradio/client": "^1.6.0-beta.4",
+    "@gradio/statustracker": "^0.8.0-beta.4",
+    "@gradio/icons": "^0.8.0-beta.3",
+    "@gradio/upload": "^0.13.0-beta.6",
     "@gradio/utils": "^0.7.0-beta.2",
     "@gradio/wasm": "^0.14.0-beta.3"
   },

package/shared/ImageUploader.svelte

@@ -15,8 +15,9 @@
 	import ClearImage from "./ClearImage.svelte";
 	import { SelectSource } from "@gradio/atoms";
 	import Image from "./Image.svelte";
+	import type { Base64File } from "./types";
 
-	export let value: null | FileData;
+	export let value: null | FileData | Base64File = null;
 	export let label: string | undefined = undefined;
 	export let show_label: boolean;
 
@@ -59,6 +60,13 @@
 		img_blob: Blob | any,
 		event: "change" | "stream" | "upload"
 	): Promise<void> {
+		if (event === "stream") {
+			dispatch("stream", {
+				value: { url: img_blob } as Base64File,
+				is_value_data: true
+			});
+			return;
+		}
 		pending = true;
 		const f = await upload_input.load_files([
 			new File([img_blob], `image/${streaming ? "jpeg" : "png"}`)
@@ -68,8 +76,6 @@
 			value = f?.[0] || null;
 			await tick();
 			dispatch("change");
-		} else {
-			dispatch("stream", { value: f?.[0] || null, is_value_data: true });
 		}
 		pending = false;
 	}

package/shared/Webcam.svelte

@@ -17,6 +17,7 @@
 		get_video_stream,
 		set_available_devices
 	} from "./stream_utils";
+	import type { Base64File } from "./types";
 
 	let video_source: HTMLVideoElement;
 	let available_video_devices: MediaDeviceInfo[] = [];
@@ -53,10 +54,10 @@
 	export let include_audio: boolean;
 	export let i18n: I18nFormatter;
 	export let upload: Client["upload"];
-	export let value: FileData | null = null;
+	export let value: FileData | null | Base64File = null;
 
 	const dispatch = createEventDispatcher<{
-		stream: undefined;
+		stream: Blob | string;
 		capture: FileData | Blob | null;
 		error: string;
 		start_recording: undefined;
@@ -64,7 +65,16 @@
 		close_stream: undefined;
 	}>();
 
-	onMount(() => (canvas = document.createElement("canvas")));
+	onMount(() => {
+		canvas = document.createElement("canvas");
+		if (streaming && mode === "image") {
+			window.setInterval(() => {
+				if (video_source && !pending) {
+					take_picture();
+				}
+			}, stream_every * 1000);
+		}
+	});
 
 	const handle_device_change = async (event: InputEvent): Promise<void> => {
 		const target = event.target as HTMLInputElement;
@@ -141,6 +151,11 @@
 			if (streaming && (!recording || stream_state === "waiting")) {
 				return;
 			}
+			if (streaming) {
+				const image_data = canvas.toDataURL("image/jpeg");
+				dispatch("stream", image_data);
+				return;
+			}
 
 			canvas.toBlob(
 				(blob) => {
@@ -226,14 +241,6 @@
 		}
 	}
 
-	if (streaming && mode === "image") {
-		window.setInterval(() => {
-			if (video_source && !pending) {
-				take_picture();
-			}
-		}, stream_every * 1000);
-	}
-
 	let options_open = false;
 
 	export function click_outside(node: Node, cb: any): any {

package/shared/types.ts

@@ -0,0 +1,4 @@
+export interface Base64File {
+	url: string;
+	alt_text: string;
+}