@gradio/image 0.13.1 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @gradio/image
 
+## 0.15.0
+
+### Features
+
+- [#9031](https://github.com/gradio-app/gradio/pull/9031) [`04b7d32`](https://github.com/gradio-app/gradio/commit/04b7d327ec1227a693fc2dfea51b1e2729851bde) - Allow drag and replace image in `gr.Image` and Multimodal textbox.  Thanks @hannahblair!
+- [#8930](https://github.com/gradio-app/gradio/pull/8930) [`41d5ab9`](https://github.com/gradio-app/gradio/commit/41d5ab987ba9728753be4509490c79041655809b) - Add `placeholder` param to Image and ImageEditor to replace upload image text.  Thanks @hannahblair!
+- [#9118](https://github.com/gradio-app/gradio/pull/9118) [`e1c404d`](https://github.com/gradio-app/gradio/commit/e1c404da1143fb52b659d03e028bdba1badf443d) - setup npm-previews of all packages.  Thanks @pngwn!
+
+### Fixes
+
+- [#9116](https://github.com/gradio-app/gradio/pull/9116) [`ba6322e`](https://github.com/gradio-app/gradio/commit/ba6322ec2bb975f15389fe0700816bf671c6819d) - Fix image height content fit.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/utils@0.6.0
+- @gradio/upload@0.12.3
+- @gradio/atoms@0.8.0
+- @gradio/client@1.5.1
+- @gradio/statustracker@0.7.5
+- @gradio/wasm@0.13.0
+- @gradio/icons@0.7.1
+
+## 0.14.0
+
+### Features
+
+- [#8964](https://github.com/gradio-app/gradio/pull/8964) [`bf6bbd9`](https://github.com/gradio-app/gradio/commit/bf6bbd971acddbf78f03bea431ed7d1e0003ccf9) - Add min/max-imize button to gr.Image and gr.Gallery.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/atoms@0.7.9
+- @gradio/statustracker@0.7.4
+- @gradio/client@1.5.0
+- @gradio/icons@0.7.0
+- @gradio/upload@0.12.2
+
 ## 0.13.1
 
 ### Dependency updates

package/Image.stories.svelte

@@ -3,6 +3,8 @@
 	import StaticImage from "./Index.svelte";
 	import { userEvent, within } from "@storybook/test";
 	import { allModes } from "../storybook/modes";
+	import image_file_100x100 from "../storybook/test_files/image_100x100.webp";
+	import image_file_100x1000 from "../storybook/test_files/image_100x100.webp";
 
 	export const meta = {
 		title: "Components/Image",
@@ -16,6 +18,8 @@
 			}
 		}
 	};
+
+	let md = `# a heading! /n a new line! `;
 </script>
 
 <Template let:args>
@@ -28,7 +32,7 @@
 </Template>
 
 <Story
-	name="static with label and download button"
+	name="static with label, info and download button"
 	args={{
 		value: {
 			path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
@@ -36,8 +40,17 @@
 			orig_name: "cheetah.jpg"
 		},
 		show_label: true,
+		placeholder: "This is a cheetah",
 		show_download_button: true
 	}}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		const expand_btn = canvas.getByRole("button", {
+			name: "View in full screen"
+		});
+		await userEvent.click(expand_btn);
+	}}
 />
 
 <Story
@@ -53,6 +66,41 @@
 	}}
 />
 
