@gradio/image 0.23.2-dev.0 → 0.24.0-dev.2

package/dist/shared/ImagePreview.svelte

@@ -1,33 +1,47 @@
-<script>import { createEventDispatcher, onMount } from "svelte";
-import { uploadToHuggingFace } from "@gradio/utils";
-import {
-  BlockLabel,
-  Empty,
-  IconButton,
-  ShareButton,
-  IconButtonWrapper,
-  FullscreenButton,
-  DownloadLink
-} from "@gradio/atoms";
-import { Download, Image as ImageIcon } from "@gradio/icons";
-import { get_coordinates_of_clicked_image } from "./utils";
-import Image from "./Image.svelte";
-export let value;
-export let label = void 0;
-export let show_label;
-export let buttons = null;
-export let selectable = false;
-export let i18n;
-export let display_icon_button_wrapper_top_corner = false;
-export let fullscreen = false;
-const dispatch = createEventDispatcher();
-const handle_click = (evt) => {
-  let coordinates = get_coordinates_of_clicked_image(evt);
-  if (coordinates) {
-    dispatch("select", { index: coordinates, value: null });
-  }
-};
-let image_container;
+<script lang="ts">
+	import { createEventDispatcher, onMount } from "svelte";
+	import type { SelectData } from "@gradio/utils";
+	import { uploadToHuggingFace } from "@gradio/utils";
+	import {
+		BlockLabel,
+		Empty,
+		IconButton,
+		ShareButton,
+		IconButtonWrapper,
+		FullscreenButton,
+		DownloadLink
+	} from "@gradio/atoms";
+	import { Download, Image as ImageIcon } from "@gradio/icons";
+	import { get_coordinates_of_clicked_image } from "./utils";
+	import Image from "./Image.svelte";
+
+	import type { I18nFormatter } from "@gradio/utils";
+	import type { FileData } from "@gradio/client";
+
+	export let value: null | FileData;
+	export let label: string | undefined = undefined;
+	export let show_label: boolean;
+	export let buttons: string[] | null = null;
+	export let selectable = false;
+	export let i18n: I18nFormatter;
+	export let display_icon_button_wrapper_top_corner = false;
+	export let fullscreen = false;
+	export let show_button_background = true;
+
+	const dispatch = createEventDispatcher<{
+		change: string;
+		select: SelectData;
+		fullscreen: boolean;
+	}>();
+
+	const handle_click = (evt: MouseEvent): void => {
+		let coordinates = get_coordinates_of_clicked_image(evt);
+		if (coordinates) {
+			dispatch("select", { index: coordinates, value: null });
+		}
+	};
+
+	let image_container: HTMLElement;
 </script>
 
 <BlockLabel
@@ -35,12 +49,13 @@ let image_container;
 	Icon={ImageIcon}
 	label={!show_label ? "" : label || i18n("image.image")}
 />
