@gradio/imageslider 0.2.0

package/shared/ImageEl.svelte

@@ -0,0 +1,165 @@
+<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;
+
+	import { resolve_wasm_src } from "@gradio/wasm/svelte";
+
+	export let src: HTMLImgAttributes["src"] = undefined;
+	export let fullscreen = false;
+
+	let resolved_src: typeof src;
+
+	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;
+	// The `src` prop can be updated before the Promise from `resolve_wasm_src` is resolved.
+	// In such a case, the resolved value for the old `src` has to be discarded,
+	// This variable `latest_src` is used to pick up only the value resolved for the latest `src` prop.
+	let latest_src: typeof src;
+	$: {
+		// In normal (non-Wasm) Gradio, the `<img>` element should be rendered with the passed `src` props immediately
+		// without waiting for `resolve_wasm_src()` to resolve.
+		// If it waits, a blank image is displayed until the async task finishes
+		// and it leads to undesirable flickering.
+		// So set `src` to `resolved_src` here.
+		resolved_src = src;
+
+		latest_src = src;
+		const resolving_src = src;
+		resolve_wasm_src(resolving_src).then((s) => {
+			if (latest_src === resolving_src) {
+				resolved_src = s;
+			}
+		});
+	}
+
+	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 -->
+<img
+	src={resolved_src}
+	{...$$restProps}
+	class:fixed
+	style:transform
+	bind:this={img_el}
+	class:hidden
+	class:preview={variant === "preview"}
+	class:slider={variant === "upload"}
+	style:max-height={max_height && !fullscreen ? `${max_height}px` : null}
+	class:fullscreen
+	class:small={!fullscreen}
+	on:load={() => dispatch("load", get_image_size(img_el))}
+/>
+
+<style>
+	.preview {
+		object-fit: contain;
+		width: 100%;
+		transform-origin: top left;
+		margin: auto;
+	}
+
+	.small {
+		max-height: 500px;
+	}
+
+	.upload {
+		object-fit: contain;
+		max-height: 500px;
+	}
+
+	.fixed {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+	}
+
+	.fullscreen {
+		width: 100%;
+		height: 100%;
+	}
+
+	:global(.image-container:fullscreen) img {
+		width: 100%;
+		height: 100%;
+		max-height: none;
+		max-width: none;
+	}
+
+	.hidden {
+		opacity: 0;
+	}
+</style>

package/shared/Slider.svelte