+<Story
+	name="static with a vertically long image"
+	args={{
+		value: {
+			path: image_file_100x1000,
+			url: image_file_100x1000,
+			orig_name: "image.webp"
+		}
+	}}
+/>
+
+<Story
+	name="static with a vertically long image and a fixed height"
+	args={{
+		value: {
+			path: image_file_100x1000,
+			url: image_file_100x1000,
+			orig_name: "image.webp"
+		},
+		height: "500px"
+	}}
+/>
+
+<Story
+	name="static with a small image and a fixed height"
+	args={{
+		value: {
+			path: image_file_100x100,
+			url: image_file_100x100,
+			orig_name: "image.webp"
+		},
+		height: "500px"
+	}}
+/>
+
 <Story
 	name="interactive with upload, clipboard, and webcam"
 	args={{
@@ -64,7 +112,8 @@
 		},
 		show_label: false,
 		show_download_button: false,
-		interactive: true
+		interactive: true,
+		placeholder: md
 	}}
 	play={async ({ canvasElement }) => {
 		const canvas = within(canvasElement);

package/Image.test.ts

@@ -7,9 +7,8 @@ import {
 	beforeAll,
 	beforeEach
 } from "vitest";
-import { spy } from "tinyspy";
 import { cleanup, render } from "@gradio/tootils";
-import { setupi18n } from "../app/src/i18n";
+import { setupi18n } from "../core/src/i18n";
 
 import Image from "./Index.svelte";
 import type { LoadingStatus } from "@gradio/statustracker";

package/Index.svelte

@@ -51,6 +51,8 @@
 	export let streaming: boolean;
 	export let pending: boolean;
 	export let mirror_webcam: boolean;
+	export let placeholder: string | undefined = undefined;
+	export let show_fullscreen_button: boolean;
 
 	export let gradio: Gradio<{
 		input: never;
@@ -81,6 +83,30 @@
 
 	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();
+		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 (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}
@@ -114,6 +140,7 @@
 			selectable={_selectable}
 			{show_share_button}
 			i18n={gradio.i18n}
+			{show_fullscreen_button}
 		/>
 	</Block>
 {:else}
@@ -130,6 +157,10 @@
 		{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}
@@ -139,8 +170,10 @@
 		/>
 
 		<ImageUploader
+			bind:this={upload_component}
 			bind:active_source
 			bind:value
+			bind:dragging
 			selectable={_selectable}
 			{root}
 			{sources}
@@ -169,7 +202,7 @@
 			stream_handler={gradio.client.stream}
 		>
 			{#if active_source === "upload" || !active_source}
-				<UploadText i18n={gradio.i18n} type="image" />
+				<UploadText i18n={gradio.i18n} type="image" {placeholder} />
 			{:else if active_source === "clipboard"}
 				<UploadText i18n={gradio.i18n} type="clipboard" mode="short" />
 			{:else}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.13.1",
+  "version": "0.15.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,16 +10,16 @@
     "cropperjs": "^1.5.12",
     "lazy-brush": "^1.0.1",
     "resize-observer-polyfill": "^1.5.1",
-    "@gradio/atoms": "^0.7.8",
-    "@gradio/icons": "^0.6.1",
-    "@gradio/statustracker": "^0.7.3",
-    "@gradio/upload": "^0.12.1",
-    "@gradio/client": "^1.4.0",
-    "@gradio/wasm": "^0.12.0",
-    "@gradio/utils": "^0.5.2"
+    "@gradio/atoms": "^0.8.0",
+    "@gradio/icons": "^0.7.1",
+    "@gradio/statustracker": "^0.7.5",
+    "@gradio/client": "^1.5.1",
+    "@gradio/utils": "^0.6.0",
+    "@gradio/wasm": "^0.13.0",
+    "@gradio/upload": "^0.12.3"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.10.2"
+    "@gradio/preview": "^0.11.0"
   },
   "main_changeset": true,
   "main": "./Index.svelte",
@@ -29,5 +29,10 @@
     "./example": "./Example.svelte",
     "./base": "./shared/ImagePreview.svelte",
     "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/image"
   }
 }

package/shared/ImagePreview.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
+	import { createEventDispatcher, onMount } from "svelte";
 	import type { SelectData } from "@gradio/utils";
 	import { uploadToHuggingFace } from "@gradio/utils";
 	import { BlockLabel, Empty, IconButton, ShareButton } from "@gradio/atoms";
@@ -7,6 +7,7 @@
 	import { get_coordinates_of_clicked_image } from "./utils";
 	import Image from "./Image.svelte";
 	import { DownloadLink } from "@gradio/wasm/svelte";
+	import { Maximize, Minimize } from "@gradio/icons";
 
 	import { Image as ImageIcon } from "@gradio/icons";
 	import { type FileData } from "@gradio/client";
@@ -19,6 +20,7 @@
 	export let selectable = false;
 	export let show_share_button = false;
 	export let i18n: I18nFormatter;
+	export let show_fullscreen_button = true;
 
 	const dispatch = createEventDispatcher<{
 		change: string;
@@ -31,6 +33,24 @@
 			dispatch("select", { index: coordinates, value: null });
 		}
 	};
+
+	let is_full_screen = false;
+	let image_container: HTMLElement;
+
+	onMount(() => {
+		document.addEventListener("fullscreenchange", () => {
+			is_full_screen = !!document.fullscreenElement;
+		});
+	});
+
+	const toggle_full_screen = async (): Promise<void> => {
+		if (!is_full_screen) {
+			await image_container.requestFullscreen();
+		} else {
+			await document.exitFullscreen();
+			is_full_screen = !is_full_screen;
+		}
+	};
 </script>
 
 <BlockLabel
