@gradio/image 0.15.0 → 0.16.0-beta.1

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @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

package/Image.test.ts

@@ -7,7 +7,7 @@ import {
 	beforeAll,
 	beforeEach
 } from "vitest";
-import { cleanup, render } from "@gradio/tootils";
+import { cleanup, render } from "@self/tootils";
 import { setupi18n } from "../core/src/i18n";
 
 import Image from "./Index.svelte";

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;
@@ -59,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;
 	}>;
 
 	$: {
@@ -77,6 +89,7 @@
 			}
 		}
 	}
+
 	afterUpdate(() => {
 		value_is_output = false;
 	});
@@ -181,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)}
@@ -191,11 +204,17 @@
 				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}

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}

package/dist/Index.svelte.d.ts

@@ -0,0 +1,176 @@
+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, ValueData } from "@gradio/utils";
+import type { FileData } from "@gradio/client";
+import type { LoadingStatus } from "@gradio/statustracker";
+declare const __propDef: {
+    props: {
+        modify_stream_state?: ((state: "open" | "closed" | "waiting") => void) | undefined;
+        get_stream_state?: (() => void) | undefined;
+        set_time_limit: (arg0: number) => void;
+        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;
+        stream_every: number;
+        _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: ValueData;
+            drag: never;
+            upload: never;
+            clear: never;
+            select: SelectData;
+            share: ShareData;
+            clear_status: LoadingStatus;
+            close_stream: string;
+        }>;
+    };
+    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 modify_stream_state(): (state: "open" | "closed" | "waiting") => void;
+    get get_stream_state(): () => void;
+    get undefined(): any;
+    /**accessor*/
+    set undefined(_: any);
+    get set_time_limit(): (arg0: number) => void;
+    /**accessor*/
+    set set_time_limit(_: (arg0: number) => void);
+    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 stream_every(): number;
+    /**accessor*/
+    set stream_every(_: number);
+    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: ValueData;
+        drag: never;
+        upload: never;
+        clear: never;
+        select: SelectData;
+        share: ShareData;
+        clear_status: LoadingStatus;
+        close_stream: string;
+    }>;
+    /**accessor*/
+    set 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;
+    }>);
+}

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

package/dist/shared/Image.svelte

@@ -0,0 +1,26 @@
+<script>import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+import { resolve_wasm_src } from "@gradio/wasm/svelte";
+export let src = void 0;
+let resolved_src;
+let latest_src;
+$: {
+  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;
+    }
+  });
+}
+</script>
+
+<!-- svelte-ignore a11y-missing-attribute -->
+<img src={resolved_src} {...$$restProps} on:load={() => dispatch("load")} />
+
+<style>
+	img {
+		object-fit: cover;
+	}
+</style>