@gradio/imageslider 0.3.0 → 0.3.1-dev.2

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @gradio/imageslider
 
+## 0.3.1-dev.2
+
+### Dependency updates
+
+- @gradio/atoms@0.19.0-dev.1
+- @gradio/client@2.0.0-dev.2
+- @gradio/statustracker@0.12.0-dev.1
+- @gradio/upload@0.17.2-dev.2
+
+## 0.3.1-dev.1
+
+### Dependency updates
+
+- @gradio/atoms@0.18.2-dev.0
+- @gradio/upload@0.17.2-dev.1
+- @gradio/utils@0.10.3-dev.0
+- @gradio/statustracker@0.12.0-dev.0
+- @gradio/icons@0.15.0-dev.0
+
+## 0.3.1-dev.0
+
+### Dependency updates
+
+- @gradio/client@2.0.0-dev.1
+
+## 0.3.1-dev.0
+
+### Dependency updates
+
+- @gradio/upload@0.17.2-dev.0
+- @gradio/client@2.0.0-dev.0
+
+## 0.3.0
+
+### Dependency updates
+
+- @gradio/client@1.19.1
+
+## 0.3.0
+
+### Dependency updates
+
+- @gradio/upload@0.17.1
+- @gradio/atoms@0.18.1
+
 ## 0.3.0
 
 ### Features

package/Index.svelte

@@ -1,84 +1,56 @@
 <svelte:options accessors={true} />
 
 <script lang="ts">
-	import type { Gradio, SelectData, ValueData } from "@gradio/utils";
+	import { tick } from "svelte";
+	import type { ImageSliderProps, ImageSliderEvents } from "./types";
+	import { Gradio } from "@gradio/utils";
 	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 { type FileData } from "@gradio/client";
-	import type { LoadingStatus } from "@gradio/statustracker";
 
 	type sources = "upload" | "webcam" | "clipboard" | null;
 
-	export let value_is_output = false;
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible: boolean | "hidden" = true;
-	export let value: [FileData | null, FileData | null] = [null, null];
-	let old_value: [FileData | null, FileData | null] = [null, null];
-	export let label: string;
-	export let show_label: boolean;
-	export let show_download_button: boolean;
-	export let root: string;
-	export let height: number | undefined;
-	export let width: number | undefined;
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let loading_status: LoadingStatus;
-	export let interactive: boolean;
-	export let placeholder: string | undefined = undefined;
-	export let show_fullscreen_button: boolean;
-	let fullscreen = false;
-	export let input_ready: boolean;
-	export let slider_position: number;
-	export let upload_count = 1;
-	export let slider_color = "var(--border-color-primary)";
-	export let max_height: number;
-	let uploading = false;
+	let upload_promise = $state<Promise<any>>();
 
-	$: normalised_slider_position =
-		Math.max(0, Math.min(100, slider_position)) / 100;
+	class ImageSliderGradio extends Gradio<ImageSliderEvents, ImageSliderProps> {
+		async get_data() {
+			if (upload_promise) {
+				await upload_promise;
+				await tick();
+			}
+
+			const data = await super.get_data();
+			return data;
+		}
+	}
+
+	const props = $props();
+	const gradio = new ImageSliderGradio(props);
 
-	$: input_ready = !uploading;
+	let value_is_output = $state(false);
+	let old_value = $state(gradio.props.value);
+	let fullscreen = $state(false);
+	let dragging = $state(false);
+	let active_source: sources = $state(null);
+	let upload_component: ImageUploader;
 
-	export let 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;
-	}>;
+	let normalised_slider_position = $derived(
+		Math.max(0, Math.min(100, gradio.props.slider_position)) / 100
+	);
 
