@gradio/image 0.17.0 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @gradio/image
 
+## 0.19.0
+
+### Features
+
+- [#10098](https://github.com/gradio-app/gradio/pull/10098) [`9a6ce6f`](https://github.com/gradio-app/gradio/commit/9a6ce6f6b089d94c06da0b8620f28967f39f8383) - Refactor full screen logic to be reusable.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/statustracker@0.9.7
+- @gradio/upload@0.14.3
+- @gradio/atoms@0.12.0
+
+## 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

@@ -5,15 +5,13 @@ import {
   Empty,
   IconButton,
   ShareButton,
-  IconButtonWrapper
+  IconButtonWrapper,
+  FullscreenButton
 } from "@gradio/atoms";
-import { Download } from "@gradio/icons";
+import { Download, Image as ImageIcon } from "@gradio/icons";
 import { get_coordinates_of_clicked_image } from "./utils";
-import Image from "./Image.svelte";
+import { Image } from "@gradio/image/shared";
 import { DownloadLink } from "@gradio/wasm/svelte";
-import { Maximize, Minimize } from "@gradio/icons";
-import { Image as ImageIcon } from "@gradio/icons";
-import {} from "@gradio/client";
 export let value;
 export let label = void 0;
 export let show_label;
@@ -22,6 +20,7 @@ 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;
 const dispatch = createEventDispatcher();
 const handle_click = (evt) => {
   let coordinates = get_coordinates_of_clicked_image(evt);
@@ -29,21 +28,7 @@ const handle_click = (evt) => {
     dispatch("select", { index: coordinates, value: null });
   }
 };
-let is_full_screen = false;
 let image_container;
-onMount(() => {
-  document.addEventListener("fullscreenchange", () => {
-    is_full_screen = !!document.fullscreenElement;
-  });
-});
-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
@@ -55,21 +40,11 @@ const toggle_full_screen = async () => {
 	<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
 {:else}
 	<div class="image-container" bind:this={image_container}>
-		<IconButtonWrapper>
-			{#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}
-				/>
+		<IconButtonWrapper
+			display_top_corner={display_icon_button_wrapper_top_corner}
+		>
+			{#if show_fullscreen_button}
+				<FullscreenButton container={image_container} />
 			{/if}
 
 			{#if show_download_button}
@@ -103,6 +78,7 @@ const toggle_full_screen = async () => {
 	.image-container {
 		height: 100%;
 		position: relative;
+		min-width: var(--size-20);
 	}
 
 	.image-container button {

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

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 import type { SelectData } from "@gradio/utils";
-import { type FileData } from "@gradio/client";
 import type { I18nFormatter } from "@gradio/utils";
+import type { FileData } from "@gradio/client";
 declare const __propDef: {
     props: {
         value: null | FileData;
@@ -12,6 +12,7 @@ declare const __propDef: {
         show_share_button?: boolean | undefined;
         i18n: I18nFormatter;
         show_fullscreen_button?: boolean | undefined;
+        display_icon_button_wrapper_top_corner?: boolean | undefined;
     };
     events: {
         share: CustomEvent<import("@gradio/utils").ShareData>;

package/dist/shared/ImageUploader.svelte

@@ -1,6 +1,7 @@
 <script>import { createEventDispatcher, tick } from "svelte";
 import { BlockLabel, IconButtonWrapper, IconButton } from "@gradio/atoms";
-import { Clear, Image as ImageIcon, Maximize, Minimize } from "@gradio/icons";
+import { Clear, Image as ImageIcon } from "@gradio/icons";
+import { FullscreenButton } from "@gradio/atoms";
 import {
 } from "@gradio/utils";
 import { get_coordinates_of_clicked_image } from "./utils";
@@ -29,6 +30,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;
@@ -87,16 +89,7 @@ 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"} />
@@ -104,19 +97,8 @@ const toggle_full_screen = async () => {
 <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 show_fullscreen_button}
+				<FullscreenButton container={image_container} />
 			{/if}
 			<IconButton
 				Icon={Clear}
@@ -171,6 +153,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.19.0",
   "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.11.2",
+    "@gradio/atoms": "^0.12.0",
     "@gradio/client": "^1.8.0",
     "@gradio/icons": "^0.8.1",
-    "@gradio/upload": "^0.14.2",
-    "@gradio/statustracker": "^0.9.6",
+    "@gradio/statustracker": "^0.9.7",
+    "@gradio/upload": "^0.14.3",
     "@gradio/utils": "^0.9.0",
     "@gradio/wasm": "^0.15.0"
   },

package/shared/ImagePreview.svelte

@@ -7,17 +7,16 @@
 		Empty,
 		IconButton,
 		ShareButton,
-		IconButtonWrapper
+		IconButtonWrapper,
+		FullscreenButton
 	} from "@gradio/atoms";
-	import { Download } from "@gradio/icons";
+	import { Download, Image as ImageIcon } from "@gradio/icons";
 	import { get_coordinates_of_clicked_image } from "./utils";
-	import Image from "./Image.svelte";
+	import { Image } from "@gradio/image/shared";
 	import { DownloadLink } from "@gradio/wasm/svelte";
-	import { Maximize, Minimize } from "@gradio/icons";
 
-	import { Image as ImageIcon } from "@gradio/icons";
-	import { type FileData } from "@gradio/client";
 	import type { I18nFormatter } from "@gradio/utils";
+	import type { FileData } from "@gradio/client";
 
 	export let value: null | FileData;
 	export let label: string | undefined = undefined;
@@ -27,6 +26,7 @@
 	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;
 
 	const dispatch = createEventDispatcher<{
 		change: string;
@@ -40,23 +40,7 @@
 		}
 	};
 
-	let is_full_screen = false;
 	let image_container: HTMLElement;
-
-	onMount(() => {
-		document.addEventListener("fullscreenchange", () => {
-			is_full_screen = !!document.fullscreenElement;
-		});
-	});
-
-	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
@@ -68,21 +52,11 @@
 	<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
 {:else}
 	<div class="image-container" bind:this={image_container}>
-		<IconButtonWrapper>
-			{#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}
-				/>
+		<IconButtonWrapper
+			display_top_corner={display_icon_button_wrapper_top_corner}
+		>
+			{#if show_fullscreen_button}
+				<FullscreenButton container={image_container} />
 			{/if}
 
 			{#if show_download_button}
@@ -116,6 +90,7 @@
 	.image-container {
 		height: 100%;
 		position: relative;
+		min-width: var(--size-20);
 	}
 
 	.image-container button {

package/shared/ImageUploader.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { createEventDispatcher, tick } from "svelte";
 	import { BlockLabel, IconButtonWrapper, IconButton } from "@gradio/atoms";
-	import { Clear, Image as ImageIcon, Maximize, Minimize } from "@gradio/icons";
+	import { Clear, Image as ImageIcon } from "@gradio/icons";
+	import { FullscreenButton } from "@gradio/atoms";
 	import {
 		type SelectData,
 		type I18nFormatter,
@@ -42,6 +43,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) {
@@ -120,17 +123,7 @@
 		}
 	}
 
-	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"} />
@@ -138,19 +131,8 @@
 <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 show_fullscreen_button}
+				<FullscreenButton container={image_container} />
 			{/if}
 			<IconButton
 				Icon={Clear}
@@ -205,6 +187,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