@gradio/imageslider 0.3.1-dev.0 → 0.3.1

package/dist/Index.svelte.d.ts

@@ -1,151 +1,3 @@
-import { SvelteComponent } from "svelte";
-import type { Gradio, SelectData, ValueData } from "@gradio/utils";
-import { type FileData } from "@gradio/client";
-import type { LoadingStatus } from "@gradio/statustracker";
-declare const __propDef: {
-    props: {
-        value_is_output?: boolean;
-        elem_id?: string;
-        elem_classes?: string[];
-        visible?: boolean | "hidden";
-        value?: [FileData | null, FileData | null];
-        label: string;
-        show_label: boolean;
-        buttons?: string[] | null;
-        root: string;
-        height: number | undefined;
-        width: number | undefined;
-        container?: boolean;
-        scale?: number | null;
-        min_width?: number | undefined;
-        loading_status: LoadingStatus;
-        interactive: boolean;
-        placeholder?: string | undefined;
-        input_ready: boolean;
-        slider_position: number;
-        upload_count?: number;
-        slider_color?: string;
-        max_height: number;
-        gradio: Gradio<{
-            input: never;
-            change: never;
-            error: string;
-            edit: never;
-            stream: ValueData;
-            drag: never;
-            upload: never;
-            clear: never;
-            select: SelectData;
-            share: ShareData;
-            clear_status: LoadingStatus;
-            close_stream: string;
-        }>;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type IndexProps = typeof __propDef.props;
-export type IndexEvents = typeof __propDef.events;
-export type IndexSlots = typeof __propDef.slots;
-export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
-    get value_is_output(): boolean | undefined;
-    /**accessor*/
-    set value_is_output(_: boolean | undefined);
-    get elem_id(): string | undefined;
-    /**accessor*/
-    set elem_id(_: string | undefined);
-    get elem_classes(): string[] | undefined;
-    /**accessor*/
-    set elem_classes(_: string[] | undefined);
-    get visible(): boolean | "hidden" | undefined;
-    /**accessor*/
-    set visible(_: boolean | "hidden" | undefined);
-    get value(): [any, any] | undefined;
-    /**accessor*/
-    set value(_: [any, any] | undefined);
-    get label(): string;
-    /**accessor*/
-    set label(_: string);
-    get show_label(): boolean;
-    /**accessor*/
-    set show_label(_: boolean);
-    get buttons(): string[] | null | undefined;
-    /**accessor*/
-    set buttons(_: string[] | null | undefined);
-    get root(): string;
-    /**accessor*/
-    set root(_: string);
-    get height(): number | undefined;
-    /**accessor*/
-    set height(_: number | undefined);
-    get width(): number | undefined;
-    /**accessor*/
-    set width(_: number | undefined);
-    get container(): boolean | undefined;
-    /**accessor*/
-    set container(_: boolean | undefined);
-    get scale(): number | null | undefined;
-    /**accessor*/
-    set scale(_: number | null | undefined);
-    get min_width(): number | undefined;
-    /**accessor*/
-    set min_width(_: number | undefined);
-    get loading_status(): LoadingStatus;
-    /**accessor*/
-    set loading_status(_: LoadingStatus);
-    get interactive(): boolean;
-    /**accessor*/
-    set interactive(_: boolean);
-    get placeholder(): string | undefined;
-    /**accessor*/
-    set placeholder(_: string | undefined);
-    get input_ready(): boolean;
-    /**accessor*/
-    set input_ready(_: boolean);
-    get slider_position(): number;
-    /**accessor*/
-    set slider_position(_: number);
-    get upload_count(): number | undefined;
-    /**accessor*/
-    set upload_count(_: number | undefined);
-    get slider_color(): string | undefined;
-    /**accessor*/
-    set slider_color(_: string | undefined);
-    get max_height(): number;
-    /**accessor*/
-    set max_height(_: number);
-    get gradio(): Gradio<{
-        input: never;
-        change: never;
-        error: string;
-        edit: never;
-        stream: ValueData;
-        drag: never;
-        upload: never;
-        clear: never;
-        select: SelectData;
-        share: ShareData;
-        clear_status: LoadingStatus;
-        close_stream: string;
-    }>;
-    /**accessor*/
-    set gradio(_: Gradio<{
-        input: never;
-        change: never;
-        error: string;
-        edit: never;
-        stream: ValueData;
-        drag: never;
-        upload: never;
-        clear: never;
-        select: SelectData;
-        share: ShareData;
-        clear_status: LoadingStatus;
-        close_stream: string;
-    }>);
-}
-export {};
+declare const Index: import("svelte").Component<$$ComponentProps, {}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/dist/shared/ClearImage.svelte

@@ -1,7 +1,9 @@
-<script>import { createEventDispatcher } from "svelte";
-import { IconButton } from "@gradio/atoms";
-import { Clear } from "@gradio/icons";
-const dispatch = createEventDispatcher();
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { IconButton } from "@gradio/atoms";
+	import { Clear } from "@gradio/icons";
+
+	const dispatch = createEventDispatcher();
 </script>
 
 <div>

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

@@ -1,18 +1,20 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        remove_image: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-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> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ClearImage: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    remove_image: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ClearImage = InstanceType<typeof ClearImage>;
+export default ClearImage;

package/dist/shared/Image.svelte

@@ -1,49 +1,79 @@
-<script>import Slider from "./Slider.svelte";
-import { createEventDispatcher, tick } from "svelte";
-import { BlockLabel, Empty, IconButton, DownloadLink } from "@gradio/atoms";
-import { Download } from "@gradio/icons";
-import { Image } from "@gradio/icons";
-import {} from "@gradio/utils";
-import ClearImage from "./ClearImage.svelte";
-import ImageEl from "./ImageEl.svelte";
-import { Upload } from "@gradio/upload";
-import {} from "@gradio/client";
-export let value;
-export let label = void 0;
-export let show_label;
-export let root;
-export let position;
-export let upload_count = 2;
-export let show_download_button = true;
-export let slider_color;
-export let upload;
-export let stream_handler;
-export let max_file_size = null;
-export let i18n;
-export let max_height;
-let value_ = value || [null, null];
-let img;
-let el_width;
-let el_height;
-async function handle_upload({ detail }, n) {
-  const new_value = [value[0], value[1]];
-  if (detail.length > 1) {
-    new_value[n] = detail[0];
-  } else {
-    new_value[n] = detail[n];
-  }
-  value = new_value;
-  await tick();
-  dispatch("upload", new_value);
-}
-let old_value = "";
-$: if (JSON.stringify(value) !== old_value) {
-  old_value = JSON.stringify(value);
-  value_ = value;
-}
-const dispatch = createEventDispatcher();
-export let dragging = false;
-$: dispatch("drag", dragging);
+<script lang="ts">
+	import Slider from "./Slider.svelte";
+	import { createEventDispatcher, tick } from "svelte";
+	import { BlockLabel, Empty, IconButton, DownloadLink } from "@gradio/atoms";
+	import { Download } from "@gradio/icons";
+	import { Image } from "@gradio/icons";
+	import { type SelectData, type I18nFormatter } from "@gradio/utils";
+	import ClearImage from "./ClearImage.svelte";
+	import ImageEl from "./ImageEl.svelte";
+
+	import { Upload } from "@gradio/upload";
+
+	import { type FileData, type Client } from "@gradio/client";
+
+	export let value: [FileData | null, FileData | null];
+
+	export let label: string | undefined = undefined;
+	export let show_label: boolean;
+	export let root: string;
+	export let position: number;
+	export let upload_count = 2;
+
+	export let show_download_button = true;
+	export let slider_color: string;
+	export let upload: Client["upload"];
+	export let stream_handler: Client["stream"];
+	export let max_file_size: number | null = null;
+	export let i18n: I18nFormatter;
+	export let max_height: number;
+	export let upload_promise: Promise<any> | null = null;
+
+	let value_: [FileData | null, FileData | null] = value || [null, null];
+
+	let img: HTMLImageElement;
+	let el_width: number;
+	let el_height: number;
+
+	async function handle_upload(
+		{ detail }: CustomEvent<FileData[]>,
+		n: number
+	): Promise<void> {
+		const new_value = [value[0], value[1]] as [
+			FileData | null,
+			FileData | null
+		];
+		if (detail.length > 1) {
+			new_value[n] = detail[0];
+		} else {
+			new_value[n] = detail[n];
+		}
+		value = new_value;
+		await tick();
+
+		dispatch("upload", new_value);
+	}
+
+	let old_value = "";
+
+	$: if (JSON.stringify(value) !== old_value) {
+		old_value = JSON.stringify(value);
+		value_ = value;
+	}
+
+	const dispatch = createEventDispatcher<{
+		change: string | null;
+		stream: string | null;
+		edit: undefined;
+		clear: undefined;
+		drag: boolean;
+		upload: [FileData | null, FileData | null];
+		select: SelectData;
+	}>();
+
+	export let dragging = false;
+
+	$: dispatch("drag", dragging);
 </script>
 
 <BlockLabel {show_label} Icon={Image} label={label || i18n("image.image")} />
@@ -88,6 +118,7 @@ $: dispatch("drag", dragging);
 			{#if !value_?.[0]}
 				<div class="wrap" class:half-wrap={upload_count === 1}>
 					<Upload
+						bind:upload_promise
 						bind:dragging
 						filetype="image/*"
 						on:load={(e) => handle_upload(e, 0)}
@@ -113,6 +144,7 @@ $: dispatch("drag", dragging);
 
 			{#if !value_?.[1] && upload_count === 2}
 				<Upload
+					bind:upload_promise
 					bind:dragging
 					filetype="image/*"
 					on:load={(e) => handle_upload(e, 1)}

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

@@ -1,43 +1,54 @@
-import { SvelteComponent } from "svelte";
+import { Image } from "@gradio/icons";
 import { type SelectData, type I18nFormatter } from "@gradio/utils";
 import { type FileData, type Client } from "@gradio/client";
-declare const __propDef: {
-    props: {
-        value: [FileData | null, FileData | null];
-        label?: string | undefined;
-        show_label: boolean;
-        root: string;
-        position: number;
-        upload_count?: number;
-        show_download_button?: boolean;
-        slider_color: string;
-        upload: Client["upload"];
-        stream_handler: Client["stream"];
-        max_file_size?: number | null;
-        i18n: I18nFormatter;
-        max_height: number;
-        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: {
-        change: CustomEvent<string | null>;
-        stream: CustomEvent<string | null>;
-        edit: CustomEvent<undefined>;
-        clear: CustomEvent<undefined>;
-        drag: CustomEvent<boolean>;
-        upload: CustomEvent<[any, any]>;
-        select: CustomEvent<SelectData>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ImageProps = typeof __propDef.props;
-export type ImageEvents = typeof __propDef.events;
-export type ImageSlots = typeof __propDef.slots;
-export default class Image extends SvelteComponent<ImageProps, ImageEvents, ImageSlots> {
+    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 Image: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    value: [FileData | null, FileData | null];
+    label?: string | undefined;
+    show_label: boolean;
+    root: string;
+    position: number;
+    upload_count?: number;
+    show_download_button?: boolean;
+    slider_color: string;
+    upload: Client["upload"];
+    stream_handler: Client["stream"];
+    max_file_size?: number | null;
+    i18n: I18nFormatter;
+    max_height: number;
+    upload_promise?: Promise<any> | null;
+    dragging?: boolean;
+}, {
+    default: {};
+}>, {
+    change: CustomEvent<string | null>;
+    stream: CustomEvent<string | null>;
+    edit: CustomEvent<undefined>;
+    clear: CustomEvent<undefined>;
+    drag: CustomEvent<boolean>;
+    upload: CustomEvent<[FileData | null, FileData | null]>;
+    select: CustomEvent<SelectData>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Image = InstanceType<typeof Image>;
+export default Image;

package/dist/shared/ImageEl.svelte

@@ -1,48 +1,85 @@
-<script>import { createEventDispatcher, onMount, tick } from "svelte";
-export let src = void 0;
-export let fullscreen = false;
-export let fixed = false;
-export let transform = "translate(0px, 0px) scale(1)";
-export let img_el = null;
-export let hidden = false;
-export let variant = "upload";
-export let max_height = 500;
-const dispatch = createEventDispatcher();
-function get_image_size(img) {
-  if (!img) return { top: 0, left: 0, width: 0, height: 0 };
-  const container = img.parentElement?.getBoundingClientRect();
-  if (!container) return { top: 0, left: 0, width: 0, height: 0 };
-  const naturalAspect = img.naturalWidth / img.naturalHeight;
-  const containerAspect = container.width / container.height;
-  let displayedWidth, displayedHeight;
-  if (naturalAspect > containerAspect) {
-    displayedWidth = container.width;
-    displayedHeight = container.width / naturalAspect;
-  } else {
-    displayedHeight = container.height;
-    displayedWidth = container.height * naturalAspect;
-  }
-  const offsetX = (container.width - displayedWidth) / 2;
-  const offsetY = (container.height - displayedHeight) / 2;
-  return {
-    top: offsetY,
-    left: offsetX,
-    width: displayedWidth,
-    height: displayedHeight
-  };
-}
-onMount(() => {
-  const resizer = new ResizeObserver(async (entries) => {
-    for (const entry of entries) {
-      await tick();
-      dispatch("load", get_image_size(img_el));
-    }
-  });
-  resizer.observe(img_el);
-  return () => {
-    resizer.disconnect();
-  };
-});
+<script lang="ts">
+	import type { HTMLImgAttributes } from "svelte/elements";
+	import { createEventDispatcher, onMount, tick } from "svelte";
+	interface Props extends HTMLImgAttributes {
+		"data-testid"?: string;
+		fixed?: boolean;
+		transform?: string;
+		img_el?: HTMLImageElement;
+		hidden?: boolean;
+		variant?: "preview" | "upload";
+		max_height?: number;
+		fullscreen?: boolean;
+	}
+	type $$Props = Props;
+
+	export let src: HTMLImgAttributes["src"] = undefined;
+	export let fullscreen = false;
+
+	export let fixed = false;
+	export let transform = "translate(0px, 0px) scale(1)";
+	export let img_el: HTMLImageElement | null = null;
+	export let hidden = false;
+	export let variant = "upload";
+	export let max_height = 500;
+
+	const dispatch = createEventDispatcher<{
+		load: {
+			top: number;
+			left: number;
+			width: number;
+			height: number;
+		};
+	}>();
+
+	function get_image_size(img: HTMLImageElement | null): {
+		top: number;
+		left: number;
+		width: number;
+		height: number;
+	} {
+		if (!img) return { top: 0, left: 0, width: 0, height: 0 };
+		const container = img.parentElement?.getBoundingClientRect();
+
+		if (!container) return { top: 0, left: 0, width: 0, height: 0 };
+
+		const naturalAspect = img.naturalWidth / img.naturalHeight;
+		const containerAspect = container.width / container.height;
+		let displayedWidth, displayedHeight;
+
+		if (naturalAspect > containerAspect) {
+			displayedWidth = container.width;
+			displayedHeight = container.width / naturalAspect;
+		} else {
+			displayedHeight = container.height;
+			displayedWidth = container.height * naturalAspect;
+		}
+
+		const offsetX = (container.width - displayedWidth) / 2;
+		const offsetY = (container.height - displayedHeight) / 2;
+
+		return {
+			top: offsetY,
+			left: offsetX,
+			width: displayedWidth,
+			height: displayedHeight
+		};
+	}
+
+	onMount(() => {
+		const resizer = new ResizeObserver(async (entries) => {
+			for (const entry of entries) {
+				await tick();
+				dispatch("load", get_image_size(img_el));
+			}
+		});
+
+		resizer.observe(img_el!);
+
+		return () => {
+			resizer.disconnect();
+		};
+	});
 </script>
 
 <!-- svelte-ignore a11y-missing-attribute -->

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

@@ -1,33 +1,35 @@
-import { SvelteComponent } from "svelte";
 import type { HTMLImgAttributes } from "svelte/elements";
-declare const __propDef: {
-    props: HTMLImgAttributes & {
-        "data-testid"?: string;
-        fixed?: boolean;
-        transform?: string;
-        img_el?: HTMLImageElement;
-        hidden?: boolean;
-        variant?: "preview" | "upload";
-        max_height?: number;
-        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: {
-        load: CustomEvent<{
-            top: number;
-            left: number;
-            width: number;
-            height: number;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ImageElProps = typeof __propDef.props;
-export type ImageElEvents = typeof __propDef.events;
-export type ImageElSlots = typeof __propDef.slots;
-export default class ImageEl extends SvelteComponent<ImageElProps, ImageElEvents, ImageElSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ImageEl: $$__sveltets_2_IsomorphicComponent<HTMLImgAttributes & {
+    "data-testid"?: string;
+    fixed?: boolean;
+    transform?: string;
+    img_el?: HTMLImageElement;
+    hidden?: boolean;
+    variant?: "preview" | "upload";
+    max_height?: number;
+    fullscreen?: boolean;
+}, {
+    load: CustomEvent<{
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ImageEl = InstanceType<typeof ImageEl>;
+export default ImageEl;