-{#if value === null || !value.url}
+{#if value == null || !value?.url}
 	<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
 {:else}
 	<div class="image-container" bind:this={image_container}>
 		<IconButtonWrapper
 			display_top_corner={display_icon_button_wrapper_top_corner}
+			show_background={show_button_background}
 		>
 			{#if buttons === null ? true : buttons.includes("fullscreen")}
 				<FullscreenButton {fullscreen} on:fullscreen />
@@ -67,7 +82,11 @@ let image_container;
 		</IconButtonWrapper>
 		<button on:click={handle_click}>
 			<div class:selectable class="image-frame">
-				<Image src={value.url} alt="" loading="lazy" on:load />
+				<Image
+					src={value.url}
+					restProps={{ loading: "lazy", alt: "" }}
+					on:load
+				/>
 			</div>
 		</button>
 	</div>

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

@@ -1,35 +1,38 @@
-import { SvelteComponent } from "svelte";
 import type { SelectData } from "@gradio/utils";
 import type { I18nFormatter } from "@gradio/utils";
 import type { FileData } from "@gradio/client";
-declare const __propDef: {
-    props: {
-        value: null | FileData;
-        label?: string | undefined;
-        show_label: boolean;
-        buttons?: string[] | null;
-        selectable?: boolean;
-        i18n: I18nFormatter;
-        display_icon_button_wrapper_top_corner?: boolean;
-        fullscreen?: boolean;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        fullscreen: CustomEvent<any>;
-        share: CustomEvent<import("@gradio/utils").ShareData>;
-        error: CustomEvent<string>;
-        load: Event;
-        change: CustomEvent<string>;
-        select: CustomEvent<SelectData>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ImagePreviewProps = typeof __propDef.props;
-export type ImagePreviewEvents = typeof __propDef.events;
-export type ImagePreviewSlots = typeof __propDef.slots;
-export default class ImagePreview extends SvelteComponent<ImagePreviewProps, ImagePreviewEvents, ImagePreviewSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ImagePreview: $$__sveltets_2_IsomorphicComponent<{
+    value: null | FileData;
+    label?: string | undefined;
+    show_label: boolean;
+    buttons?: string[] | null;
+    selectable?: boolean;
+    i18n: I18nFormatter;
+    display_icon_button_wrapper_top_corner?: boolean;
+    fullscreen?: boolean;
+    show_button_background?: boolean;
+}, {
+    fullscreen: CustomEvent<any>;
+    share: CustomEvent<import("@gradio/utils").ShareData>;
+    error: CustomEvent<string>;
+    load: Event;
+    change: CustomEvent<string>;
+    select: CustomEvent<SelectData>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ImagePreview = InstanceType<typeof ImagePreview>;
+export default ImagePreview;

package/dist/shared/ImageUploader.svelte

@@ -1,138 +1,184 @@
-<script>import { createEventDispatcher, tick } from "svelte";
-import { BlockLabel, IconButtonWrapper, IconButton } from "@gradio/atoms";
-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";
-import Webcam from "./Webcam.svelte";
-import { Upload, UploadProgress } from "@gradio/upload";
-import { FileData } from "@gradio/client";
-import { SelectSource } from "@gradio/atoms";
-import Image from "./Image.svelte";
-export let value = null;
-export let label = void 0;
-export let show_label;
-export let sources = ["upload", "clipboard", "webcam"];
-export let streaming = false;
-export let pending = false;
-export let webcam_options;
-export let selectable = false;
-export let root;
-export let i18n;
-export let max_file_size = null;
-export let upload;
-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 fullscreen = false;
-let files = [];
-let upload_id;
-async function handle_upload({
-  detail
-}) {
-  if (!streaming) {
-    if (detail.path?.toLowerCase().endsWith(".svg") && detail.url) {
-      const response = await fetch(detail.url);
-      const svgContent = await response.text();
-      value = {
-        ...detail,
-        url: `data:image/svg+xml,${encodeURIComponent(svgContent)}`
-      };
-    } else {
-      value = detail;
-    }
-    await tick();
-    dispatch("upload");
-  }
-}
-function handle_clear() {
-  value = null;
-  dispatch("clear");
-  dispatch("change", null);
-}
-function handle_remove_image_click(event) {
-  handle_clear();
-  event.stopPropagation();
-}
-async function handle_save(img_blob, event) {
-  if (event === "stream") {
-    dispatch("stream", {
-      value: { url: img_blob },
-      is_value_data: true
-    });
-    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([f_], upload_id);
-  if (event === "change" || event === "upload") {
-    value = f?.[0] || null;
-    await tick();
-    dispatch("change");
-  }
-  pending = false;
-}
-$: active_streaming = streaming && active_source === "webcam";
-$: if (uploading && !active_streaming) value = null;
-const dispatch = createEventDispatcher();
-export let dragging = false;
-$: dispatch("drag", dragging);
-function handle_click(evt) {
-  let coordinates = get_coordinates_of_clicked_image(evt);
-  if (coordinates) {
-    dispatch("select", { index: coordinates, value: null });
-  }
-}
-$: if (!active_source && sources) {
-  active_source = sources[0];
-}
-async function handle_select_source(source) {
-  switch (source) {
-    case "clipboard":
-      upload_input.paste_clipboard();
-      break;
-    default:
-      break;
-  }
-}
-let image_container;
-function on_drag_over(evt) {
-  evt.preventDefault();
-  evt.stopPropagation();
-  if (evt.dataTransfer) {
-    evt.dataTransfer.dropEffect = "copy";
-  }
-  dragging = true;
-}
-async function on_drop(evt) {
-  evt.preventDefault();
-  evt.stopPropagation();
-  dragging = false;
-  if (value) {
-    handle_clear();
-    await tick();
-  }
-  active_source = "upload";
-  await tick();
-  upload_input.load_files_from_drop(evt);
-}
+<script lang="ts">
+	import { createEventDispatcher, tick } from "svelte";
+	import { BlockLabel, IconButtonWrapper, IconButton } from "@gradio/atoms";
+	import { Clear, Image as ImageIcon } from "@gradio/icons";
+	import { FullscreenButton } from "@gradio/atoms";
+	import {
+		type SelectData,
+		type I18nFormatter,
+		type ValueData
+	} from "@gradio/utils";
+	import { get_coordinates_of_clicked_image } from "./utils";
+	import Webcam from "./Webcam.svelte";
+
+	import { Upload, UploadProgress } from "@gradio/upload";
+	import { FileData, type Client } from "@gradio/client";
+	import { SelectSource } from "@gradio/atoms";
+	import Image from "./Image.svelte";
+	import type { Base64File, WebcamOptions } from "./types";
+
+	export let value: null | FileData | Base64File = null;
+	export let label: string | undefined = undefined;
+	export let show_label: boolean;
+
+	type source_type = "upload" | "webcam" | "clipboard" | "microphone" | null;
+
+	export let sources: source_type[] = ["upload", "clipboard", "webcam"];
+	export let streaming = false;
+	export let pending = false;
+	export let webcam_options: WebcamOptions;
+	export let selectable = false;
+	export let root: string;
+	export let i18n: I18nFormatter;
+	export let max_file_size: number | null = null;
+	export let upload: Client["upload"];
+	export let stream_handler: Client["stream"];
+	export let stream_every: number;
+	export let time_limit: number;
+	export let show_fullscreen_button = true;
+	export let stream_state: "open" | "waiting" | "closed" = "closed";
+	export let upload_promise: Promise<any> | null = null;
+
+	let upload_input: Upload;
+	export let uploading = false;
+	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> {
+		if (!streaming) {
+			if (detail.path?.toLowerCase().endsWith(".svg") && detail.url) {
+				const response = await fetch(detail.url);
+				const svgContent = await response.text();
+				value = {
+					...detail,
+					url: `data:image/svg+xml,${encodeURIComponent(svgContent)}`
+				};
+			} else {
+				value = detail;
+			}
+
+			await tick();
+			dispatch("upload");
+		}
+	}
+
+	function handle_clear(): void {
+		value = null;
+		dispatch("clear");
+		dispatch("change", null);
+	}
+
+	function handle_remove_image_click(event: MouseEvent): void {
+		handle_clear();
+		event.stopPropagation();
+	}
+
+	async function handle_save(
+		img_blob: Blob | any,
+		event: "change" | "stream" | "upload"
+	): Promise<void> {
+		console.log("handle_save", { event, img_blob });
+		if (event === "stream") {
+			dispatch("stream", {
+				value: { url: img_blob } as Base64File,
+				is_value_data: true
+			});
+			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([f_], upload_id);
+		console.log("uploaded file", f);
+		if (event === "change" || event === "upload") {
+			value = f?.[0] || null;
+			await tick();
+			dispatch("change");
+		}
+		pending = false;
+	}
+
+	$: active_streaming = streaming && active_source === "webcam";
+	$: if (uploading && !active_streaming) value = null;
+
+	const dispatch = createEventDispatcher<{
+		change?: never;
+		stream: ValueData;
+		clear?: never;
+		drag: boolean;
+		upload?: never;
+		select: SelectData;
+		end_stream: never;
+	}>();
+
+	export let dragging = false;
+
+	$: dispatch("drag", dragging);
+
+	function handle_click(evt: MouseEvent): void {
+		let coordinates = get_coordinates_of_clicked_image(evt);
+		if (coordinates) {
+			dispatch("select", { index: coordinates, value: null });
+		}
+	}
+
+	$: if (!active_source && sources) {
+		active_source = sources[0];
+	}
+
+	async function handle_select_source(
+		source: (typeof sources)[number]
+	): Promise<void> {
+		switch (source) {
+			case "clipboard":
+				upload_input.paste_clipboard();
+				break;
+			default:
+				break;
+		}
+	}
+
+	let image_container: HTMLElement;
+
+	function on_drag_over(evt: DragEvent): void {
+		evt.preventDefault();
+		evt.stopPropagation();
+		if (evt.dataTransfer) {
+			evt.dataTransfer.dropEffect = "copy";
+		}
+
+		dragging = true;
+	}
+
+	async function on_drop(evt: DragEvent): Promise<void> {
+		evt.preventDefault();
+		evt.stopPropagation();
+		dragging = false;
+
+		if (value) {
+			handle_clear();
+			await tick();
+		}
+
+		active_source = "upload";
+		await tick();
+		upload_input.load_files_from_drop(evt);
+	}
 </script>
 
 <BlockLabel {show_label} Icon={ImageIcon} label={label || "Image"} />
@@ -159,6 +205,7 @@ async function on_drop(evt) {
 		on:drop={on_drop}
 	>
 		<Upload
+			bind:upload_promise
 			hidden={value !== null || active_source === "webcam"}
 			bind:this={upload_input}
 			bind:uploading
@@ -189,6 +236,7 @@ async function on_drop(evt) {
 				on:drag
 				on:upload={(e) => handle_save(e.detail, "upload")}
 				on:close_stream
+				{stream_state}
 				mirror_webcam={webcam_options.mirror}
 				{stream_every}
 				{streaming}
@@ -196,15 +244,14 @@ async function on_drop(evt) {
 				include_audio={false}
 				{i18n}
 				{upload}
-				bind:modify_stream
-				bind:set_time_limit
+				{time_limit}
 				webcam_constraints={webcam_options.constraints}
 			/>
 		{:else if value !== null && !streaming}
 			<!-- svelte-ignore a11y-click-events-have-key-events-->
 			<!-- svelte-ignore a11y-no-static-element-interactions-->
 			<div class:selectable class="image-frame" on:click={handle_click}>
-				<Image src={value.url} alt={value.alt_text} />
+				<Image src={value.url} restProps={{ alt: value.alt_text }} />
 			</div>
 		{/if}
 	</div>

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

@@ -1,54 +1,64 @@
-import { SvelteComponent } from "svelte";
 import { type SelectData, type I18nFormatter, type ValueData } from "@gradio/utils";
 import { FileData, type Client } from "@gradio/client";
 import type { Base64File, WebcamOptions } from "./types";
-declare const __propDef: {
-    props: {
-        value?: null | FileData | Base64File;
-        label?: string | undefined;
-        show_label: boolean;
-        sources?: ("clipboard" | "upload" | "microphone" | "webcam" | null)[];
-        streaming?: boolean;
-        pending?: boolean;
-        webcam_options: WebcamOptions;
-        selectable?: boolean;
-        root: string;
-        i18n: I18nFormatter;
-        max_file_size?: number | null;
-        upload: Client["upload"];
-        stream_handler: Client["stream"];
-        stream_every: number;
-        modify_stream: (state: "open" | "closed" | "waiting") => void;
-        set_time_limit: (arg0: number) => void;
-        show_fullscreen_button?: boolean;
-        uploading?: boolean;
-        active_source?: "clipboard" | "upload" | "microphone" | "webcam" | null;
-        fullscreen?: boolean;
-        dragging?: boolean;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        fullscreen: CustomEvent<boolean>;
-        error: CustomEvent<any> | CustomEvent<string>;
-        drag: CustomEvent<any>;
-        close_stream: CustomEvent<undefined>;
-        change?: CustomEvent<undefined> | undefined;
-        stream: CustomEvent<ValueData>;
-        clear?: CustomEvent<undefined> | undefined;
-        upload?: CustomEvent<undefined> | undefined;
-        select: CustomEvent<SelectData>;
-        end_stream: CustomEvent<never>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ImageUploaderProps = typeof __propDef.props;
-export type ImageUploaderEvents = typeof __propDef.events;
-export type ImageUploaderSlots = typeof __propDef.slots;
-export default class ImageUploader extends SvelteComponent<ImageUploaderProps, ImageUploaderEvents, ImageUploaderSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const ImageUploader: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    value?: null | FileData | Base64File;
+    label?: string | undefined;
+    show_label: boolean;
+    sources?: ("upload" | "clipboard" | "microphone" | "webcam" | null)[];
+    streaming?: boolean;
+    pending?: boolean;
+    webcam_options: WebcamOptions;
+    selectable?: boolean;
+    root: string;
+    i18n: I18nFormatter;
+    max_file_size?: number | null;
+    upload: Client["upload"];
+    stream_handler: Client["stream"];
+    stream_every: number;
+    time_limit: number;
+    show_fullscreen_button?: boolean;
+    stream_state?: "open" | "waiting" | "closed";
+    upload_promise?: Promise<any> | null;
+    uploading?: boolean;
+    active_source?: "upload" | "clipboard" | "microphone" | "webcam" | null;
+    fullscreen?: boolean;
+    dragging?: boolean;
+}, {
+    default: {};
+}>, {
+    fullscreen: CustomEvent<boolean>;
+    error: CustomEvent<any> | CustomEvent<string>;
+    drag: CustomEvent<any>;
+    close_stream: CustomEvent<undefined>;
+    change?: CustomEvent<undefined> | undefined;
+    stream: CustomEvent<ValueData>;
+    clear?: CustomEvent<undefined> | undefined;
+    upload?: CustomEvent<undefined> | undefined;
+    select: CustomEvent<SelectData>;
+    end_stream: CustomEvent<never>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type ImageUploader = InstanceType<typeof ImageUploader>;
+export default ImageUploader;