@gradio/image 0.14.0 → 0.16.0-beta.1

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @gradio/image
 
+## 0.16.0-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+- @gradio/wasm@0.13.1-beta.1
+
+## 0.16.0-beta.0
+
+### Features
+
+- [#9149](https://github.com/gradio-app/gradio/pull/9149) [`3d7a9b8`](https://github.com/gradio-app/gradio/commit/3d7a9b81f6fef06187eca832471dc1692eb493a0) - Open audio/image input stream only when queue is ready.  Thanks @freddyaboulton!
+- [#9173](https://github.com/gradio-app/gradio/pull/9173) [`66349fe`](https://github.com/gradio-app/gradio/commit/66349fe26827e3a3c15b738a1177e95fec7f5554) - Streaming Guides.  Thanks @freddyaboulton!
+- [#8941](https://github.com/gradio-app/gradio/pull/8941) [`97a7bf6`](https://github.com/gradio-app/gradio/commit/97a7bf66a79179d1b91a3199d68e5c11216ca500) - Streaming inputs for 5.0.  Thanks @freddyaboulton!
+
+### 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.7.0-beta.0
+- @gradio/statustracker@0.8.0-beta.0
+- @gradio/atoms@0.8.1-beta.0
+- @gradio/client@1.6.0-beta.0
+- @gradio/icons@0.8.0-beta.0
+- @gradio/upload@0.12.4-beta.0
+- @gradio/wasm@0.13.1-beta.0
+
+## 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

@@ -9,7 +9,7 @@
 </script>
 
 <script lang="ts">
-	import type { Gradio, SelectData } from "@gradio/utils";
+	import type { Gradio, SelectData, ValueData } from "@gradio/utils";
 	import StaticImage from "./shared/ImagePreview.svelte";
 	import ImageUploader from "./shared/ImageUploader.svelte";
 	import { afterUpdate } from "svelte";
@@ -22,6 +22,16 @@
 
 	type sources = "upload" | "webcam" | "clipboard" | null;
 
+	let stream_state = "closed";
+	let _modify_stream: (state: "open" | "closed" | "waiting") => void;
+	export function modify_stream_state(
+		state: "open" | "closed" | "waiting"
+	): void {
+		stream_state = state;
+		_modify_stream(state);
+	}
+	export const get_stream_state: () => void = () => stream_state;
+	export let set_time_limit: (arg0: number) => void;
 	export let value_is_output = false;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
@@ -35,6 +45,7 @@
 
 	export let height: number | undefined;
 	export let width: number | undefined;
+	export let stream_every: number;
 
 	export let _selectable = false;
 	export let container = true;
@@ -51,6 +62,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<{
@@ -58,13 +70,14 @@
 		change: never;
 		error: string;
 		edit: never;
-		stream: never;
+		stream: ValueData;
 		drag: never;
 		upload: never;
 		clear: never;
 		select: SelectData;
 		share: ShareData;
 		clear_status: LoadingStatus;
+		close_stream: string;
 	}>;
 
 	$: {
@@ -76,12 +89,37 @@
 			}
 		}
 	}
+
 	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();
+		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 +170,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 +183,10 @@
 		/>
 
 		<ImageUploader
+			bind:this={upload_component}
 			bind:active_source
 			bind:value
+			bind:dragging
 			selectable={_selectable}
 			{root}
 			{sources}
@@ -150,7 +194,7 @@
 			on:clear={() => {
 				gradio.dispatch("clear");
 			}}
-			on:stream={() => gradio.dispatch("stream")}
+			on:stream={({ detail }) => gradio.dispatch("stream", detail)}
 			on:drag={({ detail }) => (dragging = detail)}
 			on:upload={() => gradio.dispatch("upload")}
 			on:select={({ detail }) => gradio.dispatch("select", detail)}
@@ -160,18 +204,24 @@
 				loading_status.status = "error";
 				gradio.dispatch("error", detail);
 			}}
+			on:close_stream={() => {
+				gradio.dispatch("close_stream", "stream");
+			}}
 			{label}
 			{show_label}
 			{pending}
 			{streaming}
 			{mirror_webcam}
+			{stream_every}
+			bind:modify_stream={_modify_stream}
+			bind:set_time_limit
 			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" />
+				<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,200 @@
+<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";
+let stream_state = "closed";
+let _modify_stream;
+export function modify_stream_state(state) {
+  stream_state = state;
+  _modify_stream(state);
+}
+export const get_stream_state = () => stream_state;
+export let set_time_limit;
+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 stream_every;
+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={({ detail }) => gradio.dispatch("stream", detail)}
+			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);
+			}}
+			on:close_stream={() => {
+				gradio.dispatch("close_stream", "stream");
+			}}
+			{label}
+			{show_label}
+			{pending}
+			{streaming}
+			{mirror_webcam}
+			{stream_every}
+			bind:modify_stream={_modify_stream}
+			bind:set_time_limit
+			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}