@gradio/imageslider 0.2.0

package/dist/Index.svelte

@@ -0,0 +1,178 @@
+<svelte:options accessors={true} />
+
+<script>import StaticImage from "./shared/SliderPreview.svelte";
+import ImageUploader from "./shared/SliderUpload.svelte";
+import { afterUpdate } from "svelte";
+import { Block, Empty, UploadText } from "@gradio/atoms";
+import { Image } from "@gradio/icons";
+import { StatusTracker } from "@gradio/statustracker";
+import {} from "@gradio/client";
+export let value_is_output = false;
+export let elem_id = "";
+export let elem_classes = [];
+export let visible = true;
+export let value = [null, null];
+let old_value = [null, null];
+export let label;
+export let show_label;
+export let show_download_button;
+export let root;
+export let height;
+export let width;
+export let container = true;
+export let scale = null;
+export let min_width = void 0;
+export let loading_status;
+export let interactive;
+export let placeholder = void 0;
+export let show_fullscreen_button;
+export let input_ready;
+export let slider_position;
+export let upload_count = 1;
+export let slider_color = "var(--border-color-primary)";
+export let max_height;
+let uploading = false;
+$:
+  normalised_slider_position = Math.max(0, Math.min(100, slider_position)) / 100;
+$:
+  input_ready = !uploading;
+export let gradio;
+$: {
+  if (JSON.stringify(value) !== JSON.stringify(old_value)) {
+    old_value = value;
+    gradio.dispatch("change");
+    if (!value_is_output) {
+      gradio.dispatch("input");
+    }
+  }
+}
+afterUpdate(() => {
+  value_is_output = false;
+});
+let dragging;
+let active_source = null;
+let upload_component;
+const handle_drag_event = (event) => {
+  const drag_event = event;
+  drag_event.preventDefault();
+  drag_event.stopPropagation();
+  if (drag_event.type === "dragenter" || drag_event.type === "dragover") {
+    dragging = true;
+  } else if (drag_event.type === "dragleave") {
+    dragging = false;
+  }
+};
+const handle_drop = (event) => {
+  if (interactive) {
+    const drop_event = event;
+    drop_event.preventDefault();
+    drop_event.stopPropagation();
+    dragging = false;
+    if (upload_component) {
+      upload_component.loadFilesFromDrop(drop_event);
+    }
+  }
+};
+</script>
+
+{#if !interactive || (value?.[1] && value?.[0])}
+	<Block
+		{visible}
+		variant={"solid"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={false}
+		{elem_id}
+		{elem_classes}
+		height={height || undefined}
+		{width}
+		allow_overflow={false}
+		{container}
+		{scale}
+		{min_width}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+		/>
+		<StaticImage
+			on:select={({ detail }) => gradio.dispatch("select", detail)}
+			on:share={({ detail }) => gradio.dispatch("share", detail)}
+			on:error={({ detail }) => gradio.dispatch("error", detail)}
+			on:clear={() => gradio.dispatch("clear")}
+			{interactive}
+			bind:value
+			{label}
+			{show_label}
+			{show_download_button}
+			i18n={gradio.i18n}
+			{show_fullscreen_button}
+			position={normalised_slider_position}
+			{slider_color}
+			{max_height}
+		/>
+	</Block>
+{:else}
+	<Block
+		{visible}
+		variant={value === null ? "dashed" : "solid"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={false}
+		{elem_id}
+		{elem_classes}
+		height={height || undefined}
+		{width}
+		allow_overflow={false}
+		{container}
+		{scale}
+		{min_width}
+		on:dragenter={handle_drag_event}
+		on:dragleave={handle_drag_event}
+		on:dragover={handle_drag_event}
+		on:drop={handle_drop}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+		/>
+
+		<ImageUploader
+			bind:this={upload_component}
+			bind:value
+			bind:dragging
+			{root}
+			on:edit={() => gradio.dispatch("edit")}
+			on:clear={() => {
+				gradio.dispatch("clear");
+			}}
+			on:drag={({ detail }) => (dragging = detail)}
+			on:upload={() => gradio.dispatch("upload")}
+			on:error={({ detail }) => {
+				loading_status = loading_status || {};
+				loading_status.status = "error";
+				gradio.dispatch("error", detail);
+			}}
+			on:close_stream={() => {
+				gradio.dispatch("close_stream", "stream");
+			}}
+			{label}
+			{show_label}
+			{upload_count}
+			max_file_size={gradio.max_file_size}
+			i18n={gradio.i18n}
+			upload={(...args) => gradio.client.upload(...args)}
+			stream_handler={gradio.client?.stream}
+			{max_height}
+		>
+			{#if active_source === "upload" || !active_source}
+				<UploadText i18n={gradio.i18n} type="image" {placeholder} />
+			{:else if active_source === "clipboard"}
+				<UploadText i18n={gradio.i18n} type="clipboard" mode="short" />
+			{:else}
+				<Empty unpadded_box={true} size="large"><Image /></Empty>
+			{/if}
+		</ImageUploader>
+	</Block>
+{/if}

package/dist/Index.svelte.d.ts

@@ -0,0 +1,153 @@
+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 | undefined;
+        elem_id?: string | undefined;
+        elem_classes?: string[] | undefined;
+        visible?: boolean | undefined;
+        value?: [FileData | null, FileData | null] | undefined;
+        label: string;
+        show_label: boolean;
+        show_download_button: boolean;
+        root: string;
+        height: number | undefined;
+        width: number | undefined;
+        container?: boolean | undefined;
+        scale?: (number | null) | undefined;
+        min_width?: number | undefined;
+        loading_status: LoadingStatus;
+        interactive: boolean;
+        placeholder?: string | undefined;
+        show_fullscreen_button: boolean;
+        input_ready: boolean;
+        slider_position: number;
+        upload_count?: number | undefined;
+        slider_color?: string | undefined;
+        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: {};
+};
+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 | undefined;
+    /**accessor*/
+    set visible(_: boolean | 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 show_download_button(): boolean;
+    /**accessor*/
+    set show_download_button(_: boolean);
+    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 show_fullscreen_button(): boolean;
+    /**accessor*/
+    set show_fullscreen_button(_: boolean);
+    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 {};

package/dist/shared/ClearImage.svelte

@@ -0,0 +1,28 @@
+<script>import { createEventDispatcher } from "svelte";
+import { IconButton } from "@gradio/atoms";
+import { Clear } from "@gradio/icons";
+const dispatch = createEventDispatcher();
+</script>
+
+<div>
+	<IconButton
+		Icon={Clear}
+		label="Remove Image"
+		on:click={(event) => {
+			dispatch("remove_image");
+			event.stopPropagation();
+		}}
+	/>
+</div>
+
+<style>
+	div {
+		display: flex;
+		position: absolute;
+		top: var(--size-2);
+		right: var(--size-2);
+		justify-content: flex-end;
+		gap: var(--spacing-sm);
+		z-index: var(--layer-5);
+	}
+</style>

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

@@ -0,0 +1,18 @@
+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/dist/shared/Image.svelte

@@ -0,0 +1,208 @@
+<script>import Slider from "./Slider.svelte";
+import { createEventDispatcher, tick } from "svelte";
+import { BlockLabel, Empty, IconButton } 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 { DownloadLink } from "@gradio/wasm/svelte";
+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>
+
+<BlockLabel {show_label} Icon={Image} label={label || i18n("image.image")} />
+
+<div
+	data-testid="image"
+	class="image-container"
+	bind:clientWidth={el_width}
+	bind:clientHeight={el_height}
+>
+	{#if value?.[0]?.url || value?.[1]?.url}
+		<ClearImage
+			on:remove_image={() => {
+				position = 0.5;
+				value = [null, null];
+				dispatch("clear");
+			}}
+		/>
+	{/if}
+	{#if value?.[1]?.url}
+		<div class="icon-buttons">
+			{#if show_download_button}
+				<DownloadLink
+					href={value[1].url}
+					download={value[1].orig_name || "image"}
+				>
+					<IconButton Icon={Download} />
+				</DownloadLink>
+			{/if}
+		</div>
+	{/if}
+	<Slider
+		bind:position
+		disabled={upload_count == 2 || !value?.[0]}
+		{slider_color}
+	>
+		<div
+			class="upload-wrap"
+			style:display={upload_count === 2 ? "flex" : "block"}
+			class:side-by-side={upload_count === 2}
+		>
+			{#if !value_?.[0]}
+				<div class="wrap" class:half-wrap={upload_count === 1}>
+					<Upload
+						bind:dragging
+						filetype="image/*"
+						on:load={(e) => handle_upload(e, 0)}
+						disable_click={!!value?.[0]}
+						{root}
+						file_count="multiple"
+						{upload}
+						{stream_handler}
+						{max_file_size}
+					>
+						<slot />
+					</Upload>
+				</div>
+			{:else}
+				<ImageEl
+					variant="upload"
+					src={value_[0]?.url}
+					alt=""
+					bind:img_el={img}
+					{max_height}
+				/>
+			{/if}
+
+			{#if !value_?.[1] && upload_count === 2}
+				<Upload
+					bind:dragging
+					filetype="image/*"
+					on:load={(e) => handle_upload(e, 1)}
+					disable_click={!!value?.[1]}
+					{root}
+					file_count="multiple"
+					{upload}
+					{stream_handler}
+					{max_file_size}
+				>
+					<slot />
+				</Upload>
+			{:else if !value_?.[1] && upload_count === 1}
+				<div
+					class="empty-wrap fixed"
+					style:width="{el_width * (1 - position)}px"
+					style:transform="translateX({el_width * position}px)"
+					class:white-icon={!value?.[0]?.url}
+				>
+					<Empty unpadded_box={true} size="large"><Image /></Empty>
+				</div>
+			{:else if value_?.[1]}
+				<ImageEl
+					variant="upload"
+					src={value_[1].url}
+					alt=""
+					fixed={upload_count === 1}
+					transform="translate(0px, 0px) scale(1)"
+					{max_height}
+				/>
+			{/if}
+		</div>
+	</Slider>
+</div>
+
+<style>
+	.upload-wrap {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+		width: 100%;
+	}
+
+	.wrap {
+		width: 100%;
+	}
+
+	.half-wrap {
+		width: 50%;
+	}
+	.image-container,
+	.empty-wrap {
+		width: var(--size-full);
+		height: var(--size-full);
+	}
+
+	.fixed {
+		--anim-block-background-fill: 255, 255, 255;
+		position: absolute;
+		top: 0;
+		left: 0;
+		background-color: rgba(var(--anim-block-background-fill), 0.8);
+		z-index: 0;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.fixed {
+			--anim-block-background-fill: 31, 41, 55;
+		}
+	}
+
+	.side-by-side :global(img) {
+		/* width: 100%; */
+		width: 50%;
+		object-fit: contain;
+	}
+
+	.empty-wrap {
+		pointer-events: none;
+	}
+
+	.icon-buttons {
+		display: flex;
+		position: absolute;
+		right: 8px;
+		z-index: var(--layer-top);
+		top: 8px;
+	}
+</style>

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

@@ -0,0 +1,41 @@
+import { SvelteComponent } from "svelte";
+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 | undefined;
+        show_download_button?: boolean | undefined;
+        slider_color: string;
+        upload: Client["upload"];
+        stream_handler: Client["stream"];
+        max_file_size?: (number | null) | undefined;
+        i18n: I18nFormatter;
+        max_height: number;
+        dragging?: boolean | undefined;
+    };
+    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: {};
+    };
+};
+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> {
+}
+export {};