@gradio/image 0.16.8 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @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
+
+- [#10054](https://github.com/gradio-app/gradio/pull/10054) [`458941c`](https://github.com/gradio-app/gradio/commit/458941c508f11d43debf1cef6950f330145e336d) - Allow full screen mode in interactive gr.Image.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/atoms@0.11.2
+- @gradio/utils@0.9.0
+- @gradio/statustracker@0.9.6
+- @gradio/upload@0.14.2
+
 ## 0.16.8
 
 ### Dependency updates

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

@@ -1,13 +1,12 @@
 <script>import { createEventDispatcher, tick } from "svelte";
-import { BlockLabel } from "@gradio/atoms";
-import { Image as ImageIcon } from "@gradio/icons";
+import { BlockLabel, IconButtonWrapper, IconButton } from "@gradio/atoms";
+import { Clear, Image as ImageIcon, Maximize, Minimize } from "@gradio/icons";
 import {
 } from "@gradio/utils";
 import { get_coordinates_of_clicked_image } from "./utils";
 import Webcam from "./Webcam.svelte";
 import { Upload } from "@gradio/upload";
 import { FileData } from "@gradio/client";
-import ClearImage from "./ClearImage.svelte";
 import { SelectSource } from "@gradio/atoms";
 import Image from "./Image.svelte";
 export let value = null;
@@ -26,9 +25,11 @@ export let stream_handler;
 export let stream_every;
 export let modify_stream;
 export let set_time_limit;
+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;
@@ -87,19 +88,48 @@ async function handle_select_source(source) {
       break;
   }
 }
+let is_full_screen = false;
+let image_container;
+const toggle_full_screen = async () => {
+  if (!is_full_screen) {
+    await image_container.requestFullscreen();
+  } else {
+    await document.exitFullscreen();
+    is_full_screen = !is_full_screen;
+  }
+};
 </script>
 
 <BlockLabel {show_label} Icon={ImageIcon} label={label || "Image"} />
 
