@gradio/image 0.14.0 → 0.15.1

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @gradio/image
 
+## 0.15.1
+
+### Fixes
+
+- [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/utils@0.6.1
+- @gradio/statustracker@0.7.6
+- @gradio/atoms@0.8.1
+- @gradio/icons@0.7.2
+- @gradio/wasm@0.13.1
+- @gradio/client@1.5.2
+- @gradio/upload@0.12.4
+
+## 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

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,20 +32,7 @@
 </Template>
 
 <Story
-	name="static with label and download button"
-	args={{
-		value: {
-			path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
-			url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
-			orig_name: "cheetah.jpg"
-		},
-		show_label: true,
-		show_download_button: true
-	}}
-/>
-
-<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",
@@ -49,6 +40,7 @@
 			orig_name: "cheetah.jpg"
 		},
 		show_label: true,
+		placeholder: "This is a cheetah",
 		show_download_button: true
 	}}
 	play={async ({ canvasElement }) => {
@@ -74,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={{
@@ -85,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 { cleanup, render } from "@self/tootils";
+import { setupi18n } from "../core/src/i18n";
 
 import Image from "./Index.svelte";
 import type { LoadingStatus } from "@gradio/statustracker";

package/Index.svelte

@@ -51,6 +51,7 @@
 	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<{
@@ -82,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}
@@ -132,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}
@@ -141,8 +170,10 @@
 		/>
 
 		<ImageUploader
+			bind:this={upload_component}
 			bind:active_source
 			bind:value
+			bind:dragging
 			selectable={_selectable}
 			{root}
 			{sources}
@@ -171,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/dist/Example.svelte

@@ -0,0 +1,46 @@
+<script>import Image from "./shared/Image.svelte";
+export let value;
+export let type;
+export let selected = false;
+</script>
+
+<div
+	class="container"
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+	class:border={value}
+>
+	{#if value}
+		<Image src={value.url} alt="" />
+	{/if}
+</div>
+
+<style>
+	.container :global(img) {
+		width: 100%;
+		height: 100%;
+	}
+
+	.container.selected {
+		border-color: var(--border-color-accent);
+	}
+	.border.table {
+		border: 2px solid var(--border-color-primary);
+	}
+
+	.container.table {
+		margin: 0 auto;
+		border-radius: var(--radius-lg);
+		overflow: hidden;
+		width: var(--size-20);
+		height: var(--size-20);
+		object-fit: cover;
+	}
+
+	.container.gallery {
+		width: var(--size-20);
+		max-width: var(--size-20);
+		object-fit: cover;
+	}
+</style>

package/dist/Example.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { FileData } from "@gradio/client";
+declare const __propDef: {
+    props: {
+        value: null | FileData;
+        type: "gallery" | "table";
+        selected?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/dist/Index.svelte

@@ -0,0 +1,185 @@
+<svelte:options accessors={true} />
+
+<script context="module">export { default as Webcam } from "./shared/Webcam.svelte";
+export { default as BaseImageUploader } from "./shared/ImageUploader.svelte";
+export { default as BaseStaticImage } from "./shared/ImagePreview.svelte";
+export { default as BaseExample } from "./Example.svelte";
+export { default as BaseImage } from "./shared/Image.svelte";
+</script>
+
+<script>import StaticImage from "./shared/ImagePreview.svelte";
+import ImageUploader from "./shared/ImageUploader.svelte";
+import { afterUpdate } from "svelte";
+import { Block, Empty, UploadText } from "@gradio/atoms";
+import { Image } from "@gradio/icons";
+import { StatusTracker } from "@gradio/statustracker";
+export let value_is_output = false;
+export let elem_id = "";
+export let elem_classes = [];
+export let visible = true;
+export let value = null;
+let old_value = null;
+export let label;
+export let show_label;
+export let show_download_button;
+export let root;
+export let height;
+export let width;
+export let _selectable = false;
+export let container = true;
+export let scale = null;
+export let min_width = void 0;
+export let loading_status;
+export let show_share_button = false;
+export let sources = [
+  "upload",
+  "clipboard",
+  "webcam"
+];
+export let interactive;
+export let streaming;
+export let pending;
+export let mirror_webcam;
+export let placeholder = void 0;
+export let show_fullscreen_button;
+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}
+	<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)}
+			{value}
+			{label}
+			{show_label}
+			{show_download_button}
+			selectable={_selectable}
+			{show_share_button}
+			i18n={gradio.i18n}
+			{show_fullscreen_button}
+		/>
+	</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:active_source
+			bind:value
+			bind:dragging
+			selectable={_selectable}
+			{root}
+			{sources}
+			on:edit={() => gradio.dispatch("edit")}
+			on:clear={() => {
+				gradio.dispatch("clear");
+			}}
+			on:stream={() => gradio.dispatch("stream")}
+			on:drag={({ detail }) => (dragging = detail)}
+			on:upload={() => gradio.dispatch("upload")}
+			on:select={({ detail }) => gradio.dispatch("select", detail)}
+			on:share={({ detail }) => gradio.dispatch("share", detail)}
+			on:error={({ detail }) => {
+				loading_status = loading_status || {};
+				loading_status.status = "error";
+				gradio.dispatch("error", detail);
+			}}
+			{label}
+			{show_label}
+			{pending}
+			{streaming}
+			{mirror_webcam}
+			max_file_size={gradio.max_file_size}
+			i18n={gradio.i18n}
+			upload={gradio.client.upload}
+			stream_handler={gradio.client.stream}
+		>
+			{#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,158 @@
+import { SvelteComponent } from "svelte";
+export { default as Webcam } from "./shared/Webcam.svelte";
+export { default as BaseImageUploader } from "./shared/ImageUploader.svelte";
+export { default as BaseStaticImage } from "./shared/ImagePreview.svelte";
+export { default as BaseExample } from "./Example.svelte";
+export { default as BaseImage } from "./shared/Image.svelte";
+import type { Gradio, SelectData } 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?: (null | FileData) | undefined;
+        label: string;
+        show_label: boolean;
+        show_download_button: boolean;
+        root: string;
+        height: number | undefined;
+        width: number | undefined;
+        _selectable?: boolean | undefined;
+        container?: boolean | undefined;
+        scale?: (number | null) | undefined;
+        min_width?: number | undefined;
+        loading_status: LoadingStatus;
+        show_share_button?: boolean | undefined;
+        sources?: ("clipboard" | "webcam" | "upload")[] | undefined;
+        interactive: boolean;
+        streaming: boolean;
+        pending: boolean;
+        mirror_webcam: boolean;
+        placeholder?: string | undefined;
+        show_fullscreen_button: boolean;
+        gradio: Gradio<{
+            input: never;
+            change: never;
+            error: string;
+            edit: never;
+            stream: never;
+            drag: never;
+            upload: never;
+            clear: never;
+            select: SelectData;
+            share: ShareData;
+            clear_status: LoadingStatus;
+        }>;
+    };
+    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(): FileData | null | undefined;
+    /**accessor*/
+    set value(_: FileData | null | 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 _selectable(): boolean | undefined;
+    /**accessor*/
+    set _selectable(_: boolean | 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 show_share_button(): boolean | undefined;
+    /**accessor*/
+    set show_share_button(_: boolean | undefined);
+    get sources(): ("upload" | "clipboard" | "webcam")[] | undefined;
+    /**accessor*/
+    set sources(_: ("upload" | "clipboard" | "webcam")[] | undefined);
+    get interactive(): boolean;
+    /**accessor*/
+    set interactive(_: boolean);
+    get streaming(): boolean;
+    /**accessor*/
+    set streaming(_: boolean);
+    get pending(): boolean;
+    /**accessor*/
+    set pending(_: boolean);
+    get mirror_webcam(): boolean;
+    /**accessor*/
+    set mirror_webcam(_: boolean);
+    get placeholder(): string | undefined;
+    /**accessor*/
+    set placeholder(_: string | undefined);
+    get show_fullscreen_button(): boolean;
+    /**accessor*/
+    set show_fullscreen_button(_: boolean);
+    get gradio(): Gradio<{
+        input: never;
+        change: never;
+        error: string;
+        edit: never;
+        stream: never;
+        drag: never;
+        upload: never;
+        clear: never;
+        select: SelectData;
+        share: ShareData;
+        clear_status: LoadingStatus;
+    }>;
+    /**accessor*/
+    set gradio(_: Gradio<{
+        input: never;
+        change: never;
+        error: string;
+        edit: never;
+        stream: never;
+        drag: never;
+        upload: never;
+        clear: never;
+        select: SelectData;
+        share: ShareData;
+        clear_status: LoadingStatus;
+    }>);
+}

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 {};