-	$: {
-		if (JSON.stringify(value) !== JSON.stringify(old_value)) {
-			old_value = value;
+	$effect(() => {
+		if (old_value != gradio.props.value) {
+			old_value = gradio.props.value;
 			gradio.dispatch("change");
 			if (!value_is_output) {
 				gradio.dispatch("input");
 			}
 		}
-	}
-
-	afterUpdate(() => {
-		value_is_output = false;
 	});
 
-	let dragging: boolean;
-	let active_source: sources = null;
-	let upload_component: ImageUploader;
-
 	const handle_drag_event = (event: Event): void => {
 		const drag_event = event as DragEvent;
 		drag_event.preventDefault();
@@ -91,7 +63,7 @@
 	};
 
 	const handle_drop = (event: Event): void => {
-		if (interactive) {
+		if (gradio.shared.interactive) {
 			const drop_event = event as DragEvent;
 			drop_event.preventDefault();
 			drop_event.stopPropagation();
@@ -104,26 +76,26 @@
 	};
 </script>
 
-{#if !interactive || (value?.[1] && value?.[0])}
+{#if !gradio.shared.interactive || (gradio.props.value?.[1] && gradio.props.value?.[0])}
 	<Block
-		{visible}
+		visible={gradio.shared.visible}
 		variant={"solid"}
 		border_mode={dragging ? "focus" : "base"}
 		padding={false}
-		{elem_id}
-		{elem_classes}
-		height={height || undefined}
-		{width}
+		elem_id={gradio.shared.elem_id}
+		elem_classes={gradio.shared.elem_classes}
+		height={gradio.props.height || undefined}
+		width={gradio.props.width}
 		allow_overflow={false}
-		{container}
-		{scale}
-		{min_width}
+		container={gradio.shared.container}
+		scale={gradio.shared.scale}
+		min_width={gradio.shared.min_width}
 		bind:fullscreen
 	>
 		<StatusTracker
-			autoscroll={gradio.autoscroll}
+			autoscroll={gradio.shared.autoscroll}
 			i18n={gradio.i18n}
-			{...loading_status}
+			{...gradio.shared.loading_status}
 		/>
 		<StaticImage
 			on:select={({ detail }) => gradio.dispatch("select", detail)}
@@ -134,49 +106,51 @@
 				fullscreen = detail;
 			}}
 			{fullscreen}
-			{interactive}
-			bind:value
-			{label}
-			{show_label}
-			{show_download_button}
+			interactive={gradio.shared.interactive}
+			bind:value={gradio.props.value}
+			label={gradio.shared.label}
+			show_label={gradio.shared.show_label}
+			show_download_button={gradio.props.buttons.includes("download")}
 			i18n={gradio.i18n}
-			{show_fullscreen_button}
+			show_fullscreen_button={gradio.props.buttons.includes("fullscreen")}
 			position={normalised_slider_position}
-			{slider_color}
-			{max_height}
+			slider_color={gradio.props.slider_color}
+			max_height={gradio.props.max_height}
 		/>
 	</Block>
 {:else}
 	<Block
-		{visible}
-		variant={value === null ? "dashed" : "solid"}
+		visible={gradio.shared.visible}
+		variant={gradio.props.value === null ? "dashed" : "solid"}
 		border_mode={dragging ? "focus" : "base"}
 		padding={false}
-		{elem_id}
-		{elem_classes}
-		height={height || undefined}
-		{width}
+		elem_id={gradio.shared.elem_id}
+		elem_classes={gradio.shared.elem_classes}
+		height={gradio.props.height || undefined}
+		width={gradio.props.width}
 		allow_overflow={false}
-		{container}
-		{scale}
-		{min_width}
+		container={gradio.shared.container}
+		scale={gradio.shared.scale}
+		min_width={gradio.shared.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}
+			autoscroll={gradio.shared.autoscroll}
 			i18n={gradio.i18n}
-			{...loading_status}
-			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+			{...gradio.shared.loading_status}
+			on:clear_status={() =>
+				gradio.dispatch("clear_status", gradio.shared.loading_status)}
 		/>
 
 		<ImageUploader
+			bind:upload_promise
 			bind:this={upload_component}
-			bind:value
+			bind:value={gradio.props.value}
 			bind:dragging
-			{root}
+			root={gradio.shared.root}
 			on:edit={() => gradio.dispatch("edit")}
 			on:clear={() => {
 				gradio.dispatch("clear");
@@ -184,24 +158,28 @@
 			on:drag={({ detail }) => (dragging = detail)}
 			on:upload={() => gradio.dispatch("upload")}
 			on:error={({ detail }) => {
-				loading_status = loading_status || {};
-				loading_status.status = "error";
+				if (gradio.shared.loading_status)
+					gradio.shared.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}
+			label={gradio.shared.label}
+			show_label={gradio.shared.show_label}
+			upload_count={gradio.props.upload_count}
+			max_file_size={gradio.shared.max_file_size}
 			i18n={gradio.i18n}
-			upload={(...args) => gradio.client.upload(...args)}
-			stream_handler={gradio.client?.stream}
-			{max_height}
+			upload={(...args) => gradio.shared.client.upload(...args)}
+			stream_handler={gradio.shared.client?.stream}
+			max_height={gradio.props.max_height}
 		>
 			{#if active_source === "upload" || !active_source}
-				<UploadText i18n={gradio.i18n} type="image" {placeholder} />
+				<UploadText
+					i18n={gradio.i18n}
+					type="image"
+					placeholder={gradio.props.placeholder}
+				/>
 			{:else if active_source === "clipboard"}
 				<UploadText i18n={gradio.i18n} type="clipboard" mode="short" />
 			{:else}

package/dist/Example.svelte

@@ -1,7 +1,8 @@
-<script>export let value;
-export let samples_dir;
-export let type;
-export let selected = false;
+<script lang="ts">
+	export let value: [string, string];
+	export let samples_dir: string;
+	export let type: "gallery" | "table";
+	export let selected = false;
 </script>
 
 <!-- TODO: fix -->

package/dist/Example.svelte.d.ts

@@ -1,21 +1,23 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        value: [string, string];
-        samples_dir: string;
-        type: "gallery" | "table";
-        selected?: 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: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ExampleProps = typeof __propDef.props;
-export type ExampleEvents = typeof __propDef.events;
-export type ExampleSlots = typeof __propDef.slots;
-export default class Example extends SvelteComponent<ExampleProps, ExampleEvents, ExampleSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Example: $$__sveltets_2_IsomorphicComponent<{
+    value: [string, string];
+    samples_dir: string;
+    type: "gallery" | "table";
+    selected?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Example = InstanceType<typeof Example>;
+export default Example;

package/dist/Index.svelte

@@ -1,99 +1,101 @@
 <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;
-let fullscreen = false;
-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 lang="ts">
+	import { tick } from "svelte";
+	import type { ImageSliderProps, ImageSliderEvents } from "./types";
+	import { Gradio } from "@gradio/utils";
+	import StaticImage from "./shared/SliderPreview.svelte";
+	import ImageUploader from "./shared/SliderUpload.svelte";
+
+	import { Block, Empty, UploadText } from "@gradio/atoms";
+	import { Image } from "@gradio/icons";
+	import { StatusTracker } from "@gradio/statustracker";
+
+	type sources = "upload" | "webcam" | "clipboard" | null;
+
+	let upload_promise = $state<Promise<any>>();
+
+	class ImageSliderGradio extends Gradio<ImageSliderEvents, ImageSliderProps> {
+		async get_data() {
+			if (upload_promise) {
+				await upload_promise;
+				await tick();
+			}
+
+			const data = await super.get_data();
+			return data;
+		}
+	}
+
+	const props = $props();
+	const gradio = new ImageSliderGradio(props);
+
+	let value_is_output = $state(false);
+	let old_value = $state(gradio.props.value);
+	let fullscreen = $state(false);
+	let dragging = $state(false);
+	let active_source: sources = $state(null);
+	let upload_component: ImageUploader;
+
+	let normalised_slider_position = $derived(
+		Math.max(0, Math.min(100, gradio.props.slider_position)) / 100
+	);
+
+	$effect(() => {
+		if (old_value != gradio.props.value) {
+			old_value = gradio.props.value;
+			gradio.dispatch("change");
+			if (!value_is_output) {
+				gradio.dispatch("input");
+			}
+		}
+	});
+
+	const handle_drag_event = (event: Event): void => {
+		const drag_event = event as DragEvent;
+		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: Event): void => {
+		if (gradio.shared.interactive) {
+			const drop_event = event as DragEvent;
+			drop_event.preventDefault();
+			drop_event.stopPropagation();
+			dragging = false;
+
+			if (upload_component) {
+				upload_component.loadFilesFromDrop(drop_event);
+			}
+		}
+	};
 </script>
 
-{#if !interactive || (value?.[1] && value?.[0])}
+{#if !gradio.shared.interactive || (gradio.props.value?.[1] && gradio.props.value?.[0])}
 	<Block
-		{visible}
+		visible={gradio.shared.visible}
 		variant={"solid"}
 		border_mode={dragging ? "focus" : "base"}
 		padding={false}
-		{elem_id}
-		{elem_classes}
-		height={height || undefined}
-		{width}
+		elem_id={gradio.shared.elem_id}
+		elem_classes={gradio.shared.elem_classes}
+		height={gradio.props.height || undefined}
+		width={gradio.props.width}
 		allow_overflow={false}
-		{container}
-		{scale}
-		{min_width}
+		container={gradio.shared.container}
+		scale={gradio.shared.scale}
+		min_width={gradio.shared.min_width}
 		bind:fullscreen
 	>
 		<StatusTracker
-			autoscroll={gradio.autoscroll}
+			autoscroll={gradio.shared.autoscroll}
 			i18n={gradio.i18n}
-			{...loading_status}
+			{...gradio.shared.loading_status}
 		/>
 		<StaticImage
 			on:select={({ detail }) => gradio.dispatch("select", detail)}
@@ -104,49 +106,51 @@ const handle_drop = (event) => {
 				fullscreen = detail;
 			}}
 			{fullscreen}
-			{interactive}
-			bind:value
-			{label}
-			{show_label}
-			{show_download_button}
+			interactive={gradio.shared.interactive}
+			bind:value={gradio.props.value}
+			label={gradio.shared.label}
+			show_label={gradio.shared.show_label}
+			show_download_button={gradio.props.buttons.includes("download")}
 			i18n={gradio.i18n}
-			{show_fullscreen_button}
+			show_fullscreen_button={gradio.props.buttons.includes("fullscreen")}
 			position={normalised_slider_position}
-			{slider_color}
-			{max_height}
+			slider_color={gradio.props.slider_color}
+			max_height={gradio.props.max_height}
 		/>
 	</Block>
 {:else}
 	<Block
-		{visible}
-		variant={value === null ? "dashed" : "solid"}
+		visible={gradio.shared.visible}
+		variant={gradio.props.value === null ? "dashed" : "solid"}
 		border_mode={dragging ? "focus" : "base"}
 		padding={false}
-		{elem_id}
-		{elem_classes}
-		height={height || undefined}
-		{width}
+		elem_id={gradio.shared.elem_id}
+		elem_classes={gradio.shared.elem_classes}
+		height={gradio.props.height || undefined}
+		width={gradio.props.width}
 		allow_overflow={false}
-		{container}
-		{scale}
-		{min_width}
+		container={gradio.shared.container}
+		scale={gradio.shared.scale}
+		min_width={gradio.shared.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}
+			autoscroll={gradio.shared.autoscroll}
 			i18n={gradio.i18n}
-			{...loading_status}
-			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+			{...gradio.shared.loading_status}
+			on:clear_status={() =>
+				gradio.dispatch("clear_status", gradio.shared.loading_status)}
 		/>
 
 		<ImageUploader
+			bind:upload_promise
 			bind:this={upload_component}
-			bind:value
+			bind:value={gradio.props.value}
 			bind:dragging
-			{root}
+			root={gradio.shared.root}
 			on:edit={() => gradio.dispatch("edit")}
 			on:clear={() => {
 				gradio.dispatch("clear");
@@ -154,24 +158,28 @@ const handle_drop = (event) => {
 			on:drag={({ detail }) => (dragging = detail)}
 			on:upload={() => gradio.dispatch("upload")}
 			on:error={({ detail }) => {
-				loading_status = loading_status || {};
-				loading_status.status = "error";
+				if (gradio.shared.loading_status)
+					gradio.shared.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}
+			label={gradio.shared.label}
+			show_label={gradio.shared.show_label}
+			upload_count={gradio.props.upload_count}
+			max_file_size={gradio.shared.max_file_size}
 			i18n={gradio.i18n}
-			upload={(...args) => gradio.client.upload(...args)}
-			stream_handler={gradio.client?.stream}
-			{max_height}
+			upload={(...args) => gradio.shared.client.upload(...args)}
+			stream_handler={gradio.shared.client?.stream}
+			max_height={gradio.props.max_height}
 		>
 			{#if active_source === "upload" || !active_source}
-				<UploadText i18n={gradio.i18n} type="image" {placeholder} />
+				<UploadText
+					i18n={gradio.i18n}
+					type="image"
+					placeholder={gradio.props.placeholder}
+				/>
 			{:else if active_source === "clipboard"}
 				<UploadText i18n={gradio.i18n} type="clipboard" mode="short" />
 			{:else}