-<div data-testid="image" class="image-container">
-	{#if value?.url && !active_streaming}
-		<ClearImage
-			on:remove_image={() => {
-				value = null;
-				dispatch("clear");
-			}}
-		/>
-	{/if}
+<div data-testid="image" class="image-container" bind:this={image_container}>
+	<IconButtonWrapper>
+		{#if value?.url && !active_streaming}
+			{#if !is_full_screen && show_fullscreen_button}
+				<IconButton
+					Icon={Maximize}
+					label={is_full_screen ? "Exit full screen" : "View in full screen"}
+					on:click={toggle_full_screen}
+				/>
+			{/if}
+			{#if is_full_screen && show_fullscreen_button}
+				<IconButton
+					Icon={Minimize}
+					label={is_full_screen ? "Exit full screen" : "View in full screen"}
+					on:click={toggle_full_screen}
+				/>
+			{/if}
+			<IconButton
+				Icon={Clear}
+				label="Remove Image"
+				on:click={(event) => {
+					value = null;
+					dispatch("clear");
+					event.stopPropagation();
+				}}
+			/>
+		{/if}
+	</IconButtonWrapper>
 	<div
 		class="upload-container"
 		class:reduced-height={sources.length > 1}
@@ -142,6 +172,7 @@ async function handle_select_source(source) {
 				{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

@@ -20,8 +20,12 @@ declare const __propDef: {
         stream_every: number;
         modify_stream: (state: "open" | "closed" | "waiting") => void;
         set_time_limit: (arg0: number) => void;
+        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.16.8",
+  "version": "0.18.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.11.1",
+    "@gradio/atoms": "^0.11.2",
     "@gradio/icons": "^0.8.1",
-    "@gradio/statustracker": "^0.9.5",
-    "@gradio/upload": "^0.14.1",
-    "@gradio/utils": "^0.8.0",
     "@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"
   },
   "devDependencies": {

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher, tick } from "svelte";
-	import { BlockLabel } from "@gradio/atoms";
-	import { Image as ImageIcon } from "@gradio/icons";
+	import { BlockLabel, IconButtonWrapper, IconButton } from "@gradio/atoms";
+	import { Clear, Image as ImageIcon, Maximize, Minimize } from "@gradio/icons";
 	import {
 		type SelectData,
 		type I18nFormatter,
@@ -12,7 +12,6 @@
 
 	import { Upload } from "@gradio/upload";
 	import { FileData, type Client } from "@gradio/client";
-	import ClearImage from "./ClearImage.svelte";
 	import { SelectSource } from "@gradio/atoms";
 	import Image from "./Image.svelte";
 	import type { Base64File } from "./types";
@@ -37,11 +36,14 @@
 
 	export let modify_stream: (state: "open" | "closed" | "waiting") => void;
 	export let set_time_limit: (arg0: number) => void;
+	export let show_fullscreen_button = true;
 
 	let upload_input: Upload;
 	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) {
@@ -119,19 +121,50 @@
 				break;
 		}
 	}
+
+	let is_full_screen = false;
+	let image_container: HTMLElement;
+
+	const toggle_full_screen = async (): Promise<void> => {
+		if (!is_full_screen) {
+			await image_container.requestFullscreen();
+		} else {
+			await document.exitFullscreen();
+			is_full_screen = !is_full_screen;
+		}
+	};
 </script>
 
 <BlockLabel {show_label} Icon={ImageIcon} label={label || "Image"} />
 
-<div data-testid="image" class="image-container">
-	{#if value?.url && !active_streaming}
-		<ClearImage
-			on:remove_image={() => {
-				value = null;
-				dispatch("clear");
-			}}
-		/>
-	{/if}
+<div data-testid="image" class="image-container" bind:this={image_container}>
+	<IconButtonWrapper>
+		{#if value?.url && !active_streaming}
+			{#if !is_full_screen && show_fullscreen_button}
+				<IconButton
+					Icon={Maximize}
+					label={is_full_screen ? "Exit full screen" : "View in full screen"}
+					on:click={toggle_full_screen}
+				/>
+			{/if}
+			{#if is_full_screen && show_fullscreen_button}
+				<IconButton
+					Icon={Minimize}
+					label={is_full_screen ? "Exit full screen" : "View in full screen"}
+					on:click={toggle_full_screen}
+				/>
+			{/if}
+			<IconButton
+				Icon={Clear}
+				label="Remove Image"
+				on:click={(event) => {
+					value = null;
+					dispatch("clear");
+					event.stopPropagation();
+				}}
+			/>
+		{/if}
+	</IconButtonWrapper>
 	<div
 		class="upload-container"
 		class:reduced-height={sources.length > 1}
@@ -174,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

package/dist/shared/ClearImage.svelte

@@ -1,16 +0,0 @@
-<script>import { createEventDispatcher } from "svelte";
-import { IconButton, IconButtonWrapper } from "@gradio/atoms";
-import { Clear } from "@gradio/icons";
-const dispatch = createEventDispatcher();
-</script>
-
-<IconButtonWrapper>
-	<IconButton
-		Icon={Clear}
-		label="Remove Image"
-		on:click={(event) => {
-			dispatch("remove_image");
-			event.stopPropagation();
-		}}
-	/>
-</IconButtonWrapper>

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

@@ -1,18 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        remove_image: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ClearImageProps = typeof __propDef.props;
-export type ClearImageEvents = typeof __propDef.events;
-export type ClearImageSlots = typeof __propDef.slots;
-export default class ClearImage extends SvelteComponent<ClearImageProps, ClearImageEvents, ClearImageSlots> {
-}
-export {};

package/shared/ClearImage.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from "svelte";
-	import { IconButton, IconButtonWrapper } from "@gradio/atoms";
-	import { Clear } from "@gradio/icons";
-
-	const dispatch = createEventDispatcher();
-</script>
-
-<IconButtonWrapper>
-	<IconButton
-		Icon={Clear}
-		label="Remove Image"
-		on:click={(event) => {
-			dispatch("remove_image");
-			event.stopPropagation();
-		}}
-	/>
-</IconButtonWrapper>