@@ -41,44 +61,78 @@
 {#if value === null || !value.url}
 	<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
 {:else}
-	<div class="icon-buttons">
-		{#if show_download_button}
-			<DownloadLink href={value.url} download={value.orig_name || "image"}>
-				<IconButton Icon={Download} label={i18n("common.download")} />
-			</DownloadLink>
-		{/if}
-		{#if show_share_button}
-			<ShareButton
-				{i18n}
-				on:share
-				on:error
-				formatter={async (value) => {
-					if (!value) return "";
-					let url = await uploadToHuggingFace(value, "url");
-					return `<img src="${url}" />`;
-				}}
-				{value}
-			/>
-		{/if}
-	</div>
-	<button on:click={handle_click}>
-		<div class:selectable class="image-container">
-			<Image src={value.url} alt="" loading="lazy" on:load />
+	<div class="image-container" bind:this={image_container}>
+		<div class="icon-buttons">
+			{#if !is_full_screen && show_fullscreen_button}
+				<IconButton
+					Icon={Maximize}
+					label={is_full_screen ? "Exit full screen" : "View in full screen"}
+					on:click={toggle_full_screen}
+				/>
+			{/if}
+
+			{#if is_full_screen && show_fullscreen_button}
+				<IconButton
+					Icon={Minimize}
+					label={is_full_screen ? "Exit full screen" : "View in full screen"}
+					on:click={toggle_full_screen}
+				/>
+			{/if}
+
+			{#if show_download_button}
+				<DownloadLink href={value.url} download={value.orig_name || "image"}>
+					<IconButton Icon={Download} label={i18n("common.download")} />
+				</DownloadLink>
+			{/if}
+			{#if show_share_button}
+				<ShareButton
+					{i18n}
+					on:share
+					on:error
+					formatter={async (value) => {
+						if (!value) return "";
+						let url = await uploadToHuggingFace(value, "url");
+						return `<img src="${url}" />`;
+					}}
+					{value}
+				/>
+			{/if}
 		</div>
-	</button>
+		<button on:click={handle_click}>
+			<div class:selectable class="image-frame">
+				<Image src={value.url} alt="" loading="lazy" on:load />
+			</div>
+		</button>
+	</div>
 {/if}
 
 <style>
 	.image-container {
 		height: 100%;
+		position: relative;
 	}
-	.image-container :global(img),
-	button {
+
+	.image-container button {
 		width: var(--size-full);
 		height: var(--size-full);
-		object-fit: contain;
-		display: block;
 		border-radius: var(--radius-lg);
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.image-frame {
+		width: auto;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.image-frame :global(img) {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: scale-down;
 	}
 
 	.selectable {
@@ -91,5 +145,24 @@
 		top: 6px;
 		right: 6px;
 		gap: var(--size-1);
+		z-index: 1;
+	}
+
+	:global(.fullscreen-controls svg) {
+		position: relative;
+		top: 0px;
+	}
+
+	:global(.image-container:fullscreen) {
+		background-color: black;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	:global(.image-container:fullscreen img) {
+		max-width: 90vw;
+		max-height: 90vh;
+		object-fit: scale-down;
 	}
 </style>

package/shared/ImageUploader.svelte

@@ -70,7 +70,7 @@
 		select: SelectData;
 	}>();
 
-	let dragging = false;
+	export let dragging = false;
 
 	$: dispatch("drag", dragging);
 
@@ -109,7 +109,11 @@
 			}}
 		/>
 	{/if}
-	<div class="upload-container" class:reduced-height={sources.length > 1}>
+	<div
+		class="upload-container"
+		class:reduced-height={sources.length > 1}
+		style:width={value ? "auto" : "100%"}
+	>
 		<Upload
 			hidden={value !== null || active_source === "webcam"}
 			bind:this={upload_input}
@@ -120,7 +124,7 @@
 			on:error
 			{root}
 			{max_file_size}
-			disable_click={!sources.includes("upload")}
+			disable_click={!sources.includes("upload") || value !== null}
 			{upload}
 			{stream_handler}
 		>
@@ -165,7 +169,7 @@
 	.image-frame :global(img) {
 		width: var(--size-full);
 		height: var(--size-full);
-		object-fit: contain;
+		object-fit: scale-down;
 	}
 
 	.image-frame {
@@ -175,10 +179,13 @@
 	}
 
 	.upload-container {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
 		height: 100%;
 		flex-shrink: 1;
 		max-height: 100%;
-		width: 100%;
 	}
 
 	.reduced-height {