@gradio/image 0.17.0 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @gradio/image
 
+## 0.18.0
+
+### Features
+
+- [#10099](https://github.com/gradio-app/gradio/pull/10099) [`8530b6e`](https://github.com/gradio-app/gradio/commit/8530b6e2f986421adceda98f972e6b843bc03fbe) - Redesign pending bubble in Chatbot.  Thanks @hannahblair!
+- [#10032](https://github.com/gradio-app/gradio/pull/10032) [`e450674`](https://github.com/gradio-app/gradio/commit/e450674ce41ca28f1f37a27fb149c728593a6ddf) - add  `webcam_height` and `webcam_width` to specify the resolution of the Webcam.  Thanks @yinsumirage!
+
 ## 0.17.0
 
 ### Features

package/Index.svelte

@@ -65,6 +65,7 @@
 	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;
 	let uploading = false;
 	$: input_ready = !uploading;
 	export let gradio: Gradio<{
@@ -218,6 +219,7 @@
 			{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

@@ -54,6 +54,7 @@ export let mirror_webcam;
 export let placeholder = void 0;
 export let show_fullscreen_button;
 export let input_ready;
+export let webcam_constraints = void 0;
 let uploading = false;
 $:
   input_ready = !uploading;
@@ -190,6 +191,7 @@ const handle_drop = (event) => {
 			{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

@@ -38,6 +38,9 @@ declare const __propDef: {
         placeholder?: string | undefined;
         show_fullscreen_button: boolean;
         input_ready: boolean;
+        webcam_constraints?: {
+            [key: string]: any;
+        } | undefined;
         gradio: Gradio<{
             input: never;
             change: never;
@@ -148,6 +151,13 @@ 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;
+    /**accessor*/
+    set webcam_constraints(_: {
+        [key: string]: any;
+    } | undefined);
     get gradio(): Gradio<{
         input: never;
         change: never;

package/dist/shared/ImagePreview.svelte

@@ -103,6 +103,7 @@ const toggle_full_screen = async () => {
 	.image-container {
 		height: 100%;
 		position: relative;
+		min-width: var(--size-20);
 	}
 
 	.image-container button {

package/dist/shared/ImageUploader.svelte

@@ -29,6 +29,7 @@ export let show_fullscreen_button = true;
 let upload_input;
 export let uploading = false;
 export let active_source = null;
+export let webcam_constraints = void 0;
 function handle_upload({ detail }) {
   if (!streaming) {
     value = detail;
@@ -171,6 +172,7 @@ const toggle_full_screen = async () => {
 				{upload}
 				bind:modify_stream
 				bind:set_time_limit
+				{webcam_constraints}
 			/>
 		{:else if value !== null && !streaming}
 			<!-- svelte-ignore a11y-click-events-have-key-events-->

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

@@ -23,6 +23,9 @@ 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/Webcam.svelte

@@ -43,6 +43,7 @@ export let stream_every = 1;
 export let mode = "image";
 export let mirror_webcam;
 export let include_audio;
+export let webcam_constraints = null;
 export let i18n;
 export let upload;
 export let value = null;
@@ -60,19 +61,22 @@ onMount(() => {
 const handle_device_change = async (event) => {
   const target = event.target;
   const device_id = target.value;
-  await get_video_stream(include_audio, video_source, device_id).then(
-    async (local_stream) => {
-      stream = local_stream;
-      selected_device = available_video_devices.find(
-        (device) => device.deviceId === device_id
-      ) || null;
-      options_open = false;
-    }
-  );
+  await get_video_stream(
+    include_audio,
+    video_source,
+    webcam_constraints,
+    device_id
+  ).then(async (local_stream) => {
+    stream = local_stream;
+    selected_device = available_video_devices.find(
+      (device) => device.deviceId === device_id
+    ) || null;
+    options_open = false;
+  });
 };
 async function access_webcam() {
   try {
-    get_video_stream(include_audio, video_source).then(async (local_stream) => {
+    get_video_stream(include_audio, video_source, webcam_constraints).then(async (local_stream) => {
       webcam_accessed = true;
       available_video_devices = await get_devices();
       stream = local_stream;

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

@@ -13,6 +13,9 @@ declare const __propDef: {
         mode?: ("image" | "video") | undefined;
         mirror_webcam: boolean;
         include_audio: boolean;
+        webcam_constraints?: ({
+            [key: string]: any;
+        } | null) | undefined;
         i18n: I18nFormatter;
         upload: Client["upload"];
         value?: FileData | null | Base64File;

package/dist/shared/stream_utils.d.ts

@@ -1,5 +1,7 @@
 export declare function get_devices(): Promise<MediaDeviceInfo[]>;
 export declare function handle_error(error: string): void;
 export declare function set_local_stream(local_stream: MediaStream | null, video_source: HTMLVideoElement): void;
-export declare function get_video_stream(include_audio: boolean, video_source: HTMLVideoElement, device_id?: string): Promise<MediaStream>;
+export declare function get_video_stream(include_audio: boolean, video_source: HTMLVideoElement, webcam_constraints: {
+    [key: string]: any;
+} | null, device_id?: string): Promise<MediaStream>;
 export declare function set_available_devices(devices: MediaDeviceInfo[]): MediaDeviceInfo[];

package/dist/shared/stream_utils.js

@@ -9,14 +9,15 @@ export function set_local_stream(local_stream, video_source) {
     video_source.muted = true;
     video_source.play();
 }
-export async function get_video_stream(include_audio, video_source, device_id) {
-    const size = {
-        width: { ideal: 1920 },
-        height: { ideal: 1440 }
-    };
+export async function get_video_stream(include_audio, video_source, webcam_constraints, device_id) {
     const constraints = {
-        video: device_id ? { deviceId: { exact: device_id }, ...size } : size,
-        audio: include_audio
+        video: device_id
+            ? { deviceId: { exact: device_id }, ...webcam_constraints?.video }
+            : webcam_constraints?.video || {
+                width: { ideal: 1920 },
+                height: { ideal: 1440 }
+            },
+        audio: include_audio && (webcam_constraints?.audio ?? true) // Defaults to true if not specified
     };
     return navigator.mediaDevices
         .getUserMedia(constraints)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -11,10 +11,10 @@
     "lazy-brush": "^1.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "@gradio/atoms": "^0.11.2",
-    "@gradio/client": "^1.8.0",
     "@gradio/icons": "^0.8.1",
-    "@gradio/upload": "^0.14.2",
+    "@gradio/client": "^1.8.0",
     "@gradio/statustracker": "^0.9.6",
+    "@gradio/upload": "^0.14.2",
     "@gradio/utils": "^0.9.0",
     "@gradio/wasm": "^0.15.0"
   },

package/shared/ImagePreview.svelte

@@ -116,6 +116,7 @@
 	.image-container {
 		height: 100%;
 		position: relative;
+		min-width: var(--size-20);
 	}
 
 	.image-container button {

package/shared/ImageUploader.svelte

@@ -42,6 +42,8 @@
 	export let uploading = false;
 	export let active_source: source_type = null;
 
+	export let webcam_constraints: { [key: string]: any } | undefined = undefined;
+
 	function handle_upload({ detail }: CustomEvent<FileData>): void {
 		// only trigger streaming event if streaming
 		if (!streaming) {
@@ -205,6 +207,7 @@
 				{upload}
 				bind:modify_stream
 				bind:set_time_limit
+				{webcam_constraints}
 			/>
 		{:else if value !== null && !streaming}
 			<!-- svelte-ignore a11y-click-events-have-key-events-->

package/shared/Webcam.svelte

@@ -18,6 +18,7 @@
 		set_available_devices
 	} from "./stream_utils";
 	import type { Base64File } from "./types";
+	import type { int } from "babylonjs";
 
 	let video_source: HTMLVideoElement;
 	let available_video_devices: MediaDeviceInfo[] = [];
@@ -52,6 +53,7 @@
 	export let mode: "image" | "video" = "image";
 	export let mirror_webcam: boolean;
 	export let include_audio: boolean;
+	export let webcam_constraints: { [key: string]: any } | null = null;
 	export let i18n: I18nFormatter;
 	export let upload: Client["upload"];
 	export let value: FileData | null | Base64File = null;
@@ -80,21 +82,24 @@
 		const target = event.target as HTMLInputElement;
 		const device_id = target.value;
 
-		await get_video_stream(include_audio, video_source, device_id).then(
-			async (local_stream) => {
-				stream = local_stream;
-				selected_device =
-					available_video_devices.find(
-						(device) => device.deviceId === device_id
-					) || null;
-				options_open = false;
-			}
-		);
+		await get_video_stream(
+			include_audio,
+			video_source,
+			webcam_constraints,
+			device_id
+		).then(async (local_stream) => {
+			stream = local_stream;
+			selected_device =
+				available_video_devices.find(
+					(device) => device.deviceId === device_id
+				) || null;
+			options_open = false;
+		});
 	};
 
 	async function access_webcam(): Promise<void> {
 		try {
-			get_video_stream(include_audio, video_source)
+			get_video_stream(include_audio, video_source, webcam_constraints)
 				.then(async (local_stream) => {
 					webcam_accessed = true;
 					available_video_devices = await get_devices();

package/shared/stream_utils.ts

@@ -18,16 +18,17 @@ export function set_local_stream(
 export async function get_video_stream(
 	include_audio: boolean,
 	video_source: HTMLVideoElement,
+	webcam_constraints: { [key: string]: any } | null,
 	device_id?: string
 ): Promise<MediaStream> {
-	const size = {
-		width: { ideal: 1920 },
-		height: { ideal: 1440 }
-	};
-
-	const constraints = {
-		video: device_id ? { deviceId: { exact: device_id }, ...size } : size,
-		audio: include_audio
+	const constraints: MediaStreamConstraints = {
+		video: device_id
+			? { deviceId: { exact: device_id }, ...webcam_constraints?.video }
+			: webcam_constraints?.video || {
+					width: { ideal: 1920 },
+					height: { ideal: 1440 }
+				},
+		audio: include_audio && (webcam_constraints?.audio ?? true) // Defaults to true if not specified
 	};
 
 	return navigator.mediaDevices