@@ -0,0 +1,200 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { drag } from "d3-drag";
+	import { select } from "d3-selection";
+
+	function clamp(value: number, min: number, max: number): number {
+		return Math.min(Math.max(value, min), max);
+	}
+
+	export let position = 0.5;
+	export let disabled = false;
+
+	export let slider_color = "var(--border-color-primary)";
+	export let image_size: {
+		top: number;
+		left: number;
+		width: number;
+		height: number;
+	} = { top: 0, left: 0, width: 0, height: 0 };
+	export let el: HTMLDivElement | undefined = undefined;
+	export let parent_el: HTMLDivElement | undefined = undefined;
+	let inner: Element;
+	let px = 0;
+	let active = false;
+	let container_width = 0;
+
+	function set_position(width: number): void {
+		container_width = parent_el?.getBoundingClientRect().width || 0;
+		if (width === 0) {
+			image_size.width = el?.getBoundingClientRect().width || 0;
+		}
+
+		px = clamp(
+			image_size.width * position + image_size.left,
+			0,
+			container_width
+		);
+	}
+
+	function round(n: number, points: number): number {
+		const mod = Math.pow(10, points);
+		return Math.round((n + Number.EPSILON) * mod) / mod;
+	}
+
+	function update_position(x: number): void {
+		px = clamp(x, 0, container_width);
+		position = round((x - image_size.left) / image_size.width, 5);
+	}
+
+	function drag_start(event: any): void {
+		if (disabled) return;
+		active = true;
+		update_position(event.x);
+	}
+
+	function drag_move(event: any): void {
+		if (disabled) return;
+		update_position(event.x);
+	}
+
+	function drag_end(): void {
+		if (disabled) return;
+		active = false;
+	}
+
+	function update_position_from_pc(pc: number): void {
+		px = clamp(image_size.width * pc + image_size.left, 0, container_width);
+	}
+
+	$: set_position(image_size.width);
+	$: update_position_from_pc(position);
+
+	onMount(() => {
+		set_position(image_size.width);
+		const drag_handler = drag()
+			.on("start", drag_start)
+			.on("drag", drag_move)
+			.on("end", drag_end);
+		select(inner).call(drag_handler);
+	});
+</script>
+
+<svelte:window on:resize={() => set_position(image_size.width)} />
+
+<div class="wrap" role="none" bind:this={parent_el}>
+	<div class="content" bind:this={el}>
+		<slot />
+	</div>
+	<div
+		class="outer"
+		class:disabled
+		bind:this={inner}
+		role="none"
+		style="transform: translateX({px}px)"
+		class:grab={active}
+	>
+		<span class="icon-wrap" class:active class:disabled
+			><span class="icon left">◢</span><span
+				class="icon center"
+				style:--color={slider_color}
+			></span><span class="icon right">◢</span></span
+		>
+		<div class="inner" style:--color={slider_color}></div>
+	</div>
+</div>
+
+<style>
+	.wrap {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		z-index: var(--layer-1);
+		overflow: hidden;
+	}
+
+	.icon-wrap {
+		display: block;
+		position: absolute;
+		top: 50%;
+		transform: translate(-20.5px, -50%);
+		left: 10px;
+		width: 40px;
+		transition: 0.2s;
+		color: var(--body-text-color);
+		height: 30px;
+		border-radius: 5px;
+		background-color: var(--color-accent);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: var(--layer-3);
+		box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
+		font-size: 12px;
+	}
+
+	.icon.left {
+		transform: rotate(135deg);
+		text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
+	}
+
+	.icon.right {
+		transform: rotate(-45deg);
+		text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
+	}
+
+	.icon.center {
+		display: block;
+		width: 1px;
+		height: 100%;
+		background-color: var(--color);
+		opacity: 0.1;
+	}
+
+	.icon-wrap.active {
+		opacity: 0;
+	}
+
+	.icon-wrap.disabled {
+		opacity: 0;
+	}
+
+	.outer {
+		width: 20px;
+		height: 100%;
+		position: absolute;
+		cursor: grab;
+		position: absolute;
+		top: 0;
+		left: -10px;
+		pointer-events: auto;
+		z-index: var(--layer-2);
+	}
+	.grab {
+		cursor: grabbing;
+	}
+
+	.inner {
+		width: 1px;
+		height: 100%;
+		background: var(--color);
+		position: absolute;
+		left: calc((100% - 2px) / 2);
+	}
+
+	.disabled {
+		cursor: auto;
+	}
+
+	.disabled .inner {
+		box-shadow: none;
+	}
+
+	.content {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+</style>

package/shared/SliderPreview.svelte

@@ -0,0 +1,229 @@
+<script lang="ts">
+	import Slider from "./Slider.svelte";
+	import ImageEl from "./ImageEl.svelte";
+	import {
+		BlockLabel,
+		Empty,
+		IconButton,
+		IconButtonWrapper,
+		FullscreenButton
+	} from "@gradio/atoms";
+	import { Image, Download, Undo, Clear } from "@gradio/icons";
+	import { type FileData } from "@gradio/client";
+	import type { I18nFormatter } from "@gradio/utils";
+	import { DownloadLink } from "@gradio/wasm/svelte";
+	import { ZoomableImage } from "./zoom";
+	import { onMount } from "svelte";
+	import { tweened, type Tweened } from "svelte/motion";
+	import { createEventDispatcher } from "svelte";
+
+	export let value: [null | FileData, null | FileData] = [null, null];
+	export let label: string | undefined = undefined;
+	export let show_download_button = true;
+	export let show_label: boolean;
+	export let i18n: I18nFormatter;
+	export let position: number;
+	export let layer_images = true;
+	export let show_single = false;
+	export let slider_color: string;
+	export let show_fullscreen_button = true;
+	export let el_width = 0;
+	export let max_height: number;
+	export let interactive = true;
+	const dispatch = createEventDispatcher<{ clear: void }>();
+
+	let img: HTMLImageElement;
+	let slider_wrap: HTMLDivElement;
+	let image_container: HTMLDivElement;
+
+	let transform: Tweened<{ x: number; y: number; z: number }> = tweened(
+		{ x: 0, y: 0, z: 1 },
+		{
+			duration: 75
+		}
+	);
+	let parent_el: HTMLDivElement;
+
+	$: coords_at_viewport = get_coords_at_viewport(
+		position,
+		viewport_width,
+		image_size.width,
+		image_size.left,
+		$transform.x,
+		$transform.z
+	);
+	$: style = layer_images
+		? `clip-path: inset(0 0 0 ${coords_at_viewport * 100}%)`
+		: "";
+
+	function get_coords_at_viewport(
+		viewport_percent_x: number, // 0-1
+		viewportWidth: number,
+		image_width: number,
+		img_offset_x: number,
+		tx: number, // image translation x (in pixels)
+		scale: number // image scale (uniform)
+	): number {
+		const px_relative_to_image = viewport_percent_x * image_width;
+		const pixel_position = px_relative_to_image + img_offset_x;
+
+		const normalised_position = (pixel_position - tx) / scale;
+		const percent_position = normalised_position / viewportWidth;
+
+		return percent_position;
+	}
+
+	let img_width = 0;
+	let viewport_width = 0;
+
+	let zoomable_image: ZoomableImage | null = null;
+	let observer: ResizeObserver | null = null;
+
+	function init_image(
+		img: HTMLImageElement,
+		slider_wrap: HTMLDivElement
+	): void {
+		if (!img || !slider_wrap) return;
+		zoomable_image?.destroy();
+		observer?.disconnect();
+		img_width = img?.getBoundingClientRect().width || 0;
+		viewport_width = slider_wrap?.getBoundingClientRect().width || 0;
+		zoomable_image = new ZoomableImage(slider_wrap, img);
+		zoomable_image.subscribe(({ x, y, scale }) => {
+			transform.set({ x, y, z: scale });
+		});
+
+		observer = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				if (entry.target === slider_wrap) {
+					viewport_width = entry.contentRect.width;
+				}
+
+				if (entry.target === img) {
+					img_width = entry.contentRect.width;
+				}
+			}
+		});
+		observer.observe(slider_wrap);
+		observer.observe(img);
+	}
+
+	$: init_image(img, slider_wrap);
+
+	onMount(() => {
+		return () => {
+			zoomable_image?.destroy();
+			observer?.disconnect();
+		};
+	});
+
+	let is_full_screen = false;
+	let slider_wrap_parent: HTMLDivElement;
+
+	let image_size: { top: number; left: number; width: number; height: number } =
+		{ top: 0, left: 0, width: 0, height: 0 };
+
+	function handle_image_load(event: CustomEvent): void {
+		image_size = event.detail;
+	}
+</script>
+
+<BlockLabel {show_label} Icon={Image} label={label || i18n("image.image")} />
+{#if (value === null || value[0] === null || value[1] === null) && !show_single}
+	<Empty unpadded_box={true} size="large"><Image /></Empty>
+{:else}
+	<div class="image-container" bind:this={image_container}>
+		<IconButtonWrapper>
+			<IconButton
+				Icon={Undo}
+				label={i18n("common.undo")}
+				disabled={$transform.z === 1}
+				on:click={() => zoomable_image?.reset_zoom()}
+			/>
+			{#if show_fullscreen_button}
+				<FullscreenButton container={image_container} bind:is_full_screen />
+			{/if}
+
+			{#if show_download_button}
+				<DownloadLink
+					href={value[1]?.url}
+					download={value[1]?.orig_name || "image"}
+				>
+					<IconButton Icon={Download} label={i18n("common.download")} />
+				</DownloadLink>
+			{/if}
+			{#if interactive}
+				<IconButton
+					Icon={Clear}
+					label="Remove Image"
+					on:click={(event) => {
+						value = [null, null];
+						dispatch("clear");
+						event.stopPropagation();
+					}}
+				/>
+			{/if}
+		</IconButtonWrapper>
+		<div
+			class="slider-wrap"
+			bind:this={slider_wrap_parent}
+			bind:clientWidth={el_width}
+			class:limit_height={!is_full_screen}
+		>
+			<Slider
+				bind:position
+				{slider_color}
+				bind:el={slider_wrap}
+				bind:parent_el
+				{image_size}
+			>
+				<ImageEl
+					src={value?.[0]?.url}
+					alt=""
+					loading="lazy"
+					bind:img_el={img}
+					variant="preview"
+					transform="translate({$transform.x}px, {$transform.y}px) scale({$transform.z})"
+					fullscreen={is_full_screen}
+					{max_height}
+					on:load={handle_image_load}
+				/>
+				<ImageEl
+					variant="preview"
+					fixed={layer_images}
+					hidden={!value?.[1]?.url}
+					src={value?.[1]?.url}
+					alt=""
+					loading="lazy"
+					{style}
+					transform="translate({$transform.x}px, {$transform.y}px) scale({$transform.z})"
+					fullscreen={is_full_screen}
+					{max_height}
+					on:load={handle_image_load}
+				/>
+			</Slider>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.slider-wrap {
+		user-select: none;
+		height: 100%;
+		width: 100%;
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.limit_height :global(img) {
+		max-height: 500px;
+	}
+
+	.image-container {
+		height: 100%;
+		position: relative;
+		min-width: var(--size-20);
+	}
+</style>

package/shared/SliderUpload.svelte

@@ -0,0 +1,46 @@
+<svelte:options accessors={true} />
+
+<script lang="ts">
+	import type { I18nFormatter } from "@gradio/utils";
+	import Image from "./Image.svelte";
+	import { type Client } from "@gradio/client";
+
+	import type { FileData } from "@gradio/client";
+
+	export let value: [FileData | null, FileData | null] = [null, null];
+	export let upload: Client["upload"];
+	export let stream_handler: Client["stream"];
+	export let label: string;
+	export let show_label: boolean;
+	export let i18n: I18nFormatter;
+	export let root: string;
+	export let upload_count = 1;
+	export let dragging: boolean;
+	export let max_height: number;
+	export let max_file_size: number | null = null;
+</script>
+
+<Image
+	slider_color="var(--border-color-primary)"
+	position={0.5}
+	bind:value
+	bind:dragging
+	{root}
+	on:edit
+	on:clear
+	on:stream
+	on:drag={({ detail }) => (dragging = detail)}
+	on:upload
+	on:select
+	on:share
+	{label}
+	{show_label}
+	{upload_count}
+	{stream_handler}
+	{upload}
+	{max_file_size}
+	{max_height}
+	{i18n}
+>
+	<slot />
